1
1
# Compilers
2
2
3
3
Projects may have source files that are not JavaScript or TypeScript, and thus require compilation (or transpilation, or
4
- pre-processing, you name it). Files like ` .mdx ` , ` .vue ` and ` .svelte ` may also import dependencies and other files. So
5
- ideally, these files are included in the analysis to get a better overview of what files and dependencies are used or
6
- not. To this end, Knip v2 supports a compiler for any file extension.
4
+ pre-processing, you name it). Files like ` .mdx ` , ` .astro ` , ` . vue` and ` .svelte ` may also import dependencies and other
5
+ files. So ideally, these files are included in the analysis to get a better overview of what files and dependencies are
6
+ used or not. To this end, Knip v2 supports a compiler for any file extension.
7
7
8
8
## Prerequisites
9
9
@@ -21,9 +21,31 @@ This may also be an `async` function.
21
21
22
22
## Examples
23
23
24
+ - [ Astro] [ 1 ]
25
+ - [ MDX] [ 2 ]
26
+ - [ Vue] [ 3 ]
27
+ - [ Svelte] [ 4 ]
28
+
29
+ ### Astro
30
+
31
+ Use a configuration like this to compile non-standard files in Astro projects:
32
+
33
+ ``` ts
34
+ export default {
35
+ ignore: ' .astro/types.d.ts' ,
36
+ compilers: {
37
+ astro : (text : string ) => [... text .matchAll (/ import[^ ;] + / g )].join (' \n ' ),
38
+ css : (text : string ) => [... text .matchAll (/ (?<=@)import[^ ;] + / g )].join (' \n ' ),
39
+ mdx : (text : string ) => [... text .matchAll (/ import[^ ;] + / g )].join (' \n ' ),
40
+ },
41
+ };
42
+ ```
43
+
44
+ Knip has an [ Astro plugin] [ 5 ] to save you some configuration. It's enabled automatically.
45
+
24
46
### MDX
25
47
26
- Here's an example using [ @mdx-js/mdx ] [ 1 ] v1.6.22
48
+ Here's an example using [ @mdx-js/mdx ] [ 6 ] v1.6.22
27
49
28
50
``` ts
29
51
const compile = require (' @mdx-js/mdx' );
@@ -45,7 +67,6 @@ Here's a fully configured `knip.ts` with a "compiler" for `.vue` files in Vue pr
45
67
const compiler = / <script\b [^ >] * >([\s\S ] *? )<\/ script>/ gm ;
46
68
47
69
export default {
48
- ignore: ' *.d.ts' ,
49
70
entry: [' src/main.ts' , ' vite.config.ts' ],
50
71
project: ' **/*.{ts,vue}' ,
51
72
compilers: {
@@ -64,7 +85,7 @@ cases it's enough to extract and return only the `import` statements.
64
85
65
86
### Svelte
66
87
67
- Here's another example, this one is for Svelte:
88
+ Use a configuration like this to compile non-standard files in Svelte projects :
68
89
69
90
``` ts
70
91
import sveltePreprocess from ' svelte-preprocess' ;
@@ -73,7 +94,6 @@ import { preprocess, compile } from 'svelte/compiler';
73
94
const sveltePreprocessor = sveltePreprocess ();
74
95
75
96
export default {
76
- ignore: [' **/*.d.ts' ],
77
97
paths: {
78
98
// This ain't pretty, but Svelte basically does the same
79
99
' $app/*' : [' node_modules/@sveltejs/kit/src/runtime/app/*' ],
@@ -91,8 +111,7 @@ export default {
91
111
```
92
112
93
113
The compiler for ` .svelte ` files in this example is the actual Svelte compiler, this is the recommended way whenever
94
- available. Knip has a [ Svelte plugin] [ 2 ] to save you little bit of configuration. It's enabled automatically, so there's
95
- nothing to configure.
114
+ available. Knip has a [ Svelte plugin] [ 7 ] to save you some configuration. It's enabled automatically.
96
115
97
116
Just for reference, this also seems to work pretty well (but may err on certain syntax or edge cases):
98
117
@@ -103,5 +122,10 @@ export default {
103
122
};
104
123
```
105
124
106
- [ 1 ] : https://www.npmjs.com/package/@mdx-js/mdx
107
- [ 2 ] : ../src/plugins/svelte
125
+ [ 1 ] : #astro
126
+ [ 2 ] : #mdx
127
+ [ 3 ] : #vue
128
+ [ 4 ] : #svelte
129
+ [ 5 ] : ../src/plugins/astro
130
+ [ 6 ] : https://www.npmjs.com/package/@mdx-js/mdx
131
+ [ 7 ] : ../src/plugins/svelte
0 commit comments