feat: externalize svelte in ssr

Author: bluwy

packages/vite-plugin-svelte/src/index.ts

@@ -16,7 +16,6 @@ import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 import { ensureWatchedFile, setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
 import { addExtraPreprocessors } from './utils/preprocess';
-import { PartialResolvedId } from 'rollup';
 
 export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	if (process.env.DEBUG != null) {
@@ -37,8 +36,6 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	) => Promise<CompileData>;
 	/* eslint-enable no-unused-vars */
 
-	let resolvedSvelteSSR: Promise<PartialResolvedId | null>;
-
 	return {
 		name: 'vite-plugin-svelte',
 		// make sure our resolver runs before vite internal resolver to resolve svelte field correctly
@@ -104,25 +101,6 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 				return importee; // query with svelte tag, an id we generated, no need for further analysis
 			}
 
-			if (ssr && importee === 'svelte') {
-				if (!resolvedSvelteSSR) {
-					resolvedSvelteSSR = this.resolve('svelte/ssr', undefined, { skipSelf: true }).then(
-						(svelteSSR) => {
-							log.debug('resolved svelte to svelte/ssr');
-							return svelteSSR;
-						},
-						(err) => {
-							log.debug(
-								'failed to resolve svelte to svelte/ssr. Update svelte to a version that exports it',
-								err
-							);
-							return null; // returning null here leads to svelte getting resolved regularly
-						}
-					);
-				}
-				return resolvedSvelteSSR;
-			}
-
 			try {
 				const resolved = resolveViaPackageJsonSvelte(importee, importer);
 				if (resolved) {

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

@@ -7,7 +7,6 @@ export const SVELTE_IMPORTS = [
 	'svelte/easing',
 	'svelte/internal',
 	'svelte/motion',
-	'svelte/ssr',
 	'svelte/store',
 	'svelte/transition',
 	'svelte'

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

@@ -42,11 +42,10 @@ function getSvelteDependencies(
 		.map((dep) => resolveDependencyData(dep, localRequire))
 		.filter(Boolean) as DependencyData[];
 	for (const { pkg, dir } of resolvedDeps) {
-		const type = getSvelteDependencyType(pkg);
-		if (!type) continue;
-		result.push({ name: pkg.name, type, pkg, dir, path });
+		if (!isSvelteComponentLib(pkg)) continue;
+		result.push({ name: pkg.name, pkg, dir, path });
 		// continue crawling for component libraries so we can optimize them, js libraries are fine
-		if (type === 'component-library' && pkg.dependencies) {
+		if (pkg.dependencies) {
 			let dependencyNames = Object.keys(pkg.dependencies);
 			const circular = dependencyNames.filter((name) => path.includes(name));
 			if (circular.length > 0) {
@@ -104,24 +103,10 @@ function parsePkg(dir: string, silent = false): Pkg | void {
 	}
 }
 
-function getSvelteDependencyType(pkg: Pkg): SvelteDependencyType | undefined {
-	if (isSvelteComponentLib(pkg)) {
-		return 'component-library';
-	} else if (isSvelteLib(pkg)) {
-		return 'js-library';
-	} else {
-		return undefined;
-	}
-}
-
 function isSvelteComponentLib(pkg: Pkg) {
 	return !!pkg.svelte;
 }
 
-function isSvelteLib(pkg: Pkg) {
-	return !!pkg.dependencies?.svelte || !!pkg.peerDependencies?.svelte;
-}
-
 const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
 	'@lukeed/uuid',
 	'@sveltejs/vite-plugin-svelte',
@@ -194,16 +179,11 @@ interface DependencyData {
 
 export interface SvelteDependency {
 	name: string;
-	type: SvelteDependencyType;
 	dir: string;
 	pkg: Pkg;
 	path: string[];
 }
 
-// component-library => exports svelte components
-// js-library        => only uses svelte api, no components
-export type SvelteDependencyType = 'component-library' | 'js-library';
-
 export interface Pkg {
 	name: string;
 	svelte?: string;

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

@@ -206,7 +206,7 @@ export function buildExtraViteConfig(
 	}
 
 	// @ts-ignore
-	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config);
+	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, config);
 
 	if (options.experimental?.useVitePreprocess) {
 		// needed to transform svelte files with component imports
@@ -227,8 +227,6 @@ 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'];
@@ -242,11 +240,8 @@ function buildOptimizeDepsForSvelte(
 		);
 	};
 	if (!isExcluded('svelte')) {
-		const svelteImportsToInclude = SVELTE_IMPORTS.filter((x) => x !== 'svelte/ssr'); // not used on clientside
-		log.debug(
-			`adding bare svelte packages to optimizeDeps.include: ${svelteImportsToInclude.join(', ')} `
-		);
-		include.push(...svelteImportsToInclude.filter((x) => !isIncluded(x)));
+		log.debug(`adding bare svelte packages to optimizeDeps.include: ${SVELTE_IMPORTS.join(', ')} `);
+		include.push(...SVELTE_IMPORTS.filter((x) => !isIncluded(x)));
 	} else {
 		log.debug('"svelte" is excluded in optimizeDeps.exclude, skipped adding it to include.');
 	}
@@ -280,28 +275,8 @@ function buildOptimizeDepsForSvelte(
 	return { include, exclude };
 }
 
-function buildSSROptionsForSvelte(
-	svelteDeps: SvelteDependency[],
-	options: ResolvedOptions,
-	config: UserConfig
-): any {
+function buildSSROptionsForSvelte(svelteDeps: SvelteDependency[], config: UserConfig): any {
 	const noExternal: string[] = [];
-
-	// add svelte to ssr.noExternal unless it is present in ssr.external
-	// so we can resolve it with svelte/ssr
-	if (options.isBuild && config.build?.ssr) {
-		// @ts-ignore
-		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
 	noExternal.push(
 		...Array.from(new Set(svelteDeps.map((s) => s.name))).filter((x) => {
@@ -310,6 +285,9 @@ function buildSSROptionsForSvelte(
 		})
 	);
 	return {
+		// never bundle svelte so node can resolve the `node` conditional exports
+		// NOTE: this also externalizes `svelte/*`
+		external: ['svelte'],
 		noExternal
 	};
 }