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 <[email protected]>

* Update docs/config.md

Co-authored-by: Bjorn Lu <[email protected]>

* 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 <[email protected]>

Author: dominikg

.changeset/healthy-worms-double.md

@@ -0,0 +1,20 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+move plugin options in svelte.config.js into "vitePlugin"
+
+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`
+
+```diff
+// svelte.config.js
+
+  compilerOptions: {...},
+  preprocess: {...},
+  extensions: [...],
+  onwarn: () => {...},
+  kit: {},
++ vitePlugin: {
+   // include, exclude, emitCss, hot, ignorePluginPreprocessors, disableDependencyReinclusion, experimental
++ }
+```

docs/config.md

@@ -3,6 +3,7 @@
 `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:
 
 ```js
+// vite.config.js
 export default defineConfig({
   plugins: [
     svelte({
@@ -18,7 +19,7 @@ Explore the various options below!
 
 ### Config file resolving
 
-Besides inline options, `vite-plugin-svelte` will also automatically resolve options from a Svelte config file if one exists. The default search paths are:
+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:
 
 - `svelte.config.js`
 - `svelte.config.mjs`
@@ -27,6 +28,7 @@ Besides inline options, `vite-plugin-svelte` will also automatically resolve opt
 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:
 
 ```js
+// vite.config.js
 export default defineConfig({
   plugins: [
     svelte({
@@ -42,12 +44,16 @@ A basic Svelte config looks like this:
 // svelte.config.js
 export default {
   // svelte options
+  extensions: ['.svelte'],
   compilerOptions: {},
   preprocess: [],
-  // plugin options
   onwarn: (warning, handler) => handler(warning),
-  // experimental options
-  experimental: {}
+  // plugin options
+  vitePlugin: {
+    exclude: [],
+    // experimental options
+    experimental: {}
+  }
 };
 ```
 
@@ -65,6 +71,7 @@ Depending on Node's mode, make sure you're using the correct extension and synta
 Use `configFile: false` to prevent `vite-plugin-svelte` from reading the config file or restarting the Vite dev server when it changes.
 
 ```js
+// vite.config.js
 export default defineConfig({
   plugins: [
     svelte({
@@ -98,6 +105,7 @@ These options are specific to the Svelte compiler and are generally shared acros
   **Example:**
 
   ```js
+  // vite.config.js
   import sveltePreprocess from 'svelte-preprocess';
 
   export default defineConfig({
@@ -109,36 +117,13 @@ These options are specific to the Svelte compiler and are generally shared acros
   });
   ```
 
-## Plugin options
-
-These options are specific to the Vite plugin itself.
-
-### include
-
-- **Type:** `string | string[]`
-
-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.
-
-### exclude
-
-- **Type:** `string | string[]`
-
-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.
-
 ### extensions
 
 - **Type:** `string[]`
 - **Default:** `['.svelte']`
 
   A list of file extensions to be compiled by Svelte. Useful for custom extensions like `.svg` and `.svx`.
 
-### emitCss
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-  Emit Svelte styles as virtual CSS files for Vite and other plugins to process.
-
 ### onwarn
 
 - **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
   });
   ```
 
+## Plugin options
+
+These options are specific to the Vite plugin itself.
+
+### include
+
+- **Type:** `string | string[]`
+
+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.
+
+### exclude
+
+- **Type:** `string | string[]`
+
+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.
+
+### emitCss
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Emit Svelte styles as virtual CSS files for Vite and other plugins to process.
+
 ### hot
 
 - **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
 
 These options are considered experimental and breaking changes to them can occur in any release! Specify them under the `experimental` option.
 
+Either in Vite config:
+
 ```js
+// vite.config.js
 export default defineConfig({
   plugins: [
     svelte({
@@ -209,6 +220,19 @@ export default defineConfig({
 });
 ```
 
+or in Svelte config:
+
+```js
+// svelte.config.js
+export default {
+  vitePlugin: {
+    experimental: {
+      // experimental options
+    }
+  }
+};
+```
+
 ### useVitePreprocess
 
 - **Type:** `boolean`
@@ -247,6 +271,7 @@ export default defineConfig({
   **Example:**
 
   ```js
+  // vite.config.js
   export default defineConfig({
     plugins: [
       svelte({
@@ -321,6 +346,7 @@ export default defineConfig({
   **Example:**
 
   ```js
+  // vite.config.js
   export default defineConfig({
     plugins: [
       svelte({

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

@@ -1,4 +1,6 @@
 console.log('custom svelte config loaded cjs')
 module.exports = {
-	emitCss: false
+	vitePlugin: {
+		emitCss: false
+	}
 };

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

@@ -1,4 +1,6 @@
 console.log('custom svelte config loaded mjs')
 export default {
-	emitCss: false
+	vitePlugin: {
+		emitCss: false
+	}
 }

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

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

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

@@ -1,9 +1,11 @@
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {},
-	experimental: {
-		inspector: {
-			showToggleButton: 'always'
+	vitePlugin: {
+		experimental: {
+			inspector: {
+				showToggleButton: 'always'
+			}
 		}
 	}
 };

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

@@ -227,6 +227,8 @@ export { loadSvelteConfig } from './utils/load-svelte-config';
 
 export {
 	Options,
+	PluginOptions,
+	SvelteOptions,
 	Preprocessor,
 	PreprocessorGroup,
 	CompileOptions,

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

@@ -3,7 +3,7 @@ import path from 'path';
 import fs from 'fs';
 import { pathToFileURL } from 'url';
 import { log } from './log';
-import { Options } from './options';
+import { Options, SvelteOptions } from './options';
 import { UserConfig } from 'vite';
 
 // used to require cjs config in esm.
@@ -29,7 +29,7 @@ const dynamicImportDefault = new Function(
 export async function loadSvelteConfig(
 	viteConfig?: UserConfig,
 	inlineOptions?: Partial<Options>
-): Promise<Partial<Options> | undefined> {
+): Promise<Partial<SvelteOptions> | undefined> {
 	if (inlineOptions?.configFile === false) {
 		return;
 	}