@sveltejs/vite-plugin-svelte 2.3.0 → 2.4.1

package/src/utils/{preprocess.ts → preprocess.js}

@@ -1,7 +1,5 @@
-import type { ResolvedConfig, Plugin } from 'vite';
 import MagicString from 'magic-string';
-import { PreprocessorGroup, ResolvedOptions } from './options';
-import { log } from './log';
+import { log } from './log.js';
 import path from 'path';
 
 /**
@@ -9,8 +7,10 @@ import path from 'path';
  * 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
+ *
+ * @returns {import('svelte/types/compiler/preprocess').PreprocessorGroup}
  */
-export function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
+export function createInjectScopeEverythingRulePreprocessorGroup() {
 	return {
 		style({ content, filename }) {
 			const s = new MagicString(content);
@@ -26,9 +26,19 @@ export function createInjectScopeEverythingRulePreprocessorGroup(): Preprocessor
 	};
 }
 
-function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
-	const prependPreprocessors: PreprocessorGroup[] = [];
-	const appendPreprocessors: PreprocessorGroup[] = [];
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {import('vite').ResolvedConfig} config
+ * @returns {{
+ * 	prependPreprocessors: import('svelte/types/compiler/preprocess').PreprocessorGroup[],
+ * 	appendPreprocessors: import('svelte/types/compiler/preprocess').PreprocessorGroup[]
+ * }}
+ */
+function buildExtraPreprocessors(options, config) {
+	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup[]} */
+	const prependPreprocessors = [];
+	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup[]} */
+	const appendPreprocessors = [];
 
 	// @ts-ignore
 	const pluginsWithPreprocessorsDeprecated = config.plugins.filter((p) => p?.sveltePreprocess);
@@ -53,10 +63,12 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 			}
 		});
 	}
