@sveltejs/vite-plugin-svelte 1.0.0-next.8 → 1.0.1

package/src/utils/preprocess.ts

@@ -0,0 +1,252 @@
+import {
+	transformWithEsbuild,
+	ESBuildOptions,
+	ResolvedConfig,
+	TransformResult,
+	Plugin
+} from 'vite';
+import MagicString from 'magic-string';
+import { preprocess } from 'svelte/compiler';
+import { Preprocessor, PreprocessorGroup, Processed, ResolvedOptions } from './options';
+import { TransformPluginContext } from 'rollup';
+import { log } from './log';
+import { buildSourceMap } from './sourcemap';
+import path from 'path';
+
+const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss'];
+
+const supportedScriptLangs = ['ts'];
+
+function createViteScriptPreprocessor(): Preprocessor {
+	return async ({ attributes, content, filename = '' }) => {
+		const lang = attributes.lang as string;
+		if (!supportedScriptLangs.includes(lang)) return;
+		const transformResult = await transformWithEsbuild(content, filename, {
+			loader: lang as ESBuildOptions['loader'],
+			tsconfigRaw: {
+				compilerOptions: {
+					// svelte typescript needs this flag to work with type imports
+					importsNotUsedAsValues: 'preserve',
+					preserveValueImports: true
+				}
+			}
+		});
+		return {
+			code: transformResult.code,
+			map: transformResult.map
+		};
+	};
+}
+
+function createViteStylePreprocessor(config: ResolvedConfig): Preprocessor {
+	const pluginName = 'vite:css';
+	const plugin = config.plugins.find((p) => p.name === pluginName);
+	if (!plugin) {
+		throw new Error(`failed to find plugin ${pluginName}`);
+	}
+	if (!plugin.transform) {
+		throw new Error(`plugin ${pluginName} has no transform`);
+	}
+	const pluginTransform = plugin.transform!.bind(null as unknown as TransformPluginContext);
+	return async ({ attributes, content, filename = '' }) => {
+		const lang = attributes.lang as string;
+		if (!supportedStyleLangs.includes(lang)) return;
+		const moduleId = `${filename}.${lang}`;
+		const transformResult: TransformResult = (await pluginTransform(
+			content,
+			moduleId
+		)) as TransformResult;
+		// patch sourcemap source to point back to original filename
+		if (transformResult.map?.sources?.[0] === moduleId) {
+			transformResult.map.sources[0] = path.basename(filename);
+		}
+		return {
+			code: transformResult.code,
+			map: transformResult.map ?? undefined
+		};
+	};
+}
+
+function createVitePreprocessorGroup(config: ResolvedConfig): PreprocessorGroup {
+	return {
+		markup({ content, filename }) {
+			return preprocess(
+				content,
+				{
+					script: createViteScriptPreprocessor(),
+					style: createViteStylePreprocessor(config)
+				},
+				{ filename }
+			);
+		}
+	} as PreprocessorGroup;
+}
+
+/**
+ * this appends a *{} rule to component styles to force the svelte compiler to add style classes to all nodes
+ * That means adding/removing class rules from <style> node won't trigger js updates as the scope classes are not changed
+ *
+ * only used during dev with enabled css hmr
+ */
+function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
+	return {
+		style({ content, filename }) {
+			const s = new MagicString(content);
+			s.append(' *{}');
+			return {
+				code: s.toString(),
+				map: s.generateDecodedMap({
+					source: filename ? path.basename(filename) : undefined,
+					hires: true
+				})
+			};
+		}
+	};
+}
+
+function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
+	const prependPreprocessors: PreprocessorGroup[] = [];
+	const appendPreprocessors: PreprocessorGroup[] = [];
+
+	if (options.experimental?.useVitePreprocess) {
+		log.debug('adding vite preprocessor');
+		prependPreprocessors.push(createVitePreprocessorGroup(config));
+	}
+
+	// @ts-ignore
+	const pluginsWithPreprocessorsDeprecated = config.plugins.filter((p) => p?.sveltePreprocess);
+	if (pluginsWithPreprocessorsDeprecated.length > 0) {
+		log.warn(
+			`The following plugins use the deprecated 'plugin.sveltePreprocess' field. Please contact their maintainers and ask them to move it to 'plugin.api.sveltePreprocess': ${pluginsWithPreprocessorsDeprecated
+				.map((p) => p.name)
+				.join(', ')}`
+		);
+		// patch plugin to avoid breaking
+		pluginsWithPreprocessorsDeprecated.forEach((p) => {
+			if (!p.api) {
+				p.api = {};
+			}
+			if (p.api.sveltePreprocess === undefined) {
+				// @ts-ignore
+				p.api.sveltePreprocess = p.sveltePreprocess;
+			} else {
+				log.error(
+					`ignoring plugin.sveltePreprocess of ${p.name} because it already defined plugin.api.sveltePreprocess.`
+				);
+			}
+		});
+	}
+
+	const pluginsWithPreprocessors: Plugin[] = config.plugins.filter((p) => p?.api?.sveltePreprocess);
+	const ignored: Plugin[] = [],
+		included: Plugin[] = [];
+	for (const p of pluginsWithPreprocessors) {
+		if (
+			options.ignorePluginPreprocessors === true ||
+			(Array.isArray(options.ignorePluginPreprocessors) &&
+				options.ignorePluginPreprocessors?.includes(p.name))
+		) {
+			ignored.push(p);
+		} else {
+			included.push(p);
+		}
+	}
+	if (ignored.length > 0) {
+		log.debug(
+			`Ignoring svelte preprocessors defined by these vite plugins: ${ignored
+				.map((p) => p.name)
+				.join(', ')}`
+		);
+	}
+	if (included.length > 0) {
+		log.debug(
+			`Adding svelte preprocessors defined by these vite plugins: ${included
+				.map((p) => p.name)
+				.join(', ')}`
+		);
+		appendPreprocessors.push(...pluginsWithPreprocessors.map((p) => p.api.sveltePreprocess));
+	}
+
+	if (options.hot && options.emitCss) {
+		appendPreprocessors.push(createInjectScopeEverythingRulePreprocessorGroup());
+	}
+
+	return { prependPreprocessors, appendPreprocessors };
+}
+
+export function addExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
+	const { prependPreprocessors, appendPreprocessors } = buildExtraPreprocessors(options, config);
+	if (prependPreprocessors.length > 0 || appendPreprocessors.length > 0) {
+		if (!options.preprocess) {
+			options.preprocess = [...prependPreprocessors, ...appendPreprocessors];
+		} else if (Array.isArray(options.preprocess)) {
+			options.preprocess.unshift(...prependPreprocessors);
+			options.preprocess.push(...appendPreprocessors);
+		} else {
+			options.preprocess = [...prependPreprocessors, options.preprocess, ...appendPreprocessors];
+		}
+	}
+	const generateMissingSourceMaps = !!options.experimental?.generateMissingPreprocessorSourcemaps;
+	if (options.preprocess && generateMissingSourceMaps) {
+		options.preprocess = Array.isArray(options.preprocess)
+			? options.preprocess.map((p, i) => validateSourceMapOutputWrapper(p, i))
+			: validateSourceMapOutputWrapper(options.preprocess, 0);
+	}
+}
+
+function validateSourceMapOutputWrapper(group: PreprocessorGroup, i: number): PreprocessorGroup {
+	const wrapper: PreprocessorGroup = {};
+
+	for (const [processorType, processorFn] of Object.entries(group) as Array<
+		// eslint-disable-next-line no-unused-vars
+		[keyof PreprocessorGroup, (options: { filename?: string; content: string }) => Processed]
+	>) {
+		wrapper[processorType] = async (options) => {
+			const result = await processorFn(options);
+
+			if (result && result.code !== options.content) {
+				let invalidMap = false;
+				if (!result.map) {
+					invalidMap = true;
+					log.warn.enabled &&
+						log.warn.once(
+							`preprocessor at index ${i} did not return a sourcemap for ${processorType} transform`,
+							{
+								filename: options.filename,
+								type: processorType,
+								processor: processorFn.toString()
+							}
+						);
+				} else if ((result.map as any)?.mappings === '') {
+					invalidMap = true;
+					log.warn.enabled &&
+						log.warn.once(
+							`preprocessor at index ${i} returned an invalid empty sourcemap for ${processorType} transform`,
+							{
+								filename: options.filename,
+								type: processorType,
+								processor: processorFn.toString()
+							}
+						);
+				}
+				if (invalidMap) {
+					try {
+						const map = await buildSourceMap(options.content, result.code, options.filename);
+						if (map) {
+							log.debug.enabled &&
+								log.debug(
+									`adding generated sourcemap to preprocesor result for ${options.filename}`
+								);
+							result.map = map;
+						}
+					} catch (e) {
+						log.error(`failed to build sourcemap`, e);
+					}
+				}
+			}
+			return result;
+		};
+	}
+
+	return wrapper;
+}

