@sveltejs/vite-plugin-svelte 3.0.0-next.1 → 3.0.0-next.3

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.3",
   "license": "MIT",
   "author": "dominikg",
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "type": "module",
-  "types": "src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js"
-    },
-    "./package.json": "./package.json"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./src/index.js"
+      }
+    }
   },
   "engines": {
     "node": "^18.0.0 || >=20"
@@ -43,17 +45,19 @@
     "vitefu": "^0.2.5"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.0",
     "vite": "^5.0.0-beta.1 || ^5.0.0"
   },
   "devDependencies": {
-    "@types/debug": "^4.1.9",
-    "esbuild": "^0.19.4",
-    "svelte": "^4.2.1",
-    "vite": "^5.0.0-beta.7"
+    "@types/debug": "^4.1.12",
+    "esbuild": "^0.19.5",
+    "sass": "^1.69.5",
+    "svelte": "^4.2.3",
+    "vite": "^5.0.0-beta.19"
   },
   "scripts": {
     "check:publint": "publint --strict",
-    "check:types": "tsc --noEmit"
+    "check:types": "tsc --noEmit",
+    "generate:types": "dts-buddy -m \"@sveltejs/vite-plugin-svelte:src/public.d.ts\""
   }
 }

package/src/handle-hot-update.js

@@ -7,7 +7,7 @@ import { toRollupError } from './utils/error.js';
  * @param {Function} compileSvelte
  * @param {import('vite').HmrContext} ctx
  * @param {import('./types/id.d.ts').SvelteRequest} svelteRequest
- * @param {import('./utils/vite-plugin-svelte-cache').VitePluginSvelteCache} cache
+ * @param {import('./utils/vite-plugin-svelte-cache.js').VitePluginSvelteCache} cache
  * @param {import('./types/options.d.ts').ResolvedOptions} options
  * @returns {Promise<import('vite').ModuleNode[] | void>}
  */

package/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 } from './utils/log.js';
+import { log, logCompilerWarnings, logSvelte5Warning } from './utils/log.js';
 import { createCompileSvelte } from './utils/compile.js';
-import { buildIdParser } from './utils/id.js';
+import { buildIdParser, buildModuleIdParser } from './utils/id.js';
 import {
 	buildExtraViteConfig,
 	validateInlineOptions,
@@ -19,8 +19,13 @@ 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';
 
-/** @type {import('./index.d.ts').svelte} */
+/**
+ * @param {Partial<import('./public.d.ts').Options>} [inlineOptions]
+ * @returns {import('vite').Plugin[]}
+ */
 export function svelte(inlineOptions) {
 	if (process.env.DEBUG != null) {
 		log.setLevel('debug');
@@ -30,6 +35,8 @@ 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} */
@@ -182,9 +189,41 @@ export function svelte(inlineOptions) {
 			async buildEnd() {
 				await options.stats?.finishAll();
 			}
-		},
-		svelteInspector()
+		}
 	];
+	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());
+	}
 	return plugins;
 }
 

package/src/preprocess.js

@@ -9,9 +9,12 @@ const supportedScriptLangs = ['ts'];
 
 export const lang_sep = '.vite-preprocess';
 
