@sveltejs/vite-plugin-svelte 1.0.0-next.9 → 1.0.2

package/src/utils/compile.ts

@@ -0,0 +1,159 @@
+import { CompileOptions, ResolvedOptions } from './options';
+import { compile, preprocess, walk } from 'svelte/compiler';
+// @ts-ignore
+import { createMakeHot } from 'svelte-hmr';
+import { SvelteRequest } from './id';
+import { safeBase64Hash } from './hash';
+import { log } from './log';
+
+const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
+
+const _createCompileSvelte = (makeHot: Function) =>
+	async function compileSvelte(
+		svelteRequest: SvelteRequest,
+		code: string,
+		options: Partial<ResolvedOptions>
+	): Promise<CompileData> {
+		const { filename, normalizedFilename, cssId, ssr } = svelteRequest;
+		const { emitCss = true } = options;
+		const dependencies = [];
+
+		const compileOptions: CompileOptions = {
+			...options.compilerOptions,
+			filename,
+			generate: ssr ? 'ssr' : 'dom',
+			format: 'esm'
+		};
+		if (options.hot && options.emitCss) {
+			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
+			log.debug(`setting cssHash ${hash} for ${normalizedFilename}`);
+			compileOptions.cssHash = () => hash;
+		}
+		if (ssr && compileOptions.enableSourcemap !== false) {
+			if (typeof compileOptions.enableSourcemap === 'object') {
+				compileOptions.enableSourcemap.css = false;
+			} else {
+				compileOptions.enableSourcemap = { js: true, css: false };
+			}
+		}
+
+		let preprocessed;
+
+		if (options.preprocess) {
+			try {
+				preprocessed = await preprocess(code, options.preprocess, { filename });
+			} catch (e) {
+				e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
+				throw e;
+			}
+
+			if (preprocessed.dependencies) dependencies.push(...preprocessed.dependencies);
+			if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
+		}
+		const finalCode = preprocessed ? preprocessed.code : code;
+		const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
+			filename,
+			code: finalCode,
+			compileOptions
+		});
+		if (dynamicCompileOptions && log.debug.enabled) {
+			log.debug(
+				`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`
+			);
+		}
+		const finalCompileOptions = dynamicCompileOptions
+			? {
+					...compileOptions,
+					...dynamicCompileOptions
+			  }
+			: compileOptions;
+		const compiled = compile(finalCode, finalCompileOptions);
+
+		if (emitCss && compiled.css.code) {
+			// TODO properly update sourcemap?
+			compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
+		}
+
+		// only apply hmr when not in ssr context and hot options are set
+		if (!ssr && makeHot) {
+			compiled.js.code = makeHot({
+				id: filename,
+				compiledCode: compiled.js.code,
+				hotOptions: options.hot,
+				compiled,
+				originalCode: code,
+				compileOptions: finalCompileOptions
+			});
+		}
+
+		compiled.js.dependencies = dependencies;
+
+		return {
+			filename,
+			normalizedFilename,
+			lang: code.match(scriptLangRE)?.[1] || 'js',
+			// @ts-ignore
+			compiled,
+			ssr,
+			dependencies
+		};
+	};
+
+function buildMakeHot(options: ResolvedOptions) {
+	const needsMakeHot = options.hot !== false && options.isServe && !options.isProduction;
+	if (needsMakeHot) {
+		// @ts-ignore
+		const hotApi = options?.hot?.hotApi;
+		// @ts-ignore
+		const adapter = options?.hot?.adapter;
+		return createMakeHot({
+			walk,
+			hotApi,
+			adapter,
+			hotOptions: { noOverlay: true, ...(options.hot as object) }
+		});
+	}
+}
+
+export function createCompileSvelte(options: ResolvedOptions) {
+	const makeHot = buildMakeHot(options);
+	return _createCompileSvelte(makeHot);
+}
+
+export interface Code {
+	code: string;
+	map?: any;
+	dependencies?: any[];
+}
+
+export interface Compiled {
+	js: Code;
+	css: Code;
+	ast: any; // TODO type
+	warnings: any[]; // TODO type
+	vars: {
+		name: string;
+		export_name: string;
+		injected: boolean;
+		module: boolean;
+		mutated: boolean;
+		reassigned: boolean;
+		referenced: boolean;
+		writable: boolean;
+		referenced_from_script: boolean;
+	}[];
+	stats: {
+		timings: {
+			total: number;
+		};
+	};
+}
+
+export interface CompileData {
+	filename: string;
+	normalizedFilename: string;
+	lang: string;
+	compiled: Compiled;
+	ssr: boolean | undefined;
+	dependencies: string[];
+}