package/src/utils/resolve.ts

@@ -0,0 +1,57 @@
+import path from 'path';
+import { builtinModules, createRequire } from 'module';
+import { is_common_without_svelte_field, resolveDependencyData } from './dependencies';
+import { VitePluginSvelteCache } from './vite-plugin-svelte-cache';
+
+export function resolveViaPackageJsonSvelte(
+	importee: string,
+	importer: string | undefined,
+	cache: VitePluginSvelteCache
+): string | void {
+	if (
+		importer &&
+		isBareImport(importee) &&
+		!isNodeInternal(importee) &&
+		!is_common_without_svelte_field(importee)
+	) {
+		const cached = cache.getResolvedSvelteField(importee, importer);
+		if (cached) {
+			return cached;
+		}
+		const localRequire = createRequire(importer);
+		const pkgData = resolveDependencyData(importee, localRequire);
+		if (pkgData) {
+			const { pkg, dir } = pkgData;
+			if (pkg.svelte) {
+				const result = path.resolve(dir, pkg.svelte);
+				cache.setResolvedSvelteField(importee, importer, result);
+				return result;
+			}
+		}
+	}
+}
+
+function isNodeInternal(importee: string) {
+	return importee.startsWith('node:') || builtinModules.includes(importee);
+}
+
+function isBareImport(importee: string): boolean {
+	if (
+		!importee ||
+		importee[0] === '.' ||
+		importee[0] === '\0' ||
+		importee.includes(':') ||
+		path.isAbsolute(importee)
+	) {
+		return false;
+	}
+	const parts = importee.split('/');
+	switch (parts.length) {
+		case 1:
+			return true;
+		case 2:
+			return parts[0].startsWith('@');
+		default:
+			return false;
+	}
+}

