feat: correctly prebundle svelte libraries (#294)

bluwy · web-flow · commit 603c90c75ac3 · 2022-04-04T10:34:52.000+08:00
diff --git a/.changeset/young-chicken-agree.md b/.changeset/young-chicken-agree.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+Handle edge cases for `experimental.prebundleSvelteLibraries`
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "svelte": "^3.46.4",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   },
   "lint-staged": {
     "*.{js,ts,svelte,html,md,svx}": "eslint --fix",
@@ -73,7 +73,7 @@
   "pnpm": {
     "overrides": {
       "@sveltejs/vite-plugin-svelte": "workspace:*",
-      "vite": "^2.8.6",
+      "vite": "^2.9.0",
       "ansi-regex@>2.1.1 <5.0.1": "^5.0.1",
       "node-fetch@2": "^2.6.7"
     }
diff --git a/packages/e2e-tests/autoprefixer-browerslist/package.json b/packages/e2e-tests/autoprefixer-browerslist/package.json
@@ -17,6 +17,6 @@
     "postcss-load-config": "^3.1.3",
     "svelte": "^3.46.4",
     "svelte-preprocess": "^4.10.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/configfile-custom/package.json b/packages/e2e-tests/configfile-custom/package.json
@@ -13,6 +13,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/configfile-esm/package.json b/packages/e2e-tests/configfile-esm/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
     "svelte-preprocess": "^4.10.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/custom-extensions/package.json b/packages/e2e-tests/custom-extensions/package.json
@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/env/package.json b/packages/e2e-tests/env/package.json
@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/hmr/package.json b/packages/e2e-tests/hmr/package.json
@@ -15,6 +15,6 @@
     "e2e-test-dep-vite-plugins": "workspace:*",
     "node-fetch": "^2.6.7",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/package-json-svelte-field/package.json b/packages/e2e-tests/package-json-svelte-field/package.json
@@ -14,6 +14,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/preprocess-with-vite/package.json b/packages/e2e-tests/preprocess-with-vite/package.json
@@ -12,6 +12,6 @@
     "sass": "^1.49.9",
     "stylus": "^0.57.0",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/svelte-preprocess/package.json b/packages/e2e-tests/svelte-preprocess/package.json
@@ -12,6 +12,6 @@
     "svelte": "^3.46.4",
     "svelte-preprocess": "^4.10.4",
     "typescript": "^4.6.3",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/ts-type-import/package.json b/packages/e2e-tests/ts-type-import/package.json
@@ -12,6 +12,6 @@
     "@tsconfig/svelte": "^3.0.0",
     "@types/node": "^17.0.21",
     "svelte-preprocess": "^4.10.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr-esm/package.json b/packages/e2e-tests/vite-ssr-esm/package.json
@@ -21,6 +21,6 @@
     "npm-run-all": "^4.1.5",
     "serve-static": "^1.15.0",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr/package.json b/packages/e2e-tests/vite-ssr/package.json
@@ -18,6 +18,6 @@
     "express": "^4.17.3",
     "serve-static": "^1.15.0",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/playground/big-component-library/package.json b/packages/playground/big-component-library/package.json
@@ -12,6 +12,9 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "carbon-components-svelte": "^0.62.3",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
   }
 }
diff --git a/packages/playground/big-component-library/src/App.svelte b/packages/playground/big-component-library/src/App.svelte
@@ -1,9 +1,22 @@
 <script>
-	import { Accordion, AccordionItem, Button } from 'carbon-components-svelte';
+	import { Accordion, AccordionItem, Button, DatePickerInput } from 'carbon-components-svelte';
+	import Link from 'carbon-components-svelte/src/Link/Link.svelte';
+	import DatePicker from 'carbon-components-svelte/src/DatePicker/DatePicker.svelte';
+	import { assign } from 'lodash-es';
+	import toNumber from 'lodash-es/toNumber.js';
+	import toPath from 'lodash-es/toPath.js';
+
+	console.log(assign, toNumber, toPath);
 </script>
 
 <Button>Hello</Button>
 
