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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.40",
+  "version": "1.0.0-next.41",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -41,7 +41,7 @@
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
     "@rollup/pluginutils": "^4.2.0",
-    "debug": "^4.3.3",
+    "debug": "^4.3.4",
     "kleur": "^4.1.4",
     "magic-string": "^0.26.1",
     "svelte-hmr": "^0.14.11"
@@ -49,7 +49,7 @@
   "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.26",
+    "esbuild": "^0.14.31",
     "rollup": "^2.70.1",
-    "svelte": "^3.46.4",
-    "tsup": "^5.12.1",
-    "vite": "^2.8.6"
+    "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) {
@@ -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) {

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

@@ -207,6 +207,21 @@ 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);
 
@@ -242,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

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
+				})
 			};
 		}
 	};