ilha 0.9.3 → 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,8 +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([
@@ -138,7 +226,19 @@ const MORPH_CONTROLLER_ATTRS = /* @__PURE__ */ new Set([
 	"data-selected",
 	"data-panel-open"
 ]);
+/**
+* Opt-in contract for controller-owned attributes: an element carrying
+* `data-morph-preserve="attr-a attr-b class"` keeps those attributes exactly
+* as they are in the live DOM — the morph neither overwrites nor removes them.
+* The Areia list above stays as a built-in default for `[data-slot]` elements.
+*/
+const MORPH_PRESERVE_ATTR = "data-morph-preserve";
 function shouldPreserveMorphAttr(el, name) {
+	if (name === MORPH_PRESERVE_ATTR) return el.hasAttribute(MORPH_PRESERVE_ATTR);
+	const custom = el.getAttribute(MORPH_PRESERVE_ATTR);
+	if (custom !== null) {
+		for (const token of custom.split(/\s+/)) if (token === name) return true;
+	}
 	return el.matches(MORPH_CONTROLLER_SLOT_SELECTOR) && MORPH_CONTROLLER_ATTRS.has(name);
 }
 function syncAttributes(from, to) {
@@ -151,18 +251,30 @@ function syncAttributes(from, to) {
 		if (!to.hasAttribute(name)) from.removeAttribute(name);
 	}
 }
+/**
+* Morph identity key: explicit `data-key`, or the child-island slot id.
+* Slot hosts are matched by id like keyed list items so a mounted child
+* island's host element is reconciled IN PLACE on parent re-renders — never
+* detached and reinserted, which would blur a focused element inside it.
+*/
+function morphKeyOf(el) {
+	const k = el.getAttribute("data-key");
+	if (k !== null) return `k:${k}`;
+	const s = el.getAttribute(SLOT_ATTR);
+	return s === null ? null : `s:${s}`;
+}
 function morphChildren(fromParent, toParent) {
 	const toNodes = Array.from(toParent.childNodes);
 	let fromKeyed = null;
 	for (const child of fromParent.children) {
-		const k = child.getAttribute("data-key");
+		const k = morphKeyOf(child);
 		if (k !== null && !(fromKeyed ??= /* @__PURE__ */ new Map()).has(k)) fromKeyed.set(k, child);
 	}
 	let toKeys = null;
 	if (fromKeyed !== null) {
 		toKeys = /* @__PURE__ */ new Set();
 		for (const child of toParent.children) {
-			const k = child.getAttribute("data-key");
+			const k = morphKeyOf(child);
 			if (k !== null) toKeys.add(k);
 		}
 	}
@@ -170,7 +282,7 @@ function morphChildren(fromParent, toParent) {
 		const toNode = toNodes[i];
 		let fromNode = fromParent.childNodes[i];
 		if (fromKeyed !== null) {
-			const toKey = toNode.nodeType === 1 ? toNode.getAttribute("data-key") : null;
+			const toKey = toNode.nodeType === 1 ? morphKeyOf(toNode) : null;
 			if (toKey !== null) {
 				const match = fromKeyed.get(toKey);
 				if (match) {
@@ -182,7 +294,7 @@ function morphChildren(fromParent, toParent) {
 				}
 			}
 			if (fromNode instanceof Element) {
-				const fromKey = fromNode.getAttribute("data-key");
+				const fromKey = morphKeyOf(fromNode);
 				if (fromKey !== null && fromKey !== toKey && toKeys.has(fromKey)) {
 					fromParent.insertBefore(toNode.cloneNode(true), fromNode);
 					continue;
@@ -208,6 +320,18 @@ function morphChildren(fromParent, toParent) {
 				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
 				continue;
 			}
+			if (fromEl.hasAttribute(LEAVING_ATTR)) {
+				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
+				continue;
+			}
+			{
+				const slotId = toEl.getAttribute(SLOT_ATTR);
+				if (slotId !== null && fromEl.getAttribute(SLOT_ATTR) === slotId) {
+					const props = toEl.getAttribute(PROPS_ATTR);
+					if (props !== null && fromEl.getAttribute(PROPS_ATTR) !== props) fromEl.setAttribute(PROPS_ATTR, props);
+					continue;
+				}
+			}
 			if (fromEl.localName === "input" && fromEl.type !== toEl.type) {
 				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
 				continue;
@@ -222,6 +346,22 @@ function morphChildren(fromParent, toParent) {
 				if (newValue !== hadValue) fromEl.value = newValue ?? "";
 				continue;
 			}
+			if (fromEl.localName === "select") {
+				const before = /* @__PURE__ */ new Map();
+				for (const o of fromEl.options) before.set(o, {
+					attr: o.hasAttribute("selected"),
+					live: o.selected
+				});
+				syncAttributes(fromEl, toEl);
+				morphChildren(fromEl, toEl);
+				const options = Array.from(fromEl.options);
+				if (options.some((o) => o.hasAttribute("selected") !== (before.get(o)?.attr ?? false))) for (const o of options) o.selected = o.hasAttribute("selected");
+				else for (const o of options) {
+					const prev = before.get(o);
+					if (prev && o.selected !== prev.live) o.selected = prev.live;
+				}
+				continue;
+			}
 			syncAttributes(fromEl, toEl);
 			if (fromEl.localName === "textarea") {
 				const newText = toEl.textContent ?? "";
@@ -234,9 +374,62 @@ function morphChildren(fromParent, toParent) {
 	}
 	while (fromParent.childNodes.length > toNodes.length) fromParent.lastChild.remove();
 }
+/**
+* Invariant: the morph must never lose focus for an element that survives it.
+* Surviving slot hosts and keyed elements are patched in place, but a genuine
+* reorder still detaches-and-reinserts an ancestor of `document.activeElement`,
+* which blurs it in real engines — snapshot before, restore after.
+*/
+function snapshotFocusForMorph() {
+	if (typeof document === "undefined") return null;
+	const active = document.activeElement;
+	if (!(active instanceof HTMLElement) || active === document.body) return null;
+	let selection = null;
+	let range = null;
+	try {
+		if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) selection = {
+			start: active.selectionStart,
+			end: active.selectionEnd,
+			dir: active.selectionDirection
+		};
+		else if (active.isContentEditable) {
+			const sel = window.getSelection();
+			if (sel && sel.rangeCount > 0) range = sel.getRangeAt(0).cloneRange();
+		}
+	} catch {}
+	return {
+		active,
+		selection,
+		range
+	};
+}
+function restoreFocusAfterMorph(snapshot) {
+	if (!snapshot) return;
+	const { active, selection, range } = snapshot;
+	if (!active.isConnected) return;
+	try {
+		if (document.activeElement !== active) active.focus({ preventScroll: true });
+		if (selection && selection.start !== null) {
+			const el = active;
+			if (el.selectionStart !== selection.start || el.selectionEnd !== selection.end) el.setSelectionRange(selection.start, selection.end, selection.dir ?? "none");
+		}
+		if (range && range.startContainer.isConnected) {
+			const sel = window.getSelection();
+			if (sel) {
+				const current = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+				if (!(current !== null && current.startContainer === range.startContainer && current.startOffset === range.startOffset && current.endContainer === range.endContainer && current.endOffset === range.endOffset)) {
+					sel.removeAllRanges();
+					sel.addRange(range);
+				}
+			}
+		}
+	} catch {}
+}
 function morphInner(from, to) {
 	if (from.localName !== to.localName || from.namespaceURI !== to.namespaceURI) throw new Error("[ilha] morph: elements must match");
+	const focus = snapshotFocusForMorph();
 	morphChildren(from, to);
+	restoreFocusAfterMorph(focus);
 }
 function isStandardSchema(value) {
 	if (value == null || typeof value !== "object") return false;
@@ -283,13 +476,22 @@ const ISLAND_SLOT_TAG = Symbol.for("ilha.islandSlotTag");
 * on unmount. Not part of the public surface. */
 const ISLAND_MOUNT_HANDLES = /* @__PURE__ */ new WeakMap();
 const SLOT_ATTR = "data-ilha-slot";
+/** Marks a slot host whose child island is mid leave-transition: it has been
+* unmounted (and its slot id stripped) but stays connected so the leave
+* animation can paint. The morph replaces such elements instead of matching
+* or mutating them. */
+const LEAVING_ATTR = "data-ilha-leaving";
 const PROPS_ATTR = "data-ilha-props";
 const STATE_ATTR = "data-ilha-state";
 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(),
@@ -298,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;
@@ -325,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();
@@ -337,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);
@@ -1428,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));
@@ -1521,6 +1725,8 @@ var IlhaBuilder = class IlhaBuilder {
 					leavingSlots.delete(id);
 				};
 				if (result instanceof Promise) {
+					entry.el.removeAttribute(SLOT_ATTR);
+					entry.el.setAttribute(LEAVING_ATTR, "");
 					leavingSlots.set(id, {
 						el: entry.el,
 						token
@@ -1548,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) {
@@ -1569,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);
@@ -1747,6 +1960,7 @@ var IlhaBuilder = class IlhaBuilder {
 			cleanups.push(stopDerived);
 			let initialized = false;
 			const initialRenderedHtml = initial.html;
+			let lastRendered = null;
 			let renderEpoch = 0;
 			const stopRender = effect(() => {
 				const epoch = ++renderEpoch;
@@ -1759,14 +1973,24 @@ 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;
 						}
-						if (rendered === initialRenderedHtml) return;
 					}
-					if (rendered === initialRenderedHtml) return;
-					if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount(initialRenderedHtml, rendered, newSlotMap.keys())) return;
+					if (rendered === initialRenderedHtml) {
+						lastRendered = rendered;
+						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)) {
+					pushUpdatedProps(newSlotMap);
+					return;
 				}
 				detachListeners();
 				stopBindings();
@@ -1785,34 +2009,33 @@ var IlhaBuilder = class IlhaBuilder {
 				}
 				const applyMorph = () => {
 					if (epoch !== renderEpoch) return;
-					const preserved = /* @__PURE__ */ new Map();
-					const listShrunk = newSlotMap.size < prevMountedCount;
-					for (const [id, entry] of mountedSlots) {
-						if (!newSlotMap.has(id)) continue;
-						if (!entry.el.isConnected) continue;
-						if (listShrunk && id.startsWith("p:")) {
-							teardownMountedSlot(id, entry);
-							continue;
+					if (newSlotMap.size < prevMountedCount) {
+						let divergeFrom = Infinity;
+						for (const [id, entry] of mountedSlots) {
+							if (!id.startsWith("p:")) continue;
+							const next = newSlotMap.get(id);
+							if (!next) continue;
+							const index = Number(id.slice(2));
+							if (Number.isNaN(index) || index >= divergeFrom) continue;
+							if (serializeSlotProps(next.props) !== (entry.el.getAttribute(PROPS_ATTR) ?? "")) divergeFrom = index;
+						}
+						for (const [id, entry] of mountedSlots) {
+							if (!newSlotMap.has(id)) continue;
+							if (!entry.el.isConnected) continue;
+							if (id.startsWith("p:") && Number(id.slice(2)) >= divergeFrom) teardownMountedSlot(id, entry);
 						}
-						const stubTag = entry.el.tagName.toLowerCase();
-						const stub = document.createElement(stubTag);
-						stub.setAttribute(SLOT_ATTR, id);
-						const incomingProps = serializeSlotProps(newSlotMap.get(id)?.props);
-						if (incomingProps !== "") stub.setAttribute(PROPS_ATTR, incomingProps);
-						entry.el.replaceWith(stub);
-						preserved.set(id, entry.el);
 					}
 					const tpl = document.createElement("template");
 					const morphRootTag = host.tagName.toLowerCase();
 					tpl.innerHTML = `<${morphRootTag}>${html}</${morphRootTag}>`;
 					morphInner(host, tpl.content.firstElementChild);
-					if (preserved.size > 0) {
-						const rehomeIndex = buildSlotIndex();
-						for (const [id, liveEl] of preserved) {
-							const stub = rehomeIndex.get(id);
-							if (!stub) continue;
-							stub.replaceWith(liveEl);
-						}
+					lastRendered = rendered;
+					let rehomeIndex = null;
+					for (const [id, entry] of mountedSlots) {
+						if (!newSlotMap.has(id) || entry.el.isConnected) continue;
+						rehomeIndex ??= buildSlotIndex();
+						const stub = rehomeIndex.get(id);
+						if (stub && stub !== entry.el) stub.replaceWith(entry.el);
 					}
 					attachListeners();
 					stopBindings = applyTemplateBindings(host, newBinds);
@@ -2072,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.3",
+  "version": "0.9.5",
   "description": "A tiny, framework-free island architecture library",
   "keywords": [
     "framework-free",