package/src/utils/sourcemap.ts

@@ -0,0 +1,58 @@
+import MagicString, { MagicStringOptions } from 'magic-string';
+import { log } from './log';
+
+export async function buildMagicString(
+	from: string,
+	to: string,
+	options?: MagicStringOptions
+): Promise<MagicString | null> {
+	let diff_match_patch, DIFF_DELETE: number, DIFF_INSERT: number;
+	try {
+		const dmpPkg = await import('diff-match-patch');
+		diff_match_patch = dmpPkg.diff_match_patch;
+		DIFF_INSERT = dmpPkg.DIFF_INSERT;
+		DIFF_DELETE = dmpPkg.DIFF_DELETE;
+	} catch (e) {
+		log.error.once(
+			'Failed to import optional dependency "diff-match-patch". Please install it to enable generated sourcemaps.'
+		);
+		return null;
+	}
+
+	const dmp = new diff_match_patch();
+	const diffs = dmp.diff_main(from, to);
+	dmp.diff_cleanupSemantic(diffs);
+	const m = new MagicString(from, options);
+	let pos = 0;
+	for (let i = 0; i < diffs.length; i++) {
+		const diff = diffs[i];
+		const nextDiff = diffs[i + 1];
+		if (diff[0] === DIFF_DELETE) {
+			if (nextDiff?.[0] === DIFF_INSERT) {
+				// delete followed by insert, use overwrite and skip ahead
+				m.overwrite(pos, pos + diff[1].length, nextDiff[1]);
+				i++;
+			} else {
+				m.remove(pos, pos + diff[1].length);
+			}
+			pos += diff[1].length;
+		} else if (diff[0] === DIFF_INSERT) {
+			if (nextDiff) {
+				m.appendRight(pos, diff[1]);
+			} else {
+				m.append(diff[1]);
+			}
+		} else {
+			// unchanged block, advance pos
+			pos += diff[1].length;
+		}
+	}
+	// at this point m.toString() === to
+	return m;
+}
+
+export async function buildSourceMap(from: string, to: string, filename?: string) {
+	// @ts-ignore
+	const m = await buildMagicString(from, to, { filename });
+	return m ? m.generateDecodedMap({ source: filename, hires: true, includeContent: false }) : null;
+}

package/src/utils/vite-plugin-svelte-cache.ts

