feat: allow svelte imports in optimizeDeps include (#68)

sveltejs · Jun 23, 2021 · 9583900 · 9583900
1 parent a58978e
commit 9583900
Show file tree

Hide file tree

Showing 13 changed files with 179 additions and 26 deletions.
diff --git a/.changeset/popular-yaks-fetch.md b/.changeset/popular-yaks-fetch.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat: Allow svelte imports to be added to optimizeDeps.include and don't exclude svelte from optimizeDeps then
diff --git a/packages/playground/optimizedeps-include/README.md b/packages/playground/optimizedeps-include/README.md
@@ -0,0 +1,2 @@
+reproduction of failed dedupe for svelte
+project setup from https://github.com/bluwy/vite-svelte-dedupe
diff --git a/packages/playground/optimizedeps-include/index.html b/packages/playground/optimizedeps-include/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Svelte + Vite App</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>
diff --git a/packages/playground/optimizedeps-include/jsconfig.json b/packages/playground/optimizedeps-include/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/playground/optimizedeps-include/package.json b/packages/playground/optimizedeps-include/package.json
@@ -0,0 +1,16 @@
+{
+	"name": "playground-optimizedeps-include",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "^3.38.1",
+    "vite": "^2.3.8",
+		"tinro": "^0.6.4"
+  }
+}
diff --git a/packages/playground/optimizedeps-include/src/App.svelte b/packages/playground/optimizedeps-include/src/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { Route, router } from 'tinro';
+</script>
+
+<nav>
+	<a href="/foo">To foo</a>
+	<a href="/bar">To bar</a>
+	<button on:click={() => router.goto('/bar')}>Go bar</button>
+</nav>
+<Route path="/foo"><h1>Foo route</h1></Route>
+<Route path="/bar"><h1>Bar route</h1></Route>
+<Route fallback><h1>Default route</h1></Route>
+
+<pre>
+	$router: {JSON.stringify($router,null,2)}
+</pre>
diff --git a/packages/playground/optimizedeps-include/src/main.js b/packages/playground/optimizedeps-include/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.getElementById('app')
+});
+
+export default app;
diff --git a/packages/playground/optimizedeps-include/src/vite-env.d.ts b/packages/playground/optimizedeps-include/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/playground/optimizedeps-include/vite.config.js b/packages/playground/optimizedeps-include/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+const SVELTE_IMPORTS = [
+	'svelte/animate',
+	'svelte/easing',
+	'svelte/internal',
+	'svelte/motion',
+	'svelte/store',
+	'svelte/transition',
+	'svelte'
+];
+export default defineConfig(({ command, mode }) => {
+	const isProduction = mode === 'production';
+	return {
+		optimizeDeps: {
+			include: [...SVELTE_IMPORTS]
+		},
+		plugins: [svelte()],
+		build: {
+			minify: isProduction
+		}
+	};
+});
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -4,6 +4,7 @@ import { log, logCompilerWarnings } from './utils/log';
 import { CompileData, createCompileSvelte } from './utils/compile';
 import { buildIdParser, IdParser, SvelteRequest } from './utils/id';
 import {
+	buildExtraViteConfig,
 	validateInlineOptions,
 	Options,
 	ResolvedOptions,
@@ -12,7 +13,6 @@ import {
 } from './utils/options';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 
-import { SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './utils/constants';
 import { setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
 import { addExtraPreprocessors } from './utils/preprocess';
@@ -56,30 +56,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			}
 			options = await resolveOptions(inlineOptions, config, configEnv);
 			// extra vite config
-			const extraViteConfig: Partial<UserConfig> = {
-				optimizeDeps: {
-					exclude: [...SVELTE_IMPORTS]
-				},
-				resolve: {
-					mainFields: [...SVELTE_RESOLVE_MAIN_FIELDS],
-					dedupe: [...SVELTE_IMPORTS]
-				},
-				// this option is still awaiting a PR in vite to be supported
-				// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
-				// @ts-ignore
-				knownJsSrcExtensions: options.extensions
-			};
-			// needed to transform svelte files with component imports
-			// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
-			if (options.useVitePreprocess) {
-				extraViteConfig.esbuild = {
-					tsconfigRaw: {
-						compilerOptions: {
-							importsNotUsedAsValues: 'preserve'
-						}
-					}
-				};
-			}
+			const extraViteConfig = buildExtraViteConfig(options, config);
 			log.debug('additional vite config', extraViteConfig);
 			return extraViteConfig as Partial<UserConfig>;
 		},

diff --git a/packages/vite-plugin-svelte/src/utils/constants.ts b/packages/vite-plugin-svelte/src/utils/constants.ts
@@ -9,7 +9,10 @@ export const SVELTE_IMPORTS = [
 	'svelte/motion',
 	'svelte/store',
 	'svelte/transition',
-	'svelte',
+	'svelte'
+];
+
+export const SVELTE_HMR_IMPORTS = [
 	'svelte-hmr/runtime/hot-api-esm.js',
 	'svelte-hmr/runtime/proxy-adapter-dom.js',
 	'svelte-hmr'

diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts
@@ -2,6 +2,7 @@
 import { ConfigEnv, UserConfig, ViteDevServer } from 'vite';
 import { log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
+import { SVELTE_HMR_IMPORTS, SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './constants';
 
 const knownOptions = new Set([
 	'configFile',
@@ -151,6 +152,45 @@ export async function resolveOptions(
 	return resolvedOptions;
 }
 
+export function buildExtraViteConfig(
+	options: ResolvedOptions,
+	config: UserConfig
+): Partial<UserConfig> {
+	const allSvelteImports = [...SVELTE_IMPORTS, ...SVELTE_HMR_IMPORTS];
+
+	// exclude svelte imports from optimization unless explicitly included
+	const excludeFromOptimize = allSvelteImports.filter(
+		(x) => !config.optimizeDeps?.include?.includes(x)
+	);
+
+	const extraViteConfig: Partial<UserConfig> = {
+		optimizeDeps: {
+			exclude: excludeFromOptimize
+		},
+		resolve: {
+			mainFields: [...SVELTE_RESOLVE_MAIN_FIELDS],
+			dedupe: allSvelteImports
+		},
+		// this option is still awaiting a PR in vite to be supported
+		// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
+		// @ts-ignore
+		knownJsSrcExtensions: options.extensions
+	};
+
+	if (options.useVitePreprocess) {
+		// needed to transform svelte files with component imports
+		// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
+		extraViteConfig.esbuild = {
+			tsconfigRaw: {
+				compilerOptions: {
+					importsNotUsedAsValues: 'preserve'
+				}
+			}
+		};
+	}
+	return extraViteConfig;
+}
+
 export interface Options {
 	// eslint-disable no-unused-vars
 	/** path to svelte config file, either absolute or relative to vite root*/

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml