@sveltejs/vite-plugin-svelte 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -46,7 +46,8 @@
     "deepmerge": "^4.2.2",
     "kleur": "^4.1.5",
     "magic-string": "^0.26.7",
-    "svelte-hmr": "^0.15.0"
+    "svelte-hmr": "^0.15.1",
+    "vitefu": "^0.2.1"
   },
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
@@ -62,10 +63,10 @@
     "@types/debug": "^4.1.7",
     "@types/diff-match-patch": "^1.0.32",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.15.13",
+    "esbuild": "^0.15.14",
     "rollup": "^2.79.1",
-    "svelte": "^3.52.0",
-    "tsup": "^6.4.0",
+    "svelte": "3.53.1",
+    "tsup": "^6.5.0",
     "vite": "^3.2.3"
   },
   "scripts": {

package/src/index.ts

@@ -1,5 +1,7 @@
 import fs from 'fs';
 import { HmrContext, ModuleNode, Plugin, ResolvedConfig, UserConfig } from 'vite';
+// eslint-disable-next-line node/no-missing-import
+import { isDepExcluded } from 'vitefu';
 import { handleHotUpdate } from './handle-hot-update';
 import { log, logCompilerWarnings } from './utils/log';
 import { CompileData, createCompileSvelte } from './utils/compile';
@@ -68,7 +70,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				// @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);
+				const extraViteConfig = await buildExtraViteConfig(options, config);
 				log.debug('additional vite config', extraViteConfig);
 				return extraViteConfig;
 			},
@@ -154,21 +156,32 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 					}
 					return resolvedSvelteSSR;
 				}
