@sveltejs/vite-plugin-svelte 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -65,7 +65,7 @@
     "diff-match-patch": "^1.0.5",
     "esbuild": "^0.15.14",
     "rollup": "^2.79.1",
-    "svelte": "3.53.1",
+    "svelte": "^3.53.1",
     "tsup": "^6.5.0",
     "vite": "^3.2.3"
   },

package/src/index.ts

@@ -15,7 +15,6 @@ import {
 	patchResolvedViteConfig,
 	preResolveOptions
 } from './utils/options';
-import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 
 import { ensureWatchedFile, setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
@@ -23,6 +22,7 @@ import { PartialResolvedId } from 'rollup';
 import { toRollupError } from './utils/error';
 import { saveSvelteMetadata } from './utils/optimizer';
 import { svelteInspector } from './ui/inspector/plugin';
+import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 
 interface PluginAPI {
 	/**
@@ -228,6 +228,9 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 						throw toRollupError(e, options);
 					}
 				}
+			},
+			async buildEnd() {
+				await options.stats?.finishAll();
 			}
 		}
 	];

package/src/utils/compile.ts

@@ -5,11 +5,13 @@ import { createMakeHot } from 'svelte-hmr';
 import { SvelteRequest } from './id';
 import { safeBase64Hash } from './hash';
 import { log } from './log';
+import { StatCollection } from './vite-plugin-svelte-stats';
 
 const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
-const _createCompileSvelte = (makeHot: Function) =>
-	async function compileSvelte(
+const _createCompileSvelte = (makeHot: Function) => {
+	let stats: StatCollection | undefined;
+	return async function compileSvelte(
 		svelteRequest: SvelteRequest,
 		code: string,
 		options: Partial<ResolvedOptions>
@@ -18,6 +20,31 @@ const _createCompileSvelte = (makeHot: Function) =>
 		const { emitCss = true } = options;
 		const dependencies = [];
 
+		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'} compile`, {
+						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 compile');
+				}
+				// 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
+			}
+		}
+
 		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
 			filename,
@@ -67,7 +94,13 @@ const _createCompileSvelte = (makeHot: Function) =>
 					...dynamicCompileOptions
 			  }
 			: compileOptions;
+
+		const endStat = stats?.start(filename);
 		const compiled = compile(finalCode, finalCompileOptions);
+		if (endStat) {
+			endStat();
+		}
+
 		const hasCss = compiled.css?.code?.trim().length > 0;
 		// compiler might not emit css with mode none or it may be empty
 		if (emitCss && hasCss) {
@@ -99,7 +132,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 			dependencies
 		};
 	};
-
+};
 function buildMakeHot(options: ResolvedOptions) {
 	const needsMakeHot = options.hot !== false && options.isServe && !options.isProduction;
 	if (needsMakeHot) {

package/src/utils/constants.ts

@@ -18,3 +18,5 @@ export const SVELTE_HMR_IMPORTS = [
 	'svelte-hmr/runtime/proxy-adapter-dom.js',
 	'svelte-hmr'
 ];
+
+export const SVELTE_EXPORT_CONDITIONS = ['svelte'];

package/src/utils/esbuild.ts

@@ -1,4 +1,4 @@
-import { promises as fs } from 'fs';
+import { readFileSync } from 'fs';
 import { compile, preprocess } from 'svelte/compiler';
 import { DepOptimizationOptions } from 'vite';
 import { Compiled } from './compile';
@@ -6,6 +6,7 @@ import { log } from './log';
 import { CompileOptions, ResolvedOptions } from './options';
 import { toESBuildError } from './error';
 import { atLeastSvelte } from './svelte-version';
+import { StatCollection } from './vite-plugin-svelte-stats';
 
 type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
 type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
@@ -23,23 +24,32 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 
 			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
 			const svelteFilter = new RegExp(`\\.(` + svelteExtensions.join('|') + `)(\\?.*)?$`);
-
+			let statsCollection: StatCollection | undefined;
+			build.onStart(() => {
+				statsCollection = options.stats?.startCollection('prebundle libraries', {
+					logResult: (c) => c.stats.length > 1
+				});
+			});
 			build.onLoad({ filter: svelteFilter }, async ({ path: filename }) => {
-				const code = await fs.readFile(filename, 'utf8');
+				const code = readFileSync(filename, 'utf8');
 				try {
-					const contents = await compileSvelte(options, { filename, code });
+					const contents = await compileSvelte(options, { filename, code }, statsCollection);
 					return { contents };
 				} catch (e) {
 					return { errors: [toESBuildError(e, options)] };
 				}
 			});
+			build.onEnd(() => {
+				statsCollection?.finish();
+			});
 		}
 	};
 }
 
 async function compileSvelte(
 	options: ResolvedOptions,
-	{ filename, code }: { filename: string; code: string }
+	{ filename, code }: { filename: string; code: string },
+	statsCollection?: StatCollection
 ): Promise<string> {
 	let css = options.compilerOptions.css;
 	if (css !== 'none') {
@@ -83,8 +93,10 @@ async function compileSvelte(
 				...dynamicCompileOptions
 		  }
 		: compileOptions;
-
+	const endStat = statsCollection?.start(filename);
 	const compiled = compile(finalCode, finalCompileOptions) as Compiled;
-
+	if (endStat) {
+		endStat();
+	}
 	return compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl();
 }

package/src/utils/options.ts

@@ -2,7 +2,12 @@
 import { ConfigEnv, ResolvedConfig, UserConfig, ViteDevServer, normalizePath } from 'vite';
 import { log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
-import { SVELTE_HMR_IMPORTS, SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './constants';
+import {
+	SVELTE_EXPORT_CONDITIONS,
+	SVELTE_HMR_IMPORTS,
+	SVELTE_IMPORTS,
+	SVELTE_RESOLVE_MAIN_FIELDS
+} from './constants';
 // eslint-disable-next-line node/no-missing-import
 import type { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
 import type {
@@ -27,6 +32,7 @@ import {
 } from 'vitefu';
 import { atLeastSvelte } from './svelte-version';
 import { isCommonDepWithoutSvelteField } from './dependencies';
+import { VitePluginSvelteStats } from './vite-plugin-svelte-stats';
 
 // svelte 3.53.0 changed compilerOptions.css from boolean to string | boolen, use string when available
 const cssAsString = atLeastSvelte('3.53.0');
@@ -129,9 +135,11 @@ export async function preResolveOptions(
 		...viteUserConfig,
 		root: resolveViteRoot(viteUserConfig)
 	};
+	const isBuild = viteEnv.command === 'build';
 	const defaultOptions: Partial<Options> = {
 		extensions: ['.svelte'],
-		emitCss: true
+		emitCss: true,
+		prebundleSvelteLibraries: !isBuild
 	};
 	const svelteConfig = convertPluginOptions(
 		await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions)
@@ -139,7 +147,7 @@ export async function preResolveOptions(
 
 	const extraOptions: Partial<PreResolvedOptions> = {
 		root: viteConfigWithResolvedRoot.root!,
-		isBuild: viteEnv.command === 'build',
+		isBuild,
 		isServe: viteEnv.command === 'serve',
 		isDebug: process.env.DEBUG != null
 	};
@@ -203,6 +211,14 @@ export function resolveOptions(
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
+	// mergeConfigs would mangle functions on the stats class, so do this afterwards
+	const isLogLevelInfo = [undefined, 'info'].includes(viteConfig.logLevel);
+	const disableCompileStats = merged.experimental?.disableCompileStats;
+	const statsEnabled =
+		disableCompileStats !== true && disableCompileStats !== (merged.isBuild ? 'build' : 'dev');
+	if (statsEnabled && isLogLevelInfo) {
+		merged.stats = new VitePluginSvelteStats();
+	}
 	return merged;
 }
 
@@ -315,7 +331,8 @@ export async function buildExtraViteConfig(
 	const extraViteConfig: Partial<UserConfig> = {
 		resolve: {
 			mainFields: [...SVELTE_RESOLVE_MAIN_FIELDS],
-			dedupe: [...SVELTE_IMPORTS, ...SVELTE_HMR_IMPORTS]
+			dedupe: [...SVELTE_IMPORTS, ...SVELTE_HMR_IMPORTS],
+			conditions: [...SVELTE_EXPORT_CONDITIONS]
 		}
 		// this option is still awaiting a PR in vite to be supported
 		// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
@@ -358,12 +375,17 @@ export async function buildExtraViteConfig(
 
 	// handle prebundling for svelte files
 	if (options.prebundleSvelteLibraries) {
-		extraViteConfig.optimizeDeps.extensions = options.extensions ?? ['.svelte'];
-		// Add esbuild plugin to prebundle Svelte files.
-		// Currently a placeholder as more information is needed after Vite config is resolved,
-		// the real Svelte plugin is added in `patchResolvedViteConfig()`
-		extraViteConfig.optimizeDeps.esbuildOptions = {
-			plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
+		extraViteConfig.optimizeDeps = {
+			...extraViteConfig.optimizeDeps,
+			// Experimental Vite API to allow these extensions to be scanned and prebundled
+			// @ts-ignore
+			extensions: options.extensions ?? ['.svelte'],
+			// Add esbuild plugin to prebundle Svelte files.
+			// Currently a placeholder as more information is needed after Vite config is resolved,
+			// the real Svelte plugin is added in `patchResolvedViteConfig()`
+			esbuildOptions: {
+				plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
+			}
 		};
 	}
 
@@ -377,9 +399,44 @@ export async function buildExtraViteConfig(
 		log.debug('enabling "experimental.hmrPartialAccept" in vite config');
 		extraViteConfig.experimental = { hmrPartialAccept: true };
 	}
+	validateViteConfig(extraViteConfig, config, options);
 	return extraViteConfig;
 }
 
+function validateViteConfig(
+	extraViteConfig: Partial<UserConfig>,
+	config: UserConfig,
+	options: PreResolvedOptions
+) {
+	const { prebundleSvelteLibraries, isBuild } = options;
+	if (prebundleSvelteLibraries) {
+		const isEnabled = (option: 'dev' | 'build' | boolean) =>
+			option !== true && option !== (isBuild ? 'build' : 'dev');
+		const logWarning = (name: string, value: 'dev' | 'build' | boolean, recommendation: string) =>
+			log.warn.once(
+				`Incompatible options: \`prebundleSvelteLibraries: true\` and vite \`${name}: ${JSON.stringify(
+					value
+				)}\` ${isBuild ? 'during build.' : '.'} ${recommendation}`
+			);
+		const viteOptimizeDepsDisabled = config.optimizeDeps?.disabled ?? 'build'; // fall back to vite default
+		const isOptimizeDepsEnabled = isEnabled(viteOptimizeDepsDisabled);
+		if (!isBuild && !isOptimizeDepsEnabled) {
+			logWarning(
+				'optimizeDeps.disabled',
+				viteOptimizeDepsDisabled,
+				'Forcing `optimizeDeps.disabled: "build"`. Disable prebundleSvelteLibraries or update your vite config to enable optimizeDeps during dev.'
+			);
+			extraViteConfig.optimizeDeps!.disabled = 'build';
+		} else if (isBuild && isOptimizeDepsEnabled) {
+			logWarning(
+				'optimizeDeps.disabled',
+				viteOptimizeDepsDisabled,
+				'Disable optimizeDeps or prebundleSvelteLibraries for build if you experience errors.'
+			);
+		}
+	}
+}
+
 async function buildExtraConfigForDependencies(options: PreResolvedOptions, config: UserConfig) {
 	// extra handling for svelte dependencies in the project
 	const depsConfig = await crawlFrameworkPkgs({
@@ -387,7 +444,17 @@ async function buildExtraConfigForDependencies(options: PreResolvedOptions, conf
 		isBuild: options.isBuild,
 		viteUserConfig: config,
 		isFrameworkPkgByJson(pkgJson) {
-			return !!pkgJson.svelte;
+			let hasSvelteCondition = false;
+			if (typeof pkgJson.exports === 'object') {
+				// use replacer as a simple way to iterate over nested keys
+				JSON.stringify(pkgJson.exports, (key, value) => {
+					if (SVELTE_EXPORT_CONDITIONS.includes(key)) {
+						hasSvelteCondition = true;
+					}
+					return value;
+				});
+			}
+			return hasSvelteCondition || !!pkgJson.svelte;
 		},
 		isSemiFrameworkPkgByJson(pkgJson) {
 			return !!pkgJson.dependencies?.svelte || !!pkgJson.peerDependencies?.svelte;
@@ -551,9 +618,11 @@ export interface PluginOptions {
 	disableDependencyReinclusion?: boolean | string[];
 
 	/**
-	 * Force Vite to pre-bundle Svelte libraries
+	 * Enable support for Vite's dependency optimization to prebundle Svelte libraries.
 	 *
-	 * @default false
+	 * To disable prebundling for a specific library, add it to `optimizeDeps.exclude`.
+	 *
+	 * @default true for dev, false for build
 	 */
 	prebundleSvelteLibraries?: boolean;
 
@@ -655,6 +724,13 @@ export interface ExperimentalOptions {
 	 *
 	 */
 	sendWarningsToBrowser?: boolean;
+
+	/**
+	 * disable svelte compile statistics
+	 *
+	 * @default false
+	 */
+	disableCompileStats?: 'dev' | 'build' | boolean;
 }
 
 export interface InspectorOptions {
@@ -741,6 +817,7 @@ export interface PreResolvedOptions extends Options {
 export interface ResolvedOptions extends PreResolvedOptions {
 	isProduction: boolean;
 	server?: ViteDevServer;
+	stats?: VitePluginSvelteStats;
 }
 
 export type {

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

@@ -0,0 +1,206 @@
+import { log } from './log';
+//eslint-disable-next-line node/no-missing-import
+import { findClosestPkgJsonPath } from 'vitefu';
+import { readFileSync } from 'fs';
+import { performance } from 'perf_hooks';
+
+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 = {
+	// 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) {
+	// 99.9ms  0.10s
+	return n < 100 ? `${n.toFixed(1)}ms` : `${(n / 1000).toFixed(2)}s`;
+}
+
+function formatPackageStats(pkgStats: PackageStats[]) {
+	const statLines = pkgStats.map((pkgStat) => {
+		const duration = pkgStat.duration;
+		const avg = duration / pkgStat.files;
+		return [pkgStat.pkg, `${pkgStat.files}`, humanDuration(duration), humanDuration(avg)];
+	});
+	statLines.unshift(['package', 'files', 'time', 'avg']);
+	const columnWidths = statLines.reduce(
+		(widths: number[], row) => {
+			for (let i = 0; i < row.length; i++) {
+				const cell = row[i];
+				if (widths[i] < cell.length) {
+					widths[i] = cell.length;
+				}
+			}
+			return widths;
+		},
+		statLines[0].map(() => 0)
+	);
+
+	const table = statLines
+		.map((row: string[]) =>
+			row
+				.map((cell: string, i: number) => {
+					if (i === 0) {
+						return cell.padEnd(columnWidths[i], ' ');
+					} else {
+						return cell.padStart(columnWidths[i], ' ');
+					}
+				})
+				.join('\t')
+		)
+		.join('\n');
+	return table;
+}
+
+export class VitePluginSvelteStats {
+	// package directory -> package name
+	private _packages: { path: string; name: string }[] = [];
+	private _collections: StatCollection[] = [];
+	startCollection(name: string, opts?: Partial<CollectionOptions>) {
+		const options = {
+			...defaultCollectionOptions,
+			...opts
+		};
+		const stats: Stat[] = [];
+		const collectionStart = performance.now();
+		const _this = this;
+		let hasLoggedProgress = false;
+		const collection: StatCollection = {
+			name,
+			options,
+			stats,
+			collectionStart,
+			finished: false,
+			start(file) {
+				if (collection.finished) {
+					throw new Error('called after finish() has been used');
+				}
+				const start = performance.now();
+				const stat: Stat = { file, start, end: start };
+				return () => {
+					const now = performance.now();
+					stat.end = now;
+					stats.push(stat);
+					if (!hasLoggedProgress && options.logInProgress(collection, now)) {
+						hasLoggedProgress = true;
+						log.info(`${name} in progress ...`);
+					}
+				};
+			},
+			async finish() {
+				await _this._finish(collection);
+			}
+		};
+		_this._collections.push(collection);
+		return collection;
+	}
+
+	public async finishAll() {
+		await Promise.all(this._collections.map((c) => c.finish()));
+	}
+
+	private async _finish(collection: StatCollection) {
+		collection.finished = true;
+		const now = performance.now();
+		collection.duration = now - collection.collectionStart;
+		const logResult = collection.options.logResult(collection);
+		if (logResult) {
+			await this._aggregateStatsResult(collection);
+			log.info(`${collection.name} done.`, formatPackageStats(collection.packageStats!));
+		}
+		// cut some ties to free it for garbage collection
+		const index = this._collections.indexOf(collection);
+		this._collections.splice(index, 1);
+		collection.stats.length = 0;
+		collection.stats = [];
+		if (collection.packageStats) {
+			collection.packageStats.length = 0;
+			collection.packageStats = [];
+		}
+		collection.start = () => () => {};
+		collection.finish = () => {};
+	}
+
+	private async _aggregateStatsResult(collection: StatCollection) {
+		const stats = collection.stats;
+		for (const stat of stats) {
+			let pkg = this._packages.find((p) => stat.file.startsWith(p.path));
+			if (!pkg) {
+				// check for package.json first
+				let pkgPath = await findClosestPkgJsonPath(stat.file);
+				if (pkgPath) {
+					let path = pkgPath?.replace(/package.json$/, '');
+					let name = JSON.parse(readFileSync(pkgPath, 'utf-8')).name;
+					if (!name) {
+						// some packages have nameless nested package.json
+						pkgPath = await findClosestPkgJsonPath(path);
+						if (pkgPath) {
+							path = pkgPath?.replace(/package.json$/, '');
+							name = JSON.parse(readFileSync(pkgPath, 'utf-8')).name;
+						}
+					}
+					if (path && name) {
+						pkg = { path, name };
+						this._packages.push(pkg);
+					}
+				}
+			}
+			// TODO is it possible that we want to track files where there is no named packge.json as parent?
+			// what do we want to do for that, try to find common root paths for different stats?
+			stat.pkg = pkg?.name ?? '$unknown';
+		}
+
+		// group stats
+		const grouped: { [key: string]: PackageStats } = {};
+		stats.forEach((stat) => {
+			const pkg = stat.pkg!;
+			let group = grouped[pkg];
+			if (!group) {
+				group = grouped[pkg] = {
+					files: 0,
+					duration: 0,
+					pkg
+				};
+			}
+			group.files += 1;
+			group.duration += stat.end - stat.start;
+		});
+
+		const groups = Object.values(grouped);
+		groups.sort((a, b) => b.duration - a.duration);
+		collection.packageStats = groups;
+	}
+}