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

package/src/plugins/hot-update.js

@@ -0,0 +1,181 @@
+import { log } from '../utils/log.js';
+import { setupWatchers } from '../utils/watch.js';
+import { SVELTE_VIRTUAL_STYLE_ID_REGEX } from '../utils/constants.js';
+
+/**
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function hotUpdate(api) {
+	/**
+	 * @type {import("../types/options.js").ResolvedOptions}
+	 */
+	let options;
+	/**
+	 * @type {import('../types/id.d.ts').IdParser}
+	 */
+	let idParser;
+
+	/**
+	 *
+	 * @type {Map<string|null,string>}
+	 */
+	const transformResultCache = new Map();
+
+	/** @type {import('vite').Plugin} */
+	const plugin = {
+		name: 'vite-plugin-svelte:hot-update',
+		enforce: 'post',
+		configResolved() {
+			options = api.options;
+			idParser = api.idParser;
+
+			// @ts-expect-error
+			plugin.transform.filter = {
+				id: {
+					// reinclude virtual styles to get their output
+					include: [...api.idFilter.id.include, SVELTE_VIRTUAL_STYLE_ID_REGEX],
+					exclude: [
+						// ignore files in node_modules, we don't hot update them
+						/\/node_modules\//,
+						// remove style exclusion
+						...api.idFilter.id.exclude.filter((filter) => filter !== SVELTE_VIRTUAL_STYLE_ID_REGEX)
+					]
+				}
+			};
+		},
+
+		applyToEnvironment(env) {
+			// we only handle updates for client components
+			// ssr frameworks have to handle updating/reloading themselves as v-p-s can't know what they prefer
+			const hmrEnabled = options.compilerOptions.hmr && options.emitCss;
+			return hmrEnabled && env.config.consumer === 'client';
+		},
+
+		configureServer(server) {
+			const clientEnvironment = Object.values(server.environments).find(
+				(e) => e.config.consumer === 'client'
+			);
+			if (clientEnvironment) {
+				setupWatchers(options);
+			} else {
+				log.warn(
+					'No client environment found, not adding watchers for svelte config and preprocessor dependencies'
+				);
+			}
+		},
+
+		buildStart() {
+			transformResultCache.clear();
+		},
+
+		transform: {
+			order: 'post',
+			handler(code, id) {
+				transformResultCache.set(id, code);
+			}
+		},
+		hotUpdate: {
+			order: 'post',
+			async handler(ctx) {
+				const svelteRequest = idParser(ctx.file, false, ctx.timestamp);
+				if (svelteRequest) {
+					const { modules } = ctx;
+					const svelteModules = [];
+					const nonSvelteModules = [];
+					for (const mod of modules) {
+						if (transformResultCache.has(mod.id)) {
+							svelteModules.push(mod);
+						} else {
+							nonSvelteModules.push(mod);
+						}
+					}
+
+					if (svelteModules.length === 0) {
+						return; // nothing to do for us
+					}
+					const affectedModules = [];
+					const prevResults = svelteModules.map((m) => transformResultCache.get(m.id));
+					for (let i = 0; i < svelteModules.length; i++) {
+						const mod = svelteModules[i];
+						const prev = prevResults[i];
+						await this.environment.transformRequest(mod.url);
+						const next = transformResultCache.get(mod.id);
+						if (hasCodeChanged(prev, next, mod.id)) {
+							affectedModules.push(mod);
+						} else {
+							log.debug(
+								`skipping hot update for ${mod.id} because result is unchanged`,
+								undefined,
+								'hmr'
+							);
+						}
+					}
+					log.debug(
+						`hotUpdate for ${svelteRequest.id} result: [${affectedModules.map((m) => m.id).join(', ')}]`,
+						undefined,
+						'hmr'
+					);
+					return [...affectedModules, ...nonSvelteModules];
+				}
+			}
+		}
+	};
+
+	return plugin;
+}
+
+/**
+ * @param {string | undefined | null} prev
+ * @param {string | undefined | null} next
+ * @param {string | null} id
+ * @returns {boolean}
+ */
+function hasCodeChanged(prev, next, id) {
+	const isStrictEqual = nullSafeEqual(prev, next);
+	if (isStrictEqual) {
+		return false;
+	}
+	const isLooseEqual = nullSafeEqual(normalize(prev), normalize(next));
+	if (!isStrictEqual && isLooseEqual) {
+		log.debug(
+			`ignoring compiler output change for ${id} as it is equal to previous output after normalization`,
+			undefined,
+			'hmr'
+		);
+	}
+	return !isLooseEqual;
+}
+
+/**
+ * @param {string | null | undefined} prev
+ * @param {string | null | undefined} next
+ * @returns {boolean}
+ */
+function nullSafeEqual(prev, next) {
+	return (prev == null && next == null) || (prev != null && next != null && prev === next);
+}
+
+/**
+ * remove code that only changes metadata and does not require a js update for the component to keep working
+ *
+ * 1) location numbers argument from $.add_locations calls in svelte output eg [[1,2],[3,4]]
+ * 2) timestamp queries added to imports by vite eg ?t=0123456789123
+ *
+ * @param {string | null | undefined } code
+ * @returns {string | null | undefined}
+ */
+function normalize(code) {
+	if (code == null) {
+		return code;
+	}
+
+	return (
+		code
+			// svelte5 $.add_locations line numbers argument  [[1,2],[3,4]]
+			// uses matching group replace to keep the template argument intact
+			.replace(/(\$\.add_locations\(.*), (\[\[[\d, [\]]+]])\)/g, '$1, []')
+			// vite import analysis timestamp queries, ?t=0123456789123&
+			.replace(/[?&]t=\d{13}\b/g, '')
+	);
+}

