@sveltejs/vite-plugin-svelte 3.0.2 → 4.0.0-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "3.0.2",
+  "version": "4.0.0-next.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -18,7 +18,7 @@
     }
   },
   "engines": {
-    "node": "^18.0.0 || >=20"
+    "node": "^18.0.0 || ^20.0.0 || >=22"
   },
   "repository": {
     "type": "git",
@@ -39,21 +39,20 @@
     "debug": "^4.3.4",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
-    "magic-string": "^0.30.5",
-    "svelte-hmr": "^0.15.3",
+    "magic-string": "^0.30.10",
     "vitefu": "^0.2.5",
-    "@sveltejs/vite-plugin-svelte-inspector": "^2.0.0"
+    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0-next.0",
+    "svelte": "^5.0.0-next.96 || ^5.0.0",
     "vite": "^5.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "esbuild": "^0.19.12",
-    "sass": "^1.70.0",
-    "svelte": "^4.2.9",
-    "vite": "^5.0.11"
+    "esbuild": "^0.20.2",
+    "sass": "^1.76.0",
+    "svelte": "^5.0.0-next.123",
+    "vite": "^5.2.11"
   },
   "scripts": {
     "check:publint": "publint --strict",

package/src/handle-hot-update.js

@@ -81,8 +81,8 @@ export async function handleHotUpdate(compileSvelte, ctx, svelteRequest, cache,
 }
 
 /**
- * @param {import('./types/compile.d.ts').Code} [prev]
- * @param {import('./types/compile.d.ts').Code} [next]
+ * @param {import('./types/compile.d.ts').Code | null} [prev]
+ * @param {import('./types/compile.d.ts').Code | null} [next]
  * @returns {boolean}
  */
 function cssChanged(prev, next) {
@@ -90,8 +90,8 @@ function cssChanged(prev, next) {
 }
 
 /**
- * @param {import('./types/compile.d.ts').Code} [prev]
- * @param {import('./types/compile.d.ts').Code} [next]
+ * @param {import('./types/compile.d.ts').Code | null} [prev]
+ * @param {import('./types/compile.d.ts').Code | null} [next]
  * @param {string} [filename]
  * @returns {boolean}
  */

package/src/index.js

@@ -1,9 +1,7 @@
 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 {
@@ -13,13 +11,11 @@ import {
 	patchResolvedViteConfig,
 	preResolveOptions
 } from './utils/options.js';
-
 import { ensureWatchedFile, setupWatchers } from './utils/watch.js';
 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';
 
 /**
@@ -72,7 +68,7 @@ export function svelte(inlineOptions) {
 				options = resolveOptions(options, config, cache);
 				patchResolvedViteConfig(config, options);
 				requestParser = buildIdParser(options);
-				compileSvelte = createCompileSvelte(options);
+				compileSvelte = createCompileSvelte();
 				viteConfig = config;
 				// TODO deep clone to avoid mutability from outside?
 				api.options = options;
@@ -178,7 +174,7 @@ export function svelte(inlineOptions) {
 			},
 
 			handleHotUpdate(ctx) {
-				if (!options.hot || !options.emitCss) {
+				if (!options.compilerOptions.hmr || !options.emitCss) {
 					return;
 				}
 				const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
@@ -189,12 +185,8 @@ export function svelte(inlineOptions) {
 			async buildEnd() {
 				await options.stats?.finishAll();
 			}
-		}
-	];
-	if (isSvelte5) {
-		logSvelte5Warning();
-		// TODO move to separate file
-		plugins.push({
+		},
+		{
 			name: 'vite-plugin-svelte-module',
 			enforce: 'post',
 			async configResolved() {
@@ -207,8 +199,7 @@ export function svelte(inlineOptions) {
 					return;
 				}
 				try {
-					// @ts-expect-error compileModule does not exist in svelte4
-					const compileResult = await svelteCompiler.compileModule(code, {
+					const compileResult = svelteCompiler.compileModule(code, {
 						generate: ssr ? 'server' : 'client',
 						filename: moduleRequest.filename
 					});
@@ -218,12 +209,9 @@ export function svelte(inlineOptions) {
 					throw toRollupError(e, options);
 				}
 			}
-		});
-	}
-	if (!isSvelte5) {
-		// TODO reenable once svelte5 has support and update utils/log.js#logSvelte5Warning
-		plugins.push(svelteInspector());
-	}
+		},
+		svelteInspector()
+	];
 	return plugins;
 }
 

package/src/preprocess.js

@@ -16,7 +16,7 @@ export const lang_sep = '.vite-preprocess';
 export function vitePreprocess(opts) {
 	/** @type {import('svelte/compiler').PreprocessorGroup} */
 	const preprocessor = { name: 'vite-preprocess' };
-	if (opts?.script !== false) {
+	if (opts?.script === true) {
 		preprocessor.script = viteScript().script;
 	}
 	if (opts?.style !== false) {

package/src/public.d.ts

@@ -1,6 +1,6 @@
 import type { InlineConfig, ResolvedConfig } from 'vite';
 import type { CompileOptions } from 'svelte/compiler';
-import type { Warning } from 'svelte/types/compiler/interfaces';
+import type { Warning } from 'svelte/compiler';
 import type { PreprocessorGroup } from 'svelte/compiler';
 import type { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
 
@@ -40,27 +40,13 @@ interface PluginOptions {
 	emitCss?: boolean;
 	/**
 	 * Enable or disable Hot Module Replacement.
+	 * Deprecated, use compilerOptions.hmr instead!
 	 *
-	 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-	 *
-	 * DO NOT CUSTOMIZE SVELTE-HMR OPTIONS UNLESS YOU KNOW EXACTLY WHAT YOU ARE DOING
-	 *
-	 *                             YOU HAVE BEEN WARNED
-	 *
-	 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-	 *
-	 * Set an object to pass custom options to svelte-hmr
-	 *
-	 * @see https://github.com/rixo/svelte-hmr#options
+	 * @deprecated
 	 * @default true for development, always false for production
 	 */
-	hot?:
-		| boolean
-		| {
-				injectCss?: boolean;
-				partialAccept?: boolean;
-				[key: string]: any;
-		  };
+	hot?: boolean;
+
 	/**
 	 * Some Vite plugins can contribute additional preprocessors by defining `api.sveltePreprocess`.
 	 * If you don't want to use them, set this to true to ignore them all or use an array of strings
@@ -151,8 +137,18 @@ export interface SvelteConfig {
 
 	/**
 	 * Handles warning emitted from the Svelte compiler
+	 *
+	 * @example
+	 * ```
+	 * (warning, defaultHandler) => {
+	 *   // ignore some warnings
+	 *   if (!['foo','bar'].includes(warning.code)) {
+	 *     defaultHandler(warning);
+	 *   }
+	 * }
+	 * ```
 	 */
-	onwarn?: (warning: Warning, defaultHandler?: (warning: Warning) => void) => void;
+	onwarn?: (warning: Warning, defaultHandler: (warning: Warning) => void) => void;
 	/**
 	 * Options for vite-plugin-svelte
 	 */
@@ -187,7 +183,16 @@ interface CompileModuleOptions {
 type Arrayable<T> = T | T[];
 
 export interface VitePreprocessOptions {
+	/**
+	 * preprocess script block with vite pipeline.
+	 * Since svelte5 this is not needed for typescript anymore
+	 *
+	 * @default false
+	 */
 	script?: boolean;
+	/**
+	 * preprocess style blocks with vite pipeline
+	 */
 	style?: boolean | InlineConfig | ResolvedConfig;
 }
 

package/src/types/id.d.ts

@@ -1,4 +1,4 @@
-import type { CompileOptions } from 'svelte/types/compiler/interfaces';
+import type { CompileOptions } from 'svelte/compiler';
 
 export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed' | 'all';
 
@@ -9,7 +9,7 @@ export interface RequestQuery {
 	sourcemap?: boolean;
 	compilerOptions?: Pick<
 		CompileOptions,
-		'generate' | 'dev' | 'css' | 'hydratable' | 'customElement' | 'immutable' | 'enableSourcemap'
+		'generate' | 'dev' | 'css' | 'customElement' | 'immutable'
 	>;
 	// vite specific
 	url?: boolean;

package/src/types/log.d.ts

@@ -1,4 +1,4 @@
-import type { Warning } from 'svelte/types/compiler/interfaces';
+import type { Warning } from 'svelte/compiler';
 
 export interface LogFn extends SimpleLogFn {
 	(message: string, payload?: any, namespace?: string): void;

package/src/types/options.d.ts

@@ -1,4 +1,4 @@
-import type { CompileOptions } from 'svelte/types/compiler/interfaces';
+import type { CompileOptions } from 'svelte/compiler';
 import type { ViteDevServer } from 'vite';
 import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
 import type { Options } from '../public.d.ts';

package/src/utils/compile.js

@@ -1,6 +1,5 @@
 import * as svelte from 'svelte/compiler';
-// @ts-ignore
-import { createMakeHot } from 'svelte-hmr';
+
 import { safeBase64Hash } from './hash.js';
 import { log } from './log.js';
 
@@ -10,7 +9,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
@@ -19,10 +17,9 @@ const scriptLangRE =
 	/<!--[^]*?-->|<script (?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=["']?([^"' >]+)["']?[^>]*>/g;
 
 /**
- * @param {Function} [makeHot]
  * @returns {import('../types/compile.d.ts').CompileSvelte}
  */
-export const _createCompileSvelte = (makeHot) => {
+export function createCompileSvelte() {
 	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 	let stats;
 	const devStylePreprocessor = createInjectScopeEverythingRulePreprocessorGroup();
@@ -32,7 +29,7 @@ export const _createCompileSvelte = (makeHot) => {
 		const { emitCss = true } = options;
 		/** @type {string[]} */
 		const dependencies = [];
-		/** @type {import('svelte/types/compiler/interfaces').Warning[]} */
+		/** @type {import('svelte/compiler').Warning[]} */
 		const warnings = [];
 
 		if (options.stats) {
@@ -63,25 +60,17 @@ 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 ? 'server' : 'client'
 		};
 
-		if (options.hot && options.emitCss) {
+		if (compileOptions.hmr && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
 			compileOptions.cssHash = () => hash;
 		}
-		if (ssr && compileOptions.enableSourcemap !== false) {
-			if (typeof compileOptions.enableSourcemap === 'object') {
-				compileOptions.enableSourcemap.css = false;
-			} else {
-				compileOptions.enableSourcemap = { js: true, css: false };
-			}
-		}
 
 		let preprocessed;
 		let preprocessors = options.preprocess;
-		if (!options.isBuild && options.emitCss && options.hot) {
+		if (!options.isBuild && options.emitCss && compileOptions.hmr) {
 			// inject preprocessor that ensures css hmr works better
 			if (!Array.isArray(preprocessors)) {
 				preprocessors = preprocessors
@@ -141,10 +130,21 @@ export const _createCompileSvelte = (makeHot) => {
 			: compileOptions;
 
 		const endStat = stats?.start(filename);
-		/** @type {import('svelte/types/compiler/interfaces').CompileResult} */
+		/** @type {import('svelte/compiler').CompileResult} */
 		let compiled;
 		try {
 			compiled = svelte.compile(finalCode, finalCompileOptions);
+			// patch output with partial accept until svelte does it
+			// TODO remove later
+			if (
+				options.server?.config.experimental.hmrPartialAccept &&
+				compiled.js.code.includes('import.meta.hot.accept(')
+			) {
+				compiled.js.code = compiled.js.code.replaceAll(
+					'import.meta.hot.accept(',
+					'import.meta.hot.acceptExports(["default"],'
+				);
+			}
 		} catch (e) {
 			enhanceCompileError(e, code, preprocessors);
 			throw e;
@@ -163,25 +163,12 @@ export const _createCompileSvelte = (makeHot) => {
 		}
 		if (!raw) {
 			// wire css import and code for hmr
-			const hasCss = compiled.css?.code?.trim().length > 0;
+			const hasCss = compiled.css?.code?.trim()?.length ?? 0 > 0;
 			// compiler might not emit css with mode none or it may be empty
 			if (emitCss && hasCss) {
 				// TODO properly update sourcemap?
 				compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
 			}
-
-			// only apply hmr when not in ssr context and hot options are set
-			if (!ssr && makeHot) {
-				compiled.js.code = makeHot({
-					id: filename,
-					compiledCode: compiled.js.code,
-					//@ts-expect-error hot isn't a boolean at this point
-					hotOptions: { ...options.hot, injectCss: options.hot?.injectCss === true && hasCss },
-					compiled,
-					originalCode: code,
-					compileOptions: finalCompileOptions
-				});
-			}
 		}
 
 		let lang = 'js';
@@ -203,33 +190,4 @@ export const _createCompileSvelte = (makeHot) => {
 			preprocessed: preprocessed ?? { code }
 		};
 	};
-};
-
-/**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {Function | undefined}
- */
-function buildMakeHot(options) {
-	const needsMakeHot = options.hot !== false && options.isServe && !options.isProduction;
-	if (needsMakeHot) {
-		// @ts-ignore
-		const hotApi = options?.hot?.hotApi;
-		// @ts-ignore
-		const adapter = options?.hot?.adapter;
-		return createMakeHot({
-			walk: svelte.walk,
-			hotApi,
-			adapter,
-			hotOptions: { noOverlay: true, .../** @type {object} */ (options.hot) }
-		});
-	}
-}
-
-/**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {import('../types/compile.d.ts').CompileSvelte}
- */
-export function createCompileSvelte(options) {
-	const makeHot = buildMakeHot(options);
-	return _createCompileSvelte(makeHot);
 }

package/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'];
@@ -10,23 +8,14 @@ export const SVELTE_IMPORTS = [
 	'svelte/internal',
 	'svelte/internal/disclose-version',
 	'svelte/motion',
-	'svelte/ssr',
 	'svelte/store',
 	'svelte/transition',
+	'svelte/server',
+	'svelte/internal/server',
+	'svelte/legacy',
 	'svelte'
 ];
 
-export const SVELTE_HMR_IMPORTS = [
-	'svelte-hmr/runtime/hot-api-esm.js',
-	'svelte-hmr/runtime/proxy-adapter-dom.js',
-	'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 =

package/src/utils/dependencies.js

@@ -46,7 +46,6 @@ const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
 	'svelte',
 	'svelte2tsx',
 	'svelte-check',
-	'svelte-hmr',
 	'svelte-preprocess',
 	'tslib',
 	'typescript',

package/src/utils/error.js

@@ -2,7 +2,7 @@ import { buildExtendedLogMessage } from './log.js';
 
 /**
  * convert an error thrown by svelte.compile to a RollupError so that vite displays it in a user friendly way
- * @param {import('svelte/types/compiler/interfaces').Warning & Error} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {import('svelte/compiler').Warning & Error & {frame?: string}} error a svelte compiler error, which is a mix of Warning and an error
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @returns {import('vite').Rollup.RollupError} the converted error
  */
@@ -29,7 +29,7 @@ export function toRollupError(error, options) {
 
 /**
  * convert an error thrown by svelte.compile to an esbuild PartialMessage
- * @param {import('svelte/types/compiler/interfaces').Warning & Error} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {import('svelte/compiler').Warning & Error  & {frame?: string}} error a svelte compiler error, which is a mix of Warning and an error
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @returns {import('esbuild').PartialMessage} the converted error
  */
@@ -102,7 +102,7 @@ function formatFrameForVite(frame) {
 }
 
 /**
- * @param {import('svelte/types/compiler/interfaces').Warning & Error} err a svelte compiler error, which is a mix of Warning and an error
+ * @param {import('svelte/compiler').Warning & Error} err a svelte compiler error, which is a mix of Warning and an error
  * @param {string} originalCode
  * @param {import('../public.d.ts').Options['preprocess']} [preprocessors]
  */
@@ -112,35 +112,6 @@ export function enhanceCompileError(err, originalCode, preprocessors) {
 	/** @type {string[]} */
 	const additionalMessages = [];
 
-	// Handle incorrect TypeScript usage
-	if (err.code === 'parse-error') {
-		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/9926347ad9dbdd0f3324d5538e25dcb7f5e442f8/packages/svelte/src/compiler/preprocess/index.js#L259
-		const scriptRe =
-			/<!--[^]*?-->|<script((?:\s+[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/]+)*\s*)(?:\/>|>([\S\s]*?)<\/script>)/g;
-		const errIndex = err.pos ?? -1;
-
-		let m;
-		while ((m = scriptRe.exec(originalCode))) {
-			const matchStart = m.index;
-			const matchEnd = matchStart + m[0].length;
-			const isErrorInScript = matchStart <= errIndex && errIndex <= matchEnd;
-			if (isErrorInScript) {
-				// Warn missing lang="ts"
-				const hasLangTs = m[1]?.includes('lang="ts"');
-				if (!hasLangTs) {
-					additionalMessages.push('Did you forget to add lang="ts" to your script tag?');
-				}
-				// Warn missing script preprocessor
-				if (preprocessors.every((p) => p.script == null)) {
-					const preprocessorType = hasLangTs ? 'TypeScript' : 'script';
-					additionalMessages.push(
-						`Did you forget to add a ${preprocessorType} preprocessor? See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.`
-					);
-				}
-			}
-		}
-	}
-
 	// Handle incorrect CSS preprocessor usage
 	if (err.code === 'css-syntax-error') {
 		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/9926347ad9dbdd0f3324d5538e25dcb7f5e442f8/packages/svelte/src/compiler/preprocess/index.js#L257

package/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
@@ -26,9 +25,8 @@ 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));
-			}
+			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,9 +58,8 @@ export function esbuildSveltePlugin(options) {
  * @returns {Promise<string>}
  */
 async function compileSvelte(options, { filename, code }, statsCollection) {
-	if (isSvelte5 && filename.endsWith(svelteModuleExtension)) {
+	if (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'
@@ -75,7 +72,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 			: compiled.js.code;
 	}
 	let css = options.compilerOptions.css;
-	if (css !== 'none') {
+	if (css !== 'injected') {
 		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
 		css = 'injected';
 	}
@@ -84,8 +81,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: 'client'
 	};
 
 	let preprocessed;

package/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 } from './svelte-version.js';
+
 /**
  * utility function to compile ?raw and ?direct requests in load hook
  *
@@ -18,24 +18,16 @@ 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');
-		const type = query.type;
+		svelteRequest.ssr = query.compilerOptions?.generate === 'server';
 		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: query.sourcemap
-					? {
-							js: type === 'script' || type === 'all',
-							css: type === 'style' || type === 'all'
-						}
-					: false,
+				hmr: false,
 				...svelteRequest.query.compilerOptions
 			},
-			hot: false,
 			emitCss: true
 		});
 	} catch (e) {
@@ -43,7 +35,7 @@ export async function loadRaw(svelteRequest, compileSvelte, options) {
 	}
 	let result;
 	if (query.type === 'style') {
-		result = compileData.compiled.css;
+		result = compileData.compiled.css ?? { code: '', map: null };
 	} else if (query.type === 'script') {
 		result = compileData.compiled.js;
 	} else if (query.type === 'preprocessed') {
@@ -66,7 +58,9 @@ export async function loadRaw(svelteRequest, compileSvelte, options) {
 		}
 		log.debug(`load returns direct result for ${id}`, undefined, 'load');
 		let directOutput = result.code;
+		// @ts-expect-error might not be SourceMap but toUrl check should suffice
 		if (query.sourcemap && result.map?.toUrl) {
+			// @ts-expect-error
 			const map = `sourceMappingURL=${result.map.toUrl()}`;
 			if (query.type === 'style') {
 				directOutput += `\n\n/*# ${map} */\n`;

package/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'];
@@ -128,21 +127,21 @@ export const log = {
 
 /**
  * @param {import('../types/id.d.ts').SvelteRequest | import('../types/id.d.ts').SvelteModuleRequest} svelteRequest
- * @param {import('svelte/types/compiler/interfaces').Warning[]} warnings
+ * @param {import('svelte/compiler').Warning[]} warnings
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */
 export function logCompilerWarnings(svelteRequest, warnings, options) {
 	const { emitCss, onwarn, isBuild } = options;
 	const sendViaWS = !isBuild && options.experimental?.sendWarningsToBrowser;
 	let warn = isBuild ? warnBuild : warnDev;
-	/** @type {import('svelte/types/compiler/interfaces').Warning[]} */
+	/** @type {import('svelte/compiler').Warning[]} */
 	const handledByDefaultWarn = [];
 	const notIgnored = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
 	const extra = buildExtraWarnings(warnings, isBuild);
 	const allWarnings = [...notIgnored, ...extra];
 	if (sendViaWS) {
 		const _warn = warn;
-		/** @type {(w: import('svelte/types/compiler/interfaces').Warning) => void} */
+		/** @type {(w: import('svelte/compiler').Warning) => void} */
 		warn = (w) => {
 			handledByDefaultWarn.push(w);
 			_warn(w);
@@ -172,7 +171,7 @@ export function logCompilerWarnings(svelteRequest, warnings, options) {
 }
 
 /**
- * @param {import('svelte/types/compiler/interfaces').Warning} warning
+ * @param {import('svelte/compiler').Warning} warning
  * @param {boolean} isBuild
  * @param {boolean} [emitCss]
  * @returns {boolean}
@@ -186,7 +185,7 @@ function ignoreCompilerWarning(warning, isBuild, emitCss) {
 
 /**
  *
- * @param {import('svelte/types/compiler/interfaces').Warning} warning
+ * @param {import('svelte/compiler').Warning} warning
  * @returns {boolean}
  */
 function isNoScopableElementWarning(warning) {
@@ -196,9 +195,9 @@ function isNoScopableElementWarning(warning) {
 
 /**
  *
- * @param {import('svelte/types/compiler/interfaces').Warning[]} warnings
+ * @param {import('svelte/compiler').Warning[]} warnings
  * @param {boolean} isBuild
- * @returns {import('svelte/types/compiler/interfaces').Warning[]}
+ * @returns {import('svelte/compiler').Warning[]}
  */
 function buildExtraWarnings(warnings, isBuild) {
 	const extraWarnings = [];
@@ -220,21 +219,21 @@ function buildExtraWarnings(warnings, isBuild) {
 }
 
 /**
- * @param {import('svelte/types/compiler/interfaces').Warning} w
+ * @param {import('svelte/compiler').Warning} w
  */
 function warnDev(w) {
 	log.info.enabled && log.info(buildExtendedLogMessage(w));
 }
 
 /**
- * @param {import('svelte/types/compiler/interfaces').Warning} w
+ * @param {import('svelte/compiler').Warning & {frame?: string}} w
  */
 function warnBuild(w) {
 	log.warn.enabled && log.warn(buildExtendedLogMessage(w), w.frame);
 }
 
 /**
- * @param {import('svelte/types/compiler/interfaces').Warning} w
+ * @param {import('svelte/compiler').Warning} w
  */
 export function buildExtendedLogMessage(w) {
 	const parts = [];
@@ -260,12 +259,3 @@ export function buildExtendedLogMessage(w) {
 export function isDebugNamespaceEnabled(namespace) {
 	return debug.enabled(`${prefix}:${namespace}`);
 }
-
-export function logSvelte5Warning() {
-	const notice = `Your 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',
-		'hmr for .svelte files is disabled until hmr api is implemented'
-	];
-	log.warn(`${notice}\nwork in progress:\n - ${wip.join('\n - ')}\n`);
-}

package/src/utils/options.js

@@ -5,7 +5,6 @@ import { loadSvelteConfig } from './load-svelte-config.js';
 import {
 	FAQ_LINK_MISSING_EXPORTS_CONDITION,
 	SVELTE_EXPORT_CONDITIONS,
-	SVELTE_HMR_IMPORTS,
 	SVELTE_IMPORTS,
 	SVELTE_RESOLVE_MAIN_FIELDS,
 	VITE_RESOLVE_MAIN_FIELDS
@@ -26,7 +25,6 @@ import {
 import { isCommonDepWithoutSvelteField } from './dependencies.js';
 import { VitePluginSvelteStats } from './vite-plugin-svelte-stats.js';
 import { VitePluginSvelteCache } from './vite-plugin-svelte-cache.js';
-import { isSvelte5 } from './svelte-version.js';
 
 const allowedPluginOptions = new Set([
 	'include',
@@ -194,17 +192,13 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 	const css = preResolveOptions.emitCss ? 'external' : 'injected';
 	/** @type {Partial<import('../public.d.ts').Options>} */
 	const defaultOptions = {
-		hot: viteConfig.isProduction
-			? false
-			: {
-					injectCss: css === 'injected',
-					partialAccept: !!viteConfig.experimental?.hmrPartialAccept
-				},
 		compilerOptions: {
 			css,
-			dev: !viteConfig.isProduction
+			dev: !viteConfig.isProduction,
+			hmr: !viteConfig.isProduction && !preResolveOptions.isBuild
 		}
 	};
+
 	/** @type {Partial<import('../types/options.d.ts').ResolvedOptions>} */
 	const extraOptions = {
 		root: viteConfig.root,
@@ -230,48 +224,12 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */
 function enforceOptionsForHmr(options) {
-	if (isSvelte5) {
-		// TODO add hmr options for svelte5 once it is supported and update utils/log.js#logSvelte5Warning
-		options.hot = false;
-	}
 	if (options.hot) {
-		if (!options.compilerOptions.dev) {
-			log.warn('hmr is enabled but compilerOptions.dev is false, forcing it to true');
-			options.compilerOptions.dev = true;
-		}
-		if (options.emitCss) {
-			if (options.hot !== true && options.hot.injectCss) {
-				log.warn('hmr and emitCss are enabled but hot.injectCss is true, forcing it to false');
-				options.hot.injectCss = false;
-			}
-			const css = options.compilerOptions.css;
-			if (css === true || css === 'injected') {
-				const forcedCss = 'external';
-				log.warn(
-					`hmr and emitCss are enabled but compilerOptions.css is ${css}, forcing it to ${forcedCss}`
-				);
-				options.compilerOptions.css = forcedCss;
-			}
-		} else {
-			if (options.hot === true || !options.hot.injectCss) {
-				log.warn(
-					'hmr with emitCss disabled requires option hot.injectCss to be enabled, forcing it to true'
-				);
-				if (options.hot === true) {
-					options.hot = { injectCss: true };
-				} else {
-					options.hot.injectCss = true;
-				}
-			}
-			const css = options.compilerOptions.css;
-			if (!(css === true || css === 'injected')) {
-				const forcedCss = 'injected';
-				log.warn(
-					`hmr with emitCss disabled requires compilerOptions.css to be enabled, forcing it to ${forcedCss}`
-				);
-				options.compilerOptions.css = forcedCss;
-			}
-		}
+		log.warn(
+			'svelte 5 has hmr integrated in core. Please remove the vitePlugin.hot option and use compilerOptions.hmr instead'
+		);
+		delete options.hot;
+		options.compilerOptions.hmr = true;
 	}
 }
 
@@ -280,9 +238,11 @@ function enforceOptionsForHmr(options) {
  */
 function enforceOptionsForProduction(options) {
 	if (options.isProduction) {
-		if (options.hot) {
-			log.warn('options.hot is enabled but does not work on production build, forcing it to false');
-			options.hot = false;
+		if (options.compilerOptions.hmr) {
+			log.warn(
+				'you are building for production but compilerOptions.hmr is true, forcing it to false'
+			);
+			options.compilerOptions.hmr = false;
 		}
 		if (options.compilerOptions.dev) {
 			log.warn(
@@ -370,7 +330,7 @@ export async function buildExtraViteConfig(options, config) {
 	/** @type {Partial<import('vite').UserConfig>} */
 	const extraViteConfig = {
 		resolve: {
-			dedupe: [...SVELTE_IMPORTS, ...SVELTE_HMR_IMPORTS],
+			dedupe: [...SVELTE_IMPORTS],
 			conditions: [...SVELTE_EXPORT_CONDITIONS]
 		}
 		// this option is still awaiting a PR in vite to be supported
@@ -429,12 +389,7 @@ export async function buildExtraViteConfig(options, config) {
 	}
 
 	// enable hmrPartialAccept if not explicitly disabled
-	if (
-		(options.hot == null ||
-			options.hot === true ||
-			(options.hot && options.hot.partialAccept !== false)) && // deviate from svelte-hmr, default to true
-		config.experimental?.hmrPartialAccept !== false
-	) {
+	if (config.experimental?.hmrPartialAccept !== false) {
 		log.debug('enabling "experimental.hmrPartialAccept" in vite config', undefined, 'config');
 		extraViteConfig.experimental = { hmrPartialAccept: true };
 	}
@@ -579,9 +534,10 @@ function buildExtraConfigForSvelte(config) {
 	// include svelte imports for optimization unless explicitly excluded
 	/** @type {string[]} */
 	const include = [];
-	const exclude = ['svelte-hmr'];
+	/** @type {string[]} */
+	const exclude = [];
 	if (!isDepExcluded('svelte', config.optimizeDeps?.exclude ?? [])) {
-		const svelteImportsToInclude = SVELTE_IMPORTS.filter((x) => x !== 'svelte/ssr'); // not used on clientside
+		const svelteImportsToInclude = SVELTE_IMPORTS;
 		log.debug(
 			`adding bare svelte packages to optimizeDeps.include: ${svelteImportsToInclude.join(', ')} `,
 			undefined,
@@ -600,7 +556,7 @@ function buildExtraConfigForSvelte(config) {
 	/** @type {string[]} */
 	const external = [];
 	// add svelte to ssr.noExternal unless it is present in ssr.external
-	// so we can resolve it with svelte/ssr
+	// so it is correctly resolving according to the conditions in sveltes exports map
 	if (!isDepExternaled('svelte', config.ssr?.external ?? [])) {
 		noExternal.push('svelte', /^svelte\//);
 	}

package/src/utils/preprocess.js

@@ -127,10 +127,10 @@ export function addExtraPreprocessors(options, config) {
  *
  * @param filename {string}
  * @param dependencies  {string[]}
- * @returns {({dependencies: string[], warnings:import('svelte/types/compiler/interfaces').Warning[] })}
+ * @returns {({dependencies: string[], warnings:import('svelte/compiler').Warning[] })}
  */
 export function checkPreprocessDependencies(filename, dependencies) {
-	/** @type {import('svelte/types/compiler/interfaces').Warning[]} */
+	/** @type {import('svelte/compiler').Warning[]} */
 	const warnings = [];
 
 	// to find self, we have to compare normalized filenames, but must keep the original values in `dependencies`

package/src/utils/svelte-version.js

@@ -3,9 +3,10 @@ import { VERSION } from 'svelte/compiler';
 /**
  * @type {boolean}
  */
-export const isSvelte4 = VERSION.startsWith('4.');
+export const isSvelte5 = VERSION.startsWith('5.');
 
 /**
  * @type {boolean}
  */
-export const isSvelte5 = VERSION.startsWith('5.');
+export const isSvelte5WithHMRSupport =
+	VERSION.startsWith('5.0.0-next.') && Number(VERSION.slice(11)) > 96;

package/src/utils/vite-plugin-svelte-cache.js

@@ -16,9 +16,9 @@ import { normalizePath } from 'vite';
  * @class
  */
 export class VitePluginSvelteCache {
-	/** @type {Map<string, import('../types/compile.d.ts').Code>} */
+	/** @type {Map<string, import('../types/compile.d.ts').Code | null>} */
 	#css = new Map();
-	/** @type {Map<string, import('../types/compile.d.ts').Code>} */
+	/** @type {Map<string, import('../types/compile.d.ts').Code | null>} */
 	#js = new Map();
 	/** @type {Map<string, string[]>} */
 	#dependencies = new Map();
@@ -133,7 +133,7 @@ export class VitePluginSvelteCache {
 
 	/**
 	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
-	 * @returns {import('../types/compile.d.ts').Code | undefined}
+	 * @returns {import('../types/compile.d.ts').Code | undefined | null}
 	 */
 	getCSS(svelteRequest) {
 		return this.#css.get(svelteRequest.normalizedFilename);
@@ -141,7 +141,7 @@ export class VitePluginSvelteCache {
 
 	/**
 	 * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
-	 * @returns {import('../types/compile.d.ts').Code | undefined}
+	 * @returns {import('../types/compile.d.ts').Code | undefined | null}
 	 */
 	getJS(svelteRequest) {
 		if (!svelteRequest.ssr) {

package/types/index.d.ts

@@ -1,7 +1,6 @@
 declare module '@sveltejs/vite-plugin-svelte' {
 	import type { InlineConfig, ResolvedConfig } from 'vite';
-	import type { CompileOptions, PreprocessorGroup } from 'svelte/compiler';
-	import type { Warning } from 'svelte/types/compiler/interfaces';
+	import type { CompileOptions, Warning, PreprocessorGroup } from 'svelte/compiler';
 	import type { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
 	export type Options = Omit<SvelteConfig, 'vitePlugin'> & PluginOptionsInline;
 
@@ -39,27 +38,13 @@ declare module '@sveltejs/vite-plugin-svelte' {
 		emitCss?: boolean;
 		/**
 		 * Enable or disable Hot Module Replacement.
+		 * Deprecated, use compilerOptions.hmr instead!
 		 *
-		 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-		 *
-		 * DO NOT CUSTOMIZE SVELTE-HMR OPTIONS UNLESS YOU KNOW EXACTLY WHAT YOU ARE DOING
-		 *
-		 *                             YOU HAVE BEEN WARNED
-		 *
-		 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-		 *
-		 * Set an object to pass custom options to svelte-hmr
-		 *
-		 * @see https://github.com/rixo/svelte-hmr#options
+		 * @deprecated
 		 * @default true for development, always false for production
 		 */
-		hot?:
-			| boolean
-			| {
-					injectCss?: boolean;
-					partialAccept?: boolean;
-					[key: string]: any;
-			  };
+		hot?: boolean;
+
 		/**
 		 * Some Vite plugins can contribute additional preprocessors by defining `api.sveltePreprocess`.
 		 * If you don't want to use them, set this to true to ignore them all or use an array of strings
@@ -150,8 +135,18 @@ declare module '@sveltejs/vite-plugin-svelte' {
 
 		/**
 		 * Handles warning emitted from the Svelte compiler
+		 *
+		 * @example
+		 * ```
+		 * (warning, defaultHandler) => {
+		 *   // ignore some warnings
+		 *   if (!['foo','bar'].includes(warning.code)) {
+		 *     defaultHandler(warning);
+		 *   }
+		 * }
+		 * ```
 		 */
-		onwarn?: (warning: Warning, defaultHandler?: (warning: Warning) => void) => void;
+		onwarn?: (warning: Warning, defaultHandler: (warning: Warning) => void) => void;
 		/**
 		 * Options for vite-plugin-svelte
 		 */
@@ -186,7 +181,16 @@ declare module '@sveltejs/vite-plugin-svelte' {
 	type Arrayable<T> = T | T[];
 
 	export interface VitePreprocessOptions {
+		/**
+		 * preprocess script block with vite pipeline.
+		 * Since svelte5 this is not needed for typescript anymore
+		 *
+		 * @default false
+		 */
 		script?: boolean;
+		/**
+		 * preprocess style blocks with vite pipeline
+		 */
 		style?: boolean | InlineConfig | ResolvedConfig;
 	}
 	export function svelte(inlineOptions?: Partial<Options> | undefined): import('vite').Plugin[];

package/types/index.d.ts.map

@@ -21,5 +21,5 @@
 		null,
 		null
 	],
-	"mappings": ";;;;;aAMYA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2HFC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2DZC,qBAAqBA;;;;iBChKtBC,MAAMA;iBCbNC,cAAcA;iBCgBRC,gBAAgBA"
+	"mappings": ";;;;aAMYA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6GFC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAqEZC,qBAAqBA;;;;;;;;;;;;;iBChKtBC,MAAMA;iBCTNC,cAAcA;iBCgBRC,gBAAgBA"
 }