@rsvelte/vite-plugin-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 [these people](https://github.com/sveltejs/vite-plugin-svelte/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @sveltejs/vite-plugin-svelte
+
+The official [Svelte](https://svelte.dev) plugin for [Vite](https://vitejs.dev).
+
+## Usage
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      /* plugin options */
+    })
+  ]
+});
+```
+
+## Documentation
+
+- [Plugin options](../../docs/config.md)
+- [FAQ](../../docs/faq.md)
+
+## License
+
+[MIT](./LICENSE)

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@rsvelte/vite-plugin-svelte",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "dominikg",
+  "files": [
+    "src",
+    "types"
+  ],
+  "type": "module",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "scripts": {
+    "check:publint": "publint --strict",
+    "check:types": "tsc --noEmit",
+    "generate:types": "dts-buddy -m \"@rsvelte/vite-plugin-svelte:src/public.d.ts\""
+  },
+  "engines": {
+    "node": "^20.19 || ^22.12 || >=24"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/baseballyama/vite-plugin-svelte.git",
+    "directory": "packages/vite-plugin-svelte"
+  },
+  "keywords": [
+    "vite-plugin",
+    "vite plugin",
+    "vite",
+    "svelte"
+  ],
+  "bugs": {
+    "url": "https://github.com/baseballyama/vite-plugin-svelte/issues"
+  },
+  "homepage": "https://github.com/baseballyama/vite-plugin-svelte#readme",
+  "dependencies": {
+    "@rsvelte/compiler": ">=0.1.0",
+    "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
+    "deepmerge": "^4.3.1",
+    "magic-string": "^0.30.21",
+    "obug": "^2.1.0",
+    "vitefu": "^1.1.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "vite": "^6.3.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@types/debug": "^4.1.12",
+    "sass": "^1.94.2",
+    "svelte": "^5.45.4",
+    "vite": "^7.2.6"
+  }
+}

package/src/index.js

@@ -0,0 +1,42 @@
+import process from 'node:process';
+import { log } from './utils/log.js';
+import { configure } from './plugins/configure.js';
+import { preprocess } from './plugins/preprocess.js';
+import { compile } from './plugins/compile.js';
+import { loadCompiledCss } from './plugins/load-compiled-css.js';
+import { setupOptimizer } from './plugins/setup-optimizer.js';
+import { compileModule } from './plugins/compile-module.js';
+import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
+import { loadCustom } from './plugins/load-custom.js';
+import { hotUpdate } from './plugins/hot-update.js';
+
+/**
+ * returns a list of plugins to handle svelte files
+ * plugins are named `vite-plugin-svelte:<task>`
+ *
+ * @param {Partial<import('./public.d.ts').Options>} [inlineOptions]
+ * @returns {import('vite').Plugin[]}
+ */
+export function svelte(inlineOptions) {
+	if (process.env.DEBUG != null) {
+		log.setLevel('debug');
+	}
+	/** @type {import('./types/plugin-api.js').PluginAPI} */
+	// @ts-expect-error initialize empty to guard against early use
+	const api = {}; // initialized by configure plugin, used in others
+	return [
+		{ name: 'vite-plugin-svelte' }, // marker for detection logic in other plugins that expect this name
+		configure(api, inlineOptions),
+		setupOptimizer(api),
+		loadCompiledCss(api),
+		loadCustom(api),
+		preprocess(api),
+		compile(api),
+		compileModule(api),
+		hotUpdate(api),
+		svelteInspector()
+	];
+}
+
+export { vitePreprocess } from './preprocess.js';
+export { loadSvelteConfig } from './utils/load-svelte-config.js';

package/src/plugins/compile-module.js

@@ -0,0 +1,130 @@
+import { buildModuleIdFilter, buildModuleIdParser } from '../utils/id.js';
+import * as svelteCompiler from '@rsvelte/compiler';
+import { log, logCompilerWarnings } from '../utils/log.js';
+import { toRollupError } from '../utils/error.js';
+import { isSvelteWithAsync } from '../utils/svelte-version.js';
+
+/**
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function compileModule(api) {
+	/**
+	 * @type {import("../types/options.js").ResolvedOptions}
+	 */
+	let options;
+	/**
+	 * @type {import("../types/id.js").ModuleIdParser}
+	 */
+	let idParser;
+
+	/**
+	 * @type {import('@rsvelte/compiler').ModuleCompileOptions}
+	 */
+	let staticModuleCompileOptions;
+
+	/** @type {import('vite').Plugin} */
+	const plugin = {
+		name: 'vite-plugin-svelte:compile-module',
+		enforce: 'post',
+		async configResolved() {
+			options = api.options;
+			//@ts-expect-error transform defined below but filter not in type
+			plugin.transform.filter = buildModuleIdFilter(options);
+			idParser = buildModuleIdParser(options);
+			staticModuleCompileOptions = filterNonModuleCompilerOptions(options.compilerOptions);
+		},
+		transform: {
+			async handler(code, id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const moduleRequest = idParser(id, ssr);
+				if (!moduleRequest) {
+					return;
+				}
+				const filename = moduleRequest.filename;
+				/** @type {import('@rsvelte/compiler').CompileOptions} */
+				const compileOptions = {
+					...staticModuleCompileOptions,
+					dev: !this.environment.config.isProduction,
+					generate: ssr ? 'server' : 'client',
+					filename
+				};
+				const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
+					filename,
+					code,
+					compileOptions
+				});
+				if (dynamicCompileOptions && log.debug.enabled) {
+					log.debug(
+						`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`,
+						undefined,
+						'compileModule'
+					);
+				}
+				const finalCompileOptions = dynamicCompileOptions
+					? {
+							...compileOptions,
+							...dynamicCompileOptions
+						}
+					: compileOptions;
+				if (dynamicCompileOptions?.experimental) {
+					finalCompileOptions.experimental = {
+						...compileOptions.experimental,
+						...dynamicCompileOptions.experimental
+					};
+				}
+				const finalModuleCompileOptions = filterNonModuleCompilerOptions(finalCompileOptions);
+				if (log.debug.enabled) {
+					log.debug(
+						`final ModuleCompileOptions for  ${filename}: ${JSON.stringify(finalModuleCompileOptions)}`,
+						undefined,
+						'compileModule'
+					);
+				}
+				try {
+					const compileResult = svelteCompiler.compileModule(code, finalModuleCompileOptions);
+					logCompilerWarnings(moduleRequest, compileResult.warnings, options);
+					return compileResult.js;
+				} catch (e) {
+					throw toRollupError(e, options);
+				}
+			}
+		}
+	};
+	return plugin;
+}
+
+/**
+ *
+ * @param {import('@rsvelte/compiler').CompileOptions} compilerOptions
+ * @return {import('@rsvelte/compiler').ModuleCompileOptions}
+ */
+function filterNonModuleCompilerOptions(compilerOptions) {
+	/** @type {Array<keyof import('@rsvelte/compiler').ModuleCompileOptions>} */
+	const knownModuleCompileOptionNames = ['dev', 'generate', 'filename', 'rootDir', 'warningFilter'];
+	if (isSvelteWithAsync) {
+		knownModuleCompileOptionNames.push('experimental');
+	}
+	// not typed but this is temporary until svelte itself ignores CompileOptions passed to compileModule
+	const experimentalModuleCompilerOptionNames = ['async'];
+
+	/** @type {import('@rsvelte/compiler').ModuleCompileOptions} */
+	const filtered = filterByPropNames(compilerOptions, knownModuleCompileOptionNames);
+	if (filtered.experimental) {
+		filtered.experimental = filterByPropNames(
+			filtered.experimental,
+			experimentalModuleCompilerOptionNames
+		);
+	}
+	return filtered;
+}
+
+/**
+ *
+ * @param {object} o
+ * @param {string[]} names
+ * @returns {object}
+ */
+function filterByPropNames(o, names) {
+	return Object.fromEntries(Object.entries(o).filter(([name]) => names.includes(name)));
+}

package/src/plugins/compile.js

@@ -0,0 +1,65 @@
+import { toRollupError } from '../utils/error.js';
+import { logCompilerWarnings } from '../utils/log.js';
+
+/**
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function compile(api) {
+	/**
+	 * @type {import("../types/options.js").ResolvedOptions}
+	 */
+	let options;
+
+	/**
+	 * @type {import("../types/compile.d.ts").CompileSvelte}
+	 */
+	let compileSvelte;
+	/** @type {import('vite').Plugin} */
+	const plugin = {
+		name: 'vite-plugin-svelte:compile',
+		configResolved() {
+			//@ts-expect-error defined below but filter not in type
+			plugin.transform.filter = api.filter;
+			options = api.options;
+			compileSvelte = api.compileSvelte;
+		},
+		transform: {
+			async handler(code, id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const svelteRequest = api.idParser(id, ssr);
+				if (!svelteRequest || svelteRequest.raw) {
+					return;
+				}
+				let compileData;
+				try {
+					compileData = await compileSvelte(
+						svelteRequest,
+						code,
+						options,
+						this.getCombinedSourcemap()
+					);
+				} catch (e) {
+					throw toRollupError(e, options);
+				}
+				if (compileData.compiled?.warnings) {
+					logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
+				}
+
+				return {
+					...compileData.compiled.js,
+					moduleType: 'js',
+					meta: {
+						vite: {
+							lang: compileData.lang
+						},
+						svelte: {
+							css: compileData.compiled.css
+						}
+					}
+				};
+			}
+		}
+	};
+	return plugin;
+}

package/src/plugins/configure.js

@@ -0,0 +1,97 @@
+import process from 'node:process';
+import { isDebugNamespaceEnabled, log } from '../utils/log.js';
+import * as vite from 'vite';
+import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
+import {
+	buildExtraViteConfig,
+	validateInlineOptions,
+	resolveOptions,
+	preResolveOptions,
+	ensureConfigEnvironmentMainFields,
+	ensureConfigEnvironmentConditions
+} from '../utils/options.js';
+import { buildIdFilter, buildIdParser } from '../utils/id.js';
+import { createCompileSvelte } from '../utils/compile.js';
+
+// @ts-ignore rolldownVersion
+const { version: viteVersion, rolldownVersion } = vite;
+
+/**
+ * @param {Partial<import('../public.d.ts').Options>} [inlineOptions]
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @returns {import('vite').Plugin}
+ */
+export function configure(api, inlineOptions) {
+	if (rolldownVersion) {
+		log.warn.once(
+			`!!! Support for vite 8 beta in vite-plugin-svelte is experimental (rolldown: ${rolldownVersion}, vite: ${viteVersion}) !!!
+			See https://github.com/sveltejs/vite-plugin-svelte/issues/1143 for a list of known issues and to report feedback.`.replace(
+				/\t+/g,
+				'\t'
+			)
+		);
+	}
+
+	validateInlineOptions(inlineOptions);
+
+	/**
+	 * @type {import("../types/options.d.ts").PreResolvedOptions}
+	 */
+	let preOptions;
+
+	/** @type {import('vite').Plugin} */
+	return {
+		name: 'vite-plugin-svelte:config',
+		api,
+		// make sure it runs first
+		enforce: 'pre',
+		config: {
+			order: 'pre',
+			async handler(config, configEnv) {
+				// setup logger
+				if (process.env.DEBUG) {
+					log.setLevel('debug');
+				} else if (config.logLevel) {
+					log.setLevel(config.logLevel);
+				}
+
+				preOptions = await preResolveOptions(inlineOptions, config, configEnv);
+				// extra vite config
+				const extraViteConfig = await buildExtraViteConfig(preOptions, config);
+				log.debug('additional vite config', extraViteConfig, 'config');
+				return extraViteConfig;
+			}
+		},
+		configResolved: {
+			order: 'pre',
+			handler(config) {
+				const options = resolveOptions(preOptions, config);
+				api.options = options;
+				if (isDebugNamespaceEnabled('stats')) {
+					api.options.stats = new VitePluginSvelteStats();
+				}
+
+				api.filter = buildIdFilter(options);
+				api.idFilter = api.filter;
+				api.idParser = buildIdParser(options);
+				api.compileSvelte = createCompileSvelte();
+				log.debug('resolved options', api.options, 'config');
+			}
+		},
+
+		configEnvironment(name, config, opts) {
+			ensureConfigEnvironmentMainFields(name, config, opts);
+			// @ts-expect-error the function above should make `resolve.mainFields` non-nullable
+			config.resolve.mainFields.unshift('svelte');
+
+			ensureConfigEnvironmentConditions(name, config, opts);
+			// @ts-expect-error the function above should make `resolve.conditions` non-nullable
+			config.resolve.conditions.push('svelte');
+		},
+
+		configureServer(server) {
+			const { options } = api;
+			options.server = server;
+		}
+	};
+}

package/src/plugins/hot-update.js

@@ -0,0 +1,196 @@
+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.filter.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.filter.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));
+
+					/** @type {Set<string>} */
+					const seen = new Set();
+					/** @param {string} url */
+					const transformRequest = async (url) => {
+						if (!seen.has(url)) {
+							seen.add(url);
+							await this.environment.transformRequest(url);
+						}
+					};
+
+					// Transform the Svelte component itself first, so that the
+					// CSS cache always gets updated.
+					await transformRequest(svelteRequest.filename);
+
+					for (let i = 0; i < svelteModules.length; i++) {
+						const mod = svelteModules[i];
+						const prev = prevResults[i];
+						await 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, '')
+	);
+}