@rsvelte/vite-plugin-svelte 0.4.2 → 0.5.0

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.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -39,7 +39,7 @@
     "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.0"
   },
   "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

@@ -59,7 +59,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,7 +98,12 @@ 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