package/src/plugins/load-compiled-css.js

@@ -0,0 +1,44 @@
+import { log } from '../utils/log.js';
+import { SVELTE_VIRTUAL_STYLE_ID_REGEX } from '../utils/constants.js';
+
+const filter = { id: SVELTE_VIRTUAL_STYLE_ID_REGEX };
+
+/**
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function loadCompiledCss(api) {
+	return {
+		name: 'vite-plugin-svelte:load-compiled-css',
+
+		resolveId: {
+			filter, // same filter in load to ensure minimal work
+			handler(id) {
+				log.debug(`resolveId resolved virtual css module ${id}`, undefined, 'resolve');
+				return id;
+			}
+		},
+		load: {
+			filter,
+			async handler(id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const svelteRequest = api.idParser(id, ssr);
+				if (!svelteRequest) {
+					return;
+				}
+				const cachedCss = this.getModuleInfo(svelteRequest.filename)?.meta.svelte?.css;
+				if (cachedCss) {
+					const { hasGlobal, ...css } = cachedCss;
+					if (hasGlobal === false) {
+						// hasGlobal was added in svelte 5.26.0, so make sure it is boolean false
+						css.meta ??= {};
+						css.meta.vite ??= {};
+						css.meta.vite.cssScopeTo = [svelteRequest.filename, 'default'];
+					}
+					css.moduleType = 'css';
+					return css;
+				}
+			}
+		}
+	};
+}

package/src/plugins/load-custom.js

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import { log } from '../utils/log.js';
+
+/**
+ * if svelte config includes files that vite treats as assets (e.g. .svg)
+ * we have to manually load them to avoid getting urls
+ *
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function loadCustom(api) {
+	/** @type {import('vite').Plugin} */
+	const plugin = {
+		name: 'vite-plugin-svelte:load-custom',
+		enforce: 'pre', // must come before vites own asset handling or custom extensions like .svg won't work
+		configResolved() {
+			//@ts-expect-error load defined below but filter not in type
+			plugin.load.filter = api.idFilter;
+		},
+
+		load: {
+			//filter: is set in configResolved
+			async handler(id) {
+				const config = this.environment.config;
+				const ssr = config.consumer === 'server';
+				const svelteRequest = api.idParser(id, ssr);
+				if (svelteRequest) {
+					const { filename, query } = svelteRequest;
+					if (!query.url && config.assetsInclude(filename)) {
+						log.debug(
+							`loading ${filename} to prevent vite asset handling to turn it into a url by default`,
+							undefined,
+							'load'
+						);
+						return fs.readFileSync(filename, 'utf-8');
+					}
+				}
+			}
+		}
+	};
+	return plugin;
+}