-
-	const pluginsWithPreprocessors: Plugin[] = config.plugins.filter((p) => p?.api?.sveltePreprocess);
-	const ignored: Plugin[] = [],
-		included: Plugin[] = [];
+	/** @type {import('vite').Plugin[]} */
+	const pluginsWithPreprocessors = config.plugins.filter((p) => p?.api?.sveltePreprocess);
+	/** @type {import('vite').Plugin[]} */
+	const ignored = [];
+	/** @type {import('vite').Plugin[]} */
+	const included = [];
 	for (const p of pluginsWithPreprocessors) {
 		if (
 			options.ignorePluginPreprocessors === true ||
@@ -87,7 +99,11 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 	return { prependPreprocessors, appendPreprocessors };
 }
 
-export function addExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {import('vite').ResolvedConfig} config
+ */
+export function addExtraPreprocessors(options, config) {
 	const { prependPreprocessors, appendPreprocessors } = buildExtraPreprocessors(options, config);
 	if (prependPreprocessors.length > 0 || appendPreprocessors.length > 0) {
 		if (!options.preprocess) {

package/src/utils/{resolve.ts → resolve.js}

@@ -1,14 +1,15 @@
 import path from 'path';
 import { builtinModules } from 'module';
-import { resolveDependencyData, isCommonDepWithoutSvelteField } from './dependencies';
-import { VitePluginSvelteCache } from './vite-plugin-svelte-cache';
+import { resolveDependencyData, isCommonDepWithoutSvelteField } from './dependencies.js';
 import { normalizePath } from 'vite';
 
-export async function resolveViaPackageJsonSvelte(
-	importee: string,
-	importer: string | undefined,
-	cache: VitePluginSvelteCache
-): Promise<string | void> {
+/**
+ * @param {string} importee
+ * @param {string | undefined} importer
+ * @param {import('./vite-plugin-svelte-cache').VitePluginSvelteCache} cache
+ * @returns {Promise<string | void>}
+ */
+export async function resolveViaPackageJsonSvelte(importee, importer, cache) {
 	if (
 		importer &&
 		isBareImport(importee) &&
@@ -31,11 +32,19 @@ export async function resolveViaPackageJsonSvelte(
 	}
 }
 
-function isNodeInternal(importee: string) {
+/**
+ * @param {string} importee
+ * @returns {boolean}
+ */
+function isNodeInternal(importee) {
 	return importee.startsWith('node:') || builtinModules.includes(importee);
 }
 
-function isBareImport(importee: string): boolean {
+/**
+ * @param {string} importee
+ * @returns {boolean}
+ */
+function isBareImport(importee) {
 	if (
 		!importee ||
 		importee[0] === '.' ||

package/src/utils/{sourcemaps.ts → sourcemaps.js}

@@ -1,30 +1,37 @@
 import path from 'path';
+
 const IS_WINDOWS = process.platform === 'win32';
-interface SourceMapFileRefs {
-	file?: string;
-	sources?: string[];
-	sourceRoot?: string;
-}
+
+/**
+ * @typedef {{
+ *  file?: string;
+ *  sources?: string[];
+ *  sourceRoot?: string;
+ * }} SourceMapFileRefs
+ */
 
 /**
  * convert absolute paths in sourcemap file refs to their relative equivalents to avoid leaking fs info
  *
  * map is modified in place.
  *
- * @param map sourcemap
- * @param filename absolute path to file the sourcemap is for
+ * @param {SourceMapFileRefs | undefined} map sourcemap
+ * @param {string} filename absolute path to file the sourcemap is for
  */
-export function mapToRelative(map: SourceMapFileRefs | undefined, filename: string) {
+export function mapToRelative(map, filename) {
 	if (!map) {
 		return;
 	}
 	const sourceRoot = map.sourceRoot;
 	const dirname = path.dirname(filename);
-	const toRelative = (s: string) => {
+
+	/** @type {(s: string) => string} */
+	const toRelative = (s) => {
 		if (!s) {
 			return s;
 		}
-		let sourcePath: string;
+		/** @type {string} */
+		let sourcePath;
 		if (s.startsWith('file:///')) {
 			// windows has file:///C:/foo and posix has file:///foo, so we have to remove one extra on windows
 			sourcePath = s.slice(IS_WINDOWS ? 8 : 7);
@@ -56,14 +63,15 @@ export function mapToRelative(map: SourceMapFileRefs | undefined, filename: stri
  *
  * map is modified in place.
  *
- * @param map the output sourcemap
- * @param suffix the suffix to remove
+ * @param {SourceMapFileRefs | undefined} map the output sourcemap
+ * @param {string} suffix the suffix to remove
  */
-export function removeLangSuffix(map: SourceMapFileRefs | undefined, suffix: string) {
+export function removeLangSuffix(map, suffix) {
 	if (!map) {
 		return;
 	}
-	const removeSuffix = (s: string) => (s?.endsWith(suffix) ? s.slice(0, -1 * suffix.length) : s);
+	/** @type {(s:string)=> string} */
+	const removeSuffix = (s) => (s?.endsWith(suffix) ? s.slice(0, -1 * suffix.length) : s);
 	if (map.file) {
 		map.file = removeSuffix(map.file);
 	}

package/src/utils/svelte-version.js

@@ -0,0 +1,6 @@
+import { VERSION } from 'svelte/compiler';
+
+/**
+ * @type {boolean}
+ */
+export const isSvelte3 = VERSION.startsWith('3.');

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

@@ -0,0 +1,253 @@
+import { readFileSync } from 'fs';
+import { dirname } from 'path';
+import { findClosestPkgJsonPath } from 'vitefu';
+import { normalizePath } from 'vite';
+
+/**
+ * @typedef {{
+ * 	name: string;
+ * 	version: string;
+ * 	svelte?: string;
+ * 	path: string;
+ * }} PackageInfo
+ */
+
+/**
+ * @class
+ */
+export class VitePluginSvelteCache {
+	/** @type {Map<string, import('../types/compile.d.ts').Code>} */
+	#css = new Map();
+	/** @type {Map<string, import('../types/compile.d.ts').Code>} */
+	#js = new Map();
+	/** @type {Map<string, string[]>} */
+	#dependencies = new Map();
+	/** @type {Map<string, Set<string>>} */
+	#dependants = new Map();
+	/** @type {Map<string, string>} */
+	#resolvedSvelteFields = new Map();
+	/** @type {Map<string, any>} */
+	#errors = new Map();
+	/** @type {PackageInfo[]} */
+	#packageInfos = [];
+
+	/**
+	 * @param {import('../types/compile.d.ts').CompileData} compileData
+	 */
+	update(compileData) {
+		this.#errors.delete(compileData.normalizedFilename);
+		this.#updateCSS(compileData);
+		this.#updateJS(compileData);
+		this.#updateDependencies(compileData);
+	}
+
+	/**
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @returns {boolean}
+	 */
+	has(svelteRequest) {
+		const id = svelteRequest.normalizedFilename;
+		return this.#errors.has(id) || this.#js.has(id) || this.#css.has(id);
+	}
+
+	/**
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @param {any} error
+	 */
+	setError(svelteRequest, error) {
+		// 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);
+	}
+
+	/**
+	 * @param {import('../types/compile.d.ts').CompileData} compileData
+	 */
+	#updateCSS(compileData) {
+		this.#css.set(compileData.normalizedFilename, compileData.compiled.css);
+	}
+
+	/**
+	 * @param {import('../types/compile.d.ts').CompileData} compileData
+	 */
+	#updateJS(compileData) {
+		if (!compileData.ssr) {
+			// do not cache SSR js
+			this.#js.set(compileData.normalizedFilename, compileData.compiled.js);
+		}
+	}
+
+	/**
+	 * @param {import('../types/compile.d.ts').CompileData} compileData
+	 */
+	#updateDependencies(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());
+			}
+			/** @type {Set<string>} */ (this.#dependants.get(d)).add(compileData.filename);
+		});
+		removed.forEach((d) => {
+			/** @type {Set<string>} */ (this.#dependants.get(d)).delete(compileData.filename);
+		});
+	}
+
+	/**
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @param {boolean} [keepDependencies]
+	 * @returns {boolean}
+	 */
+	remove(svelteRequest, keepDependencies = false) {
+		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;
+	}
+
+	/**
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @returns {import('../types/compile.d.ts').Code | undefined}
+	 */
+	getCSS(svelteRequest) {
+		return this.#css.get(svelteRequest.normalizedFilename);
+	}
+
+	/**
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @returns {import('../types/compile.d.ts').Code | undefined}
+	 */
+	getJS(svelteRequest) {
+		if (!svelteRequest.ssr) {
+			// SSR js isn't cached
+			return this.#js.get(svelteRequest.normalizedFilename);
+		}
+	}
+	/**
+	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+	 * @returns {any}
+	 */
+	getError(svelteRequest) {
+		return this.#errors.get(svelteRequest.normalizedFilename);
+	}
+
+	/**
+	 * @param {string} path
+	 * @returns {string[]}
+	 */
+	getDependants(path) {
+		const dependants = this.#dependants.get(path);
+		return dependants ? [...dependants] : [];
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} [importer]
+	 * @returns {string|void}
+	 */
+	getResolvedSvelteField(name, importer) {
+		return this.#resolvedSvelteFields.get(this.#getResolvedSvelteFieldKey(name, importer));
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} [importer]
+	 * @returns {boolean}
+	 */
+	hasResolvedSvelteField(name, importer) {
+		return this.#resolvedSvelteFields.has(this.#getResolvedSvelteFieldKey(name, importer));
+	}
+	/**
+	 *
+	 * @param {string} importee
+	 * @param {string | undefined} importer
+	 * @param {string} resolvedSvelte
+	 */
+	setResolvedSvelteField(importee, importer, resolvedSvelte) {
+		this.#resolvedSvelteFields.set(
+			this.#getResolvedSvelteFieldKey(importee, importer),
+			resolvedSvelte
+		);
+	}
+
+	/**
+	 * @param {string} importee
+	 * @param {string | undefined} importer
+	 * @returns {string}
+	 */
+	#getResolvedSvelteFieldKey(importee, importer) {
+		return importer ? `${importer} > ${importee}` : importee;
+	}
+
+	/**
+	 * @param {string} file
+	 * @returns {Promise<PackageInfo>}
+	 */
+	async getPackageInfo(file) {
+		let info = this.#packageInfos.find((pi) => file.startsWith(pi.path));
+		if (!info) {
+			info = await findPackageInfo(file);
+			this.#packageInfos.push(info);
+		}
+		return info;
+	}
+}
+
+/**
+ * utility to get some info from the closest package.json with a "name" set
+ *
+ * @param {string} file to find info for
+ * @returns {Promise<PackageInfo>}
+ */
+async function findPackageInfo(file) {
+	/** @type {PackageInfo} */
+	const info = {
+		name: '$unknown',
+		version: '0.0.0-unknown',
+		path: '$unknown'
+	};
+	let path = await findClosestPkgJsonPath(file, (pkgPath) => {
+		const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+		if (pkg.name != null) {
+			info.name = pkg.name;
+			if (pkg.version != null) {
+				info.version = pkg.version;
+			}
+			info.svelte = pkg.svelte;
+			return true;
+		}
+		return false;
+	});
+	// return normalized path with appended '/' so .startsWith works for future file checks
+	path = normalizePath(dirname(path ?? file)) + '/';
+	info.path = path;
+	return info;
+}

package/src/utils/{vite-plugin-svelte-stats.ts → vite-plugin-svelte-stats.js}

@@ -1,54 +1,29 @@
-import { log } from './log';
+import { log } from './log.js';
 import { performance } from 'perf_hooks';
 import { normalizePath } from 'vite';
-import { VitePluginSvelteCache } from './vite-plugin-svelte-cache';
 
-interface Stat {
-	file: string;
-	pkg?: string;
-	start: number;
-	end: number;
-}
-
-export interface StatCollection {
-	name: string;
-	options: CollectionOptions;
-	//eslint-disable-next-line no-unused-vars
-	start: (file: string) => () => void;
-	stats: Stat[];
-	packageStats?: PackageStats[];
-	collectionStart: number;
-	duration?: number;
-	finish: () => Promise<void> | void;
-	finished: boolean;
-}
-
-interface PackageStats {
-	pkg: string;
-	files: number;
-	duration: number;
-}
-
-export interface CollectionOptions {
-	//eslint-disable-next-line no-unused-vars
-	logInProgress: (collection: StatCollection, now: number) => boolean;
-	//eslint-disable-next-line no-unused-vars
-	logResult: (collection: StatCollection) => boolean;
-}
-
-const defaultCollectionOptions: CollectionOptions = {
+/** @type {import('../types/vite-plugin-svelte-stats.d.ts').CollectionOptions} */
+const defaultCollectionOptions = {
 	// log after 500ms and more than one file processed
 	logInProgress: (c, now) => now - c.collectionStart > 500 && c.stats.length > 1,
 	// always log results
 	logResult: () => true
 };
 
-function humanDuration(n: number) {
+/**
+ * @param {number} n
+ * @returns
+ */
+function humanDuration(n) {
 	// 99.9ms  0.10s
 	return n < 100 ? `${n.toFixed(1)}ms` : `${(n / 1000).toFixed(2)}s`;
 }
 
-function formatPackageStats(pkgStats: PackageStats[]) {
+/**
+ * @param {import('../types/vite-plugin-svelte-stats.d.ts').PackageStats[]} pkgStats
+ * @returns {string}
+ */
+function formatPackageStats(pkgStats) {
 	const statLines = pkgStats.map((pkgStat) => {
 		const duration = pkgStat.duration;
 		const avg = duration / pkgStat.files;
@@ -56,7 +31,7 @@ function formatPackageStats(pkgStats: PackageStats[]) {
 	});
 	statLines.unshift(['package', 'files', 'time', 'avg']);
 	const columnWidths = statLines.reduce(
-		(widths: number[], row) => {
+		(widths, row) => {
 			for (let i = 0; i < row.length; i++) {
 				const cell = row[i];
 				if (widths[i] < cell.length) {
@@ -69,9 +44,9 @@ function formatPackageStats(pkgStats: PackageStats[]) {
 	);
 
 	const table = statLines
-		.map((row: string[]) =>
+		.map((row) =>
 			row
-				.map((cell: string, i: number) => {
+				.map((cell, i) => {
 					if (i === 0) {
 						return cell.padEnd(columnWidths[i], ' ');
 					} else {
@@ -84,23 +59,40 @@ function formatPackageStats(pkgStats: PackageStats[]) {
 	return table;
 }
 
+/**
+ * @class
+ */
 export class VitePluginSvelteStats {
 	// package directory -> package name
-	private _cache: VitePluginSvelteCache;
-	private _collections: StatCollection[] = [];
-	constructor(cache: VitePluginSvelteCache) {
-		this._cache = cache;
+	/** @type {import('./vite-plugin-svelte-cache.js').VitePluginSvelteCache} */
+	#cache;
+	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection[]} */
+	#collections = [];
+
+	/**
+	 * @param {import('./vite-plugin-svelte-cache.js').VitePluginSvelteCache} cache
+	 */
+	constructor(cache) {
+		this.#cache = cache;
 	}
-	startCollection(name: string, opts?: Partial<CollectionOptions>) {
+
+	/**
+	 * @param {string} name
+	 * @param {Partial<import('../types/vite-plugin-svelte-stats.d.ts').CollectionOptions>} [opts]
+	 * @returns {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection}
+	 */
+	startCollection(name, opts) {
 		const options = {
 			...defaultCollectionOptions,
 			...opts
 		};
-		const stats: Stat[] = [];
+		/** @type {import('../types/vite-plugin-svelte-stats.d.ts').Stat[]} */
+		const stats = [];
 		const collectionStart = performance.now();
 		const _this = this;
 		let hasLoggedProgress = false;
-		const collection: StatCollection = {
+		/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} */
+		const collection = {
 			name,
 			options,
 			stats,
@@ -112,7 +104,8 @@ export class VitePluginSvelteStats {
 				}
 				file = normalizePath(file);
 				const start = performance.now();
-				const stat: Stat = { file, start, end: start };
+				/** @type {import('../types/vite-plugin-svelte-stats.d.ts').Stat} */
+				const stat = { file, start, end: start };
 				return () => {
 					const now = performance.now();
 					stat.end = now;
@@ -124,34 +117,41 @@ export class VitePluginSvelteStats {
 				};
 			},
 			async finish() {
-				await _this._finish(collection);
+				await _this.#finish(collection);
 			}
 		};
-		_this._collections.push(collection);
+		_this.#collections.push(collection);
 		return collection;
 	}
 
-	public async finishAll() {
-		await Promise.all(this._collections.map((c) => c.finish()));
+	async finishAll() {
+		await Promise.all(this.#collections.map((c) => c.finish()));
 	}
 
-	private async _finish(collection: StatCollection) {
+	/**
+	 * @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} collection
+	 */
+	async #finish(collection) {
 		try {
 			collection.finished = true;
 			const now = performance.now();
 			collection.duration = now - collection.collectionStart;
 			const logResult = collection.options.logResult(collection);
 			if (logResult) {
-				await this._aggregateStatsResult(collection);
+				await this.#aggregateStatsResult(collection);
 				log.debug(
-					`${collection.name} done.\n${formatPackageStats(collection.packageStats!)}`,
+					`${collection.name} done.\n${formatPackageStats(
+						/** @type {import('../types/vite-plugin-svelte-stats.d.ts').PackageStats[]}*/ (
+							collection.packageStats
+						)
+					)}`,
 					undefined,
 					'stats'
 				);
 			}
 			// cut some ties to free it for garbage collection
-			const index = this._collections.indexOf(collection);
-			this._collections.splice(index, 1);
+			const index = this.#collections.indexOf(collection);
+			this.#collections.splice(index, 1);
 			collection.stats.length = 0;
 			collection.stats = [];
 			if (collection.packageStats) {
@@ -166,16 +166,20 @@ export class VitePluginSvelteStats {
 		}
 	}
 
-	private async _aggregateStatsResult(collection: StatCollection) {
+	/**
+	 * @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} collection
+	 */
+	async #aggregateStatsResult(collection) {
 		const stats = collection.stats;
 		for (const stat of stats) {
-			stat.pkg = (await this._cache.getPackageInfo(stat.file)).name;
+			stat.pkg = (await this.#cache.getPackageInfo(stat.file)).name;
 		}
 
 		// group stats
-		const grouped: { [key: string]: PackageStats } = {};
+		/** @type {Record<string, import('../types/vite-plugin-svelte-stats.d.ts').PackageStats>} */
+		const grouped = {};
 		stats.forEach((stat) => {
-			const pkg = stat.pkg!;
+			const pkg = /** @type {string} */ (stat.pkg);
 			let group = grouped[pkg];
 			if (!group) {
 				group = grouped[pkg] = {