fix(ssr): simplify noExternal in dev (#169)

* fix(ssr): simplify noExternal in dev

* chore: add changeset

* refactor(options): cleanup svelte deps flow

Author: bluwy

.changeset/brave-drinks-look.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Only add all Svelte dependencies to ssr.noExternal in SSR build

packages/e2e-tests/kit-node/package.json

@@ -11,7 +11,8 @@
     "@sveltejs/adapter-node": "^1.0.0-next.46",
     "@sveltejs/kit": "^1.0.0-next.165",
     "e2e-test-dep-svelte-api-only": "workspace:*",
-    "svelte": "^3.42.4"
+    "svelte": "^3.42.4",
+    "svelte-i18n": "^3.3.10"
   },
   "type": "module",
   "engines": {

packages/e2e-tests/kit-node/src/routes/index.svelte

@@ -18,6 +18,7 @@
 
 <script>
 	import { onMount } from 'svelte';
+	import { addMessages, init, _ } from 'svelte-i18n';
 	// eslint-disable-next-line node/no-missing-import
 	import Counter from '$lib/Counter.svelte';
 	// eslint-disable-next-line node/no-missing-import
@@ -31,6 +32,11 @@
 		mount_status = 'AFTER_MOUNT';
 	});
 	setSomeContext();
+	addMessages('en', { welcome: 'hello' });
+	init({
+		fallbackLocale: 'en',
+		initialLocale: 'en'
+	});
 </script>
 
 <main>
@@ -44,6 +50,7 @@
 	<div id="after-child">after-child</div>
 	<div id="load">{load_status}</div>
 	<div id="mount">{mount_status}</div>
+	<div>{$_('welcome')}</div>
 </main>
 
 <!-- HMR-TEMPLATE-INJECT -->

packages/vite-plugin-svelte/src/utils/options.ts

@@ -199,7 +199,7 @@ export function buildExtraViteConfig(
 
 	if (configEnv.command === 'serve') {
 		extraViteConfig.optimizeDeps = buildOptimizeDepsForSvelte(
-			svelteDeps.filter((dep) => dep.type === 'component-library'),
+			svelteDeps,
 			options,
 			config.optimizeDeps
 		);
@@ -227,6 +227,8 @@ function buildOptimizeDepsForSvelte(
 	options: ResolvedOptions,
 	optimizeDeps?: DepOptimizationOptions
 ): DepOptimizationOptions {
+	// only svelte component libraries needs to be processed for optimizeDeps, js libraries work fine
+	svelteDeps = svelteDeps.filter((dep) => dep.type === 'component-library');
 	// include svelte imports for optimization unless explicitly excluded
 	const include: string[] = [];
 	const exclude: string[] = ['svelte-hmr'];
@@ -292,6 +294,12 @@ function buildSSROptionsForSvelte(
 		if (!config.ssr?.external?.includes('svelte')) {
 			noExternal.push('svelte');
 		}
+	} else {
+		// for non-ssr build, we exclude svelte js library deps to make development faster
+		// and also because vite doesn't handle them properly.
+		// see https://github.com/sveltejs/vite-plugin-svelte/issues/168
+		// see https://github.com/vitejs/vite/issues/2579
+		svelteDeps = svelteDeps.filter((dep) => dep.type === 'component-library');
 	}
 
 	// add svelte dependencies to ssr.noExternal unless present in ssr.external or optimizeDeps.include