ilha 0.9.4 → 0.9.5

package/README.md

@@ -420,6 +420,8 @@ const Card = ilha.render(
 );
 ```
 
+Props (including JSX `children` and function callbacks) stay on the **live slot map** during parent render/mount. `data-ilha-props` only carries JSON-safe scalars for hydration hints — never rely on it for children or handlers. Nested islands under layout shells (`defineLayout` / `wrapLayout`) use the same path as page-level composition.
+
 **Keyed children** — use `.key()` when a child may reorder or appear conditionally. Keys must be unique within a parent render:
 
 ```ts

package/dist/index.js

@@ -121,9 +121,96 @@ function isStableInlineSlotMount(initialHtml, renderedHtml, slotIds) {
 	}
 	return true;
 }
+/**
+* Props safe to embed in `data-ilha-props`.
+* Functions cannot round-trip through JSON; children are owned by the live slot
+* map (client) and/or the inlined SSR subtree — never depend on the attr for them.
+* RawHtml is tagged so a rare attr-only mount can revive `Symbol.for("ilha.raw")`.
+*/
+function slotPropsForAttr(props) {
+	if (props === void 0) return void 0;
+	let out;
+	for (const key of Object.keys(props)) {
+		if (key === "children") continue;
+		const value = props[key];
+		if (typeof value === "function" || typeof value === "symbol") continue;
+		const encoded = encodeSlotPropValue(value);
+		if (encoded === void 0 && value !== void 0 && value !== null) continue;
+		(out ??= {})[key] = encoded;
+	}
+	return out;
+}
+const SLOT_RAW = Symbol.for("ilha.raw");
+function isRawHtmlValue(v) {
+	return !!(v && typeof v === "object" && SLOT_RAW in v);
+}
+function encodeSlotPropValue(value, seen) {
+	if (value == null) return value;
+	if (typeof value === "function" || typeof value === "symbol") return void 0;
+	if (typeof value !== "object") return value;
+	if (isRawHtmlValue(value)) return {
+		__ilha: "raw",
+		value: value.value
+	};
+	const visited = seen ?? /* @__PURE__ */ new WeakSet();
+	if (visited.has(value)) throw new TypeError("encodeSlotPropValue: circular reference in slot props");
+	visited.add(value);
+	if (Array.isArray(value)) return value.map((item) => encodeSlotPropValue(item, visited)).filter((item) => item !== void 0);
+	if (Object.getPrototypeOf(value) !== Object.prototype) return void 0;
+	const obj = value;
+	const encoded = {};
+	for (const key of Object.keys(obj)) {
+		const next = encodeSlotPropValue(obj[key], visited);
+		if (next !== void 0 || obj[key] === null) encoded[key] = next;
+	}
+	return encoded;
+}
+function makeRawHtml(value) {
+	return {
+		[SLOT_RAW]: true,
+		value
+	};
+}
+function reviveSlotPropValue(value) {
+	if (value == null || typeof value !== "object") return value;
+	if (Array.isArray(value)) return value.map(reviveSlotPropValue);
+	const obj = value;
+	if (obj.__ilha === "raw" && typeof obj.value === "string") return makeRawHtml(obj.value);
+	const out = {};
+	for (const key of Object.keys(obj)) out[key] = reviveSlotPropValue(obj[key]);
+	return out;
+}
+/**
+* Exact legacy shape produced when RawHtml lost its brand under JSON.stringify:
+* a plain object with a single own key `value` that is a string.
+*/
+function isLegacyRawHtmlBlob(value) {
+	if (!value || typeof value !== "object" || isRawHtmlValue(value)) return false;
+	if (Object.getPrototypeOf(value) !== Object.prototype) return false;
+	const keys = Object.keys(value);
+	return keys.length === 1 && keys[0] === "value" && typeof value.value === "string";
+}
+/** Revive attr-parsed props (RawHtml tags). Children stay as plain data if present. */
+function reviveSlotProps(props) {
+	if (typeof props !== "object" || props === null || Array.isArray(props)) return {};
+	const out = reviveSlotPropValue(props);
+	if ("children" in out) out.children = reviveLegacyChildren(out.children);
+	return out;
+}
+function reviveLegacyChildren(children) {
+	if (!Array.isArray(children)) {
+		if (isLegacyRawHtmlBlob(children)) return makeRawHtml(children.value);
+		return reviveSlotPropValue(children);
+	}
+	return children.map((child) => {
+		if (isLegacyRawHtmlBlob(child)) return makeRawHtml(child.value);
+		return reviveSlotPropValue(child);
+	});
+}
 /** Serialized form of slot props, matching the decoded `data-ilha-props` attr. */
 function serializeSlotProps(props) {
-	return props === void 0 ? "" : JSON.stringify(props);
+	const safe = slotPropsForAttr(props);
+	return safe === void 0 ? "" : JSON.stringify(safe);
 }
 const MORPH_CONTROLLER_SLOT_SELECTOR = "[data-slot]";
 const MORPH_CONTROLLER_ATTRS = /* @__PURE__ */ new Set([
@@ -400,7 +487,11 @@ const CSS_ATTR = "data-ilha-css";
 function buildScopedStyle(css) {
 	return `<style ${CSS_ATTR}>@scope (:scope) to ([data-ilha]){${css.replace(/<\/style/gi, "<\\/style")}}</style>`;
 }
-const renderCtxStack = [];
+const RENDER_CTX_STACK = Symbol.for("ilha.renderCtxStack");
+function renderCtxStack() {
+	const g = globalThis;
+	return g[RENDER_CTX_STACK] ??= [];
+}
 function pushRenderCtx(liveHost, asyncChildren) {
 	const ctx = {
 		slots: /* @__PURE__ */ new Map(),
@@ -409,14 +500,15 @@ function pushRenderCtx(liveHost, asyncChildren) {
 		pending: asyncChildren ? /* @__PURE__ */ new Map() : void 0,
 		binds: []
 	};
-	renderCtxStack.push(ctx);
+	renderCtxStack().push(ctx);
 	return ctx;
 }
 function popRenderCtx() {
-	renderCtxStack.pop();
+	renderCtxStack().pop();
 }
 function currentRenderCtx() {
-	return renderCtxStack[renderCtxStack.length - 1];
+	const stack = renderCtxStack();
+	return stack[stack.length - 1];
 }
 function isIsland(v) {
 	return typeof v === "function" && ISLAND in v;
@@ -436,7 +528,8 @@ function emitIslandSlot(island, props, key) {
 		props
 	});
 	const slotTag = getIslandSlotTag(island);
-	const propsAttr = props ? ` ${PROPS_ATTR}='${escapeHtml(JSON.stringify(props))}'` : "";
+	const attrProps = slotPropsForAttr(props);
+	const propsAttr = attrProps ? ` ${PROPS_ATTR}='${escapeHtml(JSON.stringify(attrProps))}'` : "";
 	if (ctx?.liveHost) return wrapIslandSlotHtml(slotTag, id, propsAttr, "");
 	if (ctx?.pending) {
 		popRenderCtx();
@@ -448,7 +541,7 @@ function emitIslandSlot(island, props, key) {
 			}
 			return wrapIslandSlotHtml(slotTag, id, propsAttr, String(result));
 		} finally {
-			renderCtxStack.push(ctx);
+			renderCtxStack().push(ctx);
 		}
 	}
 	const inner = island.toString(props);
@@ -1539,7 +1632,7 @@ var IlhaBuilder = class IlhaBuilder {
 				const rawProps = host.getAttribute(PROPS_ATTR);
 				if (rawProps) {
 					const parsed = safeParseSnapshot(rawProps, PROPS_ATTR);
-					if (parsed !== void 0) props = parsed;
+					if (parsed !== void 0) props = reviveSlotProps(parsed);
 				}
 			}
 			const inputSignal = signal(resolveInput(props));
@@ -1661,6 +1754,13 @@ var IlhaBuilder = class IlhaBuilder {
 				}
 				return index;
 			}
+			/** Push live props from a fresh slot map into already-mounted children. */
+			function pushUpdatedProps(nextSlots) {
+				for (const [id, entry] of mountedSlots) {
+					const next = nextSlots.get(id);
+					if (next) entry.updateProps(next.props);
+				}
+			}
 			function mountSlots(slotMap) {
 				for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) teardownMountedSlot(id, entry);
 				for (const [id, entry] of mountedSlots) {
@@ -1682,7 +1782,7 @@ var IlhaBuilder = class IlhaBuilder {
 						const rawProps = slotEl.getAttribute(PROPS_ATTR) ?? slotEl.getAttribute("data-props");
 						if (rawProps) {
 							const parsed = safeParseSnapshot(rawProps, `props on [${SLOT_ATTR}="${id}"]`);
-							if (parsed !== void 0) slotProps = parsed;
+							if (parsed !== void 0) slotProps = reviveSlotProps(parsed);
 						}
 					}
 					const prevSub = setActiveSub(void 0);
@@ -1873,10 +1973,7 @@ var IlhaBuilder = class IlhaBuilder {
 				if (!initialized) {
 					initialized = true;
 					if (preserveSSRDom) {
-						for (const [id, entry] of mountedSlots) {
-							const next = newSlotMap.get(id);
-							if (next) entry.updateProps(next.props);
-						}
+						pushUpdatedProps(newSlotMap);
 						if (rendered === initialRenderedHtml) {
 							lastRendered = rendered;
 							return;
@@ -1886,13 +1983,13 @@ var IlhaBuilder = class IlhaBuilder {
 						lastRendered = rendered;
 						return;
 					}
-					if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount(initialRenderedHtml, rendered, newSlotMap.keys())) return;
+					if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount(initialRenderedHtml, rendered, newSlotMap.keys())) {
+						pushUpdatedProps(newSlotMap);
+						return;
+					}
 				}
 				if (rendered === lastRendered && mountedSlots.size === newSlotMap.size && [...newSlotMap].every(([id, next]) => mountedSlots.get(id)?.island === next.island)) {
-					for (const [id, entry] of mountedSlots) {
-						const next = newSlotMap.get(id);
-						if (next) entry.updateProps(next.props);
-					}
+					pushUpdatedProps(newSlotMap);
 					return;
 				}
 				detachListeners();
@@ -2198,7 +2295,7 @@ function mountAll(registry, options = {}) {
 		const rawProps = host.getAttribute(PROPS_ATTR);
 		if (rawProps) {
 			const parsed = safeParseSnapshot(rawProps, `${PROPS_ATTR} on [data-ilha="${name}"]`);
-			if (parsed !== void 0) props = parsed;
+			if (parsed !== void 0) props = reviveSlotProps(parsed);
 		}
 		unmounts.push(island.mount(host, props));
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "A tiny, framework-free island architecture library",
   "keywords": [
     "framework-free",