feat: promote experimental.dynamicCompileOptions (#765)

dominikg · web-flow · commit 3a45ae3fcedd · 2023-10-15T20:52:05.000+02:00
* feat: promote experimental.dynamicCompileOptions

* fix: prevent prettier from removing leading ws of testcase
diff --git a/.changeset/nasty-queens-beam.md b/.changeset/nasty-queens-beam.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+feat(compile): promote experimental.dynamicCompileOptions to stable
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -15,9 +15,14 @@ export default {
 			options: { parser: 'typescript' }
 		},
 		{
-			files: ['**/CHANGELOG.md', '.github/renovate.json5'],
+			files: [
+				'**/vite.config.js.timestamp-*.mjs',
+				'**/CHANGELOG.md',
+				'.github/renovate.json5',
+				'packages/e2e-tests/dynamic-compile-options/src/components/A.svelte'
+			],
 			options: {
-				requirePragma: true
+				rangeEnd: 0
 			}
 		},
 		{
diff --git a/docs/config.md b/docs/config.md
@@ -221,38 +221,6 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt
 
   Inspector mode shows you the file location where the element under cursor is defined and you can click to quickly open your code editor at this location.
 
-## Experimental options
-
-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({
-      experimental: {
-        // experimental options
-      }
-    })
-  ]
-});
-```
-
-or in Svelte config:
-
-```js
-// svelte.config.js
-export default {
-  vitePlugin: {
-    experimental: {
-      // experimental options
-    }
-  }
-};
-```
-
 ### dynamicCompileOptions
 
 - **Type:**
@@ -287,6 +255,38 @@ export default {
   });
   ```
 
