@sveltejs/vite-plugin-svelte 1.0.0-next.38 → 1.0.0-next.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.38",
+  "version": "1.0.0-next.41",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -40,16 +40,16 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
-    "@rollup/pluginutils": "^4.1.2",
-    "debug": "^4.3.3",
+    "@rollup/pluginutils": "^4.2.0",
+    "debug": "^4.3.4",
     "kleur": "^4.1.4",
-    "magic-string": "^0.25.7",
-    "svelte-hmr": "^0.14.9"
+    "magic-string": "^0.26.1",
+    "svelte-hmr": "^0.14.11"
   },
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.44.0",
-    "vite": "^2.7.0"
+    "vite": "^2.9.0"
   },
   "peerDependenciesMeta": {
     "diff-match-patch": {
@@ -60,11 +60,11 @@
     "@types/debug": "^4.1.7",
     "@types/diff-match-patch": "^1.0.32",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.14.23",
-    "rollup": "^2.67.3",
-    "svelte": "^3.46.4",
-    "tsup": "^5.11.13",
-    "vite": "^2.8.4"
+    "esbuild": "^0.14.31",
+    "rollup": "^2.70.1",
+    "svelte": "^3.46.6",
+    "tsup": "^5.12.4",
+    "vite": "^2.9.1"
   },
   "scripts": {
     "dev": "pnpm run build:ci -- --sourcemap --watch src",

package/src/index.ts

@@ -19,7 +19,7 @@ import { ensureWatchedFile, setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
 import { PartialResolvedId } from 'rollup';
 import { toRollupError } from './utils/error';
-import { handleOptimizeDeps } from './utils/optimizer';
+import { saveSvelteMetadata } from './utils/optimizer';
 
 export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	if (process.env.DEBUG != null) {
@@ -55,7 +55,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, configEnv);
+			const extraViteConfig = buildExtraViteConfig(options, config);
 			log.debug('additional vite config', extraViteConfig);
 			return extraViteConfig;
 		},
@@ -70,7 +70,13 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		},
 
 		async buildStart() {
-			await handleOptimizeDeps(options, viteConfig);
+			if (!options.experimental.prebundleSvelteLibraries) return;
+			const isSvelteMetadataChanged = await saveSvelteMetadata(viteConfig.cacheDir, options);
+			if (isSvelteMetadataChanged) {
+				// Force Vite to optimize again. Although we mutate the config here, it works because
+				// Vite's optimizer runs after `buildStart()`.
+				viteConfig.server.force = true;
+			}
 		},
 
 		configureServer(server) {
@@ -134,11 +140,19 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 				}
 				return resolvedSvelteSSR;
 			}
