@sveltejs/vite-plugin-svelte 7.0.0 → 7.1.1

package/src/preprocess.js

@@ -1,3 +1,7 @@
+/** @import { VitePreprocessOptions } from './public.js' */
+/** @import { Preprocessor as SveltePreprocessor, PreprocessorGroup } from 'svelte/compiler' */
+/** @import { InlineConfig, ResolvedConfig } from 'vite' */
+
 import process from 'node:process';
 import * as vite from 'vite';
 import { mapToRelative, removeLangSuffix } from './utils/sourcemaps.js';
@@ -17,11 +21,11 @@ const supportedScriptLangs = ['ts'];
 export const lang_sep = '.vite-preprocess';
 
 /**
- * @param {import('./public.d.ts').VitePreprocessOptions} [opts]
- * @returns {import('svelte/compiler').PreprocessorGroup}
+ * @param {VitePreprocessOptions} [opts]
+ * @returns {PreprocessorGroup}
  */
 export function vitePreprocess(opts) {
-	/** @type {import('svelte/compiler').PreprocessorGroup} */
+	/** @type {PreprocessorGroup} */
 	const preprocessor = { name: 'vite-preprocess' };
 	if (opts?.script === true) {
 		preprocessor.script = viteScript().script;
@@ -34,7 +38,7 @@ export function vitePreprocess(opts) {
 }
 
 /**
- * @returns {{ script: import('svelte/compiler').Preprocessor }}
+ * @returns {{ script: SveltePreprocessor }}
  */
 function viteScript() {
 	return {
@@ -45,15 +49,12 @@ function viteScript() {
 			const lang = /** @type {'ts'} */ (attributes.lang);
 			const { code, map } = await transformWithOxc(content, filename, {
 				lang,
-				target: 'esnext'
-				// TODO, how to pass tsconfig compilerOptions (or not needed as config is loaded for file
-				/*tsconfigRaw: {
-					compilerOptions: {
-						// svelte typescript needs this flag to work with type imports
-						importsNotUsedAsValues: 'preserve',
-						preserveValueImports: true
-					}
-				}*/
+				target: 'esnext',
+				// oxc strips value imports it considers unused, but in Svelte files
+				// these imports may be referenced in the template which oxc cannot see.
+				// onlyRemoveTypeImports tells oxc to only strip type-only imports
+				// (import type {...}, import { type X }) and preserve all value imports.
+				typescript: { onlyRemoveTypeImports: true }
 			});
 
 			mapToRelative(map, filename);
@@ -67,44 +68,45 @@ function viteScript() {
 }
 
 /**
- * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
- * @returns {{ style: import('svelte/compiler').Preprocessor }}
+ * @param {ResolvedConfig | InlineConfig} config
+ * @returns {{ style: SveltePreprocessor }}
  */
 function viteStyle(config = {}) {
 	/** @type {Promise<CssTransform> | CssTransform} */
 	let cssTransform;
-	/** @type {import('svelte/compiler').Preprocessor} */
-	const style = async ({ attributes, content, filename = '' }) => {
-		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
-		if (attributes.lang && !isCSSRequest(ext)) return;
-		if (!cssTransform) {
-			cssTransform = createCssTransform(style, config).then((t) => (cssTransform = t));
+	const style = /** @type {SveltePreprocessor} */ (
+		async ({ attributes, content, filename = '' }) => {
+			const ext = attributes.lang ? `.${attributes.lang}` : '.css';
+			if (attributes.lang && !isCSSRequest(ext)) return;
+			if (!cssTransform) {
+				cssTransform = createCssTransform(style, config).then((t) => (cssTransform = t));
+			}
+			const transform = await cssTransform;
+			const suffix = `${lang_sep}${ext}`;
+			const moduleId = `${filename}${suffix}`;
+			const { code, map, deps } = await transform(content, moduleId);
+			removeLangSuffix(map, suffix);
+			mapToRelative(map, filename);
+			const dependencies = deps ? Array.from(deps).filter((d) => !d.endsWith(suffix)) : undefined;
+			return {
+				code,
+				map: map ?? undefined,
+				dependencies
+			};
 		}
-		const transform = await cssTransform;
-		const suffix = `${lang_sep}${ext}`;
-		const moduleId = `${filename}${suffix}`;
-		const { code, map, deps } = await transform(content, moduleId);
-		removeLangSuffix(map, suffix);
-		mapToRelative(map, filename);
-		const dependencies = deps ? Array.from(deps).filter((d) => !d.endsWith(suffix)) : undefined;
-		return {
-			code,
-			map: map ?? undefined,
-			dependencies
-		};
-	};
+	);
 	// @ts-expect-error tag so can be found by v-p-s
 	style.__resolvedConfig = null;
 	return { style };
 }
 
 /**
- * @param {import('svelte/compiler').Preprocessor} style
- * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
+ * @param {SveltePreprocessor} style
+ * @param {ResolvedConfig | InlineConfig} config
  * @returns {Promise<CssTransform>}
  */
 async function createCssTransform(style, config) {
-	/** @type {import('vite').ResolvedConfig} */
+	/** @type {ResolvedConfig} */
 	let resolvedConfig;
 	// @ts-expect-error special prop added if running in v-p-s
 	if (style.__resolvedConfig) {
@@ -126,7 +128,7 @@ async function createCssTransform(style, config) {
 
 /**
  * @param {any} config
- * @returns {config is import('vite').ResolvedConfig}
+ * @returns {config is ResolvedConfig}
  */
 function isResolvedConfig(config) {
 	return !!config.inlineConfig;

package/src/utils/compile.js

@@ -1,3 +1,7 @@
+/** @import { CompileSvelte } from '../types/compile.js' */
+/** @import { StatCollection } from '../types/vite-plugin-svelte-stats.js' */
+/** @import { CompileOptions, CompileResult, Warning } from 'svelte/compiler' */
+
 import * as svelte from 'svelte/compiler';
 import { log } from './log.js';
 
@@ -11,16 +15,16 @@ const scriptLangRE =
 	/<!--[^]*?-->|<script\s+(?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=(["'])?([^"' >]+)\1[^>]*>/g;
 
 /**
- * @returns {import('../types/compile.d.ts').CompileSvelte}
+ * @returns {CompileSvelte}
  */
 export function createCompileSvelte() {
-	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+	/** @type {StatCollection | undefined} */
 	let stats;
-	/** @type {import('../types/compile.d.ts').CompileSvelte} */
+	/** @type {CompileSvelte} */
 	return async function compileSvelte(svelteRequest, code, options, sourcemap) {
 		const { filename, normalizedFilename, cssId, ssr, raw } = svelteRequest;
 		const { emitCss = true } = options;
-		/** @type {import('svelte/compiler').Warning[]} */
+		/** @type {Warning[]} */
 		const warnings = [];
 
 		if (options.stats) {
@@ -48,7 +52,7 @@ export function createCompileSvelte() {
 			}
 		}
 
-		/** @type {import('svelte/compiler').CompileOptions} */
+		/** @type {CompileOptions} */
 		const compileOptions = {
 			...options.compilerOptions,
 			filename,
@@ -87,7 +91,7 @@ export function createCompileSvelte() {
 			finalCompileOptions.sourcemap = sourcemap;
 		}
 		const endStat = stats?.start(filename);
-		/** @type {import('svelte/compiler').CompileResult} */
+		/** @type {CompileResult} */
 		let compiled;
 		try {
 			compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename });

package/src/utils/constants.js

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

package/src/utils/error.js

@@ -1,14 +1,19 @@
+/** @import { Options } from '../public.js' */
+/** @import { ResolvedOptions } from '../types/options.js' */
+/** @import { Warning } from 'svelte/compiler' */
+/** @import { Rollup } from 'vite' */
+
 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/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
+ * @param {Warning & Error & {frame?: string}} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {ResolvedOptions} options
+ * @returns {Rollup.RollupError} the converted error
  */
 export function toRollupError(error, options) {
 	const { filename, frame, start, code, name, stack } = error;
-	/** @type {import('vite').Rollup.RollupError} */
+	/** @type {Rollup.RollupError} */
 	const rollupError = {
 		name, // needed otherwise sveltekit coalesce_to_error turns it into a string
 		id: filename,
@@ -29,8 +34,8 @@ export function toRollupError(error, options) {
 
 /**
  * convert an error thrown by svelte.compile to an esbuild PartialMessage
- * @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
+ * @param {Warning & Error  & {frame?: string}} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {ResolvedOptions} options
  * @returns {any} the converted error as esbuild PartialMessage
  *
  * note: typed any to avoid esbuild devDependency for a single internal type import
@@ -114,9 +119,9 @@ function couldBeFixedByCssPreprocessor(code) {
 }
 
 /**
- * @param {import('svelte/compiler').Warning & Error} err a svelte compiler error, which is a mix of Warning and an error
+ * @param {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]
+ * @param {Options['preprocess']} [preprocessors]
  */
 export function enhanceCompileError(err, originalCode, preprocessors) {
 	preprocessors = arraify(preprocessors ?? []);

package/src/utils/id.js

@@ -1,3 +1,6 @@
+/** @import { IdFilter, IdParser, ModuleIdParser, RequestQuery, SvelteModuleRequest, SvelteQueryTypes, SvelteRequest } from '../types/id.js' */
+/** @import { ResolvedOptions } from '../types/options.js' */
+
 import { normalizePath } from 'vite';
 import fs from 'node:fs';
 import process from 'node:process';
@@ -34,7 +37,7 @@ function splitId(id) {
  * @param {string} root
  * @param {number} timestamp
  * @param {boolean} ssr
- * @returns {import('../types/id.d.ts').SvelteRequest | undefined}
+ * @returns {SvelteRequest | undefined}
  */
 function parseToSvelteRequest(id, filename, rawQuery, root, timestamp, ssr) {
 	const query = parseRequestQuery(rawQuery);
@@ -62,7 +65,7 @@ function parseToSvelteRequest(id, filename, rawQuery, root, timestamp, ssr) {
 /**
  * @param {string} filename
  * @param {string} root
- * @param {import('../types/id.d.ts').SvelteQueryTypes} type
+ * @param {SvelteQueryTypes} type
  * @returns {string}
  */
 function createVirtualImportId(filename, root, type) {
@@ -83,7 +86,7 @@ function createVirtualImportId(filename, root, type) {
 
 /**
  * @param {string} rawQuery
- * @returns {import('../types/id.d.ts').RequestQuery}
+ * @returns {RequestQuery}
  */
 function parseRequestQuery(rawQuery) {
 	const query = Object.fromEntries(new URLSearchParams(rawQuery));
@@ -121,7 +124,7 @@ function parseRequestQuery(rawQuery) {
 		}
 	}
 
-	return /** @type {import('../types/id.d.ts').RequestQuery}*/ query;
+	return /** @type {RequestQuery}*/ query;
 }
 
 /**
@@ -168,8 +171,8 @@ function escapeRE(s) {
 }
 
 /**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {import('../types/id.d.ts').IdFilter}
+ * @param {ResolvedOptions} options
+ * @returns {IdFilter}
  */
 export function buildIdFilter(options) {
 	const { include = [], exclude = [], extensions = DEFAULT_SVELTE_EXT } = options;
@@ -193,8 +196,8 @@ export function buildIdFilter(options) {
 }
 
 /**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {import('../types/id.d.ts').IdParser}
+ * @param {ResolvedOptions} options
+ * @returns {IdParser}
  */
 export function buildIdParser(options) {
 	const normalizedRoot = normalizePath(options.root);
@@ -205,8 +208,8 @@ export function buildIdParser(options) {
 }
 
 /**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {import('../types/id.d.ts').IdFilter}
+ * @param {ResolvedOptions} options
+ * @returns {IdFilter}
  */
 export function buildModuleIdFilter(options) {
 	const {
@@ -232,8 +235,8 @@ export function buildModuleIdFilter(options) {
 }
 
 /**
- * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @returns {import('../types/id.d.ts').ModuleIdParser}
+ * @param {ResolvedOptions} options
+ * @returns {ModuleIdParser}
  */
 export function buildModuleIdParser(options) {
 	const root = options.root;
@@ -251,7 +254,7 @@ export function buildModuleIdParser(options) {
  * @param {string} root
  * @param {number} timestamp
  * @param {boolean} ssr
- * @returns {import('../types/id.d.ts').SvelteModuleRequest | undefined}
+ * @returns {SvelteModuleRequest | undefined}
  */
 function parseToSvelteModuleRequest(id, filename, rawQuery, root, timestamp, ssr) {
 	const query = parseRequestQuery(rawQuery);

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

@@ -1,3 +1,6 @@
+/** @import { Options, SvelteConfig } from '../public.js' */
+/** @import { UserConfig } from 'vite' */
+
 import path from 'node:path';
 import process from 'node:process';
 import fs from 'node:fs';
@@ -17,9 +20,9 @@ async function dynamicImportDefault(filePath, timestamp) {
 }
 
 /**
- * @param {import('vite').UserConfig} [viteConfig]
- * @param {Partial<import('../public.d.ts').Options>} [inlineOptions]
- * @returns {Promise<Partial<import('../public.d.ts').SvelteConfig> | undefined>}
+ * @param {UserConfig} [viteConfig]
+ * @param {Partial<Options>} [inlineOptions]
+ * @returns {Promise<Partial<SvelteConfig> | undefined>}
  */
 export async function loadSvelteConfig(viteConfig, inlineOptions) {
 	if (inlineOptions?.configFile === false) {
@@ -48,8 +51,8 @@ export async function loadSvelteConfig(viteConfig, inlineOptions) {
 }
 
 /**
- * @param {import('vite').UserConfig | undefined} viteConfig
- * @param {Partial<import('../public.d.ts').Options> | undefined} inlineOptions
+ * @param {UserConfig | undefined} viteConfig
+ * @param {Partial<Options> | undefined} inlineOptions
  * @returns {string | undefined}
  */
 function findConfigToLoad(viteConfig, inlineOptions) {

package/src/utils/log.js

@@ -1,3 +1,8 @@
+/** @import { SvelteModuleRequest, SvelteRequest } from '../types/id.js' */
+/** @import { LogFn, LogLevel, SimpleLogFn, SvelteWarningsMessage } from '../types/log.js' */
+/** @import { ResolvedOptions } from '../types/options.js' */
+/** @import { Warning } from 'svelte/compiler' */
+
 /* eslint-disable no-console */
 
 // eslint-disable-next-line n/no-unsupported-features/node-builtins
@@ -8,10 +13,10 @@ const red = (/** @type {string} */ txt) => styleText('red', txt);
 
 import { createDebug, enabled } from 'obug';
 
-/** @type {import('../types/log.d.ts').LogLevel[]} */
+/** @type {LogLevel[]} */
 const levels = ['debug', 'info', 'warn', 'error', 'silent'];
 const prefix = 'vite-plugin-svelte';
-/** @type {Record<import('../types/log.d.ts').LogLevel, any>} */
+/** @type {Record<LogLevel, any>} */
 const loggers = {
 	debug: {
 		log: createDebug(`${prefix}`),
@@ -38,10 +43,10 @@ const loggers = {
 	}
 };
 
-/** @type {import('../types/log.d.ts').LogLevel} */
+/** @type {LogLevel} */
 let _level = 'info';
 /**
- * @param {import('../types/log.d.ts').LogLevel} level
+ * @param {LogLevel} level
  * @returns {void}
  */
 function setLevel(level) {
@@ -98,15 +103,15 @@ function _log(logger, message, payload, namespace) {
 }
 
 /**
- * @param {import('../types/log.d.ts').LogLevel} level
- * @returns {import('../types/log.d.ts').LogFn}
+ * @param {LogLevel} level
+ * @returns {LogFn}
  */
 function createLogger(level) {
 	const logger = loggers[level];
-	const logFn = /** @type {import('../types/log.d.ts').LogFn} */ (_log.bind(null, logger));
+	const logFn = /** @type {LogFn} */ (_log.bind(null, logger));
 	/** @type {Set<string>} */
 	const logged = new Set();
-	/** @type {import('../types/log.d.ts').SimpleLogFn} */
+	/** @type {SimpleLogFn} */
 	const once = function (message, payload, namespace) {
 		if (!logger.enabled || logged.has(message)) {
 			return;
@@ -136,20 +141,20 @@ export const log = {
 };
 
 /**
- * @param {import('../types/id.d.ts').SvelteRequest | import('../types/id.d.ts').SvelteModuleRequest} svelteRequest
- * @param {import('svelte/compiler').Warning[]} warnings
- * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {SvelteRequest | SvelteModuleRequest} svelteRequest
+ * @param {Warning[]} warnings
+ * @param {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/compiler').Warning[]} */
+	/** @type {Warning[]} */
 	const handledByDefaultWarn = [];
 	const allWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
 	if (sendViaWS) {
 		const _warn = warn;
-		/** @type {(w: import('svelte/compiler').Warning) => void} */
+		/** @type {(w: Warning) => void} */
 		warn = (w) => {
 			handledByDefaultWarn.push(w);
 			_warn(w);
@@ -163,7 +168,7 @@ export function logCompilerWarnings(svelteRequest, warnings, options) {
 		}
 	});
 	if (sendViaWS) {
-		/** @type {import('../types/log.d.ts').SvelteWarningsMessage} */
+		/** @type {SvelteWarningsMessage} */
 		const message = {
 			id: svelteRequest.id,
 			filename: svelteRequest.filename,
@@ -179,7 +184,7 @@ export function logCompilerWarnings(svelteRequest, warnings, options) {
 }
 
 /**
- * @param {import('svelte/compiler').Warning} warning
+ * @param {Warning} warning
  * @param {boolean} isBuild
  * @param {boolean} [emitCss]
  * @returns {boolean}
@@ -193,7 +198,7 @@ function ignoreCompilerWarning(warning, isBuild, emitCss) {
 
 /**
  *
- * @param {import('svelte/compiler').Warning} warning
+ * @param {Warning} warning
  * @returns {boolean}
  */
 function isNoScopableElementWarning(warning) {
@@ -202,7 +207,7 @@ function isNoScopableElementWarning(warning) {
 }
 
 /**
- * @param {import('svelte/compiler').Warning} w
+ * @param {Warning} w
  */
 function warnDev(w) {
 	if (w.filename?.includes('node_modules')) {
@@ -215,7 +220,7 @@ function warnDev(w) {
 }
 
 /**
- * @param {import('svelte/compiler').Warning & {frame?: string}} w
+ * @param {Warning & {frame?: string}} w
  */
 function warnBuild(w) {
 	if (w.filename?.includes('node_modules')) {
@@ -228,7 +233,7 @@ function warnBuild(w) {
 }
 
 /**
- * @param {import('svelte/compiler').Warning} w
+ * @param {Warning} w
  */
 export function buildExtendedLogMessage(w) {
 	const parts = [];