@sveltejs/vite-plugin-svelte 4.0.0-next.0 → 4.0.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "4.0.0-next.0",
+  "version": "4.0.0-next.2",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -36,12 +36,12 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
+    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
     "debug": "^4.3.4",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
     "magic-string": "^0.30.10",
-    "vitefu": "^0.2.5",
-    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0"
+    "vitefu": "^0.2.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0-next.96 || ^5.0.0",
@@ -49,9 +49,9 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "esbuild": "^0.20.2",
-    "sass": "^1.76.0",
-    "svelte": "^5.0.0-next.123",
+    "esbuild": "^0.21.3",
+    "sass": "^1.77.2",
+    "svelte": "^5.0.0-next.141",
     "vite": "^5.2.11"
   },
   "scripts": {

package/src/index.js

@@ -200,6 +200,7 @@ export function svelte(inlineOptions) {
 				}
 				try {
 					const compileResult = svelteCompiler.compileModule(code, {
+						dev: !viteConfig.isProduction,
 						generate: ssr ? 'server' : 'client',
 						filename: moduleRequest.filename
 					});

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/public.d.ts

@@ -175,6 +175,15 @@ interface ExperimentalOptions {
 }
 
 interface CompileModuleOptions {
+	/**
+	 * infix that must be present in filename
+	 * @default ['.svelte.']
+	 */
+	infixes?: string[];
+	/**
+	 * module extensions
+	 * @default ['.ts','.js']
+	 */
 	extensions?: string[];
 	include?: Arrayable<string>;
 	exclude?: Arrayable<string>;
@@ -195,5 +204,5 @@ export interface VitePreprocessOptions {
 	 */
 	style?: boolean | InlineConfig | ResolvedConfig;
 }
-
+// eslint-disable-next-line n/no-missing-import
 export * from './index.js';

package/src/types/options.d.ts

@@ -1,5 +1,6 @@
 import type { CompileOptions } from 'svelte/compiler';
 import type { ViteDevServer } from 'vite';
+// eslint-disable-next-line n/no-missing-import
 import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
 import type { Options } from '../public.d.ts';
 

package/src/utils/compile.js

@@ -128,12 +128,11 @@ export function createCompileSvelte() {
 					...dynamicCompileOptions
 				}
 			: compileOptions;
-
 		const endStat = stats?.start(filename);
 		/** @type {import('svelte/compiler').CompileResult} */
 		let compiled;
 		try {
-			compiled = svelte.compile(finalCode, finalCompileOptions);
+			compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename: filename });
 			// patch output with partial accept until svelte does it
 			// TODO remove later
 			if (

package/src/utils/constants.js

@@ -20,3 +20,7 @@ export const SVELTE_EXPORT_CONDITIONS = ['svelte'];
 
 export const FAQ_LINK_MISSING_EXPORTS_CONDITION =
 	'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition';
+
+export const DEFAULT_SVELTE_EXT = ['.svelte'];
+export const DEFAULT_SVELTE_MODULE_INFIX = ['.svelte.'];
+export const DEFAULT_SVELTE_MODULE_EXT = ['.js', '.ts'];

package/src/utils/esbuild.js

@@ -9,8 +9,7 @@ import { toESBuildError } from './error.js';
  */
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
-
-const svelteModuleExtension = '.svelte.js';
+export const facadeEsbuildSvelteModulePluginName = 'vite-plugin-svelte-module:facade';
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
@@ -24,18 +23,15 @@ export function esbuildSveltePlugin(options) {
 			// Otherwise this would heavily slow down the scanning phase.
 			if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
 
-			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
-			svelteExtensions.push(svelteModuleExtension.slice(1));
-
-			const svelteFilter = new RegExp('\\.(' + svelteExtensions.join('|') + ')(\\?.*)?$');
+			const filter = /\.svelte(?:\?.*)?$/;
 			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 			let statsCollection;
 			build.onStart(() => {
-				statsCollection = options.stats?.startCollection('prebundle libraries', {
+				statsCollection = options.stats?.startCollection('prebundle library components', {
 					logResult: (c) => c.stats.length > 1
 				});
 			});
-			build.onLoad({ filter: svelteFilter }, async ({ path: filename }) => {
+			build.onLoad({ filter }, async ({ path: filename }) => {
 				const code = readFileSync(filename, 'utf8');
 				try {
 					const contents = await compileSvelte(options, { filename, code }, statsCollection);
@@ -58,19 +54,6 @@ export function esbuildSveltePlugin(options) {
  * @returns {Promise<string>}
  */
 async function compileSvelte(options, { filename, code }, statsCollection) {
-	if (filename.endsWith(svelteModuleExtension)) {
-		const endStat = statsCollection?.start(filename);
-		const compiled = svelte.compileModule(code, {
-			filename,
-			generate: 'client'
-		});
-		if (endStat) {
-			endStat();
-		}
-		return compiled.js.map
-			? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
-			: compiled.js.code;
-	}
 	let css = options.compilerOptions.css;
 	if (css !== 'injected') {
 		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
@@ -78,6 +61,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 	}
 	/** @type {import('svelte/compiler').CompileOptions} */
 	const compileOptions = {
+		dev: true, // default to dev: true because prebundling is only used in dev
 		...options.compilerOptions,
 		css,
 		filename,
@@ -127,3 +111,60 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
 		: compiled.js.code;
 }
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {EsbuildPlugin}
+ */
+export function esbuildSvelteModulePlugin(options) {
+	return {
+		name: 'vite-plugin-svelte-module:optimize-svelte',
+		setup(build) {
+			// Skip in scanning phase as Vite already handles scanning Svelte files.
+			// Otherwise this would heavily slow down the scanning phase.
+			if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
+
+			const filter = /\.svelte\.[jt]s(?:\?.*)?$/;
+			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+			let statsCollection;
+			build.onStart(() => {
+				statsCollection = options.stats?.startCollection('prebundle library modules', {
+					logResult: (c) => c.stats.length > 1
+				});
+			});
+			build.onLoad({ filter }, async ({ path: filename }) => {
+				const code = readFileSync(filename, 'utf8');
+				try {
+					const contents = await compileSvelteModule(options, { filename, code }, statsCollection);
+					return { contents };
+				} catch (e) {
+					return { errors: [toESBuildError(e, options)] };
+				}
+			});
+			build.onEnd(() => {
+				statsCollection?.finish();
+			});
+		}
+	};
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {{ filename: string; code: string }} input
+ * @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection]
+ * @returns {Promise<string>}
+ */
+async function compileSvelteModule(options, { filename, code }, statsCollection) {
+	const endStat = statsCollection?.start(filename);
+	const compiled = svelte.compileModule(code, {
+		dev: options.compilerOptions?.dev ?? true, // default to dev: true because prebundling is only used in dev
+		filename,
+		generate: 'client'
+	});
+	if (endStat) {
+		endStat();
+	}
+	return compiled.js.map
+		? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
+		: compiled.js.code;
+}

package/src/utils/id.js

@@ -1,6 +1,7 @@
 import { createFilter, normalizePath } from 'vite';
 import * as fs from 'node:fs';
 import { log } from './log.js';
+import { DEFAULT_SVELTE_MODULE_EXT, DEFAULT_SVELTE_MODULE_INFIX } from './constants.js';
 
 const VITE_FS_PREFIX = '/@fs/';
 const IS_WINDOWS = process.platform === 'win32';
@@ -169,6 +170,21 @@ function buildFilter(include, exclude, extensions) {
 	return (filename) => rollupFilter(filename) && extensions.some((ext) => filename.endsWith(ext));
 }
 
+/**
+ * @param {import('../public.d.ts').Options['include'] | undefined} include
+ * @param {import('../public.d.ts').Options['exclude'] | undefined} exclude
+ * @param {string[]} infixes
+ * @param {string[]} extensions
+ * @returns {(filename: string) => boolean}
+ */
+function buildModuleFilter(include, exclude, infixes, extensions) {
+	const rollupFilter = createFilter(include, exclude);
+	return (filename) =>
+		rollupFilter(filename) &&
+		infixes.some((infix) => filename.includes(infix)) &&
+		extensions.some((ext) => filename.endsWith(ext));
+}
+
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @returns {import('../types/id.d.ts').IdParser}
@@ -190,10 +206,15 @@ export function buildIdParser(options) {
  * @returns {import('../types/id.d.ts').ModuleIdParser}
  */
 export function buildModuleIdParser(options) {
-	const { include, exclude, extensions } = options?.experimental?.compileModule ?? {};
+	const {
+		include,
+		exclude,
+		infixes = DEFAULT_SVELTE_MODULE_INFIX,
+		extensions = DEFAULT_SVELTE_MODULE_EXT
+	} = options?.experimental?.compileModule ?? {};
 	const root = options.root;
 	const normalizedRoot = normalizePath(root);
-	const filter = buildFilter(include, exclude, extensions ?? ['.svelte.js', '.svelte.ts']);
+	const filter = buildModuleFilter(include, exclude, infixes, extensions);
 	return (id, ssr, timestamp = Date.now()) => {
 		const { filename, rawQuery } = splitId(id);
 		if (filter(filename)) {

package/src/utils/options.js

@@ -3,6 +3,7 @@ import { normalizePath } from 'vite';
 import { isDebugNamespaceEnabled, log } from './log.js';
 import { loadSvelteConfig } from './load-svelte-config.js';
 import {
+	DEFAULT_SVELTE_EXT,
 	FAQ_LINK_MISSING_EXPORTS_CONDITION,
 	SVELTE_EXPORT_CONDITIONS,
 	SVELTE_IMPORTS,
@@ -11,7 +12,12 @@ import {
 } from './constants.js';
 
 import path from 'node:path';
-import { esbuildSveltePlugin, facadeEsbuildSveltePluginName } from './esbuild.js';
+import {
+	esbuildSvelteModulePlugin,
+	esbuildSveltePlugin,
+	facadeEsbuildSvelteModulePluginName,
+	facadeEsbuildSveltePluginName
+} from './esbuild.js';
 import { addExtraPreprocessors } from './preprocess.js';
 import deepmerge from 'deepmerge';
 import {
@@ -137,7 +143,7 @@ export async function preResolveOptions(inlineOptions, viteUserConfig, viteEnv)
 	const isBuild = viteEnv.command === 'build';
 	/** @type {Partial<import('../types/options.d.ts').PreResolvedOptions>} */
 	const defaultOptions = {
-		extensions: ['.svelte'],
+		extensions: DEFAULT_SVELTE_EXT,
 		emitCss: true,
 		prebundleSvelteLibraries: !isBuild
 	};
@@ -195,7 +201,11 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 		compilerOptions: {
 			css,
 			dev: !viteConfig.isProduction,
-			hmr: !viteConfig.isProduction && !preResolveOptions.isBuild
+			hmr:
+				!viteConfig.isProduction &&
+				!preResolveOptions.isBuild &&
+				viteConfig.server &&
+				viteConfig.server.hmr !== false
 		}
 	};
 
@@ -211,7 +221,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')) {
@@ -222,8 +232,9 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {import('vite').ResolvedConfig} viteConfig
  */
-function enforceOptionsForHmr(options) {
+function enforceOptionsForHmr(options, viteConfig) {
 	if (options.hot) {
 		log.warn(
 			'svelte 5 has hmr integrated in core. Please remove the vitePlugin.hot option and use compilerOptions.hmr instead'
@@ -231,6 +242,12 @@ function enforceOptionsForHmr(options) {
 		delete options.hot;
 		options.compilerOptions.hmr = true;
 	}
+	if (options.compilerOptions.hmr && viteConfig.server?.hmr === false) {
+		log.warn(
+			'vite config server.hmr is false but compilerOptions.hmr is true. Forcing compilerOptions.hmr to false as it would not work.'
+		);
+		options.compilerOptions.hmr = false;
+	}
 }
 
 /**
@@ -258,7 +275,7 @@ function enforceOptionsForProduction(options) {
  */
 function removeIgnoredOptions(options) {
 	const ignoredCompilerOptions = ['generate', 'format', 'filename'];
-	if (options.hot && options.emitCss) {
+	if (options.compilerOptions.hmr && options.emitCss) {
 		ignoredCompilerOptions.push('cssHash');
 	}
 	const passedCompilerOptions = Object.keys(options.compilerOptions || {});
@@ -383,7 +400,10 @@ export async function buildExtraViteConfig(options, config) {
 			// Currently a placeholder as more information is needed after Vite config is resolved,
 			// the real Svelte plugin is added in `patchResolvedViteConfig()`
 			esbuildOptions: {
-				plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
+				plugins: [
+					{ name: facadeEsbuildSveltePluginName, setup: () => {} },
+					{ name: facadeEsbuildSvelteModulePluginName, setup: () => {} }
+				]
 			}
 		};
 	}
@@ -583,6 +603,12 @@ export function patchResolvedViteConfig(viteConfig, options) {
 	if (facadeEsbuildSveltePlugin) {
 		Object.assign(facadeEsbuildSveltePlugin, esbuildSveltePlugin(options));
 	}
+	const facadeEsbuildSvelteModulePlugin = viteConfig.optimizeDeps.esbuildOptions?.plugins?.find(
+		(plugin) => plugin.name === facadeEsbuildSvelteModulePluginName
+	);
+	if (facadeEsbuildSvelteModulePlugin) {
+		Object.assign(facadeEsbuildSvelteModulePlugin, esbuildSvelteModulePlugin(options));
+	}
 }
 
 /**

package/types/index.d.ts

@@ -173,6 +173,15 @@ declare module '@sveltejs/vite-plugin-svelte' {
 	}
 
 	interface CompileModuleOptions {
+		/**
+		 * infix that must be present in filename
+		 * @default ['.svelte.']
+		 */
+		infixes?: string[];
+		/**
+		 * module extensions
+		 * @default ['.ts','.js']
+		 */
 		extensions?: string[];
 		include?: Arrayable<string>;
 		exclude?: Arrayable<string>;

package/types/index.d.ts.map

@@ -21,5 +21,5 @@
 		null,
 		null
 	],
-	"mappings": ";;;;aAMYA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6GFC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAqEZC,qBAAqBA;;;;;;;;;;;;;iBChKtBC,MAAMA;iBCTNC,cAAcA;iBCgBRC,gBAAgBA"
+	"mappings": ";;;;aAMYA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6GFC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA8EZC,qBAAqBA;;;;;;;;;;;;;iBCzKtBC,MAAMA;iBCTNC,cAAcA;iBCgBRC,gBAAgBA"
 }