ilha 0.9.3 → 0.9.4

package/dist/index.js

@@ -121,6 +121,7 @@ function isStableInlineSlotMount(initialHtml, renderedHtml, slotIds) {
 	}
 	return true;
 }
+/** Serialized form of slot props, matching the decoded `data-ilha-props` attr. */
 function serializeSlotProps(props) {
 	return props === void 0 ? "" : JSON.stringify(props);
 }
@@ -138,7 +139,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 +164,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 +195,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 +207,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 +233,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 +259,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 +287,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,6 +389,11 @@ 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";
@@ -1521,6 +1632,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
@@ -1747,6 +1860,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;
@@ -1763,11 +1877,24 @@ var IlhaBuilder = class IlhaBuilder {
 							const next = newSlotMap.get(id);
 							if (next) entry.updateProps(next.props);
 						}
-						if (rendered === initialRenderedHtml) return;
+						if (rendered === initialRenderedHtml) {
+							lastRendered = rendered;
+							return;
+						}
+					}
+					if (rendered === initialRenderedHtml) {
+						lastRendered = rendered;
+						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 === 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);
+					}
+					return;
+				}
 				detachListeners();
 				stopBindings();
 				const prevMountedCount = mountedSlots.size;
@@ -1785,34 +1912,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);

package/package.json

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