-				try {
-					const resolved = resolveViaPackageJsonSvelte(importee, importer, cache);
-					if (resolved) {
-						log.debug(
-							`resolveId resolved ${resolved} via package.json svelte field of ${importee}`
+				//@ts-expect-error scan
+				const scan = !!opts?.scan; // scanner phase of optimizeDeps
+				const isPrebundled =
+					options.prebundleSvelteLibraries &&
+					viteConfig.optimizeDeps?.disabled !== true &&
+					viteConfig.optimizeDeps?.disabled !== (options.isBuild ? 'build' : 'dev') &&
+					!isDepExcluded(importee, viteConfig.optimizeDeps?.exclude ?? []);
+				// for prebundled libraries we let vite resolve the prebundling result
+				// for ssr, during scanning and non-prebundled, we do it
+				if (ssr || scan || !isPrebundled) {
+					try {
+						const resolved = await resolveViaPackageJsonSvelte(importee, importer, cache);
+						if (resolved) {
+							log.debug(
+								`resolveId resolved ${resolved} via package.json svelte field of ${importee}`
+							);
+							return resolved;
+						}
+					} catch (e) {
+						log.debug.once(
+							`error trying to resolve ${importee} from ${importer} via package.json svelte field `,
+							e
 						);
-						return resolved;
+						// this error most likely happens due to non-svelte related importee/importers so swallow it here
+						// in case it really way a svelte library, users will notice anyway. (lib not working due to failed resolve)
 					}
-				} catch (e) {
-					log.debug.once(
-						`error trying to resolve ${importee} from ${importer} via package.json svelte field `,
-						e
-					);
-					// this error most likely happens due to non-svelte related importee/importers so swallow it here
-					// in case it really way a svelte library, users will notice anyway. (lib not working due to failed resolve)
 				}
 			},
 

package/src/utils/__tests__/svelte-version.spec.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import { compareToSvelte, atLeastSvelte, parseVersion } from '../svelte-version';
+import { VERSION } from 'svelte/compiler';
+const svelteVersion = parseVersion(VERSION);
+describe('svelte-version', () => {
+	describe('parseVersion', () => {
+		it('should fill major,minor,patch', () => {
+			expect(parseVersion('3')).toEqual([3, 0, 0]);
+			expect(parseVersion('3.1')).toEqual([3, 1, 0]);
+		});
+		it('should ignore additional segments', () => {
+			expect(parseVersion('1.2.3.4')).toEqual([1, 2, 3]);
+		});
+	});
+	describe('compareToSvelte', () => {
+		it('should return 0 for current', async () => {
+			expect(compareToSvelte(VERSION)).toBe(0);
+		});
+
+		it('should return 1 for patch bump', async () => {
+			const patch = svelteVersion.concat();
+			patch[2] += 1;
+			const patchBump = patch.join('.');
+			expect(compareToSvelte(patchBump)).toBe(1);
+		});
+		it('should return 1 for minor bump', async () => {
+			const minor = svelteVersion.concat();
+			minor[1] += 1;
+			const minorBump = minor.join('.');
+			expect(compareToSvelte(minorBump)).toBe(1);
+		});
+		it('should return 1 for major bump', async () => {
+			const major = svelteVersion.concat();
+			major[0] += 1;
+			const majorBump = major.join('.');
+			expect(compareToSvelte(majorBump)).toBe(1);
+		});
+
+		it('should return -1 for lower patch', async () => {
+			const patch = svelteVersion.concat();
+			patch[2] -= 1;
+			const lowerPatch = patch.join('.');
+			expect(compareToSvelte(lowerPatch)).toBe(-1);
+		});
+		it('should return -1 for lower minor', async () => {
+			const minor = svelteVersion.concat();
+			minor[1] -= 1;
+			const lowerMinor = minor.join('.');
+			expect(compareToSvelte(lowerMinor)).toBe(-1);
+		});
+		it('should return -1 for lower major', async () => {
+			const major = svelteVersion.concat();
+			major[0] -= 1;
+			const lowerMajor = major.join('.');
+			expect(compareToSvelte(lowerMajor)).toBe(-1);
+		});
+	});
+
+	describe('atLeastSvelte', () => {
+		it('should return true for current', async () => {
+			expect(atLeastSvelte(VERSION)).toBe(true);
+		});
+
+		it('should return false for higher patch', async () => {
+			const patch = svelteVersion.concat();
+			patch[2] += 1;
+			const patchBump = patch.join('.');
+			expect(atLeastSvelte(patchBump)).toBe(false);
+		});
+		it('should return false for higher minor', async () => {
+			const minor = svelteVersion.concat();
+			minor[1] += 1;
+			const minorBump = minor.join('.');
+			expect(atLeastSvelte(minorBump)).toBe(false);
+		});
+		it('should return false for higher major', async () => {
+			const major = svelteVersion.concat();
+			major[0] += 1;
+			const majorBump = major.join('.');
+			expect(atLeastSvelte(majorBump)).toBe(false);
+		});
+
+		it('should return true for lower patch', async () => {
+			const patch = svelteVersion.concat();
+			patch[2] -= 1;
+			const lowerPatch = patch.join('.');
+			expect(atLeastSvelte(lowerPatch)).toBe(true);
+		});
+		it('should return true for lower minor', async () => {
+			const minor = svelteVersion.concat();
+			minor[1] -= 1;
+			const lowerMinor = minor.join('.');
+			expect(atLeastSvelte(lowerMinor)).toBe(true);
+		});
+		it('should return true for lower major', async () => {
+			const major = svelteVersion.concat();
+			major[0] -= 1;
+			const lowerMajor = major.join('.');
+			expect(atLeastSvelte(lowerMajor)).toBe(true);
+		});
+	});
+});

package/src/utils/compile.ts

@@ -68,8 +68,9 @@ const _createCompileSvelte = (makeHot: Function) =>
 			  }
 			: compileOptions;
 		const compiled = compile(finalCode, finalCompileOptions);
-
-		if (emitCss && compiled.css.code) {
+		const hasCss = compiled.css?.code?.trim().length > 0;
+		// compiler might not emit css with mode none or it may be empty
+		if (emitCss && hasCss) {
 			// TODO properly update sourcemap?
 			compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
 		}
@@ -79,7 +80,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 			compiled.js.code = makeHot({
 				id: filename,
 				compiledCode: compiled.js.code,
-				hotOptions: options.hot,
+				hotOptions: { ...options.hot, injectCss: options.hot?.injectCss === true && hasCss },
 				compiled,
 				originalCode: code,
 				compileOptions: finalCompileOptions

package/src/utils/dependencies.ts

@@ -1,130 +1,29 @@
-import { log } from './log';
 import path from 'path';
-import fs from 'fs';
-import { createRequire } from 'module';
+import fs from 'fs/promises';
+// eslint-disable-next-line node/no-missing-import
+import { findDepPkgJsonPath } from 'vitefu';
 
-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;
+interface DependencyData {
+	dir: string;
+	pkg: Record<string, any>;
 }
 
-export function resolveDependencyData(
+export async 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');
+	parent: string
+): Promise<DependencyData | undefined> {
+	const depDataPath = await findDepPkgJsonPath(dep, parent);
+	if (!depDataPath) return undefined;
 	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 {
+			dir: path.dirname(depDataPath),
+			pkg: JSON.parse(await fs.readFile(depDataPath, 'utf-8'))
+		};
+	} catch {
 		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',
@@ -173,7 +72,7 @@ const COMMON_PREFIXES_WITHOUT_SVELTE_FIELD = [
  * @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 {
+export function isCommonDepWithoutSvelteField(dependency: string): boolean {
 	return (
 		COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD.includes(dependency) ||
 		COMMON_PREFIXES_WITHOUT_SVELTE_FIELD.some(
@@ -184,58 +83,3 @@ export function is_common_without_svelte_field(dependency: string): boolean {
 		)
 	);
 }
-
-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/esbuild.ts

@@ -5,9 +5,11 @@ import { Compiled } from './compile';
 import { log } from './log';
 import { CompileOptions, ResolvedOptions } from './options';
 import { toESBuildError } from './error';
+import { atLeastSvelte } from './svelte-version';
 
 type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
 type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
+const isCssString = atLeastSvelte('3.53.0');
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
@@ -39,9 +41,13 @@ async function compileSvelte(
 	options: ResolvedOptions,
 	{ filename, code }: { filename: string; code: string }
 ): Promise<string> {
+	let css = options.compilerOptions.css;
+	if (css !== 'none') {
+		css = isCssString ? 'injected' : true;
+	}
 	const compileOptions: CompileOptions = {
 		...options.compilerOptions,
-		css: true,
+		css,
 		filename,
 		format: 'esm',
 		generate: 'dom'