@rsvelte/vite-plugin-svelte 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsvelte/vite-plugin-svelte",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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.3.0"
+    "@rsvelte/vite-plugin-svelte-native": "^0.3.7"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
@@ -49,9 +52,11 @@
     "@types/debug": "^4.1.12",
     "sass": "^1.94.2",
     "svelte": "^5.56.4",
-    "vite": "^8.0.0"
+    "vite": "^8.0.0",
+    "vitest": "^4.1.10"
   },
   "scripts": {
+    "test": "vitest run",
     "check:publint": "publint --strict",
     "check:types": "tsc --noEmit",
     "generate:types": "dts-buddy -m \"@rsvelte/vite-plugin-svelte:src/public.d.ts\""

package/src/utils/compile.js

@@ -1,8 +1,7 @@
 import * as svelte from '@rsvelte/vite-plugin-svelte-native';
 import { safeBase64Hash } from './hash.js';
 import { log } from './log.js';
-
-import { mapToRelative } from './sourcemaps.js';
+import { postprocessCompiled } from './map-edits.js';
 import { enhanceCompileError } from './error.js';
 
 // TODO this is a patched version of https://github.com/sveltejs/vite-plugin-svelte/pull/796/files#diff-3bce0b33034aad4b35ca094893671f7e7ddf4d27254ae7b9b0f912027a001b15R10
@@ -104,18 +103,6 @@ export function createCompileSvelte() {
 				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 = compiled.js.code.replaceAll(
-					'import.meta.hot.accept(',
-					'import.meta.hot.acceptExports(["default"],'
-				);
-			}
 		} catch (e) {
 			enhanceCompileError(e, code, options.preprocess);
 			throw e;
@@ -124,23 +111,21 @@ export function createCompileSvelte() {
 		if (endStat) {
 			endStat();
 		}
-		mapToRelative(compiled.js?.map, filename);
-		mapToRelative(compiled.css?.map, filename);
 		if (warnings.length) {
 			if (!compiled.warnings) {
 				compiled.warnings = [];
 			}
 			compiled.warnings.push(...warnings);
 		}
-		if (!raw) {
-			// wire css import and code for hmr
-			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`;
-			}
-		}
+		// compiler might not emit css with mode none or it may be empty
+		const hasCss = compiled.css?.code?.trim()?.length ?? 0 > 0;
+		postprocessCompiled(compiled, {
+			filename,
+			cssId,
+			// patch output with partial accept until svelte does it
+			partialAccept: !!options.server?.config.experimental.hmrPartialAccept,
+			emitCssImport: !raw && emitCss && hasCss
+		});
 
 		let lang = 'js';
 		for (const match of code.matchAll(scriptLangRE)) {

package/src/utils/map-edits.js

@@ -0,0 +1,108 @@
+import remapping from '@jridgewell/remapping';
+import { parse } from 'acorn';
+import MagicString from 'magic-string';
+import { mapToRelative } from './sourcemaps.js';
+
+// remapping resolves a loaded map's sources against the URI of the source it
+// replaces, so a name with a directory component would rewrite relative sources
+// into absolute ones. A bare name leaves every spelling untouched.
+const PRE_EDIT_SOURCE = 'rsvelte-pre-edit-source';
+
+/** @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 {(editor: MagicString, code: string) => void} edit
+ */
+export function applyMapEdits(compiled, 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: PRE_EDIT_SOURCE });
+	let loadedPreviousMap = false;
+	const composed = remapping(/** @type {any} */ (editMap), (source) => {
+		if (source !== PRE_EDIT_SOURCE || loadedPreviousMap) return null;
+		loadedPreviousMap = true;
+		return /** @type {any} */ (previousMap);
+	});
+	// the edit map carries no `file`, so composing would otherwise drop it
+	if (previousMap.file != null) {
+		/** @type {any} */ (composed).file = previousMap.file;
+	}
+	compiled.js.map = composed;
+}
+
+/**
+ * Rewrite the compiled JavaScript for the dev server — HMR partial accept and the
+ * emitted-CSS import — keeping `js.map` in step with every edit.
+ *
+ * @param {{ js: { code: string, map: any }, css?: { map?: any } | null }} compiled
+ * @param {{ filename: string, cssId: string, partialAccept: boolean, emitCssImport: boolean }} options
+ */
+export function postprocessCompiled(compiled, { filename, cssId, partialAccept, emitCssImport }) {
+	if (partialAccept && compiled.js.code.includes('import.meta.hot')) {
+		applyMapEdits(compiled, (editor, generated) => {
+			addPartialAcceptExports(editor, generated);
+		});
+	}
+	mapToRelative(compiled.js?.map, filename);
+	mapToRelative(compiled.css?.map, filename);
+	if (emitCssImport) {
+		applyMapEdits(compiled, (editor) => {
+			editor.append(`\nimport ${JSON.stringify(cssId)};\n`);
+		});
+	}
+}
+
+/**
+ * @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\"],`
+		);
+	}
+}