@rsvelte/vite-plugin-svelte 0.4.2 → 0.5.1

package/README.md

@@ -5,13 +5,27 @@ by the Rust [rsvelte](https://github.com/baseballyama/rsvelte) compiler. It is a
 fork of the official [`@sveltejs/vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte)
 whose compile / preprocess / HMR calls route through the rsvelte compiler (via
 [`@rsvelte/vite-plugin-svelte-native`](https://www.npmjs.com/package/@rsvelte/vite-plugin-svelte-native))
-instead of `svelte/compiler`, so you can build a Vite or SvelteKit app on the
-Rust toolchain with the same plugin surface.
+instead of `svelte/compiler` — a drop-in replacement with the same plugin surface.
 
-> **⚠️ Early stage.** A drop-in replacement for `@sveltejs/vite-plugin-svelte`,
-> but treat it as experimental. Supports Vite 6, 7 and 8.
+> **⚠️ Early stage.** Treat it as experimental.
 
-## Install
+The Rust compiler ships as a native binding via `optionalDependencies` and is
+resolved automatically for your platform.
+
+**Compatibility:** Svelte `^5.0.0`, Vite `6.3+`, `7`, or `8`.
+
+## Which setup are you using?
+
+| Setup | How to wire it up |
+| --- | --- |
+| **Plain Vite + Svelte** — you call `svelte()` yourself in `vite.config` | [(A) Import the plugin directly](#a-plain-vite--svelte) |
+| **SvelteKit** — your `vite.config` only has `sveltekit()` | [(B) Alias it with a package-manager override](#b-sveltekit) |
+
+If you are on SvelteKit, do **not** add `svelte()` to your plugins list — see (B).
+
+## (A) Plain Vite + Svelte
+
+Install the plugin:
 
 ```bash
 npm install -D @rsvelte/vite-plugin-svelte
@@ -19,10 +33,7 @@ npm install -D @rsvelte/vite-plugin-svelte
 # yarn add -D @rsvelte/vite-plugin-svelte
 ```
 
-The Rust compiler is pulled in as a native binding via `optionalDependencies`,
-resolved automatically for your platform.
-
-## Usage
+Add it to your Vite config:
 
 ```js
 // vite.config.js
@@ -38,7 +49,7 @@ export default defineConfig({
 });
 ```
 
-The plugin exposes the same API as the official plugin, including
+The package exposes the same API as the official plugin, including
 `vitePreprocess` and `loadSvelteConfig`:
 
 ```js
@@ -53,6 +64,65 @@ export default {
 };
 ```
 
+## (B) SvelteKit
+
+In a SvelteKit app your `vite.config` only lists `sveltekit()`, and the Svelte
+plugin is loaded **from inside `@sveltejs/kit`** under the package name
+`@sveltejs/vite-plugin-svelte` — it never appears in your config. So the way to
+swap in rsvelte is to redirect that package's module resolution with a
+package-manager override (alias), not to touch `vite.config` at all.
+
+Add the override to your `package.json`, then reinstall:
+
+```jsonc
+// pnpm
+{
+  "pnpm": {
+    "overrides": {
+      "@sveltejs/vite-plugin-svelte": "npm:@rsvelte/vite-plugin-svelte@^0.4.1"
+    }
+  }
+}
+```
+
+```jsonc
+// npm
+{
+  "overrides": {
+    "@sveltejs/vite-plugin-svelte": "npm:@rsvelte/vite-plugin-svelte@^0.4.1"
+  }
+}
+```
+
+```jsonc
+// yarn (v1 and Berry)
+{
+  "resolutions": {
+    "@sveltejs/vite-plugin-svelte": "npm:@rsvelte/vite-plugin-svelte@^0.4.1"
+  }
+}
+```
+
+Because the override targets the package name, it also redirects the
+`import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'` in your
+`svelte.config.js` to the rsvelte version — no change needed there either.
+
+### Don't do this
+
+```js
+// vite.config.js — ❌ WRONG
+import { sveltekit } from '@sveltejs/kit/vite';
+import { svelte } from '@rsvelte/vite-plugin-svelte';
+
+export default {
+  plugins: [sveltekit(), svelte()] // two Svelte plugins → double compilation
+};
+```
+
+`sveltekit()` already loads the Svelte plugin internally. Adding `svelte()`
+alongside it registers a second one, so every component compiles twice. Use the
+override in (B) instead.
+
 ## Documentation
 
 Because this is a fork of `@sveltejs/vite-plugin-svelte`, the upstream

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsvelte/vite-plugin-svelte",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -34,12 +34,15 @@
   },
   "homepage": "https://github.com/baseballyama/rsvelte/tree/main/apps/npm/vite-plugin-svelte#readme",
   "dependencies": {
+    "@jridgewell/remapping": "^2.3.5",
+    "@jridgewell/trace-mapping": "^0.3.31",
     "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
+    "acorn": "^8.16.0",
     "deepmerge": "^4.3.1",
     "magic-string": "^1.0.0",
     "obug": "^2.1.0",
     "vitefu": "^1.1.1",
-    "@rsvelte/vite-plugin-svelte-native": "^0.2.7"
+    "@rsvelte/vite-plugin-svelte-native": "^0.3.7"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/src/plugins/setup-optimizer.js

@@ -201,7 +201,8 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 
 	if (compileOptions.hmr && options.emitCss) {
 		const hash = `s-${safeBase64Hash(normalize(filename, options.root))}`;
-		compileOptions.cssHash = () => hash;
+		compileOptions.cssHashOverride = hash;
+		delete compileOptions.cssHash;
 	}
 
 	let preprocessed;
@@ -239,7 +240,11 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 			}
 		: compileOptions;
 	const endStat = statsCollection?.start(filename);
-	const compiled = svelte.compile(finalCode, finalCompileOptions);
+	// A dynamic cssHash function only works through the async callback bridge.
+	const compiled =
+		typeof finalCompileOptions.cssHash === 'function'
+			? await svelte.compileAsync(finalCode, finalCompileOptions)
+			: svelte.compile(finalCode, finalCompileOptions);
 	if (endStat) {
 		endStat();
 	}

package/src/utils/compile.js

@@ -1,6 +1,7 @@
 import * as svelte from '@rsvelte/vite-plugin-svelte-native';
 import { safeBase64Hash } from './hash.js';
 import { log } from './log.js';
+import { addPartialAcceptExports, applyMapEdits } from './map-edits.js';
 
 import { mapToRelative } from './sourcemaps.js';
 import { enhanceCompileError } from './error.js';
@@ -59,7 +60,12 @@ export function createCompileSvelte() {
 		let finalCode = code;
 		if (compileOptions.hmr && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
-			compileOptions.cssHash = () => hash;
+			// Constant hash keeps the css scope class stable across HMR updates; the
+			// override path skips the cssHash callback bridge entirely. Drop any user
+			// cssHash so the override is the sole hash source (matches upstream, which
+			// overwrites cssHash here).
+			compileOptions.cssHashOverride = hash;
+			delete compileOptions.cssHash;
 			const closeStylePos = code.lastIndexOf('</style>');
 			if (closeStylePos > -1) {
 				// inject rule that forces compile to attach scope class to every node in the template
@@ -93,18 +99,22 @@ export function createCompileSvelte() {
 		/** @type {import('@rsvelte/vite-plugin-svelte-native').CompileResult} */
 		let compiled;
 		try {
-			compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename });
+			// A dynamic cssHash function only works through the async callback
+			// bridge; everything else stays on the faster synchronous path.
+			compiled =
+				typeof finalCompileOptions.cssHash === 'function'
+					? await svelte.compileAsync(finalCode, { ...finalCompileOptions, filename })
+					: svelte.compile(finalCode, { ...finalCompileOptions, filename });
 
 			// 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.includes('import.meta.hot')
 			) {
-				compiled.js.code = compiled.js.code.replaceAll(
-					'import.meta.hot.accept(',
-					'import.meta.hot.acceptExports(["default"],'
-				);
+				applyMapEdits(compiled, filename, (editor, generated) => {
+					addPartialAcceptExports(editor, generated);
+				});
 			}
 		} catch (e) {
 			enhanceCompileError(e, code, options.preprocess);
@@ -127,8 +137,9 @@ export function createCompileSvelte() {
 			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`;
+				applyMapEdits(compiled, filename, (editor) => {
+					editor.append(`\nimport ${JSON.stringify(cssId)};\n`);
+				});
 			}
 		}
 

package/src/utils/map-edits.js

@@ -0,0 +1,76 @@
+import remapping from '@jridgewell/remapping';
+import { parse } from 'acorn';
+import MagicString from 'magic-string';
+
+/** @param {any} callee */
+function isHotAcceptCallee(callee) {
+	return (
+		callee.type === 'MemberExpression' &&
+		!callee.computed &&
+		callee.property.type === 'Identifier' &&
+		callee.property.name === 'accept' &&
+		callee.object.type === 'MemberExpression' &&
+		!callee.object.computed &&
+		callee.object.property.type === 'Identifier' &&
+		callee.object.property.name === 'hot' &&
+		callee.object.object.type === 'MetaProperty' &&
+		callee.object.object.meta.name === 'import' &&
+		callee.object.object.property.name === 'meta'
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {any[]} calls
+ */
+function collectHotAcceptCalls(node, calls) {
+	if (!node || typeof node !== 'object') return;
+	if (node.type === 'CallExpression' && isHotAcceptCallee(node.callee)) {
+		calls.push(node);
+	}
+	for (const value of Object.values(node)) {
+		if (Array.isArray(value)) {
+			for (const child of value) collectHotAcceptCalls(child, calls);
+		} else if (value && typeof value === 'object' && typeof value.type === 'string') {
+			collectHotAcceptCalls(value, calls);
+		}
+	}
+}
+
+/**
+ * @param {{ js: { code: string, map: any } }} compiled
+ * @param {string} filename
+ * @param {(editor: MagicString, code: string) => void} edit
+ */
+export function applyMapEdits(compiled, filename, edit) {
+	const editor = new MagicString(compiled.js.code);
+	edit(editor, compiled.js.code);
+	const previousMap = compiled.js.map;
+	compiled.js.code = editor.toString();
+	if (!previousMap) return;
+	const editMap = editor.generateMap({ hires: true, source: filename });
+	let loadedPreviousMap = false;
+	compiled.js.map = remapping(/** @type {any} */ (editMap), (source) => {
+		if (source !== filename || loadedPreviousMap) return null;
+		loadedPreviousMap = true;
+		return /** @type {any} */ (previousMap);
+	});
+}
+
+/**
+ * @param {MagicString} editor
+ * @param {string} code
+ */
+export function addPartialAcceptExports(editor, code) {
+	const calls = [];
+	collectHotAcceptCalls(parse(code, { ecmaVersion: 'latest', sourceType: 'module' }), calls);
+	for (const call of calls) {
+		const firstArgument = call.arguments[0];
+		if (!firstArgument || firstArgument.type === 'SpreadElement') continue;
+		editor.overwrite(
+			call.callee.start,
+			firstArgument.start,
+			`${code.slice(call.callee.start, call.callee.end)}Exports([\"default\"],`
+		);
+	}
+}