package/src/utils/constants.ts

@@ -0,0 +1,20 @@
+const VITE_RESOLVE_MAIN_FIELDS = ['module', 'jsnext:main', 'jsnext'];
+
+export const SVELTE_RESOLVE_MAIN_FIELDS = ['svelte', ...VITE_RESOLVE_MAIN_FIELDS];
+
+export const SVELTE_IMPORTS = [
+	'svelte/animate',
+	'svelte/easing',
+	'svelte/internal',
+	'svelte/motion',
+	'svelte/ssr',
+	'svelte/store',
+	'svelte/transition',
+	'svelte'
+];
+
+export const SVELTE_HMR_IMPORTS = [
+	'svelte-hmr/runtime/hot-api-esm.js',
+	'svelte-hmr/runtime/proxy-adapter-dom.js',
+	'svelte-hmr'
+];

package/src/utils/dependencies.ts

@@ -0,0 +1,241 @@
+import { log } from './log';
+import path from 'path';
+import fs from 'fs';
+import { createRequire } from 'module';
+
+export function findRootSvelteDependencies(root: string, cwdFallback = true): SvelteDependency[] {
+	log.debug(`findSvelteDependencies: searching svelte dependencies in ${root}`);
+	const pkgFile = path.join(root, 'package.json');
+	if (!fs.existsSync(pkgFile)) {
+		if (cwdFallback) {
+			const cwd = process.cwd();
+			if (root !== cwd) {
+				log.debug(`no package.json found in vite root ${root}`);
+				return findRootSvelteDependencies(cwd, false);
+			}
+		}
+		log.warn(`no package.json found, findRootSvelteDependencies failed`);
+		return [];
+	}
+
+	const pkg = parsePkg(root);
+	if (!pkg) {
+		return [];
+	}
+
+	const deps = [
+		...Object.keys(pkg.dependencies || {}),
+		...Object.keys(pkg.devDependencies || {})
+	].filter((dep) => !is_common_without_svelte_field(dep));
+
+	return getSvelteDependencies(deps, root);
+}
+
+function getSvelteDependencies(
+	deps: string[],
+	pkgDir: string,
+	path: string[] = []
+): SvelteDependency[] {
+	const result = [];
+	const localRequire = createRequire(`${pkgDir}/package.json`);
+	const resolvedDeps = deps
+		.map((dep) => resolveDependencyData(dep, localRequire))
+		.filter(Boolean) as DependencyData[];
+	for (const { pkg, dir } of resolvedDeps) {
+		const type = getSvelteDependencyType(pkg);
+		if (!type) continue;
+		result.push({ name: pkg.name, type, pkg, dir, path });
+		// continue crawling for component libraries so we can optimize them, js libraries are fine
+		if (type === 'component-library' && pkg.dependencies) {
+			let dependencyNames = Object.keys(pkg.dependencies);
+			const circular = dependencyNames.filter((name) => path.includes(name));
+			if (circular.length > 0) {
+				log.warn.enabled &&
+					log.warn(
+						`skipping circular svelte dependencies in automated vite optimizeDeps handling`,
+						circular.map((x) => path.concat(x).join('>'))
+					);
+				dependencyNames = dependencyNames.filter((name) => !path.includes(name));
+			}
+			if (path.length === 3) {
+				log.debug.once(`encountered deep svelte dependency tree: ${path.join('>')}`);
+			}
+			result.push(...getSvelteDependencies(dependencyNames, dir, path.concat(pkg.name)));
+		}
+	}
+	return result;
+}
+
+export function resolveDependencyData(
+	dep: string,
+	localRequire: NodeRequire
+): DependencyData | void {
+	try {
+		const pkgJson = `${dep}/package.json`;
+		const pkg = localRequire(pkgJson);
+		const dir = path.dirname(localRequire.resolve(pkgJson));
+		return { dir, pkg };
+	} catch (e) {
+		log.debug.once(`dependency ${dep} does not export package.json`, e);
+		// walk up from default export until we find package.json with name=dep
+		try {
+			let dir = path.dirname(localRequire.resolve(dep));
+			while (dir) {
+				const pkg = parsePkg(dir, true);
+				if (pkg && pkg.name === dep) {
+					return { dir, pkg };
+				}
+				const parent = path.dirname(dir);
+				if (parent === dir) {
+					break;
+				}
+				dir = parent;
+			}
+		} catch (e) {
+			log.debug.once(`error while trying to find package.json of ${dep}`, e);
+		}
+	}
+	log.debug.once(`failed to resolve ${dep}`);
+}
+
+function parsePkg(dir: string, silent = false): Pkg | void {
+	const pkgFile = path.join(dir, 'package.json');
+	try {
+		return JSON.parse(fs.readFileSync(pkgFile, 'utf-8'));
+	} catch (e) {
+		!silent && log.warn.enabled && log.warn(`failed to parse ${pkgFile}`, e);
+	}
+}
+
+function getSvelteDependencyType(pkg: Pkg): SvelteDependencyType | undefined {
+	if (isSvelteComponentLib(pkg)) {
+		return 'component-library';
+	} else if (isSvelteLib(pkg)) {
+		return 'js-library';
+	} else {
+		return undefined;
+	}
+}
+
+function isSvelteComponentLib(pkg: Pkg) {
+	return !!pkg.svelte;
+}
+
+function isSvelteLib(pkg: Pkg) {
+	return !!pkg.dependencies?.svelte || !!pkg.peerDependencies?.svelte;
+}
+
+const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
+	'@lukeed/uuid',
+	'@playwright/test',
+	'@sveltejs/vite-plugin-svelte',
+	'@sveltejs/kit',
+	'autoprefixer',
+	'cookie',
+	'dotenv',
+	'esbuild',
+	'eslint',
+	'jest',
+	'mdsvex',
+	'playwright',
+	'postcss',
+	'prettier',
+	'svelte',
+	'svelte-check',
+	'svelte-hmr',
+	'svelte-preprocess',
+	'tslib',
+	'typescript',
+	'vite',
+	'vitest',
+	'__vite-browser-external' // see https://github.com/sveltejs/vite-plugin-svelte/issues/362
+];
+const COMMON_PREFIXES_WITHOUT_SVELTE_FIELD = [
+	'@fontsource/',
+	'@postcss-plugins/',
+	'@rollup/',
+	'@sveltejs/adapter-',
+	'@types/',
+	'@typescript-eslint/',
+	'eslint-',
+	'jest-',
+	'postcss-plugin-',
+	'prettier-plugin-',
+	'rollup-plugin-',
+	'vite-plugin-'
+];
+
+/**
+ * Test for common dependency names that tell us it is not a package including a svelte field, eg. eslint + plugins.
+ *
+ * This speeds up the find process as we don't have to try and require the package.json for all of them
+ *
+ * @param dependency {string}
+ * @returns {boolean} true if it is a dependency without a svelte field
+ */
+export function is_common_without_svelte_field(dependency: string): boolean {
+	return (
+		COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD.includes(dependency) ||
+		COMMON_PREFIXES_WITHOUT_SVELTE_FIELD.some(
+			(prefix) =>
+				prefix.startsWith('@')
+					? dependency.startsWith(prefix)
+					: dependency.substring(dependency.lastIndexOf('/') + 1).startsWith(prefix) // check prefix omitting @scope/
+		)
+	);
+}
+
+export function needsOptimization(dep: string, localRequire: NodeRequire): boolean {
+	const depData = resolveDependencyData(dep, localRequire);
+	if (!depData) return false;
+	const pkg = depData.pkg;
+	// only optimize if is cjs, using the below as heuristic
+	// see https://github.com/sveltejs/vite-plugin-svelte/issues/162
+	const hasEsmFields = pkg.module || pkg.exports;
+	if (hasEsmFields) return false;
+	if (pkg.main) {
+		// ensure entry is js so vite can prebundle it
+		// see https://github.com/sveltejs/vite-plugin-svelte/issues/233
+		const entryExt = path.extname(pkg.main);
+		return !entryExt || entryExt === '.js' || entryExt === '.cjs';
+	} else {
+		// check if has implicit index.js entrypoint
+		// https://github.com/sveltejs/vite-plugin-svelte/issues/281
+		try {
+			localRequire.resolve(`${dep}/index.js`);
+			return true;
+		} catch {
+			return false;
+		}
+	}
+}
+
+interface DependencyData {
+	dir: string;
+	pkg: Pkg;
+}
+
+export interface SvelteDependency {
+	name: string;
+	type: SvelteDependencyType;
+	dir: string;
+	pkg: Pkg;
+	path: string[];
+}
+
+// component-library => exports svelte components
+// js-library        => only uses svelte api, no components
+export type SvelteDependencyType = 'component-library' | 'js-library';
+
+export interface Pkg {
+	name: string;
+	svelte?: string;
+	dependencies?: DependencyList;
+	devDependencies?: DependencyList;
+	peerDependencies?: DependencyList;
+	[key: string]: any;
+}
+
+export interface DependencyList {
+	[key: string]: string;
+}