+## Experimental options
+
+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({
+      experimental: {
+        // experimental options
+      }
+    })
+  ]
+});
+```
+
+or in Svelte config:
+
+```js
+// svelte.config.js
+export default {
+  vitePlugin: {
+    experimental: {
+      // experimental options
+    }
+  }
+};
+```
+
 ### sendWarningsToBrowser
 
 - **Type:** `boolean`
diff --git a/packages/e2e-tests/dynamic-compile-options/__tests__/dynamic-compile-options.spec.ts b/packages/e2e-tests/dynamic-compile-options/__tests__/dynamic-compile-options.spec.ts
@@ -0,0 +1,6 @@
+import { getText } from '~utils';
+
+test('should respect dynamic compile option preserveWhitespace: true for A', async () => {
+	expect(await getText('#A')).toBe('    preserved leading whitespace');
+	expect(await getText('#B')).toBe('removed leading whitespace');
+});
diff --git a/packages/e2e-tests/dynamic-compile-options/index.html b/packages/e2e-tests/dynamic-compile-options/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>
diff --git a/packages/e2e-tests/dynamic-compile-options/package.json b/packages/e2e-tests/dynamic-compile-options/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "e2e-tests-custom-extensions",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:^",
+    "svelte": "^4.2.1",
+    "vite": "^5.0.0-beta.4"
+  },
+  "type": "module"
+}
diff --git a/packages/e2e-tests/dynamic-compile-options/src/App.svelte b/packages/e2e-tests/dynamic-compile-options/src/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	import A from './components/A.svelte';
+	import B from './components/B.svelte';
+</script>
+
+<A />
+<B />
diff --git a/packages/e2e-tests/dynamic-compile-options/src/components/A.svelte b/packages/e2e-tests/dynamic-compile-options/src/components/A.svelte
@@ -0,0 +1 @@
+<div id="A">    preserved leading whitespace</div>
diff --git a/packages/e2e-tests/dynamic-compile-options/src/components/B.svelte b/packages/e2e-tests/dynamic-compile-options/src/components/B.svelte
@@ -0,0 +1 @@
+<div id="B">removed leading whitespace</div>
diff --git a/packages/e2e-tests/dynamic-compile-options/src/main.js b/packages/e2e-tests/dynamic-compile-options/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/e2e-tests/dynamic-compile-options/vite.config.js b/packages/e2e-tests/dynamic-compile-options/vite.config.js
@@ -0,0 +1,31 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => {
+	return {
+		plugins: [
+			svelte({
+				dynamicCompileOptions({ filename }) {
+					if (filename.endsWith('A.svelte')) {
+						return {
+							preserveWhitespace: true
+						};
+					}
+				}
+			})
+		],
+		build: {
+			// make build faster by skipping transforms and minification
+			target: 'esnext',
+			minify: false
+		},
+		server: {
+			watch: {
+				// During tests we edit the files too fast and sometimes chokidar
+				// misses change events, so enforce polling for consistency
+				usePolling: true,
+				interval: 100
+			}
+		}
+	};
+});
diff --git a/packages/vite-plugin-svelte/src/index.d.ts b/packages/vite-plugin-svelte/src/index.d.ts
@@ -121,20 +121,7 @@ interface SvelteOptions {
 	 * @see https://svelte.dev/docs#svelte_compile
 	 */
 	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
-	/**
-	 * Handles warning emitted from the Svelte compiler
-	 */
-	onwarn?: (warning: Warning, defaultHandler?: (warning: Warning) => void) => void;
-	/**
-	 * Options for vite-plugin-svelte
-	 */
-	vitePlugin?: PluginOptions;
-}
 
-/**
- * These options are considered experimental and breaking changes to them can occur in any release
- */
-interface ExperimentalOptions {
 	/**
 	 * A function to update `compilerOptions` before compilation
 	 *
@@ -159,6 +146,21 @@ interface ExperimentalOptions {
 		code: string;
 		compileOptions: Partial<CompileOptions>;
 	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+
+	/**
+	 * Handles warning emitted from the Svelte compiler
+	 */
+	onwarn?: (warning: Warning, defaultHandler?: (warning: Warning) => void) => void;
+	/**
+	 * Options for vite-plugin-svelte
+	 */
+	vitePlugin?: PluginOptions;
+}
+
+/**
+ * These options are considered experimental and breaking changes to them can occur in any release
+ */
+interface ExperimentalOptions {
 	/**
 	 * send a websocket message with svelte compiler warnings during dev
 	 *
diff --git a/packages/vite-plugin-svelte/src/utils/compile.js b/packages/vite-plugin-svelte/src/utils/compile.js
@@ -100,7 +100,7 @@ export const _createCompileSvelte = (makeHot) => {
 			};
 		}
 		const finalCode = preprocessed ? preprocessed.code : code;
-		const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
+		const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
 			filename,
 			code: finalCode,
 			compileOptions
diff --git a/packages/vite-plugin-svelte/src/utils/esbuild.js b/packages/vite-plugin-svelte/src/utils/esbuild.js
@@ -81,14 +81,18 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 
 	const finalCode = preprocessed ? preprocessed.code : code;
 
-	const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
+	const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
 		filename,
 		code: finalCode,
 		compileOptions
 	});
 
 	if (dynamicCompileOptions && log.debug.enabled) {
-		log.debug(`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`);
+		log.debug(
+			`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`,
+			undefined,
+			'compile'
+		);
 	}
 
 	const finalCompileOptions = dynamicCompileOptions
diff --git a/packages/vite-plugin-svelte/src/utils/options.js b/packages/vite-plugin-svelte/src/utils/options.js
@@ -36,6 +36,7 @@ const allowedPluginOptions = new Set([
 	'disableDependencyReinclusion',
 	'prebundleSvelteLibraries',
 	'inspector',
+	'dynamicCompileOptions',
 	'experimental'
 ]);
 
@@ -316,13 +317,13 @@ function removeIgnoredOptions(options) {
 function handleDeprecatedOptions(options) {
 	const experimental = /** @type {Record<string, any>} */ (options.experimental);
 	if (experimental) {
-		for (const promoted of ['prebundleSvelteLibraries', 'inspector']) {
+		for (const promoted of ['prebundleSvelteLibraries', 'inspector', 'dynamicCompileOptions']) {
 			if (experimental[promoted]) {
 				//@ts-expect-error untyped assign
 				options[promoted] = experimental[promoted];
 				delete experimental[promoted];
 				log.warn(
-					`Option "vitePlugin.experimental.${promoted}" is no longer experimental and has moved to "vitePlugin.${promoted}". Please update your svelte config.`
+					`Option "experimental.${promoted}" is no longer experimental and has moved to "${promoted}". Please update your Svelte or Vite config.`
 				);
 			}
 		}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': patch
 +---
++
 +feat(compile): promote experimental.dynamicCompileOptions to stable
Original file line number	Diff line number	Diff line change
`@@ -15,9 +15,14 @@ export default {`
`15`	`15`	`options: { parser: 'typescript' }`
`16`	`16`	`},`
`17`	`17`	`{`
`18`		`- files: ['**/CHANGELOG.md', '.github/renovate.json5'],`
	`18`	`+ files: [`
	`19`	`+ '*/vite.config.js.timestamp-.mjs',`
	`20`	`+ '**/CHANGELOG.md',`
	`21`	`+ '.github/renovate.json5',`
	`22`	`+ 'packages/e2e-tests/dynamic-compile-options/src/components/A.svelte'`
	`23`	`+ ],`
`19`	`24`	`options: {`
`20`		`- requirePragma: true`
	`25`	`+ rangeEnd: 0`
`21`	`26`	`}`
`22`	`27`	`},`
`23`	`28`	`{`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div id="A"> preserved leading whitespace</div>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div id="B">removed leading whitespace</div>`