+<Link>A</Link>
+
+<DatePicker datePickerType="single" flatpickrProps={{ static: true }}>
+	<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 <Accordion>
 	<AccordionItem title="Section 1" open>Content 1</AccordionItem>
 	<AccordionItem title="Section 2">Content 2</AccordionItem>
diff --git a/packages/playground/big/package.json b/packages/playground/big/package.json
@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/playground/optimizedeps-include/package.json b/packages/playground/optimizedeps-include/package.json
@@ -12,6 +12,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.46.4",
     "tinro": "^0.6.12",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/playground/windicss/package.json b/packages/playground/windicss/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.46.4",
-    "vite": "^2.8.6",
+    "vite": "^2.9.0",
     "vite-plugin-windicss": "^1.8.3"
   }
 }
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.44.0",
-    "vite": "^2.7.0"
+    "vite": "^2.9.0"
   },
   "peerDependenciesMeta": {
     "diff-match-patch": {
@@ -69,6 +69,6 @@
     "rollup": "^2.70.1",
     "svelte": "^3.46.4",
     "tsup": "^5.12.1",
-    "vite": "^2.8.6"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/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) {
diff --git a/packages/vite-plugin-svelte/src/utils/esbuild.ts b/packages/vite-plugin-svelte/src/utils/esbuild.ts
@@ -8,15 +8,16 @@ 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';
 
 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 }
diff --git a/packages/vite-plugin-svelte/src/utils/optimizer.ts b/packages/vite-plugin-svelte/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;
-	}
-}
diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': major
 +---
++
 +Handle edge cases for `experimental.prebundleSvelteLibraries`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,6 @@`
`17`	`17`	`"postcss-load-config": "^3.1.3",`
`18`	`18`	`"svelte": "^3.46.4",`
`19`	`19`	`"svelte-preprocess": "^4.10.4",`
`20`		`- "vite": "^2.8.6"`
	`20`	`+ "vite": "^2.9.0"`
`21`	`21`	`}`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@`
`13`	`13`	`"devDependencies": {`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.46.4",`
`16`		`- "vite": "^2.8.6"`
	`16`	`+ "vite": "^2.9.0"`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.46.4",`
`16`	`16`	`"svelte-preprocess": "^4.10.4",`
`17`		`- "vite": "^2.8.6"`
	`17`	`+ "vite": "^2.9.0"`
`18`	`18`	`},`
`19`	`19`	`"type": "module"`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,6 @@`
`10`	`10`	`"devDependencies": {`
`11`	`11`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`12`	`12`	`"svelte": "^3.46.4",`
`13`		`- "vite": "^2.8.6"`
	`13`	`+ "vite": "^2.9.0"`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`"devDependencies": {`
`11`	`11`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`12`	`12`	`"svelte": "^3.46.4",`
`13`		`- "vite": "^2.8.6"`
	`13`	`+ "vite": "^2.9.0"`
`14`	`14`	`},`
`15`	`15`	`"type": "module"`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@`
`15`	`15`	`"e2e-test-dep-vite-plugins": "workspace:*",`
`16`	`16`	`"node-fetch": "^2.6.7",`
`17`	`17`	`"svelte": "^3.46.4",`
`18`		`- "vite": "^2.8.6"`
	`18`	`+ "vite": "^2.9.0"`
`19`	`19`	`}`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,6 @@`
`14`	`14`	`"devDependencies": {`
`15`	`15`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`16`	`16`	`"svelte": "^3.46.4",`
`17`		`- "vite": "^2.8.6"`
	`17`	`+ "vite": "^2.9.0"`
`18`	`18`	`}`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,6 @@`
`12`	`12`	`"sass": "^1.49.9",`
`13`	`13`	`"stylus": "^0.57.0",`
`14`	`14`	`"svelte": "^3.46.4",`
`15`		`- "vite": "^2.8.6"`
	`15`	`+ "vite": "^2.9.0"`
`16`	`16`	`}`
`17`	`17`	`}`