@c9up/aurora 0.1.36 → 0.1.37

package/dist/augmentations.d.ts

@@ -15,9 +15,29 @@
  * simply inert.
  */
 import type { AuroraManager } from "./AuroraManager.js";
+import type { AuroraRequestRenderer } from "./middleware.js";
 declare module "@c9up/ream/types" {
     interface ContainerBindings {
         /** The Aurora manager, bound by `AuroraProvider`. */
         aurora: AuroraManager;
     }
 }
+declare module "@c9up/ream" {
+    interface HttpContext {
+        /**
+         * Render a page for THIS request — `ctx.aurora.render(name, props)`.
+         *
+         * Attached by the `auroraContext` middleware, which is what the docs tell
+         * an application to register. Without this declaration the property the
+         * middleware sets did not exist as far as the compiler was concerned, so
+         * the shorthand the documentation teaches did not typecheck, and a
+         * controller had to reach for the module-level `aurora.render(ctx, ...)`
+         * or assert its way past it.
+         *
+         * Optional, because the middleware is: an application that never
+         * registers it has no `ctx.aurora`, and saying otherwise would let a
+         * controller call something that is not there.
+         */
+        aurora?: AuroraRequestRenderer;
+    }
+}

package/dist/html.js

@@ -216,11 +216,90 @@ function collectSlots(root, classification) {
     visit(root.content, []);
     return slots;
 }
+/**
+ * Elements that only ever exist inside `<svg>`.
+ *
+ * Names shared with HTML — `a`, `title`, `style`, `script`, `text` in some
+ * dialects — are deliberately absent: seeing one says nothing about which
+ * namespace was meant, and guessing wrong would move an ordinary anchor into
+ * SVG.
+ */
+const SVG_ONLY = new Set([
+    "animate",
+    "animatemotion",
+    "animatetransform",
+    "circle",
+    "clippath",
+    "defs",
+    "desc",
+    "ellipse",
+    "feblend",
+    "fecolormatrix",
+    "fegaussianblur",
+    "femerge",
+    "feoffset",
+    "filter",
+    "foreignobject",
+    "g",
+    "image",
+    "line",
+    "lineargradient",
+    "marker",
+    "mask",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "radialgradient",
+    "rect",
+    "stop",
+    "svg",
+    "symbol",
+    "tspan",
+    "use",
+]);
+/**
+ * Whether this markup is SVG content that lost its `<svg>` ancestor.
+ *
+ * A template compiled on its own — `html\`<path/><path/>\``, the body of an
+ * icon helper — is parsed with no parent, and the HTML parser has no
+ * self-closing tag for an unknown element: the second `<path>` becomes a CHILD
+ * of the first, in the XHTML namespace. Nothing throws and nothing is logged;
+ * the icon is simply invisible, because `<path>` in the wrong namespace paints
+ * nothing. Parsing the same markup inside an `<svg>` makes the parser apply
+ * foreign-content rules and produce the two siblings that were written.
+ *
+ * `<svg>` itself is excluded: the parser already handles it when it is the root
+ * of the markup, and wrapping one in another would nest them.
+ */
+function isOrphanedSvgContent(root) {
+    const elements = Array.from(root.content.childNodes).filter((node) => node.nodeType === 1);
+    if (elements.length === 0)
+        return false;
+    return elements.every((el) => {
+        const name = el.localName.toLowerCase();
+        return name !== "svg" && SVG_ONLY.has(name);
+    });
+}
 function compile(strings) {
     const classification = classifySlots(strings);
     const markup = buildMarkup(strings, classification);
-    const tpl = document.createElement("template");
+    let tpl = document.createElement("template");
     tpl.innerHTML = markup;
+    if (isOrphanedSvgContent(tpl)) {
+        // Re-parsed with the ancestor the markup was written for, then lifted
+        // back out: the nodes keep the SVG namespace they were given, and the
+        // slot paths below are collected against the shape that will actually
+        // be cloned.
+        const wrapper = document.createElement("template");
+        wrapper.innerHTML = `<svg>${markup}</svg>`;
+        const svg = wrapper.content.firstElementChild;
+        if (svg !== null) {
+            tpl = document.createElement("template");
+            while (svg.firstChild)
+                tpl.content.appendChild(svg.firstChild);
+        }
+    }
     const slots = collectSlots(tpl, classification);
     return { element: tpl, slots };
 }

