@c9up/aurora 0.1.27 → 0.1.29

package/dist/browser.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser DX helpers — navigation + a typed `localStorage` wrapper.
  *

package/dist/html.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Tagged-template HTML parser.
  *

package/dist/http.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * `HttpClient` — a small typed wrapper over `fetch` so call sites read
  * `await http.get<User>("/auth/me")` instead of hand-rolling headers,

package/dist/hydrate.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Hydration — adopt SSR-rendered HTML in the browser without rebuilding
  * the DOM.

package/dist/liveClient.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Live client runtime (Stage 5) — the thin browser side of live components.
  *

package/dist/liveServer.d.ts

@@ -12,7 +12,12 @@
 import type { LiveRouter } from "./liveRouter.js";
 /** The slice of the host HTTP router this needs. */
 export interface LiveHttpRouter {
-    post(path: string, handler: (ctx: LiveHttpContext) => unknown): unknown;
+    /**
+     * The handler returns `void | Promise<void>`, not `unknown`: that is what an
+     * HTTP handler returns in ream and in AdonisJS, and the wider shape made
+     * ream's own Router fail to satisfy this interface.
+     */
+    post(path: string, handler: (ctx: LiveHttpContext) => void | Promise<void>): unknown;
 }
 /** The slice of the host HTTP context this needs (Ream's HttpContext satisfies it). */
 export interface LiveHttpContext {

package/dist/render.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Render a `TemplateResult` to the DOM and keep it reactive.
  *

package/dist/rpc.js

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser JSON-RPC 2.0 client for Ream's RPC endpoint — aurora's thin binding
  * over the agnostic {@link https://github.com/C9up/comet | @c9up/comet} client.

package/dist/server/renderPage.js

@@ -140,13 +140,29 @@ function escapeAttr(value) {
 }
 /**
  * Escape a JSON payload for safe embedding inside a `<script>` block.
- * The HTML parser closes the script on `</script>` regardless of JSON
- * quoting, so we slash-escape the `/`. We also escape `<!--` and `-->`
- * to dodge HTML-comment interpretation inside the script body.
+ *
+ * The HTML parser ends the script on `</script>` and reinterprets `<!--` /
+ * `-->` as comment markers, whatever the JSON quoting says — so those
+ * characters must not survive literally. They are escaped as \uXXXX, which is
+ * valid JSON: a backslash escape like `\!` or `\>` is NOT, and made
+ * `JSON.parse` throw on the client the moment a prop contained a comment
+ * marker, taking the whole page's hydration with it.
  */
 function escapeJsonForScript(value) {
-    return JSON.stringify(value)
-        .replace(/<\/(script)/gi, "<\\/$1")
-        .replace(/<!--/g, "<\\!--")
-        .replace(/-->/g, "--\\>");
+    return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (c) => {
+        switch (c) {
+            case "<":
+                return "\\u003c";
+            case ">":
+                return "\\u003e";
+            case "&":
+                return "\\u0026";
+            // Line separators are valid in JSON strings but terminate a JS line,
+            // so a script block carrying them raw is a syntax error.
+            case "\u2028":
+                return "\\u2028";
+            default:
+                return "\\u2029";
+        }
+    });
 }

package/dist/ssr.js

@@ -46,6 +46,7 @@ function stringifyTemplateResult(result) {
     // segment. This three-step coordination is why the loop holds a
     // `pendingClosingQuote` flag.
     let pendingClosingQuote = false;
+    const scanner = new TagScanner();
     for (let i = 0; i < strings.length; i++) {
         let segment = strings[i];
         if (pendingClosingQuote) {
@@ -59,11 +60,14 @@ function stringifyTemplateResult(result) {
             pendingClosingQuote = true;
         }
         out += segment;
+        scanner.consume(segment);
         if (i < values.length && !skipValue) {
             const value = values[i];
-            const inAttr = isInsideAttribute(out);
+            const inAttr = scanner.insideTag;
             if (inAttr) {
-                out += stringifyValue(value, true);
+                const rendered = stringifyValue(value, true);
+                out += rendered;
+                scanner.consume(rendered);
             }
             else {
                 // Text-region slot — ALWAYS wrap in boundary markers so the SSR
@@ -77,9 +81,13 @@ function stringifyTemplateResult(result) {
                 // (collapseMarkerRanges) so paths align exactly; the range also
                 // anchors scalar text updates and nested-template swaps. Same
                 // part-marker approach as lit-html / Solid.
+                const rendered = stringifyValue(value, false);
                 out += `<!--${SLOT_START}-->`;
-                out += stringifyValue(value, false);
+                out += rendered;
                 out += `<!--${SLOT_END}-->`;
+                // A text-region value may itself carry markup (a nested template
+                // or a SafeString), so it has to move the scanner too.
+                scanner.consume(rendered);
             }
         }
     }
@@ -89,20 +97,47 @@ function stringifyTemplateResult(result) {
 const SLOT_START = "$";
 const SLOT_END = "/$";
 /**
- * Returns true if the position at the end of `htmlSoFar` lives inside
- * the value region of an HTML tag (between `<` and `>`). The check
- * walks backwards from the end, which is the smallest hint we need to
- * decide between text-region and attribute-region escaping.
+ * Tracks whether the cursor sits inside a tag, scanning FORWARD as the output
+ * grows.
+ *
+ * The obvious version walked backwards looking for the nearest `<` or `>`, but
+ * a `>` inside a quoted attribute value — `title="a > b"` — reads as the end of
+ * the tag, so the next interpolation is treated as a text slot and gets wrapped
+ * in `<!--$-->` markers INSIDE an attribute. That corrupts the markup and
+ * desyncs every following slot path at hydration. Quotes are what disambiguate,
+ * and they can only be resolved by reading forward.
+ *
+ * State is carried across appends instead of re-derived, so the whole render
+ * stays linear.
  */
-function isInsideAttribute(htmlSoFar) {
-    for (let i = htmlSoFar.length - 1; i >= 0; i--) {
-        const c = htmlSoFar.charCodeAt(i);
-        if (c === 60 /* '<' */)
-            return true;
-        if (c === 62 /* '>' */)
-            return false;
+class TagScanner {
+    #inTag = false;
+    /** The quote character currently open inside a tag, or empty. */
+    #quote = "";
+    /** Feed everything appended since the last call. */
+    consume(chunk) {
+        for (let i = 0; i < chunk.length; i++) {
+            const c = chunk[i];
+            if (this.#quote !== "") {
+                if (c === this.#quote)
+                    this.#quote = "";
+                continue;
+            }
+            if (this.#inTag) {
+                if (c === '"' || c === "'")
+                    this.#quote = c;
+                else if (c === ">")
+                    this.#inTag = false;
+                continue;
+            }
+            if (c === "<")
+                this.#inTag = true;
+        }
+    }
+    /** True when the cursor is inside a tag — an attribute region. */
+    get insideTag() {
+        return this.#inTag;
     }
-    return false;
 }
 function stringifyValue(value, inAttribute) {
     if (value === null || value === undefined || value === false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/aurora",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "Aurora — reactive UI runtime for the Ream framework. Tagged-template DOM, signal-based state, isomorphic SSR + hydration, zero build step.",
   "license": "MIT",
   "type": "module",
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@c9up/comet": "^0.1.0",
-    "@c9up/ream": "^0.1.0"
+    "@c9up/ream": "^0.2.0"
   },
   "peerDependenciesMeta": {
     "@c9up/comet": {

package/src/browser.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser DX helpers — navigation + a typed `localStorage` wrapper.
  *

package/src/html.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Tagged-template HTML parser.
  *

package/src/http.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * `HttpClient` — a small typed wrapper over `fetch` so call sites read
  * `await http.get<User>("/auth/me")` instead of hand-rolling headers,

package/src/hydrate.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Hydration — adopt SSR-rendered HTML in the browser without rebuilding
  * the DOM.

package/src/liveClient.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Live client runtime (Stage 5) — the thin browser side of live components.
  *

package/src/liveServer.ts

@@ -14,7 +14,15 @@ import type { LiveRouter } from "./liveRouter.js";
 
 /** The slice of the host HTTP router this needs. */
 export interface LiveHttpRouter {
-	post(path: string, handler: (ctx: LiveHttpContext) => unknown): unknown;
+	/**
+	 * The handler returns `void | Promise<void>`, not `unknown`: that is what an
+	 * HTTP handler returns in ream and in AdonisJS, and the wider shape made
+	 * ream's own Router fail to satisfy this interface.
+	 */
+	post(
+		path: string,
+		handler: (ctx: LiveHttpContext) => void | Promise<void>,
+	): unknown;
 }
 
 /** The slice of the host HTTP context this needs (Ream's HttpContext satisfies it). */

package/src/render.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Render a `TemplateResult` to the DOM and keep it reactive.
  *

package/src/rpc.ts

@@ -1,3 +1,8 @@
+/// <reference lib="dom" />
+// This file uses browser globals. The reference pulls the DOM lib in for
+// THIS file whatever `lib` the consumer configured, so a Node app
+// typechecking against our sources does not trip over `window` —
+// `types: "./src/index.ts"` means every consumer reads them.
 /**
  * Browser JSON-RPC 2.0 client for Ream's RPC endpoint — aurora's thin binding
  * over the agnostic {@link https://github.com/C9up/comet | @c9up/comet} client.

package/src/server/renderPage.ts

@@ -278,13 +278,29 @@ function escapeAttr(value: string): string {
 
 /**
  * Escape a JSON payload for safe embedding inside a `<script>` block.
- * The HTML parser closes the script on `</script>` regardless of JSON
- * quoting, so we slash-escape the `/`. We also escape `<!--` and `-->`
- * to dodge HTML-comment interpretation inside the script body.
+ *
+ * The HTML parser ends the script on `</script>` and reinterprets `<!--` /
+ * `-->` as comment markers, whatever the JSON quoting says — so those
+ * characters must not survive literally. They are escaped as \uXXXX, which is
+ * valid JSON: a backslash escape like `\!` or `\>` is NOT, and made
+ * `JSON.parse` throw on the client the moment a prop contained a comment
+ * marker, taking the whole page's hydration with it.
  */
 function escapeJsonForScript(value: unknown): string {
-	return JSON.stringify(value)
-		.replace(/<\/(script)/gi, "<\\/$1")
-		.replace(/<!--/g, "<\\!--")
-		.replace(/-->/g, "--\\>");
+	return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (c) => {
+		switch (c) {
+			case "<":
+				return "\\u003c";
+			case ">":
+				return "\\u003e";
+			case "&":
+				return "\\u0026";
+			// Line separators are valid in JSON strings but terminate a JS line,
+			// so a script block carrying them raw is a syntax error.
+			case "\u2028":
+				return "\\u2028";
+			default:
+				return "\\u2029";
+		}
+	});
 }

package/src/ssr.ts

@@ -50,6 +50,7 @@ function stringifyTemplateResult(result: TemplateResult): string {
 	// segment. This three-step coordination is why the loop holds a
 	// `pendingClosingQuote` flag.
 	let pendingClosingQuote = false;
+	const scanner = new TagScanner();
 	for (let i = 0; i < strings.length; i++) {
 		let segment = strings[i];
 		if (pendingClosingQuote) {
@@ -63,11 +64,14 @@ function stringifyTemplateResult(result: TemplateResult): string {
 			pendingClosingQuote = true;
 		}
 		out += segment;
+		scanner.consume(segment);
 		if (i < values.length && !skipValue) {
 			const value = values[i];
-			const inAttr = isInsideAttribute(out);
+			const inAttr = scanner.insideTag;
 			if (inAttr) {
-				out += stringifyValue(value, true);
+				const rendered = stringifyValue(value, true);
+				out += rendered;
+				scanner.consume(rendered);
 			} else {
 				// Text-region slot — ALWAYS wrap in boundary markers so the SSR
 				// node structure matches the client template, which keeps exactly
@@ -80,9 +84,13 @@ function stringifyTemplateResult(result: TemplateResult): string {
 				// (collapseMarkerRanges) so paths align exactly; the range also
 				// anchors scalar text updates and nested-template swaps. Same
 				// part-marker approach as lit-html / Solid.
+				const rendered = stringifyValue(value, false);
 				out += `<!--${SLOT_START}-->`;
-				out += stringifyValue(value, false);
+				out += rendered;
 				out += `<!--${SLOT_END}-->`;
+				// A text-region value may itself carry markup (a nested template
+				// or a SafeString), so it has to move the scanner too.
+				scanner.consume(rendered);
 			}
 		}
 	}
@@ -94,18 +102,45 @@ const SLOT_START = "$";
 const SLOT_END = "/$";
 
 /**
- * Returns true if the position at the end of `htmlSoFar` lives inside
- * the value region of an HTML tag (between `<` and `>`). The check
- * walks backwards from the end, which is the smallest hint we need to
- * decide between text-region and attribute-region escaping.
+ * Tracks whether the cursor sits inside a tag, scanning FORWARD as the output
+ * grows.
+ *
+ * The obvious version walked backwards looking for the nearest `<` or `>`, but
+ * a `>` inside a quoted attribute value — `title="a > b"` — reads as the end of
+ * the tag, so the next interpolation is treated as a text slot and gets wrapped
+ * in `<!--$-->` markers INSIDE an attribute. That corrupts the markup and
+ * desyncs every following slot path at hydration. Quotes are what disambiguate,
+ * and they can only be resolved by reading forward.
+ *
+ * State is carried across appends instead of re-derived, so the whole render
+ * stays linear.
  */
-function isInsideAttribute(htmlSoFar: string): boolean {
-	for (let i = htmlSoFar.length - 1; i >= 0; i--) {
-		const c = htmlSoFar.charCodeAt(i);
-		if (c === 60 /* '<' */) return true;
-		if (c === 62 /* '>' */) return false;
+class TagScanner {
+	#inTag = false;
+	/** The quote character currently open inside a tag, or empty. */
+	#quote = "";
+
+	/** Feed everything appended since the last call. */
+	consume(chunk: string): void {
+		for (let i = 0; i < chunk.length; i++) {
+			const c = chunk[i];
+			if (this.#quote !== "") {
+				if (c === this.#quote) this.#quote = "";
+				continue;
+			}
+			if (this.#inTag) {
+				if (c === '"' || c === "'") this.#quote = c;
+				else if (c === ">") this.#inTag = false;
+				continue;
+			}
+			if (c === "<") this.#inTag = true;
+		}
+	}
+
+	/** True when the cursor is inside a tag — an attribute region. */
+	get insideTag(): boolean {
+		return this.#inTag;
 	}
-	return false;
 }
 
 function stringifyValue(value: unknown, inAttribute: boolean): string {