@@ -0,0 +1,127 @@
+import { SvelteRequest } from './id';
+import { Code, CompileData } from './compile';
+
+export class VitePluginSvelteCache {
+	private _css = new Map<string, Code>();
+	private _js = new Map<string, Code>();
+	private _dependencies = new Map<string, string[]>();
+	private _dependants = new Map<string, Set<string>>();
+	private _resolvedSvelteFields = new Map<string, string>();
+	private _errors = new Map<string, any>();
+
+	public update(compileData: CompileData) {
+		this._errors.delete(compileData.normalizedFilename);
+		this.updateCSS(compileData);
+		this.updateJS(compileData);
+		this.updateDependencies(compileData);
+	}
+
+	public has(svelteRequest: SvelteRequest) {
+		const id = svelteRequest.normalizedFilename;
+		return this._errors.has(id) || this._js.has(id) || this._css.has(id);
+	}
+
+	public setError(svelteRequest: SvelteRequest, error: any) {
+		// keep dependency info, otherwise errors in dependants would not trigger an update after fixing
+		// because they are no longer watched
+		this.remove(svelteRequest, true);
+		this._errors.set(svelteRequest.normalizedFilename, error);
+	}
+
+	private updateCSS(compileData: CompileData) {
+		this._css.set(compileData.normalizedFilename, compileData.compiled.css);
+	}
+
+	private updateJS(compileData: CompileData) {
+		if (!compileData.ssr) {
+			// do not cache SSR js
+			this._js.set(compileData.normalizedFilename, compileData.compiled.js);
+		}
+	}
+
+	private updateDependencies(compileData: CompileData) {
+		const id = compileData.normalizedFilename;
+		const prevDependencies = this._dependencies.get(id) || [];
+		const dependencies = compileData.dependencies;
+		this._dependencies.set(id, dependencies);
+		const removed = prevDependencies.filter((d) => !dependencies.includes(d));
+		const added = dependencies.filter((d) => !prevDependencies.includes(d));
+		added.forEach((d) => {
+			if (!this._dependants.has(d)) {
+				this._dependants.set(d, new Set<string>());
+			}
+			this._dependants.get(d)!.add(compileData.filename);
+		});
+		removed.forEach((d) => {
+			this._dependants.get(d)!.delete(compileData.filename);
+		});
+	}
+
+	public remove(svelteRequest: SvelteRequest, keepDependencies: boolean = false): boolean {
+		const id = svelteRequest.normalizedFilename;
+		let removed = false;
+		if (this._errors.delete(id)) {
+			removed = true;
+		}
+		if (this._js.delete(id)) {
+			removed = true;
+		}
+		if (this._css.delete(id)) {
+			removed = true;
+		}
+		if (!keepDependencies) {
+			const dependencies = this._dependencies.get(id);
+			if (dependencies) {
+				removed = true;
+				dependencies.forEach((d) => {
+					const dependants = this._dependants.get(d);
+					if (dependants && dependants.has(svelteRequest.filename)) {
+						dependants.delete(svelteRequest.filename);
+					}
+				});
+				this._dependencies.delete(id);
+			}
+		}
+
+		return removed;
+	}
+
+	public getCSS(svelteRequest: SvelteRequest) {
+		return this._css.get(svelteRequest.normalizedFilename);
+	}
+
+	public getJS(svelteRequest: SvelteRequest) {
+		if (!svelteRequest.ssr) {
+			// SSR js isn't cached
+			return this._js.get(svelteRequest.normalizedFilename);
+		}
+	}
+
+	public getError(svelteRequest: SvelteRequest) {
+		return this._errors.get(svelteRequest.normalizedFilename);
+	}
+
+	public getDependants(path: string): string[] {
+		const dependants = this._dependants.get(path);
+		return dependants ? [...dependants] : [];
+	}
+
+	public getResolvedSvelteField(name: string, importer?: string): string | void {
+		return this._resolvedSvelteFields.get(this._getResolvedSvelteFieldKey(name, importer));
+	}
+
+	public setResolvedSvelteField(
+		importee: string,
+		importer: string | undefined = undefined,
+		resolvedSvelte: string
+	) {
+		this._resolvedSvelteFields.set(
+			this._getResolvedSvelteFieldKey(importee, importer),
+			resolvedSvelte
+		);
+	}
+
+	private _getResolvedSvelteFieldKey(importee: string, importer?: string): string {
+		return importer ? `${importer} > ${importee}` : importee;
+	}
+}

package/src/utils/watch.ts

