@c9up/aurora 0.1.26 → 0.1.27

package/dist/hydrate.js

@@ -257,6 +257,11 @@ function hydrateTemplateResult(result, liveNodes, cleanups, mountHooks, markerCu
     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
+    // wipe the statics, which is what render.ts already avoids server-side.
+    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);
@@ -270,8 +275,47 @@ function hydrateTemplateResult(result, liveNodes, cleanups, mountHooks, markerCu
             }
             continue;
         }
+        if (slot.kind === "attr" && slot.staticParts !== undefined) {
+            collectMultiAttr(slot, liveNode, result.values[i], multiGroups);
+            continue;
+        }
         hydrateSlot(slot, liveNode, result.values[i], cleanups, mountHooks, markerCursor);
     }
+    for (const group of multiGroups.values()) {
+        applyMultiAttrGroup(group, cleanups);
+    }
+}
+function collectMultiAttr(slot, el, value, groups) {
+    if (!slot.staticParts)
+        return;
+    const key = `${slot.name}::${slot.path.join(".")}`;
+    let group = groups.get(key);
+    if (!group) {
+        group = { el, name: slot.name, staticParts: slot.staticParts, values: [] };
+        groups.set(key, group);
+    }
+    group.values.push(value);
+}
+function applyMultiAttrGroup(group, cleanups) {
+    function join() {
+        let out = group.staticParts[0] ?? "";
+        for (let i = 0; i < group.values.length; i++) {
+            const v = group.values[i];
+            const resolved = isSignal(v) || typeof v === "function" ? v() : v;
+            out += resolved == null || resolved === false ? "" : String(resolved);
+            out += group.staticParts[i + 1] ?? "";
+        }
+        return out;
+    }
+    const hasReactive = group.values.some((v) => isSignal(v) || typeof v === "function");
+    if (hasReactive) {
+        // SSR already wrote the joined value; re-joining on every tick is what
+        // keeps the statics in place when only one part changes.
+        cleanups.push(effect(() => {
+            group.el.setAttribute(group.name, join());
+        }));
+    }
+    // Fully static groups need nothing: SSR wrote the final value.
 }
 /**
  * Resolve a slot's path against the LIVE DOM. The first index of the

package/dist/render.js

@@ -68,10 +68,17 @@ export function mount(result, cleanups, mounted, mountHooks) {
     // the final string. Collect them in a first pass, attach effects
     // after.
     const multiGroups = new Map();
+    // Resolve EVERY slot's node before applying any of them. Applying a text
+    // slot inserts nodes into the fragment, which shifts the child indices the
+    // remaining paths were computed against — so a slot sitting after a nested
+    // template (`${Icon()}${label}`) used to resolve to the wrong node, or to
+    // none, and silently never bound. Fragments exist precisely so a component
+    // needs no wrapper element; they must not cost the slots that follow them.
+    const resolved = tpl.slots.map((slot) => resolvePath(fragment, slot.path));
     for (let i = 0; i < tpl.slots.length; i++) {
         const slot = tpl.slots[i];
-        const node = resolvePath(fragment, slot.path);
-        if (node === null) {
+        const node = resolved[i];
+        if (node === null || node === undefined) {
             // Path didn't resolve — skip this binding rather than crash (see
             // resolvePath). Degrades to a dead binding; the surrounding render
             // (and any command driving it) survives.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/aurora",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "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/hydrate.ts

@@ -358,6 +358,12 @@ function hydrateTemplateResult(
 		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
+	// between. Binding each slot on its own would have the last writer win and
+	// wipe the statics, which is what render.ts already avoids server-side.
+	const multiGroups = new Map<string, MultiAttrGroup>();
+
 	for (let i = 0; i < tpl.slots.length; i++) {
 		const slot = tpl.slots[i];
 		const liveNode = resolvePathLive(syntheticRoot, slot.path, liveNodes);
@@ -373,6 +379,15 @@ function hydrateTemplateResult(
 			}
 			continue;
 		}
+		if (slot.kind === "attr" && slot.staticParts !== undefined) {
+			collectMultiAttr(
+				slot,
+				liveNode as Element,
+				result.values[i],
+				multiGroups,
+			);
+			continue;
+		}
 		hydrateSlot(
 			slot,
 			liveNode,
@@ -382,6 +397,65 @@ function hydrateTemplateResult(
 			markerCursor,
 		);
 	}
+
+	for (const group of multiGroups.values()) {
+		applyMultiAttrGroup(group, cleanups);
+	}
+}
+
+/** One attribute whose value is assembled from several slots. */
+interface MultiAttrGroup {
+	el: Element;
+	name: string;
+	staticParts: readonly string[];
+	values: unknown[];
+}
+
+function collectMultiAttr(
+	slot: AttrSlot,
+	el: Element,
+	value: unknown,
+	groups: Map<string, MultiAttrGroup>,
+): void {
+	if (!slot.staticParts) return;
+	const key = `${slot.name}::${(slot.path as readonly number[]).join(".")}`;
+	let group = groups.get(key);
+	if (!group) {
+		group = { el, name: slot.name, staticParts: slot.staticParts, values: [] };
+		groups.set(key, group);
+	}
+	group.values.push(value);
+}
+
+function applyMultiAttrGroup(
+	group: MultiAttrGroup,
+	cleanups: Disposer[],
+): void {
+	function join(): string {
+		let out = group.staticParts[0] ?? "";
+		for (let i = 0; i < group.values.length; i++) {
+			const v = group.values[i];
+			const resolved =
+				isSignal(v) || typeof v === "function" ? (v as () => unknown)() : v;
+			out += resolved == null || resolved === false ? "" : String(resolved);
+			out += group.staticParts[i + 1] ?? "";
+		}
+		return out;
+	}
+
+	const hasReactive = group.values.some(
+		(v) => isSignal(v) || typeof v === "function",
+	);
+	if (hasReactive) {
+		// SSR already wrote the joined value; re-joining on every tick is what
+		// keeps the statics in place when only one part changes.
+		cleanups.push(
+			effect(() => {
+				group.el.setAttribute(group.name, join());
+			}),
+		);
+	}
+	// Fully static groups need nothing: SSR wrote the final value.
 }
 
 /**

package/src/render.ts

@@ -104,10 +104,20 @@ export function mount(
 	// after.
 	const multiGroups = new Map<string, MultiAttrGroup>();
 
+	// Resolve EVERY slot's node before applying any of them. Applying a text
+	// slot inserts nodes into the fragment, which shifts the child indices the
+	// remaining paths were computed against — so a slot sitting after a nested
+	// template (`${Icon()}${label}`) used to resolve to the wrong node, or to
+	// none, and silently never bound. Fragments exist precisely so a component
+	// needs no wrapper element; they must not cost the slots that follow them.
+	const resolved: Array<Node | null> = tpl.slots.map((slot) =>
+		resolvePath(fragment, slot.path),
+	);
+
 	for (let i = 0; i < tpl.slots.length; i++) {
 		const slot = tpl.slots[i];
-		const node = resolvePath(fragment, slot.path);
-		if (node === null) {
+		const node = resolved[i];
+		if (node === null || node === undefined) {
 			// Path didn't resolve — skip this binding rather than crash (see
 			// resolvePath). Degrades to a dead binding; the surrounding render
 			// (and any command driving it) survives.