package/src/utils/error.ts

@@ -0,0 +1,95 @@
+import { RollupError } from 'rollup';
+import { ResolvedOptions, Warning } from './options';
+import { buildExtendedLogMessage } from './log';
+import { PartialMessage } from 'esbuild';
+
+/**
+ * convert an error thrown by svelte.compile to a RollupError so that vite displays it in a user friendly way
+ * @param error a svelte compiler error, which is a mix of Warning and an error
+ * @returns {RollupError} the converted error
+ */
+export function toRollupError(error: Warning & Error, options: ResolvedOptions): RollupError {
+	const { filename, frame, start, code, name, stack } = error;
+	const rollupError: RollupError = {
+		name, // needed otherwise sveltekit coalesce_to_error turns it into a string
+		id: filename,
+		message: buildExtendedLogMessage(error), // include filename:line:column so that it's clickable
+		frame: formatFrameForVite(frame),
+		code,
+		stack: options.isBuild || options.isDebug || !frame ? stack : ''
+	};
+	if (start) {
+		rollupError.loc = {
+			line: start.line,
+			column: start.column,
+			file: filename
+		};
+	}
+	return rollupError;
+}
+
+/**
+ * convert an error thrown by svelte.compile to an esbuild PartialMessage
+ * @param error a svelte compiler error, which is a mix of Warning and an error
+ * @returns {PartialMessage} the converted error
+ */
+export function toESBuildError(error: Warning & Error, options: ResolvedOptions): PartialMessage {
+	const { filename, frame, start, stack } = error;
+	const partialMessage: PartialMessage = {
+		text: buildExtendedLogMessage(error)
+	};
+	if (start) {
+		partialMessage.location = {
+			line: start.line,
+			column: start.column,
+			file: filename,
+			lineText: lineFromFrame(start.line, frame) // needed to get a meaningful error message on cli
+		};
+	}
+	if (options.isBuild || options.isDebug || !frame) {
+		partialMessage.detail = stack;
+	}
+	return partialMessage;
+}
+
+/**
+ * extract line with number from codeframe
+ */
+function lineFromFrame(lineNo: number, frame?: string): string {
+	if (!frame) {
+		return '';
+	}
+	const lines = frame.split('\n');
+	const errorLine = lines.find((line) => line.trimStart().startsWith(`${lineNo}: `));
+	return errorLine ? errorLine.substring(errorLine.indexOf(': ') + 3) : '';
+}
+
+/**
+ * vite error overlay expects a specific format to show frames
+ * this reformats svelte frame (colon separated, less whitespace)
+ * to one that vite displays on overlay ( pipe separated, more whitespace)
+ * e.g.
+ * ```
+ * 1: foo
+ * 2: bar;
+ *       ^
+ * 3: baz
+ * ```
+ * to
+ * ```
+ *  1 | foo
+ *  2 | bar;
+ *         ^
+ *  3 | baz
+ * ```
+ * @see https://github.com/vitejs/vite/blob/96591bf9989529de839ba89958755eafe4c445ae/packages/vite/src/client/overlay.ts#L116
+ */
+function formatFrameForVite(frame?: string): string {
+	if (!frame) {
+		return '';
+	}
+	return frame
+		.split('\n')
+		.map((line) => (line.match(/^\s+\^/) ? '   ' + line : ' ' + line.replace(':', ' | ')))
+		.join('\n');
+}

