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

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, api.getEnvironmentCache({ environment: clientEnvironment }));
+			} 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,46 @@
+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 cache = api.getEnvironmentCache(this);
+				const cachedCss = cache.getCSS(svelteRequest);
+				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 ??= {};
+						// TODO is that slice the best way to get the filename without parsing the id?
+						css.meta.vite.cssScopeTo = [id.slice(0, id.lastIndexOf('?')), '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,133 @@
+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';
+
+/**
+ * @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 {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;
+			}
+		},
+
+		transform: {
+			async handler(code, id) {
+				const cache = api.getEnvironmentCache(this);
+				const ssr = this.environment.config.consumer === 'server';
+				const svelteRequest = api.idParser(id, ssr);
+				if (!svelteRequest) {
+					return;
+				}
+				try {
+					return await preprocessSvelte(svelteRequest, code, options);
+				} catch (e) {
+					cache.setError(svelteRequest, 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 {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+	let stats;
+	/** @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, options) {
+		const { filename, ssr } = svelteRequest;
+
+		if (options.stats) {
+			if (options.isBuild) {
+				if (!stats) {
+					// build is either completely ssr or csr, create stats collector on first compile
+					// it is then finished in the buildEnd hook.
+					stats = options.stats.startCollection(`${ssr ? 'ssr' : 'dom'} preprocess`, {
+						logInProgress: () => false
+					});
+				}
+			} else {
+				// dev time ssr, it's a ssr request and there are no stats, assume new page load and start collecting
+				if (ssr && !stats) {
+					stats = options.stats.startCollection('ssr preprocess');
+				}
+				// stats are being collected but this isn't an ssr request, assume page loaded and stop collecting
+				if (!ssr && stats) {
+					stats.finish();
+					stats = undefined;
+				}
+				// TODO find a way to trace dom compile during dev
+				// problem: we need to call finish at some point but have no way to tell if page load finished
+				// also they for hmr updates too
+			}
+		}
+
+		let preprocessed;
+
+		if (preprocessors && preprocessors.length > 0) {
+			try {
+				const endStat = stats?.start(filename);
+				preprocessed = await svelte.preprocess(code, preprocessors, { filename }); // full filename here so postcss works
+				endStat?.();
+			} catch (e) {
+				e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
+				throw e;
+			}
+
+			if (typeof preprocessed?.map === 'object') {
+				mapToRelative(preprocessed?.map, filename);
+			}
+			return /** @type {import('../types/compile.d.ts').PreprocessTransformOutput} */ {
+				code: preprocessed.code,
+				// @ts-expect-error
+				map: preprocessed.map,
+				meta: {
+					svelte: {
+						preprocessed
+					}
+				}
+			};
+		}
+	};
+}

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-expect-error 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-expect-error 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/types/compile.d.ts

@@ -1,14 +1,31 @@
 import type { Processed, CompileResult } from 'svelte/compiler';
 import type { SvelteRequest } from './id.d.ts';
 import type { ResolvedOptions } from './options.d.ts';
-import type { CustomPluginOptionsVite } from 'vite';
+import type { CustomPluginOptionsVite, Rollup } from 'vite';
 
 export type CompileSvelte = (
 	svelteRequest: SvelteRequest,
 	code: string,
-	options: Partial<ResolvedOptions>
+	options: Partial<ResolvedOptions>,
+	preprocessed?: Processed
 ) => Promise<CompileData>;
 
+export type PreprocessSvelte = (
+	svelteRequest: SvelteRequest,
+	code: string,
+	options: Partial<ResolvedOptions>
+) => Promise<PreprocessTransformOutput | undefined>;
+
+export interface PreprocessTransformOutput {
+	code: string;
+	map: Rollup.SourceMapInput;
+	meta: {
+		svelte: {
+			preprocessed: Processed;
+		};
+	};
+}
+
 export interface Code {
 	code: string;
 	map?: any;
@@ -23,6 +40,7 @@ export interface Code {
 export interface CompileData {
 	filename: string;
 	normalizedFilename: string;
+	cssId: string;
 	lang: string;
 	compiled: CompileResult;
 	ssr: boolean | undefined;

package/src/types/id.d.ts

@@ -1,16 +1,9 @@
-import type { CompileOptions } from 'svelte/compiler';
-
-export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed' | 'all';
+export type SvelteQueryTypes = 'style';
 
 export interface RequestQuery {
 	// our own
 	svelte?: boolean;
 	type?: SvelteQueryTypes;
-	sourcemap?: boolean;
-	compilerOptions?: Pick<
-		CompileOptions,
-		'generate' | 'dev' | 'css' | 'customElement' | 'immutable'
-	>;
 	// vite specific
 	url?: boolean;
 	raw?: boolean;

package/src/types/plugin-api.d.ts

@@ -1,11 +1,18 @@
 import type { ResolvedOptions } from './options.d.ts';
+import type { IdFilter, IdParser } from './id.d.ts';
+import type { CompileSvelte } from './compile.d.ts';
+import type { Environment } from 'vite';
+// eslint-disable-next-line n/no-missing-import
+import { VitePluginSvelteCache } from '../utils/vite-plugin-svelte-cache.js';
+
+interface EnvContext {
+	environment: Environment;
+}
 
 export interface PluginAPI {
-	/**
-	 * must not be modified, should not be used outside of vite-plugin-svelte repo
-	 * @internal
-	 * @experimental
-	 */
-	options?: ResolvedOptions;
-	// TODO expose compile cache here so other utility plugins can use it
+	options: ResolvedOptions;
+	getEnvironmentCache: (arg: EnvContext) => VitePluginSvelteCache;
+	idFilter: IdFilter;
+	idParser: IdParser;
+	compileSvelte: CompileSvelte;
 }