@sveltejs/vite-plugin-svelte 1.0.0-next.3 → 1.0.0-next.33

package/src/index.ts

@@ -0,0 +1,225 @@
+import fs from 'fs';
+import { HmrContext, ModuleNode, Plugin, ResolvedConfig, UserConfig } from 'vite';
+import { handleHotUpdate } from './handle-hot-update';
+import { log, logCompilerWarnings } from './utils/log';
+import { CompileData, createCompileSvelte } from './utils/compile';
+import { buildIdParser, IdParser, SvelteRequest } from './utils/id';
+import {
+	buildExtraViteConfig,
+	validateInlineOptions,
+	Options,
+	ResolvedOptions,
+	resolveOptions,
+	patchResolvedViteConfig,
+	preResolveOptions
+} from './utils/options';
+import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
+
+import { ensureWatchedFile, setupWatchers } from './utils/watch';
+import { resolveViaPackageJsonSvelte } from './utils/resolve';
+import { PartialResolvedId } from 'rollup';
+import { toRollupError } from './utils/error';
+
+export function svelte(inlineOptions?: Partial<Options>): Plugin {
+	if (process.env.DEBUG != null) {
+		log.setLevel('debug');
+	}
+	validateInlineOptions(inlineOptions);
+	const cache = new VitePluginSvelteCache();
+	const pkg_export_errors = new Set();
+	// updated in configResolved hook
+	let requestParser: IdParser;
+	let options: ResolvedOptions;
+	let viteConfig: ResolvedConfig;
+	/* eslint-disable no-unused-vars */
+	let compileSvelte: (
+		svelteRequest: SvelteRequest,
+		code: string,
+		options: Partial<ResolvedOptions>
+	) => Promise<CompileData>;
+	/* eslint-enable no-unused-vars */
+
+	let resolvedSvelteSSR: Promise<PartialResolvedId | null>;
+
+	return {
+		name: 'vite-plugin-svelte',
+		// make sure our resolver runs before vite internal resolver to resolve svelte field correctly
+		enforce: 'pre',
+		async config(config, configEnv): Promise<Partial<UserConfig>> {
+			// setup logger
+			if (process.env.DEBUG) {
+				log.setLevel('debug');
+			} else if (config.logLevel) {
+				log.setLevel(config.logLevel);
+			}
+			// @ts-expect-error temporarily lend the options variable until fixed in configResolved
+			options = await preResolveOptions(inlineOptions, config, configEnv);
+			// extra vite config
+			const extraViteConfig = buildExtraViteConfig(options, config, configEnv);
+			log.debug('additional vite config', extraViteConfig);
+			return extraViteConfig;
+		},
+
+		async configResolved(config) {
+			options = resolveOptions(options, config);
+			patchResolvedViteConfig(config, options);
+			requestParser = buildIdParser(options);
+			compileSvelte = createCompileSvelte(options);
+			viteConfig = config;
+			log.debug('resolved options', options);
+		},
+
+		configureServer(server) {
+			// eslint-disable-next-line no-unused-vars
+			options.server = server;
+			setupWatchers(options, cache, requestParser);
+		},
+
+		load(id, opts) {
+			// @ts-expect-error anticipate vite changing second parameter as options object
+			// see https://github.com/vitejs/vite/discussions/5109
+			const ssr: boolean = opts === true || opts?.ssr;
+			const svelteRequest = requestParser(id, !!ssr);
+			if (svelteRequest) {
+				const { filename, query } = svelteRequest;
+				// virtual css module
+				if (query.svelte && query.type === 'style') {
+					const css = cache.getCSS(svelteRequest);
+					if (css) {
+						log.debug(`load returns css for ${filename}`);
+						return css;
+					}
+				}
+				// prevent vite asset plugin from loading files as url that should be compiled in transform
+				if (viteConfig.assetsInclude(filename)) {
+					log.debug(`load returns raw content for ${filename}`);
+					return fs.readFileSync(filename, 'utf-8');
+				}
+			}
+		},
+
+		async resolveId(importee, importer, opts) {
+			const ssr = !!opts?.ssr;
+			const svelteRequest = requestParser(importee, ssr);
+			if (svelteRequest?.query.svelte) {
+				if (svelteRequest.query.type === 'style') {
+					// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
+					// see https://github.com/sveltejs/vite-plugin-svelte/issues/14
+					log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
+					return svelteRequest.cssId;
+				}
+				log.debug(`resolveId resolved ${importee}`);
+				return importee; // query with svelte tag, an id we generated, no need for further analysis
+			}
+
+			if (ssr && importee === 'svelte') {
+				if (!resolvedSvelteSSR) {
+					resolvedSvelteSSR = this.resolve('svelte/ssr', undefined, { skipSelf: true }).then(
+						(svelteSSR) => {
+							log.debug('resolved svelte to svelte/ssr');
+							return svelteSSR;
+						},
+						(err) => {
+							log.debug(
+								'failed to resolve svelte to svelte/ssr. Update svelte to a version that exports it',
+								err
+							);
+							return null; // returning null here leads to svelte getting resolved regularly
+						}
+					);
+				}
+				return resolvedSvelteSSR;
+			}
+
+			try {
+				const resolved = resolveViaPackageJsonSvelte(importee, importer);
+				if (resolved) {
+					log.debug(`resolveId resolved ${resolved} via package.json svelte field of ${importee}`);
+					return resolved;
+				}
+			} catch (err) {
+				switch (err.code) {
+					case 'ERR_PACKAGE_PATH_NOT_EXPORTED':
+						pkg_export_errors.add(importee);
+						return null;
+					case 'MODULE_NOT_FOUND':
+						return null;
+					default:
+						throw err;
+				}
+			}
+		},
+
+		async transform(code, id, opts) {
+			const ssr = !!opts?.ssr;
+			const svelteRequest = requestParser(id, ssr);
+			if (!svelteRequest) {
+				return;
+			}
+			const { filename, query } = svelteRequest;
+
+			if (query.svelte) {
+				if (query.type === 'style') {
+					const css = cache.getCSS(svelteRequest);
+					if (css) {
+						log.debug(`transform returns css for ${filename}`);
+						return css; // TODO return code arg instead? it's the code from load hook.
+					}
+				}
+				log.error('failed to transform tagged svelte request', svelteRequest);
+				throw new Error(`failed to transform tagged svelte request for id ${id}`);
+			}
+			let compileData;
+			try {
+				compileData = await compileSvelte(svelteRequest, code, options);
+			} catch (e) {
+				throw toRollupError(e);
+			}
+			logCompilerWarnings(compileData.compiled.warnings, options);
+			cache.update(compileData);
+			if (compileData.dependencies?.length && options.server) {
+				compileData.dependencies.forEach((d) => {
+					ensureWatchedFile(options.server!.watcher, d, options.root);
+				});
+			}
+			log.debug(`transform returns compiled js for ${filename}`);
+			return compileData.compiled.js;
+		},
+
+		handleHotUpdate(ctx: HmrContext): void | Promise<Array<ModuleNode> | void> {
+			if (!options.hot || !options.emitCss) {
+				return;
+			}
+			const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
+			if (svelteRequest) {
+				return handleHotUpdate(compileSvelte, ctx, svelteRequest, cache, options);
+			}
+		},
+
+		/**
+		 * All resolutions done; display warnings wrt `package.json` access.
+		 */
+		// TODO generateBundle isn't called by vite, is buildEnd enough or should it be logged once per violation in resolve
+		buildEnd() {
+			if (pkg_export_errors.size > 0) {
+				log.warn(
+					`The following packages did not export their \`package.json\` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.`,
+					Array.from(pkg_export_errors, (s) => `- ${s}`).join('\n')
+				);
+			}
+		}
+	};
+}
+
+export {
+	Options,
+	Preprocessor,
+	PreprocessorGroup,
+	CompileOptions,
+	CssHashGetter,
+	Arrayable,
+	MarkupPreprocessor,
+	ModuleFormat,
+	Processed,
+	Warning
+} from './utils/options';