-/** @type {import('./index.d.ts').vitePreprocess} */
+/**
+ * @param {import('./public.d.ts').VitePreprocessOptions} opts
+ * @returns {import('svelte/compiler').PreprocessorGroup}
+ */
 export function vitePreprocess(opts) {
-	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup} */
+	/** @type {import('svelte/compiler').PreprocessorGroup} */
 	const preprocessor = { name: 'vite-preprocess' };
 	if (opts?.script !== false) {
 		preprocessor.script = viteScript().script;
@@ -24,7 +27,7 @@ export function vitePreprocess(opts) {
 }
 
 /**
- * @returns {{ script: import('svelte/types/compiler/preprocess').Preprocessor }}
+ * @returns {{ script: import('svelte/compiler').Preprocessor }}
  */
 function viteScript() {
 	return {
@@ -55,12 +58,12 @@ function viteScript() {
 
 /**
  * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
- * @returns {{ style: import('svelte/types/compiler/preprocess').Preprocessor }}
+ * @returns {{ style: import('svelte/compiler').Preprocessor }}
  */
 function viteStyle(config = {}) {
 	/** @type {CssTransform} */
 	let transform;
-	/** @type {import('svelte/types/compiler/preprocess').Preprocessor} */
+	/** @type {import('svelte/compiler').Preprocessor} */
 	const style = async ({ attributes, content, filename = '' }) => {
 		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
 		if (attributes.lang && !isCSSRequest(ext)) return;

package/src/{index.d.ts → public.d.ts}

@@ -1,9 +1,10 @@
-import type { InlineConfig, ResolvedConfig, UserConfig, Plugin } from 'vite';
-import type { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
-import type { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
+import type { InlineConfig, ResolvedConfig } from 'vite';
+import type { CompileOptions } from 'svelte/compiler';
+import type { Warning } from 'svelte/types/compiler/interfaces';
+import type { PreprocessorGroup } from 'svelte/compiler';
 import type { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
 
-type Options = Omit<SvelteOptions, 'vitePlugin'> & PluginOptionsInline;
+export type Options = Omit<SvelteConfig, 'vitePlugin'> & PluginOptionsInline;
 
 interface PluginOptionsInline extends PluginOptions {
 	/**
@@ -94,13 +95,39 @@ interface PluginOptions {
 	 * @default unset for dev, always false for build
 	 */
 	inspector?: InspectorOptions | boolean;
+
+	/**
+	 * A function to update `compilerOptions` before compilation
+	 *
+	 * `data.filename` - The file to be compiled
+	 * `data.code` - The preprocessed Svelte code
+	 * `data.compileOptions` - The current compiler options
+	 *
+	 * To change part of the compiler options, return an object with the changes you need.
+	 *
+	 * @example
+	 * ```
+	 * ({ filename, compileOptions }) => {
+	 *   // Dynamically set hydration per Svelte file
+	 *   if (compileWithHydratable(filename) && !compileOptions.hydratable) {
+	 *     return { hydratable: true };
+	 *   }
+	 * }
+	 * ```
+	 */
+	dynamicCompileOptions?: (data: {
+		filename: string;
+		code: string;
+		compileOptions: Partial<CompileOptions>;
+	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+
 	/**
 	 * These options are considered experimental and breaking changes to them can occur in any release
 	 */
 	experimental?: ExperimentalOptions;
 }
 
-interface SvelteOptions {
+export interface SvelteConfig {
 	/**
 	 * A list of file extensions to be compiled by Svelte
 	 *
@@ -122,31 +149,6 @@ interface SvelteOptions {
 	 */
 	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
 
-	/**
-	 * A function to update `compilerOptions` before compilation
-	 *
-	 * `data.filename` - The file to be compiled
-	 * `data.code` - The preprocessed Svelte code
-	 * `data.compileOptions` - The current compiler options
-	 *
-	 * To change part of the compiler options, return an object with the changes you need.
-	 *
-	 * @example
-	 * ```
-	 * ({ filename, compileOptions }) => {
-	 *   // Dynamically set hydration per Svelte file
-	 *   if (compileWithHydratable(filename) && !compileOptions.hydratable) {
-	 *     return { hydratable: true };
-	 *   }
-	 * }
-	 * ```
-	 */
-	dynamicCompileOptions?: (data: {
-		filename: string;
-		code: string;
-		compileOptions: Partial<CompileOptions>;
-	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
-
 	/**
 	 * Handles warning emitted from the Svelte compiler
 	 */
@@ -172,46 +174,21 @@ interface ExperimentalOptions {
 	 * @default false
 	 */
 	disableSvelteResolveWarnings?: boolean;
+
+	compileModule?: CompileModuleOptions;
+}
+
+interface CompileModuleOptions {
+	extensions?: string[];
+	include?: Arrayable<string>;
+	exclude?: Arrayable<string>;
 }
 
-type ModuleFormat = NonNullable<'esm'>;
-type CssHashGetter = NonNullable<CompileOptions['cssHash']>;
 type Arrayable<T> = T | T[];
 
-interface VitePreprocessOptions {
+export interface VitePreprocessOptions {
 	script?: boolean;
 	style?: boolean | InlineConfig | ResolvedConfig;
 }
 
-declare function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroup;
-
-declare function loadSvelteConfig(
-	viteConfig?: UserConfig,
-	inlineOptions?: Partial<Options>
-): Promise<Partial<SvelteOptions> | undefined>;
-
-declare function svelte(inlineOptions?: Partial<Options>): Plugin[];
-
-export {
-	Arrayable,
-	CssHashGetter,
-	ModuleFormat,
-	Options,
-	PluginOptions,
-	SvelteOptions,
-	loadSvelteConfig,
-	svelte,
-	VitePreprocessOptions,
-	vitePreprocess
-};
-
-// reexported types
-
-export { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
-
-export {
-	MarkupPreprocessor,
-	Preprocessor,
-	PreprocessorGroup,
-	Processed
-} from 'svelte/types/compiler/preprocess';
+export * from './index.js';

package/src/types/compile.d.ts

@@ -1,4 +1,4 @@
-import type { Processed } from 'svelte/types/compiler/preprocess';
+import type { Processed, CompileResult } from 'svelte/compiler';
 import type { SvelteRequest } from './id.d.ts';
 import type { ResolvedOptions } from './options.d.ts';
 
@@ -14,34 +14,11 @@ export interface Code {
 	dependencies?: any[];
 }
 
-export interface Compiled {
-	js: Code;
-	css: Code;
-	ast: any; // TODO type
-	warnings: any[]; // TODO type
-	vars: Array<{
-		name: string;
-		export_name: string;
-		injected: boolean;
-		module: boolean;
-		mutated: boolean;
-		reassigned: boolean;
-		referenced: boolean;
-		writable: boolean;
-		referenced_from_script: boolean;
-	}>;
-	stats: {
-		timings: {
-			total: number;
-		};
-	};
-}
-
 export interface CompileData {
 	filename: string;
 	normalizedFilename: string;
 	lang: string;
-	compiled: Compiled;
+	compiled: CompileResult;
 	ssr: boolean | undefined;
 	dependencies: string[];
 	preprocessed: Processed;

package/src/types/id.d.ts

@@ -28,4 +28,18 @@ export interface SvelteRequest {
 	raw: boolean;
 }
 
+export interface SvelteModuleRequest {
+	id: string;
+	filename: string;
+	normalizedFilename: string;
+	query: RequestQuery;
+	timestamp: number;
+	ssr: boolean;
+}
+
 export type IdParser = (id: string, ssr: boolean, timestamp?: number) => SvelteRequest | undefined;
+export type ModuleIdParser = (
+	id: string,
+	ssr: boolean,
+	timestamp?: number
+) => SvelteModuleRequest | undefined;

package/src/types/log.d.ts

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

package/src/types/options.d.ts

@@ -1,7 +1,7 @@
 import type { CompileOptions } from 'svelte/types/compiler/interfaces';
 import type { ViteDevServer } from 'vite';
 import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
-import type { Options } from '../index.d.ts';
+import type { Options } from '../public.d.ts';
 
 export interface PreResolvedOptions extends Options {
 	// these options are non-nullable after resolve

package/src/utils/compile.js

@@ -1,4 +1,4 @@
-import { compile, preprocess, walk } from 'svelte/compiler';
+import * as svelte from 'svelte/compiler';
 // @ts-ignore
 import { createMakeHot } from 'svelte-hmr';
 import { safeBase64Hash } from './hash.js';
@@ -10,6 +10,7 @@ import {
 } from './preprocess.js';
 import { mapToRelative } from './sourcemaps.js';
 import { enhanceCompileError } from './error.js';
+import { isSvelte5 } from './svelte-version.js';
 
 const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
@@ -54,11 +55,12 @@ export const _createCompileSvelte = (makeHot) => {
 				// also they for hmr updates too
 			}
 		}
-		/** @type {import('../index.d.ts').CompileOptions} */
+		/** @type {import('svelte/compiler').CompileOptions} */
 		const compileOptions = {
 			...options.compilerOptions,
 			filename,
-			generate: ssr ? 'ssr' : 'dom'
+			// @ts-expect-error svelte5 uses server/client, svelte4 uses ssr/dom
+			generate: isSvelte5 ? (ssr ? 'server' : 'client') : ssr ? 'ssr' : 'dom'
 		};
 
 		if (options.hot && options.emitCss) {
@@ -87,7 +89,7 @@ export const _createCompileSvelte = (makeHot) => {
 		}
 		if (preprocessors) {
 			try {
-				preprocessed = await preprocess(code, preprocessors, { filename }); // full filename here so postcss works
+				preprocessed = await svelte.preprocess(code, preprocessors, { filename }); // full filename here so postcss works
 			} catch (e) {
 				e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
 				throw e;
@@ -138,7 +140,7 @@ export const _createCompileSvelte = (makeHot) => {
 		/** @type {import('svelte/types/compiler/interfaces').CompileResult} */
 		let compiled;
 		try {
-			compiled = compile(finalCode, finalCompileOptions);
+			compiled = svelte.compile(finalCode, finalCompileOptions);
 		} catch (e) {
 			enhanceCompileError(e, code, preprocessors);
 			throw e;
@@ -203,7 +205,7 @@ function buildMakeHot(options) {
 		// @ts-ignore
 		const adapter = options?.hot?.adapter;
 		return createMakeHot({
-			walk,
+			walk: svelte.walk,
 			hotApi,
 			adapter,
 			hotOptions: { noOverlay: true, .../** @type {object} */ (options.hot) }

package/src/utils/constants.js

@@ -1,3 +1,5 @@
+import { isSvelte5 } from './svelte-version.js';
+
 export const VITE_RESOLVE_MAIN_FIELDS = ['module', 'jsnext:main', 'jsnext'];
 
 export const SVELTE_RESOLVE_MAIN_FIELDS = ['svelte'];
@@ -20,6 +22,11 @@ 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 =

package/src/utils/error.js

@@ -104,7 +104,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 {string} originalCode
- * @param {import('../index.js').Arrayable<import('svelte/types/compiler/preprocess').PreprocessorGroup>} [preprocessors]
+ * @param {import('../public.d.ts').Options['preprocess']} [preprocessors]
  */
 export function enhanceCompileError(err, originalCode, preprocessors) {
 	preprocessors = arraify(preprocessors ?? []);

package/src/utils/esbuild.js

@@ -1,7 +1,8 @@
 import { readFileSync } from 'node:fs';
-import { compile, preprocess } from 'svelte/compiler';
+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
@@ -10,6 +11,8 @@ import { toESBuildError } from './error.js';
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
+const svelteModuleExtension = '.svelte.js';
+
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @returns {EsbuildPlugin}
@@ -23,6 +26,9 @@ 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;
@@ -54,24 +60,39 @@ 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
 		css = 'injected';
 	}
-	/** @type {import('../index.d.ts').CompileOptions} */
+	/** @type {import('svelte/compiler').CompileOptions} */
 	const compileOptions = {
 		...options.compilerOptions,
 		css,
 		filename,
-		generate: 'dom'
+		// @ts-expect-error svelte4 uses 'dom', svelte5 uses 'client'
+		generate: isSvelte5 ? 'client' : 'dom'
 	};
 
 	let preprocessed;
 
 	if (options.preprocess) {
 		try {
-			preprocessed = await preprocess(code, options.preprocess, { filename });
+			preprocessed = await svelte.preprocess(code, options.preprocess, { filename });
 		} catch (e) {
 			e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
 			throw e;
@@ -102,7 +123,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		  }
 		: compileOptions;
 	const endStat = statsCollection?.start(filename);
-	const compiled = compile(finalCode, finalCompileOptions);
+	const compiled = svelte.compile(finalCode, finalCompileOptions);
 	if (endStat) {
 		endStat();
 	}

package/src/utils/id.js

@@ -159,8 +159,8 @@ function stripRoot(normalizedFilename, normalizedRoot) {
 }
 
 /**
- * @param {import('../index.d.ts').Arrayable<string> | undefined} include
- * @param {import('../index.d.ts').Arrayable<string> | undefined} exclude
+ * @param {import('../public.d.ts').Options['include'] | undefined} include
+ * @param {import('../public.d.ts').Options['exclude'] | undefined} exclude
  * @param {string[]} extensions
  * @returns {(filename: string) => boolean}
  */
@@ -184,3 +184,49 @@ 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
+	};
+}

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,15 +18,15 @@ export async function loadRaw(svelteRequest, compileSvelte, options) {
 	const source = fs.readFileSync(filename, 'utf-8');
 	try {
 		//avoid compileSvelte doing extra ssr stuff unless requested
-		svelteRequest.ssr = query.compilerOptions?.generate === 'ssr';
+		//@ts-ignore //@ts-expect-error generate value differs between svelte4 and 5
+		svelteRequest.ssr = query.compilerOptions?.generate === (isSvelte4 ? 'ssr' : 'server');
 		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: false,
-				hydratable: false,
+				css: 'external',
 				enableSourcemap: query.sourcemap
 					? {
 							js: type === 'script' || type === 'all',

package/src/utils/load-svelte-config.js

@@ -16,16 +16,19 @@ export const knownSvelteConfigNames = [
 	'svelte.config.mjs'
 ];
 
-// hide dynamic import from ts transform to prevent it turning into a require
-// see https://github.com/microsoft/TypeScript/issues/43329#issuecomment-811606238
-// also use timestamp query to avoid caching on reload
-const dynamicImportDefault = new Function(
-	'path',
-	'timestamp',
-	'return import(path + "?t=" + timestamp).then(m => m.default)'
-);
+/**
+ * @param {string} filePath
+ * @param {number} timestamp
+ */
+async function dynamicImportDefault(filePath, timestamp) {
+	return await import(filePath + '?t=' + timestamp).then((m) => m.default);
+}
 
-/** @type {import('../index.d.ts').loadSvelteConfig} */
+/**
+ * @param {import('vite').UserConfig} viteConfig
+ * @param {Partial<import('../public.d.ts').Options>} inlineOptions
+ * @returns {Promise<Partial<import('../public.d.ts').SvelteConfig> | undefined>}
+ */
 export async function loadSvelteConfig(viteConfig, inlineOptions) {
 	if (inlineOptions?.configFile === false) {
 		return;
@@ -87,7 +90,7 @@ export async function loadSvelteConfig(viteConfig, inlineOptions) {
 
 /**
  * @param {import('vite').UserConfig | undefined} viteConfig
- * @param {Partial<import('../index.d.ts').Options> | undefined} inlineOptions
+ * @param {Partial<import('../public.d.ts').Options> | undefined} inlineOptions
  * @returns {string | undefined}
  */
 function findConfigToLoad(viteConfig, inlineOptions) {

package/src/utils/log.js

@@ -1,6 +1,7 @@
 /* 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'];
@@ -126,7 +127,7 @@ export const log = {
 };
 
 /**
- * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+ * @param {import('../types/id.d.ts').SvelteRequest | import('../types/id.d.ts').SvelteModuleRequest} svelteRequest
  * @param {import('svelte/types/compiler/interfaces').Warning[]} warnings
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */
@@ -259,3 +260,12 @@ 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

@@ -26,6 +26,7 @@ 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',
@@ -45,7 +46,7 @@ const knownRootOptions = new Set(['extensions', 'compilerOptions', 'preprocess',
 const allowedInlineOptions = new Set(['configFile', ...allowedPluginOptions, ...knownRootOptions]);
 
 /**
- * @param {Partial<import('../index.d.ts').Options>} [inlineOptions]
+ * @param {Partial<import('../public.d.ts').Options>} [inlineOptions]
  */
 export function validateInlineOptions(inlineOptions) {
 	const invalidKeys = Object.keys(inlineOptions || {}).filter(
@@ -57,8 +58,8 @@ export function validateInlineOptions(inlineOptions) {
 }
 
 /**
- * @param {Partial<import('../index.d.ts').SvelteOptions>} [config]
- * @returns {Partial<import('../index.d.ts').Options> | undefined}
+ * @param {Partial<import('../public.d.ts').SvelteConfig>} [config]
+ * @returns {Partial<import('../public.d.ts').Options> | undefined}
  */
 function convertPluginOptions(config) {
 	if (!config) {
@@ -108,7 +109,7 @@ function convertPluginOptions(config) {
 			delete pluginOptions[unkownOption];
 		});
 	}
-	/** @type {import('../index.d.ts').Options} */
+	/** @type {import('../public.d.ts').Options} */
 	const result = {
 		...config,
 		...pluginOptions
@@ -121,7 +122,7 @@ function convertPluginOptions(config) {
 
 /**
  * used in config phase, merges the default options, svelte config, and inline options
- * @param {Partial<import('../index.d.ts').Options> | undefined} inlineOptions
+ * @param {Partial<import('../public.d.ts').Options> | undefined} inlineOptions
  * @param {import('vite').UserConfig} viteUserConfig
  * @param {import('vite').ConfigEnv} viteEnv
  * @returns {Promise<import('../types/options.d.ts').PreResolvedOptions>}
@@ -191,7 +192,7 @@ function mergeConfigs(...configs) {
  */
 export function resolveOptions(preResolveOptions, viteConfig, cache) {
 	const css = preResolveOptions.emitCss ? 'external' : 'injected';
-	/** @type {Partial<import('../index.d.ts').Options>} */
+	/** @type {Partial<import('../public.d.ts').Options>} */
 	const defaultOptions = {
 		hot: viteConfig.isProduction
 			? false
@@ -229,6 +230,10 @@ 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');

package/src/utils/preprocess.js

@@ -9,7 +9,7 @@ import { normalizePath } from 'vite';
  *
  * only used during dev with enabled css hmr
  *
- * @returns {import('svelte/types/compiler/preprocess').PreprocessorGroup}
+ * @returns {import('svelte/compiler').PreprocessorGroup}
  */
 export function createInjectScopeEverythingRulePreprocessorGroup() {
 	return {
@@ -32,14 +32,14 @@ export function createInjectScopeEverythingRulePreprocessorGroup() {
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @param {import('vite').ResolvedConfig} config
  * @returns {{
- * 	prependPreprocessors: import('svelte/types/compiler/preprocess').PreprocessorGroup[],
- * 	appendPreprocessors: import('svelte/types/compiler/preprocess').PreprocessorGroup[]
+ * 	prependPreprocessors: import('svelte/compiler').PreprocessorGroup[],
+ * 	appendPreprocessors: import('svelte/compiler').PreprocessorGroup[]
  * }}
  */
 function buildExtraPreprocessors(options, config) {
-	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup[]} */
+	/** @type {import('svelte/compiler').PreprocessorGroup[]} */
 	const prependPreprocessors = [];
-	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup[]} */
+	/** @type {import('svelte/compiler').PreprocessorGroup[]} */
 	const appendPreprocessors = [];
 
 	// @ts-ignore

package/src/utils/svelte-version.js

@@ -3,4 +3,9 @@ import { VERSION } from 'svelte/compiler';
 /**
  * @type {boolean}
  */
-export const isSvelte3 = VERSION.startsWith('3.');
+export const isSvelte4 = VERSION.startsWith('4.');
+
+/**
+ * @type {boolean}
+ */
+export const isSvelte5 = VERSION.startsWith('5.');

package/src/utils/watch.js

@@ -5,7 +5,7 @@ import path from 'node:path';
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @param {import('./vite-plugin-svelte-cache').VitePluginSvelteCache} cache
+ * @param {import('./vite-plugin-svelte-cache.js').VitePluginSvelteCache} cache
  * @param {import('../types/id.d.ts').IdParser} requestParser
  * @returns {void}
  */

package/types/index.d.ts

@@ -0,0 +1,197 @@
+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 { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
+	export type Options = Omit<SvelteConfig, 'vitePlugin'> & PluginOptionsInline;
+
+	interface PluginOptionsInline extends PluginOptions {
+		/**
+		 * Path to a svelte config file, either absolute or relative to Vite root
+		 *
+		 * set to `false` to ignore the svelte config file
+		 *
+		 * @see https://vitejs.dev/config/#root
+		 */
+		configFile?: string | false;
+	}
+
+	interface PluginOptions {
+		/**
+		 * A `picomatch` pattern, or array of patterns, which specifies the files the plugin should
+		 * operate on. By default, all svelte files are included.
+		 *
+		 * @see https://github.com/micromatch/picomatch
+		 */
+		include?: Arrayable<string>;
+		/**
+		 * A `picomatch` pattern, or array of patterns, which specifies the files to be ignored by the
+		 * plugin. By default, no files are ignored.
+		 *
+		 * @see https://github.com/micromatch/picomatch
+		 */
+		exclude?: Arrayable<string>;
+		/**
+		 * Emit Svelte styles as virtual CSS files for Vite and other plugins to process
+		 *
+		 * @default true
+		 */
+		emitCss?: boolean;
+		/**
+		 * Enable or disable Hot Module Replacement.
+		 *
+		 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+		 *
+		 * 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
+		 * @default true for development, always false for production
+		 */
+		hot?:
+			| boolean
+			| {
+					injectCss?: boolean;
+					partialAccept?: boolean;
+					[key: string]: any;
+			  };
+		/**
+		 * 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
+		 * with plugin names to specify which.
+		 *
+		 * @default false
+		 */
+		ignorePluginPreprocessors?: boolean | string[];
+		/**
+		 * vite-plugin-svelte automatically handles excluding svelte libraries and reinclusion of their dependencies
+		 * in vite.optimizeDeps.
+		 *
+		 * `disableDependencyReinclusion: true` disables all reinclusions
+		 * `disableDependencyReinclusion: ['foo','bar']` disables reinclusions for dependencies of foo and bar
+		 *
+		 * This should be used for hybrid packages that contain both node and browser dependencies, eg Routify
+		 *
+		 * @default false
+		 */
+		disableDependencyReinclusion?: boolean | string[];
+		/**
+		 * Enable support for Vite's dependency optimization to prebundle Svelte libraries.
+		 *
+		 * To disable prebundling for a specific library, add it to `optimizeDeps.exclude`.
+		 *
+		 * @default true for dev, false for build
+		 */
+		prebundleSvelteLibraries?: boolean;
+		/**
+		 * toggle/configure Svelte Inspector
+		 *
+		 * @default unset for dev, always false for build
+		 */
+		inspector?: InspectorOptions | boolean;
+
+		/**
+		 * A function to update `compilerOptions` before compilation
+		 *
+		 * `data.filename` - The file to be compiled
+		 * `data.code` - The preprocessed Svelte code
+		 * `data.compileOptions` - The current compiler options
+		 *
+		 * To change part of the compiler options, return an object with the changes you need.
+		 *
+		 * @example
+		 * ```
+		 * ({ filename, compileOptions }) => {
+		 *   // Dynamically set hydration per Svelte file
+		 *   if (compileWithHydratable(filename) && !compileOptions.hydratable) {
+		 *     return { hydratable: true };
+		 *   }
+		 * }
+		 * ```
+		 */
+		dynamicCompileOptions?: (data: {
+			filename: string;
+			code: string;
+			compileOptions: Partial<CompileOptions>;
+		}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+
+		/**
+		 * These options are considered experimental and breaking changes to them can occur in any release
+		 */
+		experimental?: ExperimentalOptions;
+	}
+
+	export interface SvelteConfig {
+		/**
+		 * A list of file extensions to be compiled by Svelte
+		 *
+		 * @default ['.svelte']
+		 */
+		extensions?: string[];
+		/**
+		 * An array of preprocessors to transform the Svelte source code before compilation
+		 *
+		 * @see https://svelte.dev/docs#svelte_preprocess
+		 */
+		preprocess?: Arrayable<PreprocessorGroup>;
+		/**
+		 * The options to be passed to the Svelte compiler. A few options are set by default,
+		 * including `dev` and `css`. However, some options are non-configurable, like
+		 * `filename`, `format`, `generate`, and `cssHash` (in dev).
+		 *
+		 * @see https://svelte.dev/docs#svelte_compile
+		 */
+		compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
+
+		/**
+		 * Handles warning emitted from the Svelte compiler
+		 */
+		onwarn?: (warning: Warning, defaultHandler?: (warning: Warning) => void) => void;
+		/**
+		 * Options for vite-plugin-svelte
+		 */
+		vitePlugin?: PluginOptions;
+	}
+
+	/**
+	 * These options are considered experimental and breaking changes to them can occur in any release
+	 */
+	interface ExperimentalOptions {
+		/**
+		 * send a websocket message with svelte compiler warnings during dev
+		 *
+		 */
+		sendWarningsToBrowser?: boolean;
+		/**
+		 * disable svelte field resolve warnings
+		 *
+		 * @default false
+		 */
+		disableSvelteResolveWarnings?: boolean;
+
+		compileModule?: CompileModuleOptions;
+	}
+
+	interface CompileModuleOptions {
+		extensions?: string[];
+		include?: Arrayable<string>;
+		exclude?: Arrayable<string>;
+	}
+
+	type Arrayable<T> = T | T[];
+
+	export interface VitePreprocessOptions {
+		script?: boolean;
+		style?: boolean | InlineConfig | ResolvedConfig;
+	}
+	export function svelte(inlineOptions?: Partial<Options> | undefined): import('vite').Plugin[];
+	export function vitePreprocess(opts: VitePreprocessOptions): import('svelte/compiler').PreprocessorGroup;
+	export function loadSvelteConfig(viteConfig: import('vite').UserConfig, inlineOptions: Partial<Options>): Promise<Partial<SvelteConfig> | undefined>;
+}
+
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1,25 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [
+		"Options",
+		"SvelteConfig",
+		"VitePreprocessOptions",
+		"svelte",
+		"vitePreprocess",
+		"loadSvelteConfig"
+	],
+	"sources": [
+		"../src/public.d.ts",
+		"../src/index.js",
+		"../src/preprocess.js",
+		"../src/utils/load-svelte-config.js"
+	],
+	"sourcesContent": [
+		null,
+		null,
+		null,
+		null
+	],
+	"mappings": ";;;;;aAMYA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2HFC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2DZC,qBAAqBA;;;;iBChKtBC,MAAMA;iBCbNC,cAAcA;iBCgBRC,gBAAgBA"
+}