@sveltejs/vite-plugin-svelte 6.0.0-next.3 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "6.0.0-next.3",
+  "version": "6.1.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -34,7 +34,7 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0-next.0",
+    "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0-next.1",
     "debug": "^4.4.1",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
@@ -48,8 +48,8 @@
   "devDependencies": {
     "@types/debug": "^4.1.12",
     "sass": "^1.89.2",
-    "svelte": "^5.34.9",
-    "vite": "^7.0.0"
+    "svelte": "^5.36.1",
+    "vite": "^7.0.4"
   },
   "scripts": {
     "check:publint": "publint --strict",

package/src/plugins/compile-module.js

@@ -1,7 +1,8 @@
 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';
+import { isSvelteWithAsync } from '../utils/svelte-version.js';
 
 /**
  * @param {import('../types/plugin-api.d.ts').PluginAPI} api
@@ -16,6 +17,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 +32,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 +41,48 @@ 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;
+				if (dynamicCompileOptions?.experimental) {
+					finalCompileOptions.experimental = {
+						...compileOptions.experimental,
+						...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 +93,38 @@ 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'];
+	if (isSvelteWithAsync) {
+		knownModuleCompileOptionNames.push('experimental');
+	}
+	// not typed but this is temporary until svelte itself ignores CompileOptions passed to compileModule
+	const experimentalModuleCompilerOptionNames = ['async'];
+
+	/** @type {import('svelte/compiler').ModuleCompileOptions} */
+	const filtered = filterByPropNames(compilerOptions, knownModuleCompileOptionNames);
+	if (filtered.experimental) {
+		filtered.experimental = filterByPropNames(
+			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)));
+}

package/src/utils/error.js

@@ -132,6 +132,9 @@ export function enhanceCompileError(err, originalCode, preprocessors) {
 
 		let m;
 		while ((m = styleRe.exec(originalCode))) {
+			if (m[0]?.startsWith('<!--')) {
+				continue;
+			}
 			// Warn missing lang attribute
 			if (!m[1]?.includes('lang=')) {
 				additionalMessages.push('Did you forget to add a lang attribute to your style tag?');

package/src/utils/load-svelte-config.js

@@ -67,7 +67,7 @@ function findConfigToLoad(viteConfig, inlineOptions) {
 			.map((candidate) => path.resolve(root, candidate))
 			.filter((file) => fs.existsSync(file));
 		if (existingKnownConfigFiles.length === 0) {
-			log.debug(`no svelte config found at ${root}`, undefined, 'config');
+			log.info(`no Svelte config found at ${root} - using default configuration.`);
 			return;
 		} else if (existingKnownConfigFiles.length > 1) {
 			log.warn(

package/src/utils/svelte-version.js

@@ -3,10 +3,25 @@ import { VERSION } from 'svelte/compiler';
 /**
  * @type {boolean}
  */
-export const isSvelte5 = VERSION.startsWith('5.');
+export const isSvelteWithAsync = gte(VERSION, '5.36.0');
 
 /**
- * @type {boolean}
+ * compare semver versions, does not include comparing tags (-next.xy is ignored)
+ *
+ * @param {string} a semver version
+ * @param {string} b semver version
+ * @return {boolean} true if a is greater or equal to b
  */
-export const isSvelte5WithHMRSupport =
-	VERSION.startsWith('5.0.0-next.') && Number(VERSION.slice(11)) > 96;
+export function gte(a, b) {
+	const aNum = a.split(/[.-]/, 3).map(Number);
+	const bNum = b.split(/[.-]/, 3).map(Number);
+	for (let i = 0; i < aNum.length; i++) {
+		if (aNum[i] < bNum[i]) {
+			return false;
+		}
+		if (aNum[i] > bNum[i]) {
+			return true;
+		}
+	}
+	return true;
+}