@sveltejs/vite-plugin-svelte 2.4.5 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -34,22 +34,22 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
+    "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
     "debug": "^4.3.4",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
-    "magic-string": "^0.30.2",
+    "magic-string": "^0.30.3",
     "svelte-hmr": "^0.15.3",
-    "vitefu": "^0.2.4",
-    "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3"
+    "vitefu": "^0.2.4"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0 || ^4.0.0",
+    "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0",
     "vite": "^4.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.8",
-    "esbuild": "^0.19.0",
-    "svelte": "^4.1.2",
+    "esbuild": "^0.19.3",
+    "svelte": "^4.2.0",
     "vite": "^4.4.9"
   },
   "scripts": {

package/src/index.d.ts

@@ -170,6 +170,16 @@ interface ExperimentalOptions {
 	 * @default false
 	 */
 	disableSvelteResolveWarnings?: boolean;
+	/**
+	 * Options for compiling Svelte JS/TS modules
+	 */
+	compileModule?: CompileModuleOptions;
+}
+
+interface CompileModuleOptions {
+	extensions?: string[];
+	include?: Arrayable<string>;
+	exclude?: Arrayable<string>;
 }
 
 type ModuleFormat = NonNullable<'esm'>;

package/src/index.js

@@ -1,5 +1,6 @@
-import fs from 'fs';
+import fs from 'node:fs';
 import { version as viteVersion } from 'vite';
+import * as svelteCompiler from 'svelte/compiler';
 
 import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
 
@@ -7,7 +8,7 @@ import { isDepExcluded } from 'vitefu';
 import { handleHotUpdate } from './handle-hot-update.js';
 import { log, logCompilerWarnings } 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,
@@ -24,7 +25,7 @@ import { saveSvelteMetadata } from './utils/optimizer.js';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache.js';
 import { loadRaw } from './utils/load-raw.js';
 import { FAQ_LINK_CONFLICTS_IN_SVELTE_RESOLVE } from './utils/constants.js';
-import { isSvelte3 } from './utils/svelte-version.js';
+import { isSvelte3, isSvelte5 } from './utils/svelte-version.js';
 
 const isVite4_0 = viteVersion.startsWith('4.0');
 
@@ -38,6 +39,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} */
@@ -268,9 +271,45 @@ export function svelte(inlineOptions) {
 					);
 				}
 			}
-		},
-		svelteInspector()
+		}
 	];
+
+	if (!isSvelte5) {
+		plugins.push(svelteInspector()); // TODO reenable once svelte5 has support
+	}
+	if (isSvelte5) {
+		log.warn(
+			'svelte 5 support in v-p-s is experimental, breaking changes can occur in any release until this notice is removed'
+		);
+		log.warn('svelte 5 does not support svelte-inspector yet, disabling it');
+		// 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-ignore doesn't exist in Svelte 4
+					const compileResult = await svelteCompiler.compileModule(code, {
+						generate: ssr ? 'ssr' : 'dom',
+						filename: moduleRequest.filename
+					});
+					logCompilerWarnings(moduleRequest, compileResult.warnings, options);
+					return compileResult.js;
+				} catch (e) {
+					throw toRollupError(e, options);
+				}
+			}
+		});
+	}
+
 	return plugins;
 }
 

package/src/types/compile.d.ts

