@sveltejs/vite-plugin-svelte - npm Package Compare versions

Comparing version 3.0.0-next.2 to 3.0.0-next.3

package.json

 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.3",
   "license": "MIT",
@@ -48,11 +48,11 @@ "author": "dominikg",
   "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.10",
+    "@types/debug": "^4.1.12",
     "esbuild": "^0.19.5",
     "sass": "^1.69.5",
-    "svelte": "^4.2.2",
-    "vite": "^5.0.0-beta.12"
+    "svelte": "^4.2.3",
+    "vite": "^5.0.0-beta.19"
   },
@@ -59,0 +59,0 @@ "scripts": {

src/handle-hot-update.js

@@ -10,3 +10,3 @@ import { log, logCompilerWarnings } from './utils/log.js';
  * @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
@@ -13,0 +13,0 @@ * @returns {Promise<import('vite').ModuleNode[] | void>}

src/index.js

@@ -6,5 +6,5 @@ import fs from 'node:fs';
 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 {
@@ -23,2 +23,4 @@ buildExtraViteConfig,
 import { loadRaw } from './utils/load-raw.js';
+import { isSvelte5 } from './utils/svelte-version.js';
+import * as svelteCompiler from 'svelte/compiler';
 
@@ -38,2 +40,4 @@ /**
 	let requestParser;
+	/** @type {import('./types/id.d.ts').ModuleIdParser} */
+	let moduleRequestParser;
 	/** @type {import('./types/options.d.ts').ResolvedOptions} */
@@ -191,5 +195,37 @@ let options;
 			}
-		},
-		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;
@@ -196,0 +232,0 @@ }

src/public.d.ts

@@ -177,4 +177,12 @@ import type { InlineConfig, ResolvedConfig } from 'vite';
 	disableSvelteResolveWarnings?: boolean;
+
+	compileModule?: CompileModuleOptions;
 }
 
+interface CompileModuleOptions {
+	extensions?: string[];
+	include?: Arrayable<string>;
+	exclude?: Arrayable<string>;
+}
+
 type Arrayable<T> = T | T[];
@@ -181,0 +189,0 @@

src/types/id.d.ts

@@ -31,2 +31,16 @@ import type { CompileOptions } from 'svelte/types/compiler/interfaces';
 
+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;

src/utils/compile.js

@@ -1,2 +0,2 @@
-import { compile, preprocess, walk } from 'svelte/compiler';
+import * as svelte from 'svelte/compiler';
 // @ts-ignore
@@ -13,2 +13,3 @@ import { createMakeHot } from 'svelte-hmr';
 import { enhanceCompileError } from './error.js';
+import { isSvelte5 } from './svelte-version.js';
 
@@ -62,3 +63,4 @@ const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 			filename,
-			generate: ssr ? 'ssr' : 'dom'
+			// @ts-expect-error svelte5 uses server/client, svelte4 uses ssr/dom
+			generate: isSvelte5 ? (ssr ? 'server' : 'client') : ssr ? 'ssr' : 'dom'
 		};
@@ -92,3 +94,3 @@
 			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) {
@@ -144,3 +146,3 @@ e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
 		try {
-			compiled = compile(finalCode, finalCompileOptions);
+			compiled = svelte.compile(finalCode, finalCompileOptions);
 		} catch (e) {
@@ -210,3 +212,3 @@ enhanceCompileError(e, code, preprocessors);
 		return createMakeHot({
-			walk,
+			walk: svelte.walk,
 			hotApi,
@@ -213,0 +215,0 @@ adapter,

src/utils/constants.js

@@ -0,1 +1,3 @@
+import { isSvelte5 } from './svelte-version.js';
+
 export const VITE_RESOLVE_MAIN_FIELDS = ['module', 'jsnext:main', 'jsnext'];
@@ -23,2 +25,7 @@
 
+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'];
@@ -25,0 +32,0 @@

src/utils/esbuild.js

 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';
 
@@ -13,2 +14,4 @@ /**
 
+const svelteModuleExtension = '.svelte.js';
+
 /**
@@ -27,2 +30,5 @@ * @param {import('../types/options.d.ts').ResolvedOptions} options
 			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
+			if (isSvelte5) {
+				svelteExtensions.push(svelteModuleExtension.slice(1));
+			}
 			const svelteFilter = new RegExp('\\.(' + svelteExtensions.join('|') + ')(\\?.*)?$');
@@ -59,2 +65,16 @@ /** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 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;
@@ -70,3 +90,4 @@ if (css !== 'none') {
 		filename,
-		generate: 'dom'
+		// @ts-expect-error svelte4 uses 'dom', svelte5 uses 'client'
+		generate: isSvelte5 ? 'client' : 'dom'
 	};
@@ -78,3 +99,3 @@
 		try {
-			preprocessed = await preprocess(code, options.preprocess, { filename });
+			preprocessed = await svelte.preprocess(code, options.preprocess, { filename });
 		} catch (e) {
@@ -110,3 +131,3 @@ e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
 	const endStat = statsCollection?.start(filename);
-	const compiled = compile(finalCode, finalCompileOptions);
+	const compiled = svelte.compile(finalCode, finalCompileOptions);
 	if (endStat) {
@@ -113,0 +134,0 @@ endStat();

src/utils/id.js

@@ -187,1 +187,47 @@ import { createFilter, normalizePath } from 'vite';
 }
+
+/**
+ * @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
+	};
+}

src/utils/load-raw.js

 import fs from 'node:fs';
 import { toRollupError } from './error.js';
 import { log } from './log.js';
-
+import { isSvelte4 } from './svelte-version.js';
 /**
@@ -21,3 +21,4 @@ * utility function to compile ?raw and ?direct requests in load hook
 		//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;
@@ -29,4 +30,3 @@ compileData = await compileSvelte(svelteRequest, source, {
 				dev: false,
-				css: false,
-				hydratable: false,
+				css: 'external',
 				enableSourcemap: query.sourcemap
@@ -33,0 +33,0 @@ ? {

src/utils/log.js

 /* eslint-disable no-console */
 import { cyan, red, yellow } from 'kleur/colors';
 import debug from 'debug';
+import { VERSION } from 'svelte/compiler';
 
@@ -129,3 +130,3 @@ /** @type {import('../types/log.d.ts').LogLevel[]} */
 /**
- * @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
@@ -263,1 +264,10 @@ * @param {import('../types/options.d.ts').ResolvedOptions} options
 }
+
+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`);
+}

src/utils/options.js

@@ -29,2 +29,3 @@ /* eslint-disable no-unused-vars */
 import { VitePluginSvelteCache } from './vite-plugin-svelte-cache.js';
+import { isSvelte5 } from './svelte-version.js';
 
@@ -233,2 +234,6 @@ const allowedPluginOptions = new Set([
 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) {
@@ -235,0 +240,0 @@ if (!options.compilerOptions.dev) {

src/utils/svelte-version.js

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

src/utils/watch.js

@@ -8,3 +8,3 @@ import fs from 'node:fs';
  * @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
@@ -11,0 +11,0 @@ * @returns {void}

types/index.d.ts

@@ -176,4 +176,12 @@ declare module '@sveltejs/vite-plugin-svelte' {
 		disableSvelteResolveWarnings?: boolean;
+
+		compileModule?: CompileModuleOptions;
 	}
 
+	interface CompileModuleOptions {
+		extensions?: string[];
+		include?: Arrayable<string>;
+		exclude?: Arrayable<string>;
+	}
+
 	type Arrayable<T> = T | T[];
@@ -180,0 +188,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124319

increased by4.28%

Lines of code

3719

increased by4.14%

No dependency changes