@c9up/aurora 0.1.31 → 0.1.32

package/dist/AuroraManager.js

@@ -90,11 +90,22 @@ export class AuroraManager {
             shared: mergeSharedResolvers(this.shared, options?.shared),
             importmap: {
                 "@c9up/aurora": `${this.auroraAssetPath}/index.js`,
-                // The browser-facing subpath (RPC client) needs an explicit entry —
-                // importmaps don't read package `exports`, and an extensionless bare
-                // specifier won't hit a trailing-slash prefix map. Served from the
-                // same aurora dist; harmless when a page never imports it.
+                // Every browser-facing subpath needs an explicit entry — importmaps
+                // don't read package `exports`, and an extensionless bare specifier
+                // won't hit a trailing-slash prefix map. Served from the same aurora
+                // dist; harmless when a page never imports one.
+                //
+                // `relay` is the one that has to be here: unlike `hydrate` and
+                // `ssr` it is NOT re-exported from the barrel, so a page that wants
+                // the relay client has no other specifier to reach it by.
+                //
+                // The node-only subpaths (`provider`, `server`, `services/main`)
+                // are deliberately absent: mapping them would hand the browser a
+                // specifier that resolves to a module it cannot load.
                 "@c9up/aurora/rpc": `${this.auroraAssetPath}/rpc.js`,
+                "@c9up/aurora/relay": `${this.auroraAssetPath}/relay.js`,
+                "@c9up/aurora/hydrate": `${this.auroraAssetPath}/hydrate.js`,
+                "@c9up/aurora/ssr": `${this.auroraAssetPath}/ssr.js`,
                 // Auto-map @c9up/comet when installed so the rpc client's bare
                 // `import '@c9up/comet'` resolves in the no-bundler browser — no
                 // app-side importmap wiring. Omitted when comet isn't present.

package/dist/hydrate.js

@@ -177,21 +177,76 @@ function liveNodeCount(value) {
     }
     return 1; // scalar → one inlined text node
 }
+/**
+ * The first and last top-level nodes an item contributes to the live DOM, as
+ * node types.
+ *
+ * Needed because the browser MERGES adjacent text nodes when it parses the SSR
+ * HTML. Two items whose markup touches — one ending in text, the next starting
+ * with text — share a single live node at their boundary, and counting them
+ * separately shifts every following item by one. That is why a list of one
+ * hydrates and a list of two does not: with one item there is no boundary.
+ *
+ * Read from the parsed TEMPLATE, which is what both sides agree on: a slot that
+ * renders to nothing still occupies a comment-marked range, and comments never
+ * merge with text.
+ */
+function edgeNodeTypes(value) {
+    if (value === null || value === undefined || value === false)
+        return null;
+    if (isTemplateResult(value)) {
+        const children = getTemplate(value.strings).element.content.childNodes;
+        const first = children[0];
+        const last = children[children.length - 1];
+        if (!first || !last)
+            return null;
+        return { first: first.nodeType, last: last.nodeType };
+    }
+    if (Array.isArray(value)) {
+        // A nested array's edges are its own first and last contributing items.
+        let first = null;
+        let last = null;
+        for (const v of value) {
+            const edges = edgeNodeTypes(v);
+            if (!edges)
+                continue;
+            if (first === null)
+                first = edges.first;
+            last = edges.last;
+        }
+        return first === null || last === null ? null : { first, last };
+    }
+    // Scalar — inlined as one text node, so it merges on both sides.
+    return { first: 3 /* Text */, last: 3 /* Text */ };
+}
 /**
  * Hydrate the items of a reactive array against the SSR nodes inside its marker
  * range. Each item is hydrated against its own slice of the (marker-collapsed)
  * range, IN ORDER, so every item's inner marker pairs are consumed in document
- * order and the global cursor stays aligned for slots AFTER the list. Item
- * templates need a stable top-level node count (the common
- * `arr.map(x => html`<li>…</li>`)` shape — single root, no surrounding
- * whitespace); bare adjacent scalar items can merge in the browser, so use
- * template items for hydrated lists.
+ * order and the global cursor stays aligned for slots AFTER the list.
+ *
+ * Item templates used to need a shape — single root, no surrounding whitespace,
+ * no bare adjacent scalars — because the slice was a straight node count and
+ * the browser merges adjacent text nodes. A prettier-formatted item template
+ * was enough to break it, silently, from the second item onwards. The boundary
+ * is now accounted for (see `edgeNodeTypes`), so any item shape hydrates.
  */
 function hydrateArrayItems(items, rangeNodes, cleanups, mountHooks, markerCursor) {
     const nodes = collapseMarkerRanges(rangeNodes);
     let offset = 0;
+    /** The node type the previous item ended on, for the merge check below. */
+    let previousLast = null;
     for (const item of items) {
         const count = liveNodeCount(item);
+        const edges = edgeNodeTypes(item);
+        // Text-node merge at the item boundary: the previous item's trailing
+        // text and this one's leading text are ONE node in the live DOM, so this
+        // item starts where the previous one appeared to end. Without this the
+        // slice slides by one per boundary and every item after the first
+        // resolves its slot paths against the wrong nodes — reported as
+        // "slot 0 (attr) path 1.0 not found", once per slot per item.
+        if (previousLast === 3 && edges?.first === 3)
+            offset -= 1;
         if (isTemplateResult(item)) {
             hydrateTemplateResult(item, nodes.slice(offset, offset + count), cleanups, mountHooks, markerCursor);
         }
@@ -199,6 +254,10 @@ function hydrateArrayItems(items, rangeNodes, cleanups, mountHooks, markerCursor
             hydrateArrayItems(item, nodes.slice(offset, offset + count), cleanups, mountHooks, markerCursor);
         }
         offset += count;
+        // An item that contributes nothing (null/false) leaves the boundary
+        // where the last CONTRIBUTING item put it.
+        if (edges)
+            previousLast = edges.last;
     }
 }
 /**
@@ -255,13 +314,6 @@ function hydrateTemplateResult(result, liveNodes, cleanups, mountHooks, markerCu
     // Hydration walks via the SAME path resolver as render, but against
     // a synthetic root that mimics the parsed template's child list.
     const tpl = getTemplate(result.strings);
-    // The live container's children should structurally match the
-    // template's content children. Wrap them in a transient DocumentFragment
-    // for path resolution — DocumentFragment.childNodes is the same view
-    // we walked during parse.
-    const syntheticRoot = {
-        childNodes: liveNodes,
-    };
     // An attribute interpolating several slots — `class="static ${a} ${b}"` — is
     // ONE attribute value built from all of them plus the static segments in
     // between. Binding each slot on its own would have the last writer win and
@@ -269,7 +321,7 @@ function hydrateTemplateResult(result, liveNodes, cleanups, mountHooks, markerCu
     const multiGroups = new Map();
     for (let i = 0; i < tpl.slots.length; i++) {
         const slot = tpl.slots[i];
-        const liveNode = resolvePathLive(syntheticRoot, slot.path, liveNodes);
+        const liveNode = resolvePathLive(slot.path, liveNodes);
         if (!liveNode) {
             // Path missed in the live DOM — SSR markup diverges from the
             // parsed template's shape. Surfacing the mismatch beats silent
@@ -363,7 +415,7 @@ function collapseMarkerRanges(nodes) {
     }
     return out;
 }
-function resolvePathLive(_root, path, rootNodes) {
+function resolvePathLive(path, rootNodes) {
     if (path.length === 0)
         return null;
     // Collapse marker ranges at EVERY level so the live child list matches the
@@ -568,7 +620,10 @@ function hydrateBooleanAttrSlot(slot, el, value, cleanups) {
 }
 function hydratePropSlot(slot, el, value, cleanups) {
     function apply(v) {
-        el[slot.name] = v;
+        // Reflect.set rather than a cast: writing an arbitrary property onto an
+        // element is exactly what Reflect is for, and it does not require
+        // claiming the element is something it is not.
+        Reflect.set(el, slot.name, v);
     }
     if (isSignal(value) || typeof value === "function") {
         const dispose = effect(() => apply(value()));

package/dist/reactive.js

@@ -84,7 +84,10 @@ export function signal(initial, options) {
                 eff.run();
         }
     }
-    accessor[SIGNAL_BRAND] = true;
+    // The brand is stamped through Reflect: the accessor is a function, and
+    // saying it is a branded object to write one property would be a lie the
+    // rest of the file then has to work around.
+    Reflect.set(accessor, SIGNAL_BRAND, true);
     signalNodes.set(accessor, node);
     return accessor;
 }

package/dist/render.js

@@ -307,7 +307,8 @@ function applyBooleanAttrSlot(slot, el, value, cleanups) {
 }
 function applyPropSlot(slot, el, value, cleanups) {
     function apply(v) {
-        el[slot.name] = v;
+        // See hydrate.ts: Reflect.set writes the property without a cast.
+        Reflect.set(el, slot.name, v);
     }
     if (isSignal(value) || typeof value === "function") {
         const dispose = effect(() => apply(value()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/aurora",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "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",

package/src/AuroraManager.ts

@@ -168,11 +168,22 @@ export class AuroraManager {
 			shared: mergeSharedResolvers(this.shared, options?.shared),
 			importmap: {
 				"@c9up/aurora": `${this.auroraAssetPath}/index.js`,
-				// The browser-facing subpath (RPC client) needs an explicit entry —
-				// importmaps don't read package `exports`, and an extensionless bare
-				// specifier won't hit a trailing-slash prefix map. Served from the
-				// same aurora dist; harmless when a page never imports it.
+				// Every browser-facing subpath needs an explicit entry — importmaps
+				// don't read package `exports`, and an extensionless bare specifier
+				// won't hit a trailing-slash prefix map. Served from the same aurora
+				// dist; harmless when a page never imports one.
+				//
+				// `relay` is the one that has to be here: unlike `hydrate` and
+				// `ssr` it is NOT re-exported from the barrel, so a page that wants
+				// the relay client has no other specifier to reach it by.
+				//
+				// The node-only subpaths (`provider`, `server`, `services/main`)
+				// are deliberately absent: mapping them would hand the browser a
+				// specifier that resolves to a module it cannot load.
 				"@c9up/aurora/rpc": `${this.auroraAssetPath}/rpc.js`,
+				"@c9up/aurora/relay": `${this.auroraAssetPath}/relay.js`,
+				"@c9up/aurora/hydrate": `${this.auroraAssetPath}/hydrate.js`,
+				"@c9up/aurora/ssr": `${this.auroraAssetPath}/ssr.js`,
 				// Auto-map @c9up/comet when installed so the rpc client's bare
 				// `import '@c9up/comet'` resolves in the no-bundler browser — no
 				// app-side importmap wiring. Omitted when comet isn't present.

package/src/hydrate.ts

@@ -248,15 +248,56 @@ function liveNodeCount(value: unknown): number {
 	return 1; // scalar → one inlined text node
 }
 
+/**
+ * The first and last top-level nodes an item contributes to the live DOM, as
+ * node types.
+ *
+ * Needed because the browser MERGES adjacent text nodes when it parses the SSR
+ * HTML. Two items whose markup touches — one ending in text, the next starting
+ * with text — share a single live node at their boundary, and counting them
+ * separately shifts every following item by one. That is why a list of one
+ * hydrates and a list of two does not: with one item there is no boundary.
+ *
+ * Read from the parsed TEMPLATE, which is what both sides agree on: a slot that
+ * renders to nothing still occupies a comment-marked range, and comments never
+ * merge with text.
+ */
+function edgeNodeTypes(value: unknown): { first: number; last: number } | null {
+	if (value === null || value === undefined || value === false) return null;
+	if (isTemplateResult(value)) {
+		const children = getTemplate(value.strings).element.content.childNodes;
+		const first = children[0];
+		const last = children[children.length - 1];
+		if (!first || !last) return null;
+		return { first: first.nodeType, last: last.nodeType };
+	}
+	if (Array.isArray(value)) {
+		// A nested array's edges are its own first and last contributing items.
+		let first: number | null = null;
+		let last: number | null = null;
+		for (const v of value) {
+			const edges = edgeNodeTypes(v);
+			if (!edges) continue;
+			if (first === null) first = edges.first;
+			last = edges.last;
+		}
+		return first === null || last === null ? null : { first, last };
+	}
+	// Scalar — inlined as one text node, so it merges on both sides.
+	return { first: 3 /* Text */, last: 3 /* Text */ };
+}
+
 /**
  * Hydrate the items of a reactive array against the SSR nodes inside its marker
  * range. Each item is hydrated against its own slice of the (marker-collapsed)
  * range, IN ORDER, so every item's inner marker pairs are consumed in document
- * order and the global cursor stays aligned for slots AFTER the list. Item
- * templates need a stable top-level node count (the common
- * `arr.map(x => html`<li>…</li>`)` shape — single root, no surrounding
- * whitespace); bare adjacent scalar items can merge in the browser, so use
- * template items for hydrated lists.
+ * order and the global cursor stays aligned for slots AFTER the list.
+ *
+ * Item templates used to need a shape — single root, no surrounding whitespace,
+ * no bare adjacent scalars — because the slice was a straight node count and
+ * the browser merges adjacent text nodes. A prettier-formatted item template
+ * was enough to break it, silently, from the second item onwards. The boundary
+ * is now accounted for (see `edgeNodeTypes`), so any item shape hydrates.
  */
 function hydrateArrayItems(
 	items: unknown[],
@@ -267,8 +308,18 @@ function hydrateArrayItems(
 ): void {
 	const nodes = collapseMarkerRanges(rangeNodes);
 	let offset = 0;
+	/** The node type the previous item ended on, for the merge check below. */
+	let previousLast: number | null = null;
 	for (const item of items) {
 		const count = liveNodeCount(item);
+		const edges = edgeNodeTypes(item);
+		// Text-node merge at the item boundary: the previous item's trailing
+		// text and this one's leading text are ONE node in the live DOM, so this
+		// item starts where the previous one appeared to end. Without this the
+		// slice slides by one per boundary and every item after the first
+		// resolves its slot paths against the wrong nodes — reported as
+		// "slot 0 (attr) path 1.0 not found", once per slot per item.
+		if (previousLast === 3 && edges?.first === 3) offset -= 1;
 		if (isTemplateResult(item)) {
 			hydrateTemplateResult(
 				item,
@@ -287,6 +338,9 @@ function hydrateArrayItems(
 			);
 		}
 		offset += count;
+		// An item that contributes nothing (null/false) leaves the boundary
+		// where the last CONTRIBUTING item put it.
+		if (edges) previousLast = edges.last;
 	}
 }
 
@@ -355,13 +409,6 @@ function hydrateTemplateResult(
 	// Hydration walks via the SAME path resolver as render, but against
 	// a synthetic root that mimics the parsed template's child list.
 	const tpl = getTemplate(result.strings);
-	// The live container's children should structurally match the
-	// template's content children. Wrap them in a transient DocumentFragment
-	// for path resolution — DocumentFragment.childNodes is the same view
-	// we walked during parse.
-	const syntheticRoot = {
-		childNodes: liveNodes,
-	} as unknown as ParentNode;
 
 	// An attribute interpolating several slots — `class="static ${a} ${b}"` — is
 	// ONE attribute value built from all of them plus the static segments in
@@ -371,7 +418,7 @@ function hydrateTemplateResult(
 
 	for (let i = 0; i < tpl.slots.length; i++) {
 		const slot = tpl.slots[i];
-		const liveNode = resolvePathLive(syntheticRoot, slot.path, liveNodes);
+		const liveNode = resolvePathLive(slot.path, liveNodes);
 		if (!liveNode) {
 			// Path missed in the live DOM — SSR markup diverges from the
 			// parsed template's shape. Surfacing the mismatch beats silent
@@ -502,11 +549,7 @@ function collapseMarkerRanges(nodes: ChildNode[]): ChildNode[] {
 	return out;
 }
 
-function resolvePathLive(
-	_root: ParentNode,
-	path: NodePath,
-	rootNodes: ChildNode[],
-): Node | null {
+function resolvePathLive(path: NodePath, rootNodes: ChildNode[]): Node | null {
 	if (path.length === 0) return null;
 	// Collapse marker ranges at EVERY level so the live child list matches the
 	// parsed template's one-node-per-slot shape (see collapseMarkerRanges).
@@ -789,7 +832,10 @@ function hydratePropSlot(
 	cleanups: Disposer[],
 ): void {
 	function apply(v: unknown): void {
-		(el as unknown as Record<string, unknown>)[slot.name] = v;
+		// Reflect.set rather than a cast: writing an arbitrary property onto an
+		// element is exactly what Reflect is for, and it does not require
+		// claiming the element is something it is not.
+		Reflect.set(el, slot.name, v);
 	}
 	if (isSignal(value) || typeof value === "function") {
 		const dispose = effect(() => apply((value as () => unknown)()));

package/src/reactive.ts

@@ -132,7 +132,10 @@ export function signal<T>(
 		}
 	}
 
-	(accessor as unknown as { [SIGNAL_BRAND]: true })[SIGNAL_BRAND] = true;
+	// The brand is stamped through Reflect: the accessor is a function, and
+	// saying it is a branded object to write one property would be a lie the
+	// rest of the file then has to work around.
+	Reflect.set(accessor, SIGNAL_BRAND, true);
 	signalNodes.set(accessor, node);
 	return accessor as Signal<T>;
 }

package/src/render.ts

@@ -405,7 +405,8 @@ function applyPropSlot(
 	cleanups: Disposer[],
 ): void {
 	function apply(v: unknown): void {
-		(el as unknown as Record<string, unknown>)[slot.name] = v;
+		// See hydrate.ts: Reflect.set writes the property without a cast.
+		Reflect.set(el, slot.name, v);
 	}
 	if (isSignal(value) || typeof value === "function") {
 		const dispose = effect(() => apply((value as () => unknown)()));