fix(dev): repair the HMR client and keep islands alive across updates

The HMR client script was dead in the browser. HMR_CLIENT_JS is a
TypeScript template literal, so the regex [ \t\r\n] inside it was expanded
into real control characters, producing a regex literal containing a raw
newline — a syntax error that took the whole script down with "Invalid
regular expression: missing /". It now uses \s, and a test asserts the
emitted client parses and holds no control characters inside regex
literals; that test fails if the bug is reintroduced.

HMR also corrupted CSP nonces. A document's nonce is fixed at load, but
morph copied attributes from freshly fetched HTML, overwriting the live
nonce with one the browser will not honour. syncAttrs now leaves nonce
alone, and nodes moved across are re-stamped with the live nonce.

Islands vanished on every HMR update: morph puts the server placeholder
back over the mounted island. The island runtime now remounts on
wrnexus:hmr-updated. Remounting swaps the container for a bare clone —
re-rendering the existing root is a no-op once HMR has wiped the DOM
externally, and unmounting throws asynchronously because the nodes React
wants to remove are already gone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-18 18:15:21 +05:30
co-authored by Claude Opus 5
parent 843db2815f
commit 4dd7681bf7
10 changed files with 143 additions and 18 deletions
@@ -0,0 +1,18 @@
import { expect, test } from "bun:test";
import { HMR_CLIENT_JS } from "../src/runtime.ts";
test("the HMR client script is syntactically valid JavaScript", () => {
// HMR_CLIENT_JS is a TypeScript template literal, so an escape like \t or \n
// written unescaped is expanded by TypeScript into a real control character.
// Inside a regex literal that produces a raw newline, which is a syntax error
// that silently kills the whole HMR client in the browser.
expect(() => new Function(HMR_CLIENT_JS)).not.toThrow();
});
test("the HMR client contains no raw control characters inside regex literals", () => {
const regexLiterals = HMR_CLIENT_JS.match(/\/(?![/*])(?:\.|\[[^\]]*\]|[^/\n\r])+\//g) ?? [];
expect(regexLiterals.length).toBeGreaterThan(0);
for (const literal of regexLiterals) {
expect(literal).not.toMatch(/[\n\r\t]/);
}
});
+2 -1
View File
@@ -14,5 +14,6 @@ test("HMR replaces hydrated components when their server signature changes", ()
expect(HMR_CLIENT_JS).toContain('from.getAttribute("data-wrn-behavior")');
expect(HMR_CLIENT_JS).toContain('from.getAttribute("data-scope")');
expect(HMR_CLIENT_JS).toContain("window.__wrnexusDisposeBehaviors(from)");
expect(HMR_CLIENT_JS).toContain("from.replaceWith(to.cloneNode(true))");
// Cloned nodes are re-stamped with the live document nonce before insertion.
expect(HMR_CLIENT_JS).toContain("from.replaceWith(adoptNonce(to.cloneNode(true)))");
});