package/dist/ssr.js

@@ -64,15 +64,37 @@ function stringifyTemplateResult(result) {
         // value written into the HTML, and any exception swallowed.
         const directiveMatch = segment.match(/\s([@?.][\w-]+)=("|'|)$/);
         const skipValue = directiveMatch !== null;
+        // Set when the skipped directive is a boolean attribute, which — unlike
+        // the other two — still has markup to emit. See below.
+        let booleanAttrName;
         if (directiveMatch) {
-            const [whole = "", , quote] = directiveMatch;
+            const [whole = "", directive = "", quote] = directiveMatch;
             segment = segment.slice(0, segment.length - whole.length);
+            // `?disabled=${x}` is HTML STATE, not a client-only binding.
+            // `@click` is a listener and `.value` a DOM property: neither
+            // exists until the runtime binds it, so dropping them is right.
+            // A boolean attribute is different — the browser acts on it while
+            // parsing. Skipping it too made the server contradict the very
+            // first client render: a `?hidden` panel arrived visible and
+            // blinked away once hydration caught up.
+            if (directive.startsWith("?"))
+                booleanAttrName = directive.slice(1);
             // Only a quoted directive leaves a closing quote to swallow.
             pendingClosingQuote =
                 quote === '"' ? '"' : quote === "'" ? "'" : undefined;
         }
         out += segment;
         scanner.consume(segment);
+        if (booleanAttrName !== undefined && i < values.length) {
+            // Present-and-empty when truthy, absent otherwise — byte-for-byte
+            // what applyBooleanAttrSlot writes on the client, so hydration
+            // re-applying the effect is a no-op instead of a correction.
+            if (resolveBooleanValue(values[i])) {
+                const rendered = ` ${booleanAttrName}=""`;
+                out += rendered;
+                scanner.consume(rendered);
+            }
+        }
         if (i < values.length && !skipValue) {
             const value = values[i];
             const inAttr = scanner.insideTag;
@@ -151,6 +173,26 @@ class TagScanner {
         return this.#inTag;
     }
 }
+/**
+ * Read a boolean attribute's value the way the client reads it: a signal or a
+ * reactive expression is called ONCE, then coerced. One level is not an
+ * approximation — `applyBooleanAttrSlot` does exactly the same, so a signal
+ * that returns a signal is truthy on both sides.
+ */
+function resolveBooleanValue(value) {
+    if (isSignal(value) || typeof value === "function") {
+        try {
+            return Boolean(value());
+        }
+        catch {
+            // Same fail-soft as stringifyValue: an expression that throws
+            // server-side leaves the attribute off and lets the client effect
+            // decide once it has a real DOM to read.
+            return false;
+        }
+    }
+    return Boolean(value);
+}
 function stringifyValue(value, inAttribute) {
     if (value === null || value === undefined || value === false)
         return "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/aurora",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "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",
@@ -58,6 +58,7 @@
     "@types/node": "^22.19.15",
     "@vitest/browser": "4.1.11",
     "@vitest/browser-playwright": "4.1.11",
+    "@vitest/coverage-v8": "4.1.9",
     "jsdom": "^30.0.1",
     "playwright": "^1.61.1",
     "typescript": "^6.0.2",
@@ -81,7 +82,7 @@
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "lint": "biome check src/",
+    "lint": "biome check src/ tests/",
     "test:coverage": "vitest run --coverage",
     "test:browser": "vitest run -c vitest.browser.config.ts"
   }

package/src/augmentations.ts

@@ -15,10 +15,12 @@
  * simply inert.
  */
 
-// Referenced so the augmentation below resolves the module it augments.
+// Referenced so the augmentations below resolve the modules they augment.
+import type {} from "@c9up/ream";
 import type {} from "@c9up/ream/types";
 
 import type { AuroraManager } from "./AuroraManager.js";
+import type { AuroraRequestRenderer } from "./middleware.js";
 
 declare module "@c9up/ream/types" {
 	interface ContainerBindings {
@@ -26,3 +28,23 @@ declare module "@c9up/ream/types" {
 		aurora: AuroraManager;
 	}
 }
+
+declare module "@c9up/ream" {
+	interface HttpContext {
+		/**
+		 * Render a page for THIS request — `ctx.aurora.render(name, props)`.
+		 *
+		 * Attached by the `auroraContext` middleware, which is what the docs tell
+		 * an application to register. Without this declaration the property the
+		 * middleware sets did not exist as far as the compiler was concerned, so
+		 * the shorthand the documentation teaches did not typecheck, and a
+		 * controller had to reach for the module-level `aurora.render(ctx, ...)`
+		 * or assert its way past it.
+		 *
+		 * Optional, because the middleware is: an application that never
+		 * registers it has no `ctx.aurora`, and saying otherwise would let a
+		 * controller call something that is not there.
+		 */
+		aurora?: AuroraRequestRenderer;
+	}
+}

package/src/html.ts

@@ -259,11 +259,94 @@ function collectSlots(
 	return slots;
 }
 
+/**
+ * Elements that only ever exist inside `<svg>`.
+ *
+ * Names shared with HTML — `a`, `title`, `style`, `script`, `text` in some
+ * dialects — are deliberately absent: seeing one says nothing about which
+ * namespace was meant, and guessing wrong would move an ordinary anchor into
+ * SVG.
+ */
+const SVG_ONLY = new Set([
+	"animate",
+	"animatemotion",
+	"animatetransform",
+	"circle",
+	"clippath",
+	"defs",
+	"desc",
+	"ellipse",
+	"feblend",
+	"fecolormatrix",
+	"fegaussianblur",
+	"femerge",
+	"feoffset",
+	"filter",
+	"foreignobject",
+	"g",
+	"image",
+	"line",
+	"lineargradient",
+	"marker",
+	"mask",
+	"path",
+	"pattern",
+	"polygon",
+	"polyline",
+	"radialgradient",
+	"rect",
+	"stop",
+	"svg",
+	"symbol",
+	"tspan",
+	"use",
+]);
+
+/**
+ * Whether this markup is SVG content that lost its `<svg>` ancestor.
+ *
+ * A template compiled on its own — `html\`<path/><path/>\``, the body of an
+ * icon helper — is parsed with no parent, and the HTML parser has no
+ * self-closing tag for an unknown element: the second `<path>` becomes a CHILD
+ * of the first, in the XHTML namespace. Nothing throws and nothing is logged;
+ * the icon is simply invisible, because `<path>` in the wrong namespace paints
+ * nothing. Parsing the same markup inside an `<svg>` makes the parser apply
+ * foreign-content rules and produce the two siblings that were written.
+ *
+ * `<svg>` itself is excluded: the parser already handles it when it is the root
+ * of the markup, and wrapping one in another would nest them.
+ */
+function isOrphanedSvgContent(root: HTMLTemplateElement): boolean {
+	const elements = Array.from(root.content.childNodes).filter(
+		(node): node is Element => node.nodeType === 1,
+	);
+	if (elements.length === 0) return false;
+	return elements.every((el) => {
+		const name = el.localName.toLowerCase();
+		return name !== "svg" && SVG_ONLY.has(name);
+	});
+}
+
 function compile(strings: TemplateStringsArray): Template {
 	const classification = classifySlots(strings);
 	const markup = buildMarkup(strings, classification);
-	const tpl = document.createElement("template");
+	let tpl = document.createElement("template");
 	tpl.innerHTML = markup;
+
+	if (isOrphanedSvgContent(tpl)) {
+		// Re-parsed with the ancestor the markup was written for, then lifted
+		// back out: the nodes keep the SVG namespace they were given, and the
+		// slot paths below are collected against the shape that will actually
+		// be cloned.
+		const wrapper = document.createElement("template");
+		wrapper.innerHTML = `<svg>${markup}</svg>`;
+		const svg = wrapper.content.firstElementChild;
+		if (svg !== null) {
+			tpl = document.createElement("template");
+			while (svg.firstChild) tpl.content.appendChild(svg.firstChild);
+		}
+	}
+
 	const slots = collectSlots(tpl, classification);
 	return { element: tpl, slots };
 }

package/src/ssr.ts

@@ -68,15 +68,36 @@ function stringifyTemplateResult(result: TemplateResult): string {
 		// value written into the HTML, and any exception swallowed.
 		const directiveMatch = segment.match(/\s([@?.][\w-]+)=("|'|)$/);
 		const skipValue = directiveMatch !== null;
+		// Set when the skipped directive is a boolean attribute, which — unlike
+		// the other two — still has markup to emit. See below.
+		let booleanAttrName: string | undefined;
 		if (directiveMatch) {
-			const [whole = "", , quote] = directiveMatch;
+			const [whole = "", directive = "", quote] = directiveMatch;
 			segment = segment.slice(0, segment.length - whole.length);
+			// `?disabled=${x}` is HTML STATE, not a client-only binding.
+			// `@click` is a listener and `.value` a DOM property: neither
+			// exists until the runtime binds it, so dropping them is right.
+			// A boolean attribute is different — the browser acts on it while
+			// parsing. Skipping it too made the server contradict the very
+			// first client render: a `?hidden` panel arrived visible and
+			// blinked away once hydration caught up.
+			if (directive.startsWith("?")) booleanAttrName = directive.slice(1);
 			// Only a quoted directive leaves a closing quote to swallow.
 			pendingClosingQuote =
 				quote === '"' ? '"' : quote === "'" ? "'" : undefined;
 		}
 		out += segment;
 		scanner.consume(segment);
+		if (booleanAttrName !== undefined && i < values.length) {
+			// Present-and-empty when truthy, absent otherwise — byte-for-byte
+			// what applyBooleanAttrSlot writes on the client, so hydration
+			// re-applying the effect is a no-op instead of a correction.
+			if (resolveBooleanValue(values[i])) {
+				const rendered = ` ${booleanAttrName}=""`;
+				out += rendered;
+				scanner.consume(rendered);
+			}
+		}
 		if (i < values.length && !skipValue) {
 			const value = values[i];
 			const inAttr = scanner.insideTag;
@@ -155,6 +176,26 @@ class TagScanner {
 	}
 }
 
+/**
+ * Read a boolean attribute's value the way the client reads it: a signal or a
+ * reactive expression is called ONCE, then coerced. One level is not an
+ * approximation — `applyBooleanAttrSlot` does exactly the same, so a signal
+ * that returns a signal is truthy on both sides.
+ */
+function resolveBooleanValue(value: unknown): boolean {
+	if (isSignal(value) || typeof value === "function") {
+		try {
+			return Boolean((value as () => unknown)());
+		} catch {
+			// Same fail-soft as stringifyValue: an expression that throws
+			// server-side leaves the attribute off and lets the client effect
+			// decide once it has a real DOM to read.
+			return false;
+		}
+	}
+	return Boolean(value);
+}
+
 function stringifyValue(value: unknown, inAttribute: boolean): string {
 	if (value === null || value === undefined || value === false) return "";
 	if (value === true) return inAttribute ? "" : "true";