feat: enable optimizer for server environments during dev (#1328)

* try this

* changeset

* fix

* fix

* fix

* in case of undefined

* real fix

* don't filter svelte imports for the server

* fix

* try mapping path to remove fs info

Co-authored-by: Copilot <copilot@github.com>

* revert

* this isn't used anymore

* test kit change

* fix lockfile

* bump kit

---------

Co-authored-by: Copilot <copilot@github.com>

Author: teemingc

.changeset/wet-cats-study.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat: enable optimizer for server environments during dev

package.json

@@ -29,7 +29,7 @@
     "@eslint/markdown": "^7.5.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@sveltejs/eslint-config": "^9.0.0",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "catalog:",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.19.1",

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

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "catalog:",
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "svelte": "^5.45.4",
     "vite": "catalog:"

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

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^5.4.0",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "catalog:",
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "svelte": "^5.45.4",
     "svelte-check": "^4.3.4",

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

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^5.4.0",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "catalog:",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "e2e-test-dep-svelte-api-only": "file:../_test_dependencies/svelte-api-only",

packages/vite-plugin-svelte/src/plugins/setup-optimizer.js

@@ -3,16 +3,18 @@
 /** @import { PluginAPI } from '../types/plugin-api.js' */
 /** @import { StatCollection } from '../types/vite-plugin-svelte-stats.js' */
 /** @import { CompileOptions } from 'svelte/compiler' */
-/** @import { Plugin, ResolvedConfig, Rollup, UserConfig } from 'vite' */
+/** @import { Plugin, ResolvedConfig, Rolldown, UserConfig } from 'vite' */
 
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import * as svelte from 'svelte/compiler';
 import { log } from '../utils/log.js';
 import { toRollupError } from '../utils/error.js';
+import { SVELTE_IMPORTS } from '../utils/constants.js';
+import { isDepExcluded } from 'vitefu';
 
 /**
- * @typedef {NonNullable<Rollup.Plugin>} RollupPlugin
+ * @typedef {NonNullable<Rolldown.Plugin>} RollupPlugin
  */
 
 const optimizeSveltePluginName = 'vite-plugin-svelte:optimize';
@@ -29,36 +31,31 @@ export function setupOptimizer(api) {
 	return {
 		name: 'vite-plugin-svelte:setup-optimizer',
 		apply: 'serve',
-		config() {
+		configEnvironment(name, config) {
+			// fall back to vite behavior when consumer isn't set
+			const consumer = (config.consumer ?? name === 'client') ? 'client' : 'server';
 			/** @type {UserConfig['optimizeDeps']} */
 			const optimizeDeps = {
 				// Experimental Vite API to allow these extensions to be scanned and prebundled
 				extensions: ['.svelte']
 			};
-			// Add optimizer plugins to prebundle Svelte files.
-			// Currently, a placeholder as more information is needed after Vite config is resolved,
-			// the added plugins are patched in configResolved below
 
+			// Add optimizer plugins to prebundle Svelte files.
 			optimizeDeps.rolldownOptions = {
 				plugins: [
-					placeholderRolldownOptimizerPlugin(optimizeSveltePluginName),
-					placeholderRolldownOptimizerPlugin(optimizeSvelteModulePluginName)
+					rolldownOptimizerPlugin(api, consumer, true),
+					rolldownOptimizerPlugin(api, consumer, false)
 				]
 			};
 
+			if (consumer === 'server' && !isDepExcluded('svelte', config.optimizeDeps?.exclude ?? [])) {
+				optimizeDeps.include = [...SVELTE_IMPORTS];
+			}
+
 			return { optimizeDeps };
 		},
 		configResolved(c) {
 			viteConfig = c;
-			const optimizeDeps = c.optimizeDeps;
-			const plugins =
-				// @ts-expect-error not typed
-				optimizeDeps.rolldownOptions?.plugins?.filter((p) =>
-					[optimizeSveltePluginName, optimizeSvelteModulePluginName].includes(p.name)
-				) ?? [];
-			for (const plugin of plugins) {
-				patchRolldownOptimizerPlugin(plugin, api.options);
-			}
 		},
 		async buildStart() {
 			if (!api.options.prebundleSvelteLibraries) return;
@@ -73,21 +70,29 @@ export function setupOptimizer(api) {
 }
 
 /**
- * @param {RollupPlugin} plugin
- * @param {ResolvedOptions} options
+ * @param {import('../types/plugin-api.d.ts').PluginAPI} api
+ * @param {'server'|'client'} consumer
+ * @param {boolean} components
+ * @return {Rolldown.Plugin}
  */
-function patchRolldownOptimizerPlugin(plugin, options) {
-	const components = plugin.name === optimizeSveltePluginName;
+function rolldownOptimizerPlugin(api, consumer, components) {
+	const name = components ? optimizeSveltePluginName : optimizeSvelteModulePluginName;
 	const compileFn = components ? compileSvelte : compileSvelteModule;
 	const statsName = components ? 'prebundle library components' : 'prebundle library modules';
 	const includeRe = components ? /^[^?#]+\.svelte(?:[?#]|$)/ : /^[^?#]+\.svelte\.[jt]s(?:[?#]|$)/;
+	const generate = consumer === 'server' ? 'server' : 'client';
 	/** @type {StatCollection | undefined} */
 	let statsCollection;
 
+	/**@type {Rolldown.Plugin}*/
+	const plugin = {
+		name
+	};
+
 	plugin.options = (opts) => {
 		// @ts-expect-error plugins is an array here
 		const isScanner = opts.plugins.some(
-			(/** @type {{ name: string; }} */ p) => p.name === 'vite:dep-scan:resolve'
+			(/** @type {{ name: string; } | undefined} */ p) => p?.name === 'vite:dep-scan:resolve'
 		);
 		if (isScanner) {
 			delete plugin.buildStart;
@@ -102,14 +107,14 @@ function patchRolldownOptimizerPlugin(plugin, options) {
 				 */
 				async handler(code, filename) {
 					try {
-						return await compileFn(options, { filename, code }, statsCollection);
+						return await compileFn(api.options, { filename, code }, generate, statsCollection);
 					} catch (e) {
-						throw toRollupError(e, options);
+						throw toRollupError(e, api.options);
 					}
 				}
 			};
 			plugin.buildStart = () => {
-				statsCollection = options.stats?.startCollection(statsName, {
+				statsCollection = api.options.stats?.startCollection(statsName, {
 					logResult: (c) => c.stats.length > 1
 				});
 			};
@@ -118,15 +123,18 @@ function patchRolldownOptimizerPlugin(plugin, options) {
 			};
 		}
 	};
+
+	return plugin;
 }
 
 /**
  * @param {ResolvedOptions} options
  * @param {{ filename: string, code: string }} input
+ * @param {'client'|'server'} generate
  * @param {StatCollection} [statsCollection]
  * @returns {Promise<Code>}
  */
-async function compileSvelte(options, { filename, code }, statsCollection) {
+async function compileSvelte(options, { filename, code }, generate, statsCollection) {
 	let css = options.compilerOptions.css;
 	if (css !== 'injected') {
 		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
@@ -138,7 +146,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		...options.compilerOptions,
 		css,
 		filename,
-		generate: 'client'
+		generate
 	};
 
 	let preprocessed;
@@ -189,15 +197,16 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 /**
  * @param {ResolvedOptions} options
  * @param {{ filename: string; code: string }} input
+ * @param {'client'|'server'} generate
  * @param {StatCollection} [statsCollection]
  * @returns {Promise<Code>}
  */
-async function compileSvelteModule(options, { filename, code }, statsCollection) {
+async function compileSvelteModule(options, { filename, code }, generate, statsCollection) {
 	const endStat = statsCollection?.start(filename);
 	const compiled = svelte.compileModule(code, {
 		dev: options.compilerOptions?.dev ?? true, // default to dev: true because prebundling is only used in dev
 		filename,
-		generate: 'client'
+		generate
 	});
 	if (endStat) {
 		endStat();
@@ -247,21 +256,6 @@ async function svelteMetadataChanged(cacheDir, options) {
 	return currentSvelteMetadata !== existingSvelteMetadata;
 }
 
-/**
- *
- * @param {string} name
- * @returns {Rollup.Plugin}
- */
-function placeholderRolldownOptimizerPlugin(name) {
-	return {
-		name,
-		options() {},
-		buildStart() {},
-		buildEnd() {},
-		transform: { filter: { id: /^$/ }, handler() {} }
-	};
-}
-
 /**
  * @param {ResolvedOptions} options
  * @returns {Partial<ResolvedOptions>}

packages/vite-plugin-svelte/src/utils/constants.js

@@ -1,25 +1,47 @@
 import { createRequire } from 'node:module';
 
+/** @type {import('svelte/package.json')} */
 const sveltePkg = createRequire(import.meta.url)('svelte/package.json');
 
 // list of svelte runtime dependencies to optimize together with svelte itself
-export const SVELTE_RUNTIME_DEPENDENCIES = [
+export const SVELTE_RUNTIME_DEPENDENCIES = /** @type {const} */ ([
 	'clsx' // avoids dev server restart after page load with npm + vite6 (see #1067)
-].filter((dep) => !!sveltePkg.dependencies?.[dep]);
+]).filter((dep) => !!sveltePkg.dependencies?.[dep]);
 
 export const SVELTE_IMPORTS = Object.entries(sveltePkg.exports)
-	.map(([name, config]) => {
-		// ignore type only
-		if (typeof config === 'object' && Object.keys(config).length === 1 && config.types) {
-			return '';
-		}
+	.filter(([name, config]) => {
 		// ignore names
-		if (name === './package.json' || name === './compiler') {
+		if (name === './package.json') {
 			return '';
 		}
-		return name.replace(/^\./, 'svelte');
+
+		// ignore type only
+		return !(
+			typeof config === 'object' &&
+			Object.keys(config).length === 1 &&
+			'types' in config &&
+			config.types
+		);
 	})
-	.filter((s) => s.length > 0);
+	.map(([name]) => {
+		return name.replace(/^\./, 'svelte');
+	});
+
+export const SVELTE_DEDUPED_IMPORTS = SVELTE_IMPORTS.map((name) => {
+	if (name === 'svelte/compiler') {
+		return '';
+	}
+	return name;
+}).filter((s) => s.length > 0);
+
+export const SVELTE_CLIENT_IMPORTS = SVELTE_IMPORTS.map((name) => {
+	// ignore names
+	if (name === 'svelte/compiler' || name.endsWith('/server') || name.includes('/server/')) {
+		return '';
+	}
+
+	return name;
+}).filter((s) => s.length > 0);
 
 export const SVELTE_EXPORT_CONDITIONS = ['svelte'];
 

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

@@ -21,7 +21,8 @@ import {
 	FAQ_LINK_MISSING_EXPORTS_CONDITION,
 	LINK_TRANSFORM_WITH_PLUGIN,
 	SVELTE_EXPORT_CONDITIONS,
-	SVELTE_IMPORTS,
+	SVELTE_CLIENT_IMPORTS,
+	SVELTE_DEDUPED_IMPORTS,
 	SVELTE_RUNTIME_DEPENDENCIES
 } from './constants.js';
 
@@ -369,7 +370,7 @@ export async function buildExtraViteConfig(options, config) {
 	/** @type {Partial<UserConfig>} */
 	const extraViteConfig = {
 		resolve: {
-			dedupe: [...SVELTE_IMPORTS]
+			dedupe: [...SVELTE_DEDUPED_IMPORTS]
 		}
 		// this option is still awaiting a PR in vite to be supported
 		// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
@@ -572,9 +573,7 @@ function buildExtraConfigForSvelte(config) {
 	/** @type {string[]} */
 	const exclude = [];
 	if (!isDepExcluded('svelte', config.optimizeDeps?.exclude ?? [])) {
-		const svelteImportsToInclude = SVELTE_IMPORTS.filter(
-			(si) => !(si.endsWith('/server') || si.includes('/server/'))
-		);
+		const svelteImportsToInclude = [...SVELTE_CLIENT_IMPORTS];
 		svelteImportsToInclude.push(...SVELTE_RUNTIME_DEPENDENCIES.map((dep) => `svelte > ${dep}`));
 		log.debug(
 			`adding bare svelte packages and runtime dependencies to optimizeDeps.include: ${svelteImportsToInclude.join(', ')} `,