@rsvelte/vite-plugin-svelte 0.1.0

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

@@ -0,0 +1,66 @@
+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) {
+	let useLocalCache = false;
+
+	/** @type{Map<string,any>} */
+	const buildWatchCssCache = new Map();
+	return {
+		name: 'vite-plugin-svelte:load-compiled-css',
+
+		configResolved(c) {
+			const isDev = c.command === 'serve';
+			const isBuildWatch = !!c.build?.watch;
+			useLocalCache = isDev || isBuildWatch;
+		},
+
+		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;
+				}
+				let cachedCss = this.getModuleInfo(svelteRequest.filename)?.meta.svelte?.css;
+				// in `build --watch` or dev ssr reloads getModuleInfo only returns changed module data.
+				// To ensure virtual css is loaded unchanged, we cache it here separately
+				if (useLocalCache) {
+					if (cachedCss) {
+						buildWatchCssCache.set(svelteRequest.filename, cachedCss);
+					} else {
+						cachedCss = buildWatchCssCache.get(svelteRequest.filename);
+					}
+				}
+
+				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;
+				} else {
+					log.warn(`failed to load virtual css module ${id}`, undefined, 'load');
+				}
+			}
+		}
+	};
+}

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.filter;
+		},
+
+		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,208 @@
+import { toRollupError } from '../utils/error.js';
+import { mapToRelative } from '../utils/sourcemaps.js';
+import * as svelte from '@rsvelte/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) {
+			options = api.options;
+			if (arraify(options.preprocess).length > 0) {
+				preprocessSvelte = createPreprocessSvelte(options, c);
+				// @ts-expect-error defined below but filter not in type
+				plugin.transform.filter = api.filter;
+			} else {
+				log.debug(
+					`disabling ${plugin.name} because no preprocessor is configured`,
+					undefined,
+					'preprocess'
+				);
+				// @ts-expect-error force set undefined to clear memory
+				preprocessSvelte = undefined;
+				// @ts-expect-error defined below but filter not in type
+				plugin.transform.filter = { id: /$./ }; // never match
+			}
+		},
+		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('@rsvelte/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/plugins/setup-optimizer.js

@@ -0,0 +1,340 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { readFileSync } from 'node:fs';
+import * as svelte from '@rsvelte/compiler';
+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
+ * @typedef {NonNullable<EsbuildOptions['plugins']>[number]} EsbuildPlugin
+ */
+/**
+ * @typedef {NonNullable<import('vite').Rollup.Plugin>} RollupPlugin
+ */
+
+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.rolldownOptions = {
+					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.rolldownOptions?.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
+ */
+function patchESBuildOptimizerPlugin(plugin, options) {
+	const components = plugin.name === optimizeSveltePluginName;
+	const compileFn = components ? compileSvelte : compileSvelteModule;
+	const statsName = components ? 'prebundle library components' : 'prebundle library modules';
+	const filter = components ? /\.svelte(?:\?.*)?$/ : /\.svelte\.[jt]s(?:\?.*)?$/;
+	plugin.setup = (build) => {
+		if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
+
+		/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+		let statsCollection;
+		build.onStart(() => {
+			statsCollection = options.stats?.startCollection(statsName, {
+				logResult: (c) => c.stats.length > 1
+			});
+		});
+		build.onLoad({ filter }, async ({ path: filename }) => {
+			const code = readFileSync(filename, 'utf8');
+			try {
+				const result = await compileFn(options, { filename, code }, statsCollection);
+				const contents = result.map
+					? result.code + '//# sourceMappingURL=' + result.map.toUrl()
+					: result.code;
+				return { contents };
+			} catch (e) {
+				return { errors: [toESBuildError(e, options)] };
+			}
+		});
+		build.onEnd(() => {
+			statsCollection?.finish();
+		});
+	};
+}
+
+/**
+ * @param {RollupPlugin} plugin
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ */
+function patchRolldownOptimizerPlugin(plugin, options) {
+	const components = plugin.name === optimizeSveltePluginName;
+	const compileFn = components ? compileSvelte : compileSvelteModule;
+	const statsName = components ? 'prebundle library components' : 'prebundle library modules';
+	const includeRe = components ? /^[^?#]+\.svelte(?:[?#]|$)/ : /^[^?#]+\.svelte\.[jt]s(?:[?#]|$)/;
+	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+	let statsCollection;
+
+	plugin.options = (opts) => {
+		// @ts-expect-error plugins is an array here
+		const isScanner = opts.plugins.some(
+			(/** @type {{ name: string; }} */ p) => p.name === 'vite:dep-scan:resolve'
+		);
+		if (isScanner) {
+			delete plugin.buildStart;
+			delete plugin.transform;
+			delete plugin.buildEnd;
+		} else {
+			plugin.transform = {
+				filter: { id: includeRe },
+				/**
+				 * @param {string} code
+				 * @param {string} filename
+				 */
+				async handler(code, filename) {
+					try {
+						return await compileFn(options, { filename, code }, statsCollection);
+					} catch (e) {
+						throw toRollupError(e, options);
+					}
+				}
+			};
+			plugin.buildStart = () => {
+				statsCollection = options.stats?.startCollection(statsName, {
+					logResult: (c) => c.stats.length > 1
+				});
+			};
+			plugin.buildEnd = () => {
+				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<import('../types/compile.d.ts').Code>}
+ */
+async function compileSvelte(options, { filename, code }, statsCollection) {
+	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
+		css = 'injected';
+	}
+	/** @type {import('@rsvelte/compiler').CompileOptions} */
+	const compileOptions = {
+		dev: true, // default to dev: true because prebundling is only used in dev
+		...options.compilerOptions,
+		css,
+		filename,
+		generate: 'client'
+	};
+
+	if (compileOptions.hmr && options.emitCss) {
+		const hash = `s-${safeBase64Hash(normalize(filename, options.root))}`;
+		compileOptions.cssHash = () => hash;
+	}
+
+	let preprocessed;
+
+	if (options.preprocess) {
+		try {
+			preprocessed = await svelte.preprocess(code, options.preprocess, { filename });
+		} catch (e) {
+			e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
+			throw e;
+		}
+		if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
+	}
+
+	const finalCode = preprocessed ? preprocessed.code : code;
+
+	const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
+		filename,
+		code: finalCode,
+		compileOptions
+	});
+
+	if (dynamicCompileOptions && log.debug.enabled) {
+		log.debug(
+			`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`,
+			undefined,
+			'compile'
+		);
+	}
+
+	const finalCompileOptions = dynamicCompileOptions
+		? {
+				...compileOptions,
+				...dynamicCompileOptions
+			}
+		: compileOptions;
+	const endStat = statsCollection?.start(filename);
+	const compiled = svelte.compile(finalCode, finalCompileOptions);
+	if (endStat) {
+		endStat();
+	}
+	return {
+		...compiled.js,
+		moduleType: 'js'
+	};
+}
+
+/**
+ * @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<import('../types/compile.d.ts').Code>}
+ */
+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,
+		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;
+}