package/src/plugins/preprocess.js

@@ -0,0 +1,205 @@
+import { toRollupError } from '../utils/error.js';
+import { mapToRelative } from '../utils/sourcemaps.js';
+import * as svelte from 'svelte/compiler';
+import { log } from '../utils/log.js';
+import { arraify } from '../utils/options.js';
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function preprocess(api) {
+	/**
+	 * @type {import("../types/options.js").ResolvedOptions}
+	 */
+	let options;
+
+	/**
+	 * @type {DependenciesCache}
+	 */
+	let dependenciesCache;
+
+	/**
+	 * @type {import("../types/compile.d.ts").PreprocessSvelte}
+	 */
+	let preprocessSvelte;
+
+	/** @type {import('vite').Plugin} */
+	const plugin = {
+		name: 'vite-plugin-svelte:preprocess',
+		enforce: 'pre',
+		configResolved(c) {
+			//@ts-expect-error defined below but filter not in type
+			plugin.transform.filter = api.idFilter;
+			options = api.options;
+			if (arraify(options.preprocess).length > 0) {
+				preprocessSvelte = createPreprocessSvelte(options, c);
+			} else {
+				log.debug(
+					`disabling ${plugin.name} because no preprocessor is configured`,
+					undefined,
+					'preprocess'
+				);
+				delete plugin.transform;
+			}
+		},
+		configureServer(server) {
+			dependenciesCache = new DependenciesCache(server);
+		},
+		buildStart() {
+			dependenciesCache?.clear();
+		},
+		transform: {
+			async handler(code, id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const svelteRequest = api.idParser(id, ssr);
+				if (!svelteRequest) {
+					return;
+				}
+				try {
+					const preprocessed = await preprocessSvelte(svelteRequest, code, options);
+					dependenciesCache?.update(svelteRequest, preprocessed?.dependencies ?? []);
+					if (!preprocessed) {
+						return;
+					}
+					if (options.isBuild && this.environment.config.build.watch && preprocessed.dependencies) {
+						for (const dep of preprocessed.dependencies) {
+							this.addWatchFile(dep);
+						}
+					}
+
+					/** @type {import('vite').Rollup.SourceDescription}*/
+					const result = { code: preprocessed.code };
+					if (preprocessed.map) {
+						// @ts-expect-error type differs but should work
+						result.map = preprocessed.map;
+					}
+					return result;
+				} catch (e) {
+					throw toRollupError(e, options);
+				}
+			}
+		}
+	};
+	return plugin;
+}
+/**
+ * @param {import("../types/options.js").ResolvedOptions} options
+ * @param {import("vite").ResolvedConfig} resolvedConfig
+ * @returns {import('../types/compile.d.ts').PreprocessSvelte}
+ */
+function createPreprocessSvelte(options, resolvedConfig) {
+	/** @type {Array<import('svelte/compiler').PreprocessorGroup>} */
+	const preprocessors = arraify(options.preprocess);
+
+	for (const preprocessor of preprocessors) {
+		if (preprocessor.style && '__resolvedConfig' in preprocessor.style) {
+			preprocessor.style.__resolvedConfig = resolvedConfig;
+		}
+	}
+
+	/** @type {import('../types/compile.d.ts').PreprocessSvelte} */
+	return async function preprocessSvelte(svelteRequest, code) {
+		const { filename } = svelteRequest;
+		let preprocessed;
+		if (preprocessors && preprocessors.length > 0) {
+			try {
+				preprocessed = await svelte.preprocess(code, preprocessors, { filename }); // full filename here so postcss works
+			} catch (e) {
+				e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
+				throw e;
+			}
+			if (typeof preprocessed?.map === 'object') {
+				mapToRelative(preprocessed?.map, filename);
+			}
+			return preprocessed;
+		}
+	};
+}
+
+/**
+ * @class
+ *
+ * caches dependencies of preprocessed files and emit change events on dependants
+ */
+class DependenciesCache {
+	/** @type {Map<string, string[]>} */
+	#dependencies = new Map();
+	/** @type {Map<string, Set<string>>} */
+	#dependants = new Map();
+
+	/** @type {import('vite').ViteDevServer} */
+	#server;
+	/**
+	 *
+	 * @param {import('vite').ViteDevServer} server
+	 */
+	constructor(server) {
+		this.#server = server;
+		/** @type {(filename: string) => void} */
+		const emitChangeEventOnDependants = (filename) => {
+			const dependants = this.#dependants.get(filename);
+			dependants?.forEach((dependant) => {
+				if (fs.existsSync(dependant)) {
+					log.debug(
+						`emitting virtual change event for "${dependant}" because dependency "${filename}" changed`,
+						undefined,
+						'hmr'
+					);
+					server.watcher.emit('change', dependant);
+				}
+			});
+		};
+		server.watcher.on('change', emitChangeEventOnDependants);
+		server.watcher.on('unlink', emitChangeEventOnDependants);
+	}
+
+	/**
+	 * @param {string} file
+	 */
+	#ensureWatchedFile(file) {
+		const root = this.#server.config.root;
+		if (
+			file &&
+			// only need to watch if out of root
+			!file.startsWith(root + '/') &&
+			// some rollup plugins use null bytes for private resolved Ids
+			!file.includes('\0') &&
+			fs.existsSync(file)
+		) {
+			// resolve file to normalized system path
+			this.#server.watcher.add(path.resolve(file));
+		}
+	}
+
+	clear() {
+		this.#dependencies.clear();
+		this.#dependants.clear();
+	}
+
+	/**
+	 *
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @param {string[]} dependencies
+	 */
+	update(svelteRequest, dependencies) {
+		const id = svelteRequest.normalizedFilename;
+		const prevDependencies = this.#dependencies.get(id) || [];
+
+		this.#dependencies.set(id, dependencies);
+		const removed = prevDependencies.filter((d) => !dependencies.includes(d));
+		const added = dependencies.filter((d) => !prevDependencies.includes(d));
+		added.forEach((d) => {
+			this.#ensureWatchedFile(d);
+			if (!this.#dependants.has(d)) {
+				this.#dependants.set(d, new Set());
+			}
+			/** @type {Set<string>} */ (this.#dependants.get(d)).add(svelteRequest.filename);
+		});
+		removed.forEach((d) => {
+			/** @type {Set<string>} */ (this.#dependants.get(d)).delete(svelteRequest.filename);
+		});
+	}
+}

package/src/{utils/optimizer-plugins.js → plugins/setup-optimizer.js}

@@ -1,9 +1,14 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
 import { readFileSync } from 'node:fs';
 import * as svelte from 'svelte/compiler';
-import { log } from './log.js';
-import { toESBuildError, toRollupError } from './error.js';
-import { safeBase64Hash } from './hash.js';
-import { normalize } from './id.js';
+import { log } from '../utils/log.js';
+import { toESBuildError, toRollupError } from '../utils/error.js';
+import { safeBase64Hash } from '../utils/hash.js';
+import { normalize } from '../utils/id.js';
+import * as vite from 'vite';
+// @ts-ignore not typed on vite
+const { rolldownVersion } = vite;
 
 /**
  * @typedef {NonNullable<import('vite').DepOptimizationOptions['esbuildOptions']>} EsbuildOptions
@@ -13,14 +18,86 @@ import { normalize } from './id.js';
  * @typedef {NonNullable<import('vite').Rollup.Plugin>} RollupPlugin
  */
 
-export const optimizeSveltePluginName = 'vite-plugin-svelte:optimize';
-export const optimizeSvelteModulePluginName = 'vite-plugin-svelte-module:optimize';
+const optimizeSveltePluginName = 'vite-plugin-svelte:optimize';
+const optimizeSvelteModulePluginName = 'vite-plugin-svelte:optimize-module';
+
+/**
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function setupOptimizer(api) {
+	/** @type {import('vite').ResolvedConfig} */
+	let viteConfig;
+
+	return {
+		name: 'vite-plugin-svelte:setup-optimizer',
+		apply: 'serve',
+		config() {
+			/** @type {import('vite').UserConfig['optimizeDeps']} */
+			const optimizeDeps = {
+				// Experimental Vite API to allow these extensions to be scanned and prebundled
+				extensions: ['.svelte']
+			};
+			// Add optimizer plugins to prebundle Svelte files.
+			// Currently, a placeholder as more information is needed after Vite config is resolved,
+			// the added plugins are patched in configResolved below
+			if (rolldownVersion) {
+				//@ts-ignore rolldown types not finished
+				optimizeDeps.rollupOptions = {
+					plugins: [
+						placeholderRolldownOptimizerPlugin(optimizeSveltePluginName),
+						placeholderRolldownOptimizerPlugin(optimizeSvelteModulePluginName)
+					]
+				};
+			} else {
+				optimizeDeps.esbuildOptions = {
+					plugins: [
+						{ name: optimizeSveltePluginName, setup: () => {} },
+						{ name: optimizeSvelteModulePluginName, setup: () => {} }
+					]
+				};
+			}
+			return { optimizeDeps };
+		},
+		configResolved(c) {
+			viteConfig = c;
+			const optimizeDeps = c.optimizeDeps;
+			if (rolldownVersion) {
+				const plugins =
+					// @ts-expect-error not typed
+					optimizeDeps.rollupOptions?.plugins?.filter((p) =>
+						[optimizeSveltePluginName, optimizeSvelteModulePluginName].includes(p.name)
+					) ?? [];
+				for (const plugin of plugins) {
+					patchRolldownOptimizerPlugin(plugin, api.options);
+				}
+			} else {
+				const plugins =
+					optimizeDeps.esbuildOptions?.plugins?.filter((p) =>
+						[optimizeSveltePluginName, optimizeSvelteModulePluginName].includes(p.name)
+					) ?? [];
+				for (const plugin of plugins) {
+					patchESBuildOptimizerPlugin(plugin, api.options);
+				}
+			}
+		},
+		async buildStart() {
+			if (!api.options.prebundleSvelteLibraries) return;
+			const changed = await svelteMetadataChanged(viteConfig.cacheDir, api.options);
+			if (changed) {
+				// Force Vite to optimize again. Although we mutate the config here, it works because
+				// Vite's optimizer runs after `buildStart()`.
+				viteConfig.optimizeDeps.force = true;
+			}
+		}
+	};
+}
 
 /**
  * @param {EsbuildPlugin} plugin
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */
-export function patchESBuildOptimizerPlugin(plugin, options) {
+function patchESBuildOptimizerPlugin(plugin, options) {
 	const components = plugin.name === optimizeSveltePluginName;
 	const compileFn = components ? compileSvelte : compileSvelteModule;
 	const statsName = components ? 'prebundle library components' : 'prebundle library modules';
@@ -57,7 +134,7 @@ export function patchESBuildOptimizerPlugin(plugin, options) {
  * @param {RollupPlugin} plugin
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */
-export function patchRolldownOptimizerPlugin(plugin, options) {
+function patchRolldownOptimizerPlugin(plugin, options) {
 	const components = plugin.name === optimizeSveltePluginName;
 	const compileFn = components ? compileSvelte : compileSvelteModule;
 	const statsName = components ? 'prebundle library components' : 'prebundle library modules';
@@ -193,3 +270,71 @@ async function compileSvelteModule(options, { filename, code }, statsCollection)
 		moduleType: 'js'
 	};
 }
+
+// List of options that changes the prebundling result
+/** @type {(keyof import('../types/options.d.ts').ResolvedOptions)[]} */
+const PREBUNDLE_SENSITIVE_OPTIONS = [
+	'compilerOptions',
+	'configFile',
+	'experimental',
+	'extensions',
+	'ignorePluginPreprocessors',
+	'preprocess'
+];
+
+/**
+ * stores svelte metadata in cache dir and compares if it has changed
+ *
+ * @param {string} cacheDir
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {Promise<boolean>} Whether the Svelte metadata has changed
+ */
+async function svelteMetadataChanged(cacheDir, options) {
+	const svelteMetadata = generateSvelteMetadata(options);
+	const svelteMetadataPath = path.resolve(cacheDir, '_svelte_metadata.json');
+
+	const currentSvelteMetadata = JSON.stringify(svelteMetadata, (_, value) => {
+		// Handle preprocessors
+		return typeof value === 'function' ? value.toString() : value;
+	});
+
+	/** @type {string | undefined} */
+	let existingSvelteMetadata;
+	try {
+		existingSvelteMetadata = await fs.readFile(svelteMetadataPath, 'utf8');
+	} catch {
+		// ignore
+	}
+
+	await fs.mkdir(cacheDir, { recursive: true });
+	await fs.writeFile(svelteMetadataPath, currentSvelteMetadata);
+	return currentSvelteMetadata !== existingSvelteMetadata;
+}
+
+/**
+ *
+ * @param {string} name
+ * @returns {import('vite').Rollup.Plugin}
+ */
+function placeholderRolldownOptimizerPlugin(name) {
+	return {
+		name,
+		options() {},
+		buildStart() {},
+		buildEnd() {},
+		transform: { filter: { id: /^$/ }, handler() {} }
+	};
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {Partial<import('../types/options.d.ts').ResolvedOptions>}
+ */
+function generateSvelteMetadata(options) {
+	/** @type {Record<string, any>} */
+	const metadata = {};
+	for (const key of PREBUNDLE_SENSITIVE_OPTIONS) {
+		metadata[key] = options[key];
+	}
+	return metadata;
+}

package/src/preprocess.js

@@ -6,9 +6,9 @@ const {
 	preprocessCSS,
 	resolveConfig,
 	transformWithEsbuild,
-	//@ts-expect-error rolldown types don't exist
+	//@ts-ignore rolldown types don't exist
 	rolldownVersion,
-	//@ts-expect-error rolldown types don't exist
+	//@ts-ignore rolldown types don't exist
 	transformWithOxc
 } = vite;
 /**
@@ -72,8 +72,10 @@ function viteScript() {
 function viteScriptOxc() {
 	return {
 		async script({ attributes, content, filename = '' }) {
-			const lang = /** @type {string} */ (attributes.lang);
-			if (!supportedScriptLangs.includes(lang)) return;
+			if (typeof attributes.lang !== 'string' || !supportedScriptLangs.includes(attributes.lang)) {
+				return;
+			}
+			const lang = /** @type {'ts'} */ (attributes.lang);
 			const { code, map } = await transformWithOxc(content, filename, {
 				lang,
 				target: 'esnext'

package/src/public.d.ts

@@ -173,6 +173,13 @@ interface ExperimentalOptions {
 	 */
 	disableSvelteResolveWarnings?: boolean;
 
+	/**
+	 * disable api.sveltePreprocess deprecation warnings
+	 *
+	 * @default false
+	 */
+	disableApiSveltePreprocessWarnings?: boolean;
+
 	compileModule?: CompileModuleOptions;
 }