@sveltejs/vite-plugin-svelte 3.0.1 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -36,12 +36,12 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte-inspector": "^2.0.0-next.0 || ^2.0.0",
+    "@sveltejs/vite-plugin-svelte-inspector": "^2.0.0",
     "debug": "^4.3.4",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
-    "magic-string": "^0.30.5",
-    "svelte-hmr": "^0.15.3",
+    "magic-string": "^0.30.9",
+    "svelte-hmr": "^0.16.0",
     "vitefu": "^0.2.5"
   },
   "peerDependencies": {
@@ -50,10 +50,10 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "esbuild": "^0.19.7",
-    "sass": "^1.69.5",
-    "svelte": "^4.2.7",
-    "vite": "^5.0.2"
+    "esbuild": "^0.20.2",
+    "sass": "^1.74.1",
+    "svelte": "^4.2.12",
+    "vite": "^5.2.8"
   },
   "scripts": {
     "check:publint": "publint --strict",

package/src/index.js

@@ -178,7 +178,8 @@ export function svelte(inlineOptions) {
 			},
 
 			handleHotUpdate(ctx) {
-				if (!options.hot || !options.emitCss) {
+				// @ts-expect-error svelte4 does not have hmr option
+				if ((!options.hot && !options.compilerOptions.hmr) || !options.emitCss) {
 					return;
 				}
 				const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);

package/src/utils/compile.js

@@ -16,7 +16,7 @@ import { isSvelte5 } from './svelte-version.js';
 // which is closer to the other regexes in at least not falling into commented script
 // but ideally would be shared exactly with svelte and other tools that use it
 const scriptLangRE =
-	/<!--[^]*?-->|<script (?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=["']?([^"' >]+)["']?[^>]*>/;
+	/<!--[^]*?-->|<script (?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=["']?([^"' >]+)["']?[^>]*>/g;
 
 /**
  * @param {Function} [makeHot]
@@ -71,13 +71,6 @@ export const _createCompileSvelte = (makeHot) => {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
 			compileOptions.cssHash = () => hash;
 		}
-		if (ssr && compileOptions.enableSourcemap !== false) {
-			if (typeof compileOptions.enableSourcemap === 'object') {
-				compileOptions.enableSourcemap.css = false;
-			} else {
-				compileOptions.enableSourcemap = { js: true, css: false };
-			}
-		}
 
 		let preprocessed;
 		let preprocessors = options.preprocess;
@@ -137,7 +130,7 @@ export const _createCompileSvelte = (makeHot) => {
 			? {
 					...compileOptions,
 					...dynamicCompileOptions
-			  }
+				}
 			: compileOptions;
 
 		const endStat = stats?.start(filename);
@@ -184,10 +177,18 @@ export const _createCompileSvelte = (makeHot) => {
 			}
 		}
 
+		let lang = 'js';
+		for (const match of code.matchAll(scriptLangRE)) {
+			if (match[1]) {
+				lang = match[1];
+				break;
+			}
+		}
+
 		return {
 			filename,
 			normalizedFilename,
-			lang: code.match(scriptLangRE)?.[1] || 'js',
+			lang,
 			// @ts-ignore
 			compiled,
 			ssr,
@@ -202,7 +203,8 @@ export const _createCompileSvelte = (makeHot) => {
  * @returns {Function | undefined}
  */
 function buildMakeHot(options) {
-	const needsMakeHot = options.hot !== false && options.isServe && !options.isProduction;
+	const needsMakeHot =
+		!isSvelte5 && options.hot !== false && options.isServe && !options.isProduction;
 	if (needsMakeHot) {
 		// @ts-ignore
 		const hotApi = options?.hot?.hotApi;

package/src/utils/esbuild.js

@@ -120,7 +120,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		? {
 				...compileOptions,
 				...dynamicCompileOptions
-		  }
+			}
 		: compileOptions;
 	const endStat = statsCollection?.start(filename);
 	const compiled = svelte.compile(finalCode, finalCompileOptions);

package/src/utils/load-raw.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import { toRollupError } from './error.js';
 import { log } from './log.js';
-import { isSvelte4 } from './svelte-version.js';
+import { isSvelte4, isSvelte5 } from './svelte-version.js';
 /**
  * utility function to compile ?raw and ?direct requests in load hook
  *
@@ -27,12 +27,14 @@ export async function loadRaw(svelteRequest, compileSvelte, options) {
 			compilerOptions: {
 				dev: false,
 				css: 'external',
-				enableSourcemap: query.sourcemap
-					? {
-							js: type === 'script' || type === 'all',
-							css: type === 'style' || type === 'all'
-					  }
-					: false,
+				enableSourcemap: isSvelte5
+					? undefined
+					: query.sourcemap
+						? {
+								js: type === 'script' || type === 'all',
+								css: type === 'style' || type === 'all'
+							}
+						: false,
 				...svelteRequest.query.compilerOptions
 			},
 			hot: false,

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

@@ -63,7 +63,7 @@ export async function loadSvelteConfig(viteConfig, inlineOptions) {
 				const _require = import.meta.url
 					? esmRequire ?? (esmRequire = createRequire(import.meta.url))
 					: // eslint-disable-next-line no-undef
-					  require;
+						require;
 
 				// avoid loading cached version on reload
 				delete _require.cache[_require.resolve(configFile)];

package/src/utils/log.js

@@ -262,10 +262,7 @@ export function isDebugNamespaceEnabled(namespace) {
 }
 
 export function logSvelte5Warning() {
-	const notice = `Your are using Svelte ${VERSION}. Svelte 5 support is experimental, breaking changes can occur in any release until this notice is removed.`;
-	const wip = [
-		'svelte-inspector is disabled until dev mode implements node to code mapping',
-		'hmr for .svelte files is disabled until hmr api is implemented'
-	];
+	const notice = `You are using Svelte ${VERSION}. Svelte 5 support is experimental, breaking changes can occur in any release until this notice is removed.`;
+	const wip = ['svelte-inspector is disabled until dev mode implements node to code mapping'];
 	log.warn(`${notice}\nwork in progress:\n - ${wip.join('\n - ')}\n`);
 }

package/src/utils/options.js

@@ -26,7 +26,7 @@ import {
 import { isCommonDepWithoutSvelteField } from './dependencies.js';
 import { VitePluginSvelteStats } from './vite-plugin-svelte-stats.js';
 import { VitePluginSvelteCache } from './vite-plugin-svelte-cache.js';
-import { isSvelte5 } from './svelte-version.js';
+import { isSvelte5, isSvelte5WithHMRSupport } from './svelte-version.js';
 
 const allowedPluginOptions = new Set([
 	'include',
@@ -194,17 +194,24 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 	const css = preResolveOptions.emitCss ? 'external' : 'injected';
 	/** @type {Partial<import('../public.d.ts').Options>} */
 	const defaultOptions = {
-		hot: viteConfig.isProduction
-			? false
-			: {
-					injectCss: css === 'injected',
-					partialAccept: !!viteConfig.experimental?.hmrPartialAccept
-			  },
 		compilerOptions: {
 			css,
 			dev: !viteConfig.isProduction
 		}
 	};
+	if (isSvelte5) {
+		if (isSvelte5WithHMRSupport) {
+			// @ts-expect-error svelte4 does not have hmr option
+			defaultOptions.compilerOptions.hmr = !viteConfig.isProduction;
+		}
+	} else {
+		defaultOptions.hot = viteConfig.isProduction
+			? false
+			: {
+					injectCss: css === 'injected',
+					partialAccept: !!viteConfig.experimental?.hmrPartialAccept
+				};
+	}
 	/** @type {Partial<import('../types/options.d.ts').ResolvedOptions>} */
 	const extraOptions = {
 		root: viteConfig.root,
@@ -231,45 +238,52 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
  */
 function enforceOptionsForHmr(options) {
 	if (isSvelte5) {
-		// TODO add hmr options for svelte5 once it is supported and update utils/log.js#logSvelte5Warning
-		options.hot = false;
-	}
-	if (options.hot) {
-		if (!options.compilerOptions.dev) {
-			log.warn('hmr is enabled but compilerOptions.dev is false, forcing it to true');
-			options.compilerOptions.dev = true;
+		if (options.hot && isSvelte5WithHMRSupport) {
+			log.warn(
+				'svelte 5 has hmr integrated in core. Please remove the hot option and use compilerOptions.hmr instead'
+			);
+			delete options.hot;
+			// @ts-expect-error hmr option doesn't exist in svelte4
+			options.compilerOptions.hmr = true;
 		}
-		if (options.emitCss) {
-			if (options.hot !== true && options.hot.injectCss) {
-				log.warn('hmr and emitCss are enabled but hot.injectCss is true, forcing it to false');
-				options.hot.injectCss = false;
-			}
-			const css = options.compilerOptions.css;
-			if (css === true || css === 'injected') {
-				const forcedCss = 'external';
-				log.warn(
-					`hmr and emitCss are enabled but compilerOptions.css is ${css}, forcing it to ${forcedCss}`
-				);
-				options.compilerOptions.css = forcedCss;
+	} else {
+		if (options.hot) {
+			if (!options.compilerOptions.dev) {
+				log.warn('hmr is enabled but compilerOptions.dev is false, forcing it to true');
+				options.compilerOptions.dev = true;
 			}
-		} else {
-			if (options.hot === true || !options.hot.injectCss) {
-				log.warn(
-					'hmr with emitCss disabled requires option hot.injectCss to be enabled, forcing it to true'
-				);
-				if (options.hot === true) {
-					options.hot = { injectCss: true };
-				} else {
-					options.hot.injectCss = true;
+			if (options.emitCss) {
+				if (options.hot !== true && options.hot.injectCss) {
+					log.warn('hmr and emitCss are enabled but hot.injectCss is true, forcing it to false');
+					options.hot.injectCss = false;
+				}
+				const css = options.compilerOptions.css;
+				if (css === true || css === 'injected') {
+					const forcedCss = 'external';
+					log.warn(
+						`hmr and emitCss are enabled but compilerOptions.css is ${css}, forcing it to ${forcedCss}`
+					);
+					options.compilerOptions.css = forcedCss;
+				}
+			} else {
+				if (options.hot === true || !options.hot.injectCss) {
+					log.warn(
+						'hmr with emitCss disabled requires option hot.injectCss to be enabled, forcing it to true'
+					);
+					if (options.hot === true) {
+						options.hot = { injectCss: true };
+					} else {
+						options.hot.injectCss = true;
+					}
+				}
+				const css = options.compilerOptions.css;
+				if (!(css === true || css === 'injected')) {
+					const forcedCss = 'injected';
+					log.warn(
+						`hmr with emitCss disabled requires compilerOptions.css to be enabled, forcing it to ${forcedCss}`
+					);
+					options.compilerOptions.css = forcedCss;
 				}
-			}
-			const css = options.compilerOptions.css;
-			if (!(css === true || css === 'injected')) {
-				const forcedCss = 'injected';
-				log.warn(
-					`hmr with emitCss disabled requires compilerOptions.css to be enabled, forcing it to ${forcedCss}`
-				);
-				options.compilerOptions.css = forcedCss;
 			}
 		}
 	}
@@ -551,7 +565,7 @@ async function buildExtraConfigForDependencies(options, config) {
 							.slice(0, -1)
 							.some((d) => isDepExcluded(d.trim(), userExclude))
 					);
-			  });
+				});
 	}
 	if (options.disableDependencyReinclusion === true) {
 		depsConfig.optimizeDeps.include = depsConfig.optimizeDeps.include.filter(

package/src/utils/svelte-version.js

@@ -9,3 +9,9 @@ export const isSvelte4 = VERSION.startsWith('4.');
  * @type {boolean}
  */
 export const isSvelte5 = VERSION.startsWith('5.');
+
+/**
+ * @type {boolean}
+ */
+export const isSvelte5WithHMRSupport =
+	VERSION.startsWith('5.0.0-next.') && Number(VERSION.slice(11)) > 96;