feat: support experimental.async and dynamicCompileOptions when compiling Svelte modules

Author: dominikg

.changeset/huge-ideas-nail.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat: add support for the new experimental.async option and apply dynamicCompileOptions when compiling Svelte modules

packages/vite-plugin-svelte/src/plugins/compile-module.js

@@ -1,6 +1,6 @@
 import { buildModuleIdFilter, buildModuleIdParser } from '../utils/id.js';
 import * as svelteCompiler from 'svelte/compiler';
-import { logCompilerWarnings } from '../utils/log.js';
+import { log, logCompilerWarnings } from '../utils/log.js';
 import { toRollupError } from '../utils/error.js';
 
 /**
@@ -16,6 +16,12 @@ export function compileModule(api) {
 	 * @type {import("../types/id.js").ModuleIdParser}
 	 */
 	let idParser;
+
+	/**
+	 * @type {import('svelte/compiler').ModuleCompileOptions}
+	 */
+	let staticModuleCompileOptions;
+
 	/** @type {import('vite').Plugin} */
 	const plugin = {
 		name: 'vite-plugin-svelte:compile-module',
@@ -25,6 +31,7 @@ export function compileModule(api) {
 			//@ts-expect-error transform defined below but filter not in type
 			plugin.transform.filter = buildModuleIdFilter(options);
 			idParser = buildModuleIdParser(options);
+			staticModuleCompileOptions = filterNonModuleCompilerOptions(options.compilerOptions);
 		},
 		transform: {
 			async handler(code, id) {
@@ -33,12 +40,52 @@ export function compileModule(api) {
 				if (!moduleRequest) {
 					return;
 				}
+				const filename = moduleRequest.filename;
+				/** @type {import('svelte/compiler').CompileOptions} */
+				const compileOptions = {
+					...staticModuleCompileOptions,
+					dev: !this.environment.config.isProduction,
+					generate: ssr ? 'server' : 'client',
+					filename
+				};
+				const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
+					filename,
+					code,
+					compileOptions
+				});
+				if (dynamicCompileOptions && log.debug.enabled) {
+					log.debug(
+						`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`,
+						undefined,
+						'compileModule'
+					);
+				}
+				const finalCompileOptions = dynamicCompileOptions
+					? {
+							...compileOptions,
+							...dynamicCompileOptions
+						}
+					: compileOptions;
+				// @ts-expect-error experimental not typed yet
+				if (dynamicCompileOptions.experimental) {
+					// @ts-expect-error experimental not typed yet
+					finalCompileOptions.experimental = {
+						// @ts-expect-error experimental not typed yet
+						...compileOptions.experimental,
+						// @ts-expect-error experimental not typed yet
+						...dynamicCompileOptions.experimental
+					};
+				}
+				const finalModuleCompileOptions = filterNonModuleCompilerOptions(finalCompileOptions);
+				if (log.debug.enabled) {
+					log.debug(
+						`final ModuleCompileOptions for  ${filename}: ${JSON.stringify(finalModuleCompileOptions)}`,
+						undefined,
+						'compileModule'
+					);
+				}
 				try {
-					const compileResult = svelteCompiler.compileModule(code, {
-						dev: !this.environment.config.isProduction,
-						generate: ssr ? 'server' : 'client',
-						filename: moduleRequest.filename
-					});
+					const compileResult = svelteCompiler.compileModule(code, finalModuleCompileOptions);
 					logCompilerWarnings(moduleRequest, compileResult.warnings, options);
 					return compileResult.js;
 				} catch (e) {
@@ -49,3 +96,46 @@ export function compileModule(api) {
 	};
 	return plugin;
 }
+
+/**
+ *
+ * @param {import('svelte/compiler').CompileOptions} compilerOptions
+ * @return {import('svelte/compiler').ModuleCompileOptions}
+ */
+function filterNonModuleCompilerOptions(compilerOptions) {
+	/** @type {Array<keyof import('svelte/compiler').ModuleCompileOptions>} */
+	const knownModuleCompileOptionNames = [
+		'dev',
+		'generate',
+		'filename',
+		'rootDir',
+		'warningFilter',
+		// @ts-expect-error will only be defined after svelte aysnc is released
+		'experimental'
+	];
+	// TODO type /** @type {Array<keyof import('svelte/compiler').ModuleCompileOptions['experimental']>} */
+	const experimentalModuleCompilerOptionNames = ['async'];
+
+	/** @type {import('svelte/compiler').ModuleCompileOptions} */
+	const filtered = filterByPropNames(compilerOptions, knownModuleCompileOptionNames);
+	// @ts-expect-error experimental not typed yet
+	if (filtered.experimental) {
+		// @ts-expect-error experimental not typed yet
+		filtered.experimental = filterByPropNames(
+			// @ts-expect-error experimental not typed yet
+			filtered.experimental,
+			experimentalModuleCompilerOptionNames
+		);
+	}
+	return filtered;
+}
+
+/**
+ *
+ * @param {object} o
+ * @param {string[]} names
+ * @returns {object}
+ */
+function filterByPropNames(o, names) {
+	return Object.fromEntries(Object.entries(o).filter(([name]) => names.includes(name)));
+}