Skip to content

Commit e8e52de

Browse files
dominikgbluwy
dominikg
and
bluwy
authored
refactor: move plugin options to "vitePlugin" in svelte.config.js (#389)
* refactor: move plugin options to in svelte.config.js * fix: move onwarn to SvelteOptions * Apply suggestions from code review Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com> * Update docs/config.md Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com> * fix: improve types for options and export new types * fix: remove KitConfig from types to avoid depending on sveltekit in index.d.ts * docs: make onwarn as root Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
1 parent 85fc8e6 commit e8e52de

File tree

9 files changed

+211
-81
lines changed

9 files changed

+211
-81
lines changed

‎.changeset/healthy-worms-double.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
'@sveltejs/vite-plugin-svelte': major
3+
---
4+
5+
move plugin options in svelte.config.js into "vitePlugin"
6+
7+
update your svelte.config.js and wrap [plugin options](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#plugin-options) with `vitePlugin`
8+
9+
```diff
10+
// svelte.config.js
11+
12+
compilerOptions: {...},
13+
preprocess: {...},
14+
extensions: [...],
15+
onwarn: () => {...},
16+
kit: {},
17+
+ vitePlugin: {
18+
// include, exclude, emitCss, hot, ignorePluginPreprocessors, disableDependencyReinclusion, experimental
19+
+ }
20+
```

‎docs/config.md‎

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
`vite-plugin-svelte` accepts inline options that can be used to change its behaviour. An object can be passed to the first argument of the `svelte` plugin:
44

55
```js
6+
// vite.config.js
67
export default defineConfig({
78
plugins: [
89
svelte({
@@ -18,7 +19,7 @@ Explore the various options below!
1819

1920
### Config file resolving
2021

21-
Besides inline options, `vite-plugin-svelte` will also automatically resolve options from a Svelte config file if one exists. The default search paths are:
22+
Besides inline options in Vite config, `vite-plugin-svelte` will also automatically resolve options from a Svelte config file if one exists. The default search paths are:
2223

2324
- `svelte.config.js`
2425
- `svelte.config.mjs`
@@ -27,6 +28,7 @@ Besides inline options, `vite-plugin-svelte` will also automatically resolve opt
2728
To set a specific config file, use the `configFile` inline option. The path can be absolute or relative to the [Vite root](https://vitejs.dev/config/#root). For example:
2829

2930
```js
31+
// vite.config.js
3032
export default defineConfig({
3133
plugins: [
3234
svelte({
@@ -42,12 +44,16 @@ A basic Svelte config looks like this:
4244
// svelte.config.js
4345
export default {
4446
// svelte options
47+
extensions: ['.svelte'],
4548
compilerOptions: {},
4649
preprocess: [],
47-
// plugin options
4850
onwarn: (warning, handler) => handler(warning),
49-
// experimental options
50-
experimental: {}
51+
// plugin options
52+
vitePlugin: {
53+
exclude: [],
54+
// experimental options
55+
experimental: {}
56+
}
5157
};
5258
```
5359

@@ -65,6 +71,7 @@ Depending on Node's mode, make sure you're using the correct extension and synta
6571
Use `configFile: false` to prevent `vite-plugin-svelte` from reading the config file or restarting the Vite dev server when it changes.
6672

6773
```js
74+
// vite.config.js
6875
export default defineConfig({
6976
plugins: [
7077
svelte({
@@ -98,6 +105,7 @@ These options are specific to the Svelte compiler and are generally shared acros
98105
**Example:**
99106

100107
```js
108+
// vite.config.js
101109
import sveltePreprocess from 'svelte-preprocess';
102110

103111
export default defineConfig({
@@ -109,36 +117,13 @@ These options are specific to the Svelte compiler and are generally shared acros
109117
});
110118
```
111119

112-
## Plugin options
113-
114-
These options are specific to the Vite plugin itself.
115-
116-
### include
117-
118-
- **Type:** `string | string[]`
119-
120-
A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files the plugin should operate on. By default, all svelte files are included.
121-
122-
### exclude
123-
124-
- **Type:** `string | string[]`
125-
126-
A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files to be ignored by the plugin. By default, no files are ignored.
127-
128120
### extensions
129121

130122
- **Type:** `string[]`
131123
- **Default:** `['.svelte']`
132124

133125
A list of file extensions to be compiled by Svelte. Useful for custom extensions like `.svg` and `.svx`.
134126

135-
### emitCss
136-
137-
- **Type:** `boolean`
138-
- **Default:** `true`
139-
140-
Emit Svelte styles as virtual CSS files for Vite and other plugins to process.
141-
142127
### onwarn
143128

144129
- **Type:** `(warning: Warning, defaultHandler?: (warning: Warning) => void) => void` - See [Warning](https://github.com/sveltejs/svelte/blob/ce550adef65a7e04c381b11c24f07a2ae1c25783/src/compiler/interfaces.ts#L121-L130)
@@ -163,6 +148,29 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt
163148
});
164149
```
165150

151+
## Plugin options
152+
153+
These options are specific to the Vite plugin itself.
154+
155+
### include
156+
157+
- **Type:** `string | string[]`
158+
159+
A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files the plugin should operate on. By default, all svelte files are included.
160+
161+
### exclude
162+
163+
- **Type:** `string | string[]`
164+
165+
A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files to be ignored by the plugin. By default, no files are ignored.
166+
167+
### emitCss
168+
169+
- **Type:** `boolean`
170+
- **Default:** `true`
171+
172+
Emit Svelte styles as virtual CSS files for Vite and other plugins to process.
173+
166174
### hot
167175

168176
- **Type:** `boolean | SvelteHotOptions` - See [svelte-hmr](https://github.com/sveltejs/svelte-hmr#options)
@@ -197,7 +205,10 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt
197205

198206
These options are considered experimental and breaking changes to them can occur in any release! Specify them under the `experimental` option.
199207

208+
Either in Vite config:
209+
200210
```js
211+
// vite.config.js
201212
export default defineConfig({
202213
plugins: [
203214
svelte({
@@ -209,6 +220,19 @@ export default defineConfig({
209220
});
210221
```
211222

223+
or in Svelte config:
224+
225+
```js
226+
// svelte.config.js
227+
export default {
228+
vitePlugin: {
229+
experimental: {
230+
// experimental options
231+
}
232+
}
233+
};
234+
```
235+
212236
### useVitePreprocess
213237

214238
- **Type:** `boolean`
@@ -247,6 +271,7 @@ export default defineConfig({
247271
**Example:**
248272

249273
```js
274+
// vite.config.js
250275
export default defineConfig({
251276
plugins: [
252277
svelte({
@@ -321,6 +346,7 @@ export default defineConfig({
321346
**Example:**
322347

323348
```js
349+
// vite.config.js
324350
export default defineConfig({
325351
plugins: [
326352
svelte({

‎packages/e2e-tests/configfile-custom/svelte.config.custom.cjs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
console.log('custom svelte config loaded cjs')
22
module.exports = {
3-
emitCss: false
3+
vitePlugin: {
4+
emitCss: false
5+
}
46
};

‎packages/e2e-tests/configfile-custom/svelte.config.custom.mjs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
console.log('custom svelte config loaded mjs')
22
export default {
3-
emitCss: false
3+
vitePlugin: {
4+
emitCss: false
5+
}
46
}

‎packages/e2e-tests/hmr/__tests__/hmr.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ if (!isBuild) {
149149
});
150150

151151
test('should work with emitCss: false in svelte config', async () => {
152-
addFile('svelte.config.cjs', `module.exports={emitCss:false}`);
152+
addFile('svelte.config.cjs', `module.exports={vitePlugin:{emitCss:false}}`);
153153
await sleep(isWin ? 1000 : 500); // adding config restarts server, give it some time
154154
await page.goto(viteTestUrl, { waitUntil: 'networkidle' });
155155
await sleep(50);

‎packages/e2e-tests/inspector-kit/svelte.config.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
/** @type {import('@sveltejs/kit').Config} */
22
const config = {
33
kit: {},
4-
experimental: {
5-
inspector: {
6-
showToggleButton: 'always'
4+
vitePlugin: {
5+
experimental: {
6+
inspector: {
7+
showToggleButton: 'always'
8+
}
79
}
810
}
911
};

‎packages/vite-plugin-svelte/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,8 @@ export { loadSvelteConfig } from './utils/load-svelte-config';
227227

228228
export {
229229
Options,
230+
PluginOptions,
231+
SvelteOptions,
230232
Preprocessor,
231233
PreprocessorGroup,
232234
CompileOptions,

‎packages/vite-plugin-svelte/src/utils/load-svelte-config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import path from 'path';
33
import fs from 'fs';
44
import { pathToFileURL } from 'url';
55
import { log } from './log';
6-
import { Options } from './options';
6+
import { Options, SvelteOptions } from './options';
77
import { UserConfig } from 'vite';
88

99
// used to require cjs config in esm.
@@ -29,7 +29,7 @@ const dynamicImportDefault = new Function(
2929
export async function loadSvelteConfig(
3030
viteConfig?: UserConfig,
3131
inlineOptions?: Partial<Options>
32-
): Promise<Partial<Options> | undefined> {
32+
): Promise<Partial<SvelteOptions> | undefined> {
3333
if (inlineOptions?.configFile === false) {
3434
return;
3535
}

0 commit comments

Comments
 (0)