package/src/utils/esbuild.ts

@@ -0,0 +1,84 @@
+import { promises as fs } from 'fs';
+import { compile, preprocess } from 'svelte/compiler';
+import { DepOptimizationOptions } from 'vite';
+import { Compiled } from './compile';
+import { log } from './log';
+import { CompileOptions, ResolvedOptions } from './options';
+import { toESBuildError } from './error';
+
+type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
+type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
+
+export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
+
+export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
+	return {
+		name: 'vite-plugin-svelte:optimize-svelte',
+		setup(build) {
+			// Skip in scanning phase as Vite already handles scanning Svelte files.
+			// Otherwise this would heavily slow down the scanning phase.
+			if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
+
+			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
+			const svelteFilter = new RegExp(`\\.(` + svelteExtensions.join('|') + `)(\\?.*)?$`);
+
+			build.onLoad({ filter: svelteFilter }, async ({ path: filename }) => {
+				const code = await fs.readFile(filename, 'utf8');
+				try {
+					const contents = await compileSvelte(options, { filename, code });
+					return { contents };
+				} catch (e) {
+					return { errors: [toESBuildError(e, options)] };
+				}
+			});
+		}
+	};
+}
+
+async function compileSvelte(
+	options: ResolvedOptions,
+	{ filename, code }: { filename: string; code: string }
+): Promise<string> {
+	const compileOptions: CompileOptions = {
+		...options.compilerOptions,
+		css: true,
+		filename,
+		format: 'esm',
+		generate: 'dom'
+	};
+
+	let preprocessed;
+
+	if (options.preprocess) {
+		try {
+			preprocessed = await 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.experimental?.dynamicCompileOptions?.({
+		filename,
+		code: finalCode,
+		compileOptions
+	});
+
+	if (dynamicCompileOptions && log.debug.enabled) {
+		log.debug(`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`);
+	}
+
+	const finalCompileOptions = dynamicCompileOptions
+		? {
+				...compileOptions,
+				...dynamicCompileOptions
+		  }
+		: compileOptions;
+
+	const compiled = compile(finalCode, finalCompileOptions) as Compiled;
+
+	return compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl();
+}

package/src/utils/hash.ts

@@ -0,0 +1,32 @@
+import * as crypto from 'crypto';
+
+const hashes = Object.create(null);
+
+//TODO shorter?
+const hash_length = 12;
+
+export function safeBase64Hash(input: string) {
+	if (hashes[input]) {
+		return hashes[input];
+	}
+	//TODO if performance really matters, use a faster one like xx-hash etc.
+	// should be evenly distributed because short input length and similarities in paths could cause collisions otherwise
+	// OR DON'T USE A HASH AT ALL, what about a simple counter?
+	const md5 = crypto.createHash('md5');
+	md5.update(input);
+	const hash = toSafe(md5.digest('base64')).slice(0, hash_length);
+	hashes[input] = hash;
+	return hash;
+}
+
+const replacements: { [key: string]: string } = {
+	'+': '-',
+	'/': '_',
+	'=': ''
+};
+
+const replaceRE = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
+
+function toSafe(base64: string) {
+	return base64.replace(replaceRE, (x) => replacements[x]);
+}