@@ -0,0 +1,110 @@
+import { VitePluginSvelteCache } from './vite-plugin-svelte-cache';
+import fs from 'fs';
+import { log } from './log';
+import { IdParser } from './id';
+import { ResolvedOptions } from './options';
+import { knownSvelteConfigNames } from './load-svelte-config';
+import path from 'path';
+import { FSWatcher } from 'vite';
+
+export function setupWatchers(
+	options: ResolvedOptions,
+	cache: VitePluginSvelteCache,
+	requestParser: IdParser
+) {
+	const { server, configFile: svelteConfigFile } = options;
+	if (!server) {
+		return;
+	}
+	const { watcher, ws } = server;
+	const { root, server: serverConfig } = server.config;
+
+	const emitChangeEventOnDependants = (filename: string) => {
+		const dependants = cache.getDependants(filename);
+		dependants.forEach((dependant) => {
+			if (fs.existsSync(dependant)) {
+				log.debug(
+					`emitting virtual change event for "${dependant}" because depdendency "${filename}" changed`
+				);
+				watcher.emit('change', dependant);
+			}
+		});
+	};
+
+	const removeUnlinkedFromCache = (filename: string) => {
+		const svelteRequest = requestParser(filename, false);
+		if (svelteRequest) {
+			const removedFromCache = cache.remove(svelteRequest);
+			if (removedFromCache) {
+				log.debug(`cleared VitePluginSvelteCache for deleted file ${filename}`);
+			}
+		}
+	};
+
+	const triggerViteRestart = (filename: string) => {
+		if (serverConfig.middlewareMode) {
+			// in middlewareMode we can't restart the server automatically
+			// show the user an overlay instead
+			const message =
+				'Svelte config change detected, restart your dev process to apply the changes.';
+			log.info(message, filename);
+			ws.send({
+				type: 'error',
+				err: { message, stack: '', plugin: 'vite-plugin-svelte', id: filename }
+			});
+		} else {
+			log.info(`svelte config changed: restarting vite server. - file: ${filename}`);
+			server.restart();
+		}
+	};
+
+	// collection of watcher listeners by event
+	const listenerCollection = {
+		add: [] as Array<Function>,
+		change: [emitChangeEventOnDependants],
+		unlink: [removeUnlinkedFromCache, emitChangeEventOnDependants]
+	};
+
+	if (svelteConfigFile !== false) {
+		// configFile false means we ignore the file and external process is responsible
+		const possibleSvelteConfigs = knownSvelteConfigNames.map((cfg) => path.join(root, cfg));
+		const restartOnConfigAdd = (filename: string) => {
+			if (possibleSvelteConfigs.includes(filename)) {
+				triggerViteRestart(filename);
+			}
+		};
+
+		const restartOnConfigChange = (filename: string) => {
+			if (filename === svelteConfigFile) {
+				triggerViteRestart(filename);
+			}
+		};
+
+		if (svelteConfigFile) {
+			listenerCollection.change.push(restartOnConfigChange);
+			listenerCollection.unlink.push(restartOnConfigChange);
+		} else {
+			listenerCollection.add.push(restartOnConfigAdd);
+		}
+	}
+
+	Object.entries(listenerCollection).forEach(([evt, listeners]) => {
+		if (listeners.length > 0) {
+			watcher.on(evt, (filename) => listeners.forEach((listener) => listener(filename)));
+		}
+	});
+}
+// taken from vite utils
+export function ensureWatchedFile(watcher: FSWatcher, file: string | null, root: string): void {
+	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
+		watcher.add(path.resolve(file));
+	}
+}

package/CHANGELOG.md

@@ -1,38 +0,0 @@
-# @sveltejs/vite-plugin-svelte
-
-## 1.0.0-next.8
-
-### Minor Changes
-
-- [#35](https://github.com/sveltejs/vite-plugin-svelte/pull/35) [`4018ce6`](https://github.com/sveltejs/vite-plugin-svelte/commit/4018ce621b4df75877e0e18057c332f27158d42b) Feature: Support esm in svelte.config.js and svelte.config.mjs
-
-* [#35](https://github.com/sveltejs/vite-plugin-svelte/pull/35) [`4018ce6`](https://github.com/sveltejs/vite-plugin-svelte/commit/4018ce621b4df75877e0e18057c332f27158d42b) Feature: add configFile option
-
-### Patch Changes
-
-- [#34](https://github.com/sveltejs/vite-plugin-svelte/pull/34) [`e5d4749`](https://github.com/sveltejs/vite-plugin-svelte/commit/e5d4749c0850260a295daab9cb15866fe58ee709) fix: watch preprocessor dependencies and trigger hmr on change
-
-## 1.0.0-next.7
-
-### Minor Changes
-
-- [#32](https://github.com/sveltejs/vite-plugin-svelte/pull/32) [`113bb7d`](https://github.com/sveltejs/vite-plugin-svelte/commit/113bb7dc330a7517085d12d1d0758a376a12253f) Reduced cache usage, share css cache between SSR and client
-
-## 1.0.0-next.6
-
-### Minor Changes
-
-- 1be46f1: improved css hmr
-- a0f5a65: Allow other vite plugins to define preprocessors
-
-### Patch Changes
-
-- 8d9ef96: fix: do not preserve types unless useVitePreprocess option is true
-- 6f4a253: disable svelte-hmr overlay by default
-- 18647aa: improve virtual css module path (fixes #14)
-
-## 1.0.0-next.5
-
-### Patch Changes
-
-- 61439ae: initial release