-
-			const resolved = resolveViaPackageJsonSvelte(importee, importer, cache);
-			if (resolved) {
-				log.debug(`resolveId resolved ${resolved} via package.json svelte field of ${importee}`);
-				return resolved;
+			try {
+				const resolved = 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
+				);
+				// 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/esbuild.ts

@@ -8,7 +8,6 @@ import { toESBuildError } from './error';
 
 type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
 type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
-type EsbuildPluginBuild = Parameters<EsbuildPlugin['setup']>[0];
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
@@ -16,7 +15,9 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 	return {
 		name: 'vite-plugin-svelte:optimize-svelte',
 		setup(build) {
-			disableVitePrebundleSvelte(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('|') + `)(\\?.*)?$`);
@@ -34,30 +35,6 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 	};
 }
 
-function disableVitePrebundleSvelte(build: EsbuildPluginBuild) {
-	const viteDepPrebundlePlugin = build.initialOptions.plugins?.find(
-		(v) => v.name === 'vite:dep-pre-bundle'
-	);
-
-	if (!viteDepPrebundlePlugin) return;
-
-	// Prevent vite:dep-pre-bundle from externalizing svelte files
-	const _setup = viteDepPrebundlePlugin.setup.bind(viteDepPrebundlePlugin);
-	viteDepPrebundlePlugin.setup = function (build) {
-		const _onResolve = build.onResolve.bind(build);
-		build.onResolve = function (options, callback) {
-			if (options.filter.source.includes('svelte')) {
-				options.filter = new RegExp(
-					options.filter.source.replace('|svelte', ''),
-					options.filter.flags
-				);
-			}
-			return _onResolve(options, callback);
-		};
-		return _setup(build);
-	};
-}
-
 async function compileSvelte(
 	options: ResolvedOptions,
 	{ filename, code }: { filename: string; code: string }

package/src/utils/optimizer.ts

@@ -1,6 +1,5 @@
-import fs from 'fs';
+import { promises as fs } from 'fs';
 import path from 'path';
-import { optimizeDeps, ResolvedConfig } from 'vite';
 import { ResolvedOptions } from './options';
 
 // List of options that changes the prebundling result
@@ -13,24 +12,28 @@ const PREBUNDLE_SENSITIVE_OPTIONS: (keyof ResolvedOptions)[] = [
 	'preprocess'
 ];
 
-export async function handleOptimizeDeps(options: ResolvedOptions, viteConfig: ResolvedConfig) {
-	if (!options.experimental.prebundleSvelteLibraries || !viteConfig.cacheDir) return;
+/**
+ * @returns Whether the Svelte metadata has changed
+ */
+export async function saveSvelteMetadata(cacheDir: string, options: ResolvedOptions) {
+	const svelteMetadata = generateSvelteMetadata(options);
+	const svelteMetadataPath = path.resolve(cacheDir, '_svelte_metadata.json');
 
-	const viteMetadataPath = findViteMetadataPath(viteConfig.cacheDir);
-	if (!viteMetadataPath) return;
-
-	const svelteMetadataPath = path.resolve(viteMetadataPath, '../_svelte_metadata.json');
-	const currentSvelteMetadata = JSON.stringify(generateSvelteMetadata(options), (_, value) => {
+	const currentSvelteMetadata = JSON.stringify(svelteMetadata, (_, value) => {
+		// Handle preprocessors
 		return typeof value === 'function' ? value.toString() : value;
 	});
 
-	if (fs.existsSync(svelteMetadataPath)) {
-		const existingSvelteMetadata = fs.readFileSync(svelteMetadataPath, 'utf8');
-		if (existingSvelteMetadata === currentSvelteMetadata) return;
+	let existingSvelteMetadata: string | undefined;
+	try {
+		existingSvelteMetadata = await fs.readFile(svelteMetadataPath, 'utf8');
+	} catch {
+		// ignore
 	}
 
-	await optimizeDeps(viteConfig, true);
-	fs.writeFileSync(svelteMetadataPath, currentSvelteMetadata);
+	await fs.mkdir(cacheDir, { recursive: true });
+	await fs.writeFile(svelteMetadataPath, currentSvelteMetadata);
+	return currentSvelteMetadata !== existingSvelteMetadata;
 }
 
 function generateSvelteMetadata(options: ResolvedOptions) {
@@ -40,11 +43,3 @@ function generateSvelteMetadata(options: ResolvedOptions) {
 	}
 	return metadata;
 }
-
-function findViteMetadataPath(cacheDir: string) {
-	const metadataPaths = ['_metadata.json', 'deps/_metadata.json'];
-	for (const metadataPath of metadataPaths) {
-		const viteMetadataPath = path.resolve(cacheDir, metadataPath);
-		if (fs.existsSync(viteMetadataPath)) return viteMetadataPath;
-	}
-}

package/src/utils/options.ts

@@ -184,8 +184,7 @@ function resolveViteRoot(viteConfig: UserConfig): string | undefined {
 
 export function buildExtraViteConfig(
 	options: PreResolvedOptions,
-	config: UserConfig,
-	configEnv: ConfigEnv
+	config: UserConfig
 ): Partial<UserConfig> {
 	// extra handling for svelte dependencies in the project
 	const svelteDeps = findRootSvelteDependencies(options.root);
@@ -200,7 +199,7 @@ export function buildExtraViteConfig(
 		// knownJsSrcExtensions: options.extensions
 	};
 
-	if (configEnv.command === 'serve') {
+	if (options.isServe) {
 		extraViteConfig.optimizeDeps = buildOptimizeDepsForSvelte(
 			svelteDeps,
 			options,
@@ -208,8 +207,23 @@ export function buildExtraViteConfig(
 		);
 	}
 
+	if (options.experimental.prebundleSvelteLibraries) {
+		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: () => {} }]
+			}
+		};
+	}
+
 	// @ts-ignore
-	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config);
+	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config, extraViteConfig);
 
 	return extraViteConfig;
 }
@@ -243,13 +257,7 @@ function buildOptimizeDepsForSvelte(
 
 	// If we prebundle svelte libraries, we can skip the whole prebundling dance below
 	if (options.experimental.prebundleSvelteLibraries) {
-		return {
-			include,
-			exclude,
-			esbuildOptions: {
-				plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
-			}
-		};
+		return { include, exclude };
 	}
 
 	// only svelte component libraries needs to be processed for optimizeDeps, js libraries work fine
@@ -294,7 +302,7 @@ function buildSSROptionsForSvelte(
 	// add svelte to ssr.noExternal unless it is present in ssr.external
 	// so we can resolve it with svelte/ssr
 	if (options.isBuild && config.build?.ssr) {
-		// @ts-ignore
+		// @ts-expect-error ssr still flagged in vite
 		if (!config.ssr?.external?.includes('svelte')) {
 			noExternal.push('svelte');
 		}
@@ -309,13 +317,30 @@ function buildSSROptionsForSvelte(
 	// add svelte dependencies to ssr.noExternal unless present in ssr.external or optimizeDeps.include
 	noExternal.push(
 		...Array.from(new Set(svelteDeps.map((s) => s.name))).filter((x) => {
-			// @ts-ignore
+			// @ts-expect-error ssr still flagged in vite
 			return !config.ssr?.external?.includes(x) && !config.optimizeDeps?.include?.includes(x);
 		})
 	);
-	return {
+	const ssr = {
 		noExternal
 	};
+
+	if (options.isServe) {
+		// during dev, we have to externalize transitive dependencies, see https://github.com/sveltejs/vite-plugin-svelte/issues/281
+		// @ts-expect-error ssr still flagged in vite
+		ssr.external = Array.from(
+			new Set(svelteDeps.flatMap((dep) => Object.keys(dep.pkg.dependencies || {})))
+		).filter(
+			(dep) =>
+				!ssr.noExternal.includes(dep) &&
+				// @ts-expect-error ssr still flagged in vite
+				!config.ssr?.noExternal?.includes(dep) &&
+				// @ts-expect-error ssr still flagged in vite
+				!config.ssr?.external?.includes(dep)
+		);
+	}
+
+	return ssr;
 }
 
 export function patchResolvedViteConfig(viteConfig: ResolvedConfig, options: ResolvedOptions) {

package/src/utils/preprocess.ts

@@ -11,6 +11,7 @@ import { Preprocessor, PreprocessorGroup, Processed, ResolvedOptions } from './o
 import { TransformPluginContext } from 'rollup';
 import { log } from './log';
 import { buildSourceMap } from './sourcemap';
+import path from 'path';
 
 const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss'];
 
@@ -57,7 +58,7 @@ function createViteStylePreprocessor(config: ResolvedConfig): Preprocessor {
 		)) as TransformResult;
 		// patch sourcemap source to point back to original filename
 		if (transformResult.map?.sources?.[0] === moduleId) {
-			transformResult.map.sources[0] = filename;
+			transformResult.map.sources[0] = path.basename(filename);
 		}
 		return {
 			code: transformResult.code,
@@ -94,7 +95,10 @@ function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
 			s.append(' *{}');
 			return {
 				code: s.toString(),
-				map: s.generateDecodedMap({ source: filename, hires: true })
+				map: s.generateDecodedMap({
+					source: filename ? path.basename(filename) : undefined,
+					hires: true
+				})
 			};
 		}
 	};