package/src/utils/__tests__/dependencies.spec.ts

@@ -0,0 +1,29 @@
+import { findRootSvelteDependencies } from '../dependencies';
+import * as path from 'path';
+
+describe('dependencies', () => {
+	describe('findRootSvelteDependencies', () => {
+		it('should find svelte dependencies in packages/e2e-test/hmr', async () => {
+			const deps = findRootSvelteDependencies(path.resolve('packages/e2e-tests/hmr'));
+			expect(deps).toHaveLength(1);
+			expect(deps[0].name).toBe('e2e-test-dep-svelte-simple');
+			expect(deps[0].path).toEqual([]);
+		});
+		it('should find nested svelte dependencies in packages/e2e-test/package-json-svelte-field', async () => {
+			const deps = findRootSvelteDependencies(
+				path.resolve('packages/e2e-tests/package-json-svelte-field')
+			);
+			expect(deps).toHaveLength(3);
+			const hybrid = deps.find((dep) => dep.name === 'e2e-test-dep-svelte-hybrid');
+			expect(hybrid).toBeTruthy();
+			expect(hybrid.path).toHaveLength(0);
+			const nested = deps.find((dep) => dep.name === 'e2e-test-dep-svelte-nested');
+			expect(nested).toBeTruthy();
+			expect(nested.path).toHaveLength(0);
+			const simple = deps.find((dep) => dep.name === 'e2e-test-dep-svelte-simple');
+			expect(simple).toBeTruthy();
+			expect(simple.path).toHaveLength(1);
+			expect(simple.path[0]).toBe('e2e-test-dep-svelte-nested');
+		});
+	});
+});

