sveltejs · dominikg · Aug 18, 2024 · Aug 18, 2024 · Aug 18, 2024 · Aug 20, 2024
diff --git a/.changeset/shy-moons-develop.md b/.changeset/shy-moons-develop.md
@@ -0,0 +1,6 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': patch
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Remove experimental support for svelte5 from vite-plugin-svelte@3. Svelte5 users must upgrade to vite-plugin-svelte@4
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 aggregate-output=true
 reporter=append-only
+dedupe-injected-deps=false # needed for _test_dependencies
diff --git a/package.json b/package.json
@@ -59,9 +59,9 @@
       "prettier --cache --ignore-path .gitignore --ignore-unknown --write"
     ]
   },
-  "packageManager": "pnpm@8.15.7",
+  "packageManager": "pnpm@9.6.0",
   "engines": {
-    "pnpm": "^8.6.3",
+    "pnpm": "^9.6.0",
     "node": "^18.0.0 || >=20"
   },
   "pnpm": {

diff --git a/packages/vite-plugin-svelte-inspector/package.json b/packages/vite-plugin-svelte-inspector/package.json
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "svelte": "^4.0.0 || ^5.0.0-next.0",
+    "svelte": "^4.0.0",
     "vite": "^5.0.0"
   },
   "devDependencies": {

diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -50,7 +50,7 @@
     "vitefu": "^0.2.5"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0-next.0",
+    "svelte": "^4.0.0",
     "vite": "^5.0.0"
   },
   "devDependencies": {

diff --git a/packages/vite-plugin-svelte/src/index.js b/packages/vite-plugin-svelte/src/index.js
@@ -3,9 +3,9 @@ import fs from 'node:fs';
 import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
 
 import { handleHotUpdate } from './handle-hot-update.js';
-import { log, logCompilerWarnings, logSvelte5Warning } from './utils/log.js';
+import { log, logCompilerWarnings } from './utils/log.js';
 import { createCompileSvelte } from './utils/compile.js';
-import { buildIdParser, buildModuleIdParser } from './utils/id.js';
+import { buildIdParser } from './utils/id.js';
 import {
 	buildExtraViteConfig,
 	validateInlineOptions,
@@ -19,14 +19,23 @@ import { toRollupError } from './utils/error.js';
 import { saveSvelteMetadata } from './utils/optimizer.js';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache.js';
 import { loadRaw } from './utils/load-raw.js';
-import { isSvelte5 } from './utils/svelte-version.js';
-import * as svelteCompiler from 'svelte/compiler';
+import { VERSION } from 'svelte/compiler';
 
 /**
  * @param {Partial<import('./public.d.ts').Options>} [inlineOptions]
  * @returns {import('vite').Plugin[]}
  */
 export function svelte(inlineOptions) {
+	// a previous version of vite-plugin-svelte@3 had experimental support for svelte5, let upgrading users know that they have to bump to next major
+	if (VERSION.startsWith('5.')) {
+		log.error(
+			`You are using Svelte ${VERSION} with vite-plugin-svelte@3. Svelte 5 support has moved vite-plugin-svelte@4.
+			Please update it in your devDependencies to "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6" and install.
+			For framework integrations that depend on it (e.g. astro), you have to add an override:
+			"overrides": {"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"}`.replace(/\n\s*/gm, '\n\t')
+		);
+		throw new Error('Svelte5 is not supported in vite-plugin-svelte@3, use "^4.0.0-next.6"');
+	}
 	if (process.env.DEBUG != null) {
 		log.setLevel('debug');
 	}
@@ -35,8 +44,6 @@ export function svelte(inlineOptions) {
 	// updated in configResolved hook
 	/** @type {import('./types/id.d.ts').IdParser} */
 	let requestParser;
-	/** @type {import('./types/id.d.ts').ModuleIdParser} */
-	let moduleRequestParser;
 	/** @type {import('./types/options.d.ts').ResolvedOptions} */
 	let options;
 	/** @type {import('vite').ResolvedConfig} */
@@ -178,8 +185,7 @@ export function svelte(inlineOptions) {
 			},
 
 			handleHotUpdate(ctx) {
-				// @ts-expect-error svelte4 does not have hmr option
-				if ((!options.hot && !options.compilerOptions.hmr) || !options.emitCss) {
+				if (!options.hot || !options.emitCss) {
 					return;
 				}
 				const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
@@ -192,39 +198,7 @@ export function svelte(inlineOptions) {
 			}
 		}
 	];
-	if (isSvelte5) {
-		logSvelte5Warning();
-		// TODO move to separate file
-		plugins.push({
-			name: 'vite-plugin-svelte-module',
-			enforce: 'post',
-			async configResolved() {
-				moduleRequestParser = buildModuleIdParser(options);
-			},
-			async transform(code, id, opts) {
-				const ssr = !!opts?.ssr;
-				const moduleRequest = moduleRequestParser(id, ssr);
-				if (!moduleRequest) {
-					return;
-				}
-				try {
-					// @ts-expect-error compileModule does not exist in svelte4
-					const compileResult = await svelteCompiler.compileModule(code, {
-						generate: ssr ? 'server' : 'client',
-						filename: moduleRequest.filename
-					});
-					logCompilerWarnings(moduleRequest, compileResult.warnings, options);
-					return compileResult.js;
-				} catch (e) {
-					throw toRollupError(e, options);
-				}
-			}
-		});
-	}
-	if (!isSvelte5) {
-		// TODO reenable once svelte5 has support and update utils/log.js#logSvelte5Warning
-		plugins.push(svelteInspector());
-	}
+	plugins.push(svelteInspector());
 	return plugins;
 }
 

diff --git a/packages/vite-plugin-svelte/src/utils/compile.js b/packages/vite-plugin-svelte/src/utils/compile.js
@@ -10,7 +10,6 @@ import {
 } from './preprocess.js';
 import { mapToRelative } from './sourcemaps.js';
 import { enhanceCompileError } from './error.js';
-import { isSvelte5 } from './svelte-version.js';
 
 // TODO this is a patched version of https://github.com/sveltejs/vite-plugin-svelte/pull/796/files#diff-3bce0b33034aad4b35ca094893671f7e7ddf4d27254ae7b9b0f912027a001b15R10
 // which is closer to the other regexes in at least not falling into commented script
@@ -63,8 +62,7 @@ export const _createCompileSvelte = (makeHot) => {
 		const compileOptions = {
 			...options.compilerOptions,
 			filename,
-			// @ts-expect-error svelte5 uses server/client, svelte4 uses ssr/dom
-			generate: isSvelte5 ? (ssr ? 'server' : 'client') : ssr ? 'ssr' : 'dom'
+			generate: ssr ? 'ssr' : 'dom'
 		};
 
 		if (options.hot && options.emitCss) {
@@ -203,8 +201,7 @@ export const _createCompileSvelte = (makeHot) => {
  * @returns {Function | undefined}
  */
 function buildMakeHot(options) {
-	const needsMakeHot =
-		!isSvelte5 && options.hot !== false && options.isServe && !options.isProduction;
+	const needsMakeHot = options.hot !== false && options.isServe && !options.isProduction;
 	if (needsMakeHot) {
 		// @ts-ignore
 		const hotApi = options?.hot?.hotApi;

diff --git a/packages/vite-plugin-svelte/src/utils/constants.js b/packages/vite-plugin-svelte/src/utils/constants.js
@@ -1,5 +1,3 @@
-import { isSvelte5 } from './svelte-version.js';
-
 export const VITE_RESOLVE_MAIN_FIELDS = ['browser', 'module', 'jsnext:main', 'jsnext'];
 
 export const SVELTE_RESOLVE_MAIN_FIELDS = ['svelte'];
@@ -22,11 +20,6 @@ export const SVELTE_HMR_IMPORTS = [
 	'svelte-hmr'
 ];
 
-if (isSvelte5) {
-	SVELTE_IMPORTS.push('svelte/server', 'svelte/internal/server', 'svelte/legacy');
-	SVELTE_HMR_IMPORTS.length = 0; // truncate, svelte-hmr isn't used with svelte5
-}
-
 export const SVELTE_EXPORT_CONDITIONS = ['svelte'];
 
 export const FAQ_LINK_MISSING_EXPORTS_CONDITION =

diff --git a/packages/vite-plugin-svelte/src/utils/esbuild.js b/packages/vite-plugin-svelte/src/utils/esbuild.js
@@ -2,7 +2,6 @@ import { readFileSync } from 'node:fs';
 import * as svelte from 'svelte/compiler';
 import { log } from './log.js';
 import { toESBuildError } from './error.js';
-import { isSvelte5 } from './svelte-version.js';
 
 /**
  * @typedef {NonNullable<import('vite').DepOptimizationOptions['esbuildOptions']>} EsbuildOptions
@@ -11,8 +10,6 @@ import { isSvelte5 } from './svelte-version.js';
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
-const svelteModuleExtension = '.svelte.js';
-
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @returns {EsbuildPlugin}
@@ -26,9 +23,7 @@ export function esbuildSveltePlugin(options) {
 			if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
 
 			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
-			if (isSvelte5) {
-				svelteExtensions.push(svelteModuleExtension.slice(1));
-			}
+
 			const svelteFilter = new RegExp('\\.(' + svelteExtensions.join('|') + ')(\\?.*)?$');
 			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 			let statsCollection;
@@ -60,20 +55,6 @@ export function esbuildSveltePlugin(options) {
  * @returns {Promise<string>}
  */
 async function compileSvelte(options, { filename, code }, statsCollection) {
-	if (isSvelte5 && filename.endsWith(svelteModuleExtension)) {
-		const endStat = statsCollection?.start(filename);
-		// @ts-expect-error compileModule does not exist in svelte4
-		const compiled = svelte.compileModule(code, {
-			filename,
-			generate: 'client'
-		});
-		if (endStat) {
-			endStat();
-		}
-		return compiled.js.map
-			? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
-			: compiled.js.code;
-	}
 	let css = options.compilerOptions.css;
 	if (css !== 'none') {
 		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
@@ -84,8 +65,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		...options.compilerOptions,
 		css,
 		filename,
-		// @ts-expect-error svelte4 uses 'dom', svelte5 uses 'client'
-		generate: isSvelte5 ? 'client' : 'dom'
+		generate: 'dom'
 	};
 
 	let preprocessed;

diff --git a/packages/vite-plugin-svelte/src/utils/id.js b/packages/vite-plugin-svelte/src/utils/id.js
@@ -184,49 +184,3 @@ export function buildIdParser(options) {
 		}
 	};
 }
-
-/**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {import('../types/id.d.ts').ModuleIdParser}
- */
-export function buildModuleIdParser(options) {
-	const { include, exclude, extensions } = options?.experimental?.compileModule ?? {};
-	const root = options.root;
-	const normalizedRoot = normalizePath(root);
-	const filter = buildFilter(include, exclude, extensions ?? ['.svelte.js', '.svelte.ts']);
-	return (id, ssr, timestamp = Date.now()) => {
-		const { filename, rawQuery } = splitId(id);
-		if (filter(filename)) {
-			return parseToSvelteModuleRequest(id, filename, rawQuery, normalizedRoot, timestamp, ssr);
-		}
-	};
-}
-
-/**
- * @param {string} id
- * @param {string} filename
- * @param {string} rawQuery
- * @param {string} root
- * @param {number} timestamp
- * @param {boolean} ssr
- * @returns {import('../types/id.d.ts').SvelteModuleRequest | undefined}
- */
-function parseToSvelteModuleRequest(id, filename, rawQuery, root, timestamp, ssr) {
-	const query = parseRequestQuery(rawQuery);
-
-	if (query.url || query.raw || query.direct) {
-		// skip requests with special vite tags
-		return;
-	}
-
-	const normalizedFilename = normalize(filename, root);
-
-	return {
-		id,
-		filename,
-		normalizedFilename,
-		query,
-		timestamp,
-		ssr
-	};
-}
diff --git a/packages/vite-plugin-svelte/src/utils/load-raw.js b/packages/vite-plugin-svelte/src/utils/load-raw.js
@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import { toRollupError } from './error.js';
 import { log } from './log.js';
-import { isSvelte4, isSvelte5 } from './svelte-version.js';
+
 /**
  * utility function to compile ?raw and ?direct requests in load hook
  *
@@ -18,23 +18,20 @@ export async function loadRaw(svelteRequest, compileSvelte, options) {
 	const source = fs.readFileSync(filename, 'utf-8');
 	try {
 		//avoid compileSvelte doing extra ssr stuff unless requested
-		//@ts-ignore //@ts-expect-error generate value differs between svelte4 and 5
-		svelteRequest.ssr = query.compilerOptions?.generate === (isSvelte4 ? 'ssr' : 'server');
+		svelteRequest.ssr = query.compilerOptions?.generate === 'ssr';
 		const type = query.type;
 		compileData = await compileSvelte(svelteRequest, source, {
 			...options,
 			// don't use dynamic vite-plugin-svelte defaults here to ensure stable result between ssr,dev and build
 			compilerOptions: {
 				dev: false,
 				css: 'external',
-				enableSourcemap: isSvelte5
-					? undefined
-					: query.sourcemap
-						? {
-								js: type === 'script' || type === 'all',
-								css: type === 'style' || type === 'all'
-							}
-						: false,
+				enableSourcemap: query.sourcemap
+					? {
+							js: type === 'script' || type === 'all',
+							css: type === 'style' || type === 'all'
+						}
+					: false,
 				...svelteRequest.query.compilerOptions
 			},
 			hot: false,

diff --git a/packages/vite-plugin-svelte/src/utils/log.js b/packages/vite-plugin-svelte/src/utils/log.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import { cyan, red, yellow } from 'kleur/colors';
 import debug from 'debug';
-import { VERSION } from 'svelte/compiler';
 
 /** @type {import('../types/log.d.ts').LogLevel[]} */
 const levels = ['debug', 'info', 'warn', 'error', 'silent'];
@@ -260,9 +259,3 @@ export function buildExtendedLogMessage(w) {
 export function isDebugNamespaceEnabled(namespace) {
 	return debug.enabled(`${prefix}:${namespace}`);
 }
-
-export function logSvelte5Warning() {
-	const notice = `You are using Svelte ${VERSION}. Svelte 5 support is experimental, breaking changes can occur in any release until this notice is removed.`;
-	const wip = ['svelte-inspector is disabled until dev mode implements node to code mapping'];
-	log.warn(`${notice}\nwork in progress:\n - ${wip.join('\n - ')}\n`);
-}