@sveltejs/vite-plugin-svelte 3.0.2 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -36,13 +36,13 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
+    "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
     "debug": "^4.3.4",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
-    "magic-string": "^0.30.5",
-    "svelte-hmr": "^0.15.3",
-    "vitefu": "^0.2.5",
-    "@sveltejs/vite-plugin-svelte-inspector": "^2.0.0"
+    "magic-string": "^0.30.10",
+    "svelte-hmr": "^0.16.0",
+    "vitefu": "^0.2.5"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0-next.0",
@@ -50,10 +50,10 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "esbuild": "^0.19.12",
-    "sass": "^1.70.0",
-    "svelte": "^4.2.9",
-    "vite": "^5.0.11"
+    "esbuild": "^0.20.2",
+    "sass": "^1.75.0",
+    "svelte": "^4.2.15",
+    "vite": "^5.2.9"
   },
   "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/preprocess.js

@@ -61,29 +61,16 @@ function viteScript() {
  * @returns {{ style: import('svelte/compiler').Preprocessor }}
  */
 function viteStyle(config = {}) {
-	/** @type {CssTransform} */
-	let transform;
+	/** @type {Promise<CssTransform> | CssTransform} */
+	let cssTransform;
 	/** @type {import('svelte/compiler').Preprocessor} */
 	const style = async ({ attributes, content, filename = '' }) => {
 		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
 		if (attributes.lang && !isCSSRequest(ext)) return;
-		if (!transform) {
-			/** @type {import('vite').ResolvedConfig} */
-			let resolvedConfig;
-			// @ts-expect-error special prop added if running in v-p-s
-			if (style.__resolvedConfig) {
-				// @ts-expect-error
-				resolvedConfig = style.__resolvedConfig;
-			} else if (isResolvedConfig(config)) {
-				resolvedConfig = config;
-			} else {
-				resolvedConfig = await resolveConfig(
-					config,
-					process.env.NODE_ENV === 'production' ? 'build' : 'serve'
-				);
-			}
-			transform = getCssTransformFn(resolvedConfig);
+		if (!cssTransform) {
+			cssTransform = createCssTransform(style, config).then((t) => (cssTransform = t));
 		}
+		const transform = await cssTransform;
 		const suffix = `${lang_sep}${ext}`;
 		const moduleId = `${filename}${suffix}`;
 		const { code, map, deps } = await transform(content, moduleId);
@@ -102,12 +89,27 @@ function viteStyle(config = {}) {
 }
 
 /**
- * @param {import('vite').ResolvedConfig} config
- * @returns {CssTransform}
+ * @param {import('svelte/compiler').Preprocessor} style
+ * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
+ * @returns {Promise<CssTransform>}
  */
-function getCssTransformFn(config) {
+async function createCssTransform(style, config) {
+	/** @type {import('vite').ResolvedConfig} */
+	let resolvedConfig;
+	// @ts-expect-error special prop added if running in v-p-s
+	if (style.__resolvedConfig) {
+		// @ts-expect-error
+		resolvedConfig = style.__resolvedConfig;
+	} else if (isResolvedConfig(config)) {
+		resolvedConfig = config;
+	} else {
+		resolvedConfig = await resolveConfig(
+			config,
+			process.env.NODE_ENV === 'production' ? 'build' : 'serve'
+		);
+	}
 	return async (code, filename) => {
-		return preprocessCSS(code, filename, config);
+		return preprocessCSS(code, filename, resolvedConfig);
 	};
 }
 

package/src/utils/compile.js

@@ -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;
@@ -210,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/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/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,26 @@ 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
 		}
 	};
+	const hot =
+		!viteConfig.isProduction && !preResolveOptions.isBuild && viteConfig.server.hmr !== false;
+	if (isSvelte5) {
+		if (isSvelte5WithHMRSupport) {
+			// @ts-expect-error svelte4 does not have hmr option
+			defaultOptions.compilerOptions.hmr = hot;
+		}
+	} else {
+		defaultOptions.hot = !hot
+			? false
+			: {
+					injectCss: css === 'injected',
+					partialAccept: !!viteConfig.experimental?.hmrPartialAccept
+				};
+	}
 	/** @type {Partial<import('../types/options.d.ts').ResolvedOptions>} */
 	const extraOptions = {
 		root: viteConfig.root,
@@ -217,7 +226,7 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 	removeIgnoredOptions(merged);
 	handleDeprecatedOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
-	enforceOptionsForHmr(merged);
+	enforceOptionsForHmr(merged, viteConfig);
 	enforceOptionsForProduction(merged);
 	// mergeConfigs would mangle functions on the stats class, so do this afterwards
 	if (log.debug.enabled && isDebugNamespaceEnabled('stats')) {
@@ -228,48 +237,62 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {import('vite').ResolvedConfig} viteConfig
  */
-function enforceOptionsForHmr(options) {
-	if (isSvelte5) {
-		// TODO add hmr options for svelte5 once it is supported and update utils/log.js#logSvelte5Warning
+function enforceOptionsForHmr(options, viteConfig) {
+	if (options.hot && viteConfig.server.hmr === false) {
+		log.warn(
+			'vite config server.hmr is false but hot is true. Forcing hot to false as it would not work.'
+		);
 		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 (isSvelte5) {
+		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;
 			}
 		}
 	}

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;