package/src/utils/__tests__/sourcemap.spec.ts

@@ -0,0 +1,24 @@
+import { buildMagicString, buildSourceMap } from '../sourcemap';
+
+describe('sourcemap', () => {
+	describe('buildMagicString', () => {
+		it('should return a valid magic string', async () => {
+			const from = 'h1{color: blue}\nh2{color: green}\nh3{color: red}\n';
+			const to = 'h1{color: blue}\ndiv{color: white}\nh3{color: red}\nh2{color: green}\n';
+			const m = await buildMagicString(from, to);
+			expect(m).toBeDefined();
+			expect(m.original).toBe(from);
+			expect(m.toString()).toBe(to);
+		});
+	});
+	describe('buildSourceMap', () => {
+		it('should return a map with mappings and filename', async () => {
+			const map = await buildSourceMap('foo', 'bar', 'foo.txt');
+			expect(map).toBeDefined();
+			expect(map.mappings).toBeDefined();
+			expect(map.mappings[0]).toBeDefined();
+			expect(map.mappings[0][0]).toBeDefined();
+			expect(map.sources[0]).toBe('foo.txt');
+		});
+	});
+});

package/src/utils/compile.ts

@@ -0,0 +1,148 @@
+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 _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'
+		};
+		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) {
+			preprocessed = await preprocess(code, options.preprocess, { filename });
+			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,
+			// @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;
+	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,223 @@
+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;
+}
+
+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',
+	'@sveltejs/vite-plugin-svelte',
+	'@sveltejs/kit',
+	'autoprefixer',
+	'cookie',
+	'dotenv',
+	'esbuild',
+	'eslint',
+	'jest',
+	'mdsvex',
+	'postcss',
+	'prettier',
+	'svelte',
+	'svelte-check',
+	'svelte-hmr',
+	'svelte-preprocess',
+	'tslib',
+	'typescript',
+	'vite'
+];
+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
+ */
+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 isCjs = pkg.main && !pkg.module && !pkg.exports;
+	if (!isCjs) return false;
+	// 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';
+}
+
+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;
+}