@@ -19,7 +19,7 @@ export interface Compiled {
 	css: Code;
 	ast: any; // TODO type
 	warnings: any[]; // TODO type
-	vars: {
+	vars: Array<{
 		name: string;
 		export_name: string;
 		injected: boolean;
@@ -29,7 +29,7 @@ export interface Compiled {
 		referenced: boolean;
 		writable: boolean;
 		referenced_from_script: boolean;
-	}[];
+	}>;
 	stats: {
 		timings: {
 			total: number;

package/src/types/id.d.ts

@@ -28,4 +28,19 @@ 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/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';
@@ -86,7 +86,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;
@@ -123,7 +123,7 @@ export const _createCompileSvelte = (makeHot) => {
 			: compileOptions;
 
 		const endStat = stats?.start(filename);
-		const compiled = compile(finalCode, finalCompileOptions);
+		const compiled = svelte.compile(finalCode, finalCompileOptions);
 
 		if (isSvelte3) {
 			// prevent dangling pure comments
@@ -187,7 +187,8 @@ function buildMakeHot(options) {
 		// @ts-ignore
 		const adapter = options?.hot?.adapter;
 		return createMakeHot({
-			walk,
+			// TODO Svelte 5 doesn't expose walk anymore. If we decide to make v-p-s 2 work with Svelte 5 HMR, we need to import walk from estree-walker
+			walk: svelte.walk,
 			hotApi,
 			adapter,
 			hotOptions: { noOverlay: true, .../** @type {object} */ (options.hot) }

package/src/utils/dependencies.js

@@ -1,5 +1,5 @@
-import path from 'path';
-import fs from 'fs/promises';
+import path from 'node:path';
+import fs from 'node:fs/promises';
 import { findDepPkgJsonPath } from 'vitefu';
 
 /**

package/src/utils/esbuild.js

@@ -1,8 +1,8 @@
-import { readFileSync } from 'fs';
-import { compile, preprocess } from 'svelte/compiler';
+import { readFileSync } from 'node:fs';
+import * as svelte from 'svelte/compiler';
 import { log } from './log.js';
 import { toESBuildError } from './error.js';
-import { isSvelte3 } from './svelte-version.js';
+import { isSvelte3, isSvelte5 } from './svelte-version.js';
 
 /**
  * @typedef {NonNullable<import('vite').DepOptimizationOptions['esbuildOptions']>} EsbuildOptions
@@ -11,6 +11,8 @@ import { isSvelte3 } from './svelte-version.js';
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
+const svelteModuleExtension = '.svelte.js';
+
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  * @returns {EsbuildPlugin}
@@ -24,7 +26,10 @@ 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));
-			const svelteFilter = new RegExp(`\\.(` + svelteExtensions.join('|') + `)(\\?.*)?$`);
+			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;
 			build.onStart(() => {
@@ -55,6 +60,22 @@ 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-ignore doesn't exist in Svelte 4
+		const compiled = svelte.compileModule(code, {
+			filename,
+			generate: 'dom',
+			runes: true
+		});
+		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
@@ -75,7 +96,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 
 	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,9 +123,11 @@ 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();
 	}
-	return compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl();
+	return compiled.js.map
+		? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
+		: compiled.js.code;
 }

package/src/utils/hash.js

@@ -1,4 +1,4 @@
-import * as crypto from 'crypto';
+import * as crypto from 'node:crypto';
 
 const hashes = Object.create(null);
 

package/src/utils/id.js

@@ -1,5 +1,5 @@
 import { createFilter, normalizePath } from 'vite';
-import * as fs from 'fs';
+import * as fs from 'node:fs';
 import { log } from './log.js';
 
 const VITE_FS_PREFIX = '/@fs/';
@@ -21,7 +21,7 @@ const TYPES_WITH_COMPILER_OPTIONS = ['style', 'script', 'all'];
  * @returns {{ filename: string, rawQuery: string }}
  */
 function splitId(id) {
-	const parts = id.split(`?`, 2);
+	const parts = id.split('?', 2);
 	const filename = parts[0];
 	const rawQuery = parts[1];
 	return { filename, rawQuery };
@@ -184,3 +184,48 @@ 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,4 +1,4 @@
-import fs from 'fs';
+import fs from 'node:fs';
 import { toRollupError } from './error.js';
 import { log } from './log.js';
 
@@ -126,7 +126,7 @@ function toRawExports(object) {
 			.map(([key, value]) => `export const ${key}=${JSON.stringify(value)}`)
 			.join('\n') + '\n';
 	if (Object.prototype.hasOwnProperty.call(object, 'code')) {
-		exports += `export default code\n`;
+		exports += 'export default code\n';
 	}
 	return exports;
 }

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

@@ -1,7 +1,7 @@
-import { createRequire } from 'module';
-import path from 'path';
-import fs from 'fs';
-import { pathToFileURL } from 'url';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import fs from 'node:fs';
+import { pathToFileURL } from 'node:url';
 import { log } from './log.js';
 
 // used to require cjs config in esm.

package/src/utils/log.js

@@ -120,7 +120,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
  */
@@ -204,7 +204,8 @@ function buildExtraWarnings(warnings, isBuild) {
 			extraWarnings.push({
 				...noScopableElementWarning,
 				code: 'vite-plugin-svelte-css-no-scopable-elements',
-				message: `No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.`
+				message:
+					"No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles."
 			});
 		}
 	}

package/src/utils/optimizer.js

@@ -1,5 +1,5 @@
-import { promises as fs } from 'fs';
-import path from 'path';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
 
 // List of options that changes the prebundling result
 /** @type {(keyof import('../types/options.d.ts').ResolvedOptions)[]} */

package/src/utils/options.js

@@ -10,7 +10,7 @@ import {
 	VITE_RESOLVE_MAIN_FIELDS
 } from './constants.js';
 
-import path from 'path';
+import path from 'node:path';
 import { esbuildSveltePlugin, facadeEsbuildSveltePluginName } from './esbuild.js';
 import { addExtraPreprocessors } from './preprocess.js';
 import deepmerge from 'deepmerge';
@@ -25,6 +25,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',
@@ -227,6 +228,10 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */
 function enforceOptionsForHmr(options) {
+	if (isSvelte5) {
+		log.warn('svelte 5 does not support hmr api yet, disabling it for now');
+		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

@@ -1,6 +1,6 @@
 import MagicString from 'magic-string';
 import { log } from './log.js';
-import path from 'path';
+import path from 'node:path';
 
 /**
  * this appends a *{} rule to component styles to force the svelte compiler to add style classes to all nodes

package/src/utils/resolve.js

@@ -1,5 +1,5 @@
-import path from 'path';
-import { builtinModules } from 'module';
+import path from 'node:path';
+import { builtinModules } from 'node:module';
 import { resolveDependencyData, isCommonDepWithoutSvelteField } from './dependencies.js';
 import { normalizePath } from 'vite';
 

package/src/utils/sourcemaps.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'node:path';
 
 const IS_WINDOWS = process.platform === 'win32';
 

package/src/utils/svelte-version.js

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

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

@@ -1,5 +1,5 @@
-import { readFileSync } from 'fs';
-import { dirname } from 'path';
+import { readFileSync } from 'node:fs';
+import { dirname } from 'node:path';
 import { findClosestPkgJsonPath } from 'vitefu';
 import { normalizePath } from 'vite';
 

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

@@ -1,5 +1,5 @@
 import { log } from './log.js';
-import { performance } from 'perf_hooks';
+import { performance } from 'node:perf_hooks';
 import { normalizePath } from 'vite';
 
 /** @type {import('../types/vite-plugin-svelte-stats.d.ts').CollectionOptions} */

package/src/utils/watch.js

@@ -1,7 +1,7 @@
-import fs from 'fs';
+import fs from 'node:fs';
 import { log } from './log.js';
 import { knownSvelteConfigNames } from './load-svelte-config.js';
-import path from 'path';
+import path from 'node:path';
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options