ilha 0.6.0 → 0.6.1

package/dist/index.d.ts

@@ -51,6 +51,7 @@ interface IslandCall {
 interface MarkedSignalAccessor<T> {
   (): T;
   (...args: [value: T]): void;
+  select<S>(selector: (state: T) => S): MarkedSignalAccessor<S>;
   [SIGNAL_ACCESSOR]: true;
 }
 declare function ilhaRaw(value: string): RawHtml;
@@ -58,11 +59,11 @@ declare function ilhaCss(strings: TemplateStringsArray | string, ...values: (str
 type JsxChild = unknown;
 type JsxProps = Record<string, unknown> | null | undefined;
 type JsxType = string | ((props: Record<string, unknown>) => unknown);
-declare function ilhaJsx(type: JsxType, props: JsxProps, ...children: JsxChild[]): RawHtml;
+declare function ilhaJsx(type: JsxType, props: JsxProps, maybeKey?: JsxChild | string | number, ...restChildren: JsxChild[]): RawHtml;
 declare function ilhaFragment(props: {
   children?: JsxChild;
 } | null, ...children: JsxChild[]): RawHtml;
-declare function ilhaJsxDEV(type: JsxType, props: JsxProps): RawHtml;
+declare function ilhaJsxDEV(type: JsxType, props: JsxProps, maybeKey?: string | number, _source?: unknown, _self?: unknown): RawHtml;
 declare function ilhaHtml(strings: TemplateStringsArray, ...values: unknown[]): RawHtml;
 type ContextSignal<T> = {
   (): T;
@@ -80,7 +81,7 @@ declare function ilhaContext<T>(key: string, initial: T): ContextSignal<T>;
  * or `.render()` automatically subscribes the surrounding reactive scope —
  * so when the signal changes, dependents re-run as if it were local state.
  */
-declare function ilhaSignal<T>(initial: T): ExternalSignal<T>;
+declare function ilhaSignal<T>(initial: T): SignalAccessor<T>;
 /**
  * Run `fn` with reactive tracking suspended. Reading signals inside `fn`
  * returns their current value without subscribing the surrounding scope.
@@ -115,10 +116,7 @@ interface DerivedEntry<TInput, TStateMap extends Record<string, unknown>> {
   fn: DerivedFn<TInput, TStateMap, unknown>;
 }
 type IslandDerived<TDerivedMap extends Record<string, unknown>> = { readonly [K in keyof TDerivedMap]: DerivedValue<TDerivedMap[K]> };
-interface ExternalSignal<T = unknown> {
-  (): T;
-  (value: T): void;
-}
+type ExternalSignal<T = unknown> = SignalAccessor<T>;
 type SignalAccessor<T> = MarkedSignalAccessor<T>;
 type MergeState<TStateMap extends Record<string, unknown>, K extends string, V> = Omit<TStateMap, K> & Record<K, V>;
 type IslandState<TStateMap extends Record<string, unknown>> = { readonly [K in keyof TStateMap]-?: SignalAccessor<TStateMap[K]> };
@@ -243,7 +241,7 @@ interface MountOptions {
   lazy?: boolean;
 }
 interface MountResult {
-  unmount: () => void;
+  unmount: () => void | Promise<void>;
 }
 interface BuilderConfig<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown>> {
   schema: StandardSchemaV1 | null;

package/dist/index.js

@@ -16,9 +16,76 @@ function shallowEqualInput(a, b) {
 	}
 	return true;
 }
+function extractDirectChildSlotIdsInOrder(html) {
+	if (typeof document === "undefined") return [];
+	const tpl = document.createElement("template");
+	tpl.innerHTML = html;
+	const root = tpl.content;
+	const ids = [];
+	for (const el of root.querySelectorAll("[data-ilha-slot]")) {
+		if (!(el instanceof Element)) continue;
+		let parent = el.parentElement ?? el.parentNode;
+		let nested = false;
+		while (parent && parent !== root) {
+			if (parent instanceof Element && parent.hasAttribute("data-ilha-slot")) {
+				nested = true;
+				break;
+			}
+			parent = parent instanceof Element ? parent.parentElement ?? parent.parentNode : parent.parentNode;
+		}
+		if (!nested) ids.push(el.getAttribute("data-ilha-slot"));
+	}
+	return ids;
+}
+function extractSlotPropsAttr(html, slotId) {
+	const escaped = slotId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const withProps = new RegExp(`<div\\s[^>]*data-ilha-slot="${escaped}"[^>]*data-ilha-props='([^']*)'`);
+	const m = html.match(withProps);
+	if (m) return m[1];
+	const withoutProps = new RegExp(`<div\\s[^>]*data-ilha-slot="${escaped}"`);
+	return html.match(withoutProps) ? "" : null;
+}
+function isStableInlineSlotMount(initialHtml, renderedHtml, slotIds) {
+	const initialOrder = extractDirectChildSlotIdsInOrder(initialHtml);
+	const renderedOrder = extractDirectChildSlotIdsInOrder(renderedHtml);
+	if (initialOrder.length !== renderedOrder.length || initialOrder.some((id, i) => id !== renderedOrder[i])) return false;
+	for (const id of slotIds) {
+		const initialProps = extractSlotPropsAttr(initialHtml, id);
+		const renderedProps = extractSlotPropsAttr(renderedHtml, id);
+		if (initialProps === null || renderedProps === null) return false;
+		if (initialProps !== renderedProps) return false;
+	}
+	return true;
+}
+function serializeSlotProps(props) {
+	return props === void 0 ? "" : JSON.stringify(props);
+}
+const MORPH_CONTROLLER_SLOT_SELECTOR = "[data-slot]";
+const MORPH_CONTROLLER_ATTRS = new Set([
+	"data-checked",
+	"data-unchecked",
+	"data-indeterminate",
+	"aria-checked",
+	"data-open",
+	"data-closed",
+	"data-state",
+	"aria-expanded",
+	"aria-hidden",
+	"data-selected",
+	"data-panel-open"
+]);
+function shouldPreserveMorphAttr(el, name) {
+	return el.matches(MORPH_CONTROLLER_SLOT_SELECTOR) && MORPH_CONTROLLER_ATTRS.has(name);
+}
 function syncAttributes(from, to) {
-	for (const { name, value } of to.attributes) if (from.getAttribute(name) !== value) from.setAttribute(name, value);
-	for (const { name } of Array.from(from.attributes)) if (!to.hasAttribute(name)) from.removeAttribute(name);
+	for (const { name, value } of to.attributes) {
+		if (shouldPreserveMorphAttr(from, name)) continue;
+		if (from.getAttribute(name) !== value) from.setAttribute(name, value);
+	}
+	for (const { name } of Array.from(from.attributes)) {
+		if (shouldPreserveMorphAttr(from, name)) continue;
+		if (!to.hasAttribute(name)) from.removeAttribute(name);
+	}
 }
 function morphChildren(fromParent, toParent) {
 	const fromNodes = Array.from(fromParent.childNodes);
@@ -88,14 +155,14 @@ function dedentString(str) {
 	const indent = Math.min(...lines.filter((l) => l.trim() !== "").map((l) => l.match(/^(\s*)/)[1].length));
 	return lines.map((l) => l.slice(indent)).join("\n");
 }
-const RAW = Symbol("ilha.raw");
-const SIGNAL_ACCESSOR = Symbol("ilha.signalAccessor");
-const ISLAND = Symbol("ilha.island");
-const ISLAND_CALL = Symbol("ilha.islandCall");
+const RAW = Symbol.for("ilha.raw");
+const SIGNAL_ACCESSOR = Symbol.for("ilha.signalAccessor");
+const ISLAND = Symbol.for("ilha.island");
+const ISLAND_CALL = Symbol.for("ilha.islandCall");
 /** @internal Internal hook used by a parent's mountSlots to mount a child island and
 * retain a handle to push updated props into it on subsequent parent
 * re-renders. Not part of the public surface. */
-const ISLAND_MOUNT_INTERNAL = Symbol("ilha.islandMountInternal");
+const ISLAND_MOUNT_INTERNAL = Symbol.for("ilha.islandMountInternal");
 const SLOT_ATTR = "data-ilha-slot";
 const PROPS_ATTR = "data-ilha-props";
 const STATE_ATTR = "data-ilha-state";
@@ -122,10 +189,19 @@ function currentRenderCtx() {
 	return renderCtxStack[renderCtxStack.length - 1];
 }
 function isIsland(v) {
-	return typeof v === "function" && ISLAND in v;
+	if (typeof v !== "function") return false;
+	if (ISLAND in v) return true;
+	return Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.island");
 }
 function isIslandCall(v) {
-	return (typeof v === "object" || typeof v === "function") && v !== null && ISLAND_CALL in v;
+	if (v == null || typeof v !== "object" && typeof v !== "function") return false;
+	if (ISLAND_CALL in v) return true;
+	if (Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.islandCall")) return true;
+	if (typeof v === "object" && "island" in v) {
+		const island = v.island;
+		return typeof island === "function" && (ISLAND in island || Object.getOwnPropertySymbols(island).some((s) => s.description === "ilha.island"));
+	}
+	return false;
 }
 function emitIslandSlot(island, props, key) {
 	const ctx = currentRenderCtx();
@@ -171,10 +247,86 @@ async function resolveAsyncChildren(html, ctx) {
 }
 function markSignalAccessor(fn) {
 	fn[SIGNAL_ACCESSOR] = true;
-	return fn;
+	const accessor = fn;
+	accessor.select = (selector) => createSelectAccessor(accessor, selector);
+	return accessor;
 }
 function isSignalAccessor(v) {
-	return typeof v === "function" && SIGNAL_ACCESSOR in v;
+	if (typeof v !== "function") return false;
+	if (SIGNAL_ACCESSOR in v) return true;
+	return Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.signalAccessor");
+}
+function getAtPath(obj, path) {
+	let cur = obj;
+	for (const seg of path) {
+		if (cur == null) return void 0;
+		cur = cur[seg];
+	}
+	return cur;
+}
+function setAtPath(obj, path, value) {
+	if (path.length === 0) return value;
+	const [head, ...rest] = path;
+	if (Array.isArray(obj)) {
+		const idx = head;
+		if (idx < 0 || idx >= obj.length) return obj;
+		const next = obj[idx];
+		const updated = rest.length === 0 ? value : setAtPath(next, rest, value);
+		if (Object.is(next, updated)) return obj;
+		const copy = obj.slice();
+		copy[idx] = updated;
+		return copy;
+	}
+	if (obj !== null && typeof obj === "object") {
+		const record = obj;
+		const key = String(head);
+		const next = record[key];
+		const updated = rest.length === 0 ? value : setAtPath(next, rest, value);
+		if (rest.length === 0) {
+			if (Object.is(next, value)) return obj;
+		} else if (Object.is(next, updated)) return obj;
+		return {
+			...record,
+			[key]: updated
+		};
+	}
+	return rest.length === 0 ? value : setAtPath(void 0, rest, value);
+}
+function toPathSegment(prop) {
+	if (typeof prop === "symbol") return null;
+	if (prop === "length") return null;
+	if (/^\d+$/.test(prop)) return Number(prop);
+	return prop;
+}
+function trackSelectPath(rootState, selector) {
+	const path = [];
+	const track = (value) => {
+		if (value === null || typeof value !== "object" && typeof value !== "function") return value;
+		return new Proxy(value, { get(target, prop, receiver) {
+			const seg = toPathSegment(prop);
+			if (seg != null) path.push(seg);
+			const next = Reflect.get(target, prop, receiver);
+			return seg != null && next !== null && typeof next === "object" ? track(next) : next;
+		} });
+	};
+	selector(track(rootState));
+	return path;
+}
+function createSelectAccessor(root, selector) {
+	const path = trackSelectPath(root(), selector);
+	const selected = selector(root());
+	const resolved = path.length === 0 ? root() : getAtPath(root(), path);
+	if (!Object.is(selected, resolved)) {
+		const msg = "select(): selector must only traverse nested properties or array indexes — derived or transformed values are not supported.";
+		if (__DEV__) warn(msg);
+		throw new Error(msg);
+	}
+	if (__DEV__ && path.length === 0) warn("select(): selector did not traverse nested state — bind writes may replace the entire root value.");
+	return markSignalAccessor((...args) => {
+		if (args.length === 0) return path.length === 0 ? selector(root()) : getAtPath(root(), path);
+		const next = path.length === 0 ? args[0] : setAtPath(root(), path, args[0]);
+		if (!Object.is(root(), next)) root(next);
+	});
 }
 function ilhaRaw(value) {
 	return {
@@ -229,6 +381,19 @@ function normalizeJsxChildren(props, children) {
 	const propChildren = props && "children" in props ? props.children : void 0;
 	return (children.length > 0 ? children : propChildren === void 0 ? [] : [propChildren]).flat(1);
 }
+function normalizeJsxSlotKey(raw) {
+	const key = String(raw);
+	if (key.trim().length === 0) throw new Error("jsx key requires a non-empty string.");
+	if (key.includes(":")) throw new Error(`jsx key cannot contain the slot separator ":" (got "${key}").`);
+	return key;
+}
+/** React-style `key` (props or 3rd jsx arg) on island components → `k:{key}` slot ids. */
+function extractJsxSlotKey(props, keyArg) {
+	const fromProps = props?.key;
+	const raw = keyArg ?? (typeof fromProps === "string" || typeof fromProps === "number" ? fromProps : void 0);
+	if (raw == null) return void 0;
+	return normalizeJsxSlotKey(raw);
+}
 function serializeStyle(value) {
 	return Object.entries(value).map(([k, v]) => {
 		if (!SAFE_CSS_PROP_RE.test(k)) return "";
@@ -281,17 +446,25 @@ function renderJsxElement(type, props, children) {
 	} else if (children.length > 0 && __DEV__) warn(`Void element <${type}> should not have children. They will be ignored.`);
 	return ilhaHtml(chunks, ...values);
 }
-function ilhaJsx(type, props, ...children) {
-	const normalizedChildren = normalizeJsxChildren(props, children);
+function ilhaJsx(type, props, maybeKey, ...restChildren) {
+	const hasKeyArg = typeof maybeKey === "string" || typeof maybeKey === "number";
+	const keyFromArg = hasKeyArg ? maybeKey : void 0;
+	const normalizedChildren = normalizeJsxChildren(props, hasKeyArg || maybeKey === void 0 ? restChildren : [maybeKey, ...restChildren]);
 	if (typeof type === "function") {
+		const slotKey = extractJsxSlotKey(props, typeof keyFromArg === "string" || typeof keyFromArg === "number" ? keyFromArg : void 0);
 		const componentProps = {
 			...props ?? {},
 			...normalizedChildren.length > 0 ? { children: normalizedChildren } : {}
 		};
 		delete componentProps["key"];
 		const out = type(Object.keys(componentProps).length ? componentProps : {});
+		if (isIslandCall(out)) {
+			if (slotKey !== void 0) out.key = slotKey;
+			return ilhaHtml`${out}`;
+		}
+		if (isRawHtml(out)) return out;
+		if (typeof out === "string" && isIsland(type)) return ilhaRaw(emitIslandSlot(type, componentProps, slotKey));
 		if (typeof out === "string") return ilhaHtml`${out}`;
-		if (out && typeof out === "object" && RAW in out) return out;
 		return ilhaHtml`${out}`;
 	}
 	return renderJsxElement(type, props, normalizedChildren);
@@ -300,13 +473,13 @@ function ilhaFragment(props, ...children) {
 	const normalizedChildren = normalizeJsxChildren(props, children);
 	return ilhaHtml(["", ...normalizedChildren.map(() => "")], ...normalizedChildren);
 }
-function ilhaJsxDEV(type, props) {
-	return ilhaJsx(type, props);
+function ilhaJsxDEV(type, props, maybeKey, _source, _self) {
+	return ilhaJsx(type, props, maybeKey);
 }
 function interpolateValue(v) {
 	if (v == null || v === true || v === false) return "";
 	if (Array.isArray(v)) return v.map(interpolateValue).join("");
-	if (typeof v === "object" && RAW in v) return v.value;
+	if (isRawHtml(v)) return v.value;
 	if (isIslandCall(v)) {
 		const call = typeof v === "function" ? v() : v;
 		return emitIslandSlot(call.island, call.props, call.key);
@@ -432,8 +605,15 @@ function ilhaHtml(strings, ...values) {
 		value: dedentString(result)
 	};
 }
+/** Duck-type RawHtml — works across duplicate `ilha` bundles (distinct RAW symbols). */
+function isRawHtml(v) {
+	if (typeof v !== "object" || v === null || !("value" in v)) return false;
+	if (typeof v.value !== "string") return false;
+	if (RAW in v) return true;
+	return Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.raw");
+}
 function unwrapHtml(v) {
-	return typeof v === "object" && RAW in v ? v.value : v;
+	return isRawHtml(v) ? v.value : v;
 }
 const contextRegistry = /* @__PURE__ */ new Map();
 function ilhaContext(key, initial) {
@@ -1161,10 +1341,38 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				}
 			}
 			const mountedSlots = /* @__PURE__ */ new Map();
+			const leavingSlots = /* @__PURE__ */ new Map();
+			function teardownMountedSlot(id, entry) {
+				mountedSlots.delete(id);
+				const token = Symbol();
+				const result = entry.unmount();
+				const remove = (stub) => {
+					const leaving = leavingSlots.get(id);
+					if (!leaving || leaving.token !== token) return;
+					leaving.el.remove();
+					stub?.remove();
+					leavingSlots.delete(id);
+				};
+				if (result instanceof Promise) {
+					let stub;
+					if (entry.el.isConnected) {
+						stub = document.createElement("div");
+						stub.setAttribute(SLOT_ATTR, id);
+						entry.el.replaceWith(stub);
+					}
+					leavingSlots.set(id, {
+						el: entry.el,
+						token
+					});
+					result.finally(() => remove(stub));
+				} else entry.el.remove();
+			}
 			function findSlot(id) {
+				const leavingEls = new Set([...leavingSlots.values()].map((l) => l.el));
 				const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id.replace(/["\\]/g, "\\$&");
 				const candidates = host.querySelectorAll(`[${SLOT_ATTR}="${escaped}"]`);
 				for (const candidate of candidates) {
+					if (leavingEls.has(candidate)) continue;
 					let el = candidate;
 					while (el && el !== host) {
 						if (el.hasAttribute("data-ilha")) break;
@@ -1175,10 +1383,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				return null;
 			}
 			function mountSlots(slotMap) {
-				for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) {
-					entry.unmount();
-					mountedSlots.delete(id);
-				}
+				for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) teardownMountedSlot(id, entry);
 				for (const [id, { island: childIsland, props }] of slotMap) {
 					const existing = mountedSlots.get(id);
 					if (existing) {
@@ -1229,6 +1434,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 								listeners.splice(0, listeners.length, ...listeners.filter((l) => l.entry !== entry));
 							}
 							const eventTarget = event.target instanceof Element ? event.target : listenerTarget;
+							const handlerTarget = entry.selector === "" ? eventTarget : listenerTarget;
 							let handlerSignal;
 							if (entry.abortable) {
 								let entryMap = invocationControllers.get(entry);
@@ -1250,7 +1456,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 									derived,
 									input,
 									host,
-									target: eventTarget,
+									target: handlerTarget,
 									event,
 									signal: handlerSignal
 								});
@@ -1291,11 +1497,11 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				input
 			}), hasExistingContent ? host : void 0);
 			if (!hasExistingContent) host.innerHTML = stylePrefix + initial.html;
-			attachListeners();
 			let stopBindings = applyTemplateBindings(host, initial.binds);
 			cleanups.push(() => stopBindings());
 			mountSlots(initial.slots);
 			cleanups.push(() => mountedSlots.forEach((entry) => entry.unmount()));
+			attachListeners();
 			if (!shouldSkipOnMount) for (const entry of onMounts) {
 				const prevSub = setActiveSub(void 0);
 				let userCleanup;
@@ -1365,19 +1571,34 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				if (!initialized) {
 					initialized = true;
 					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;
 				}
 				detachListeners();
 				stopBindings();
+				const prevMountedCount = mountedSlots.size;
+				const removedSlotIds = [];
 				for (const [id, entry] of mountedSlots) if (!newSlotMap.has(id)) {
-					entry.unmount();
-					mountedSlots.delete(id);
+					teardownMountedSlot(id, entry);
+					removedSlotIds.push(id);
+				}
+				for (const id of removedSlotIds) {
+					if (leavingSlots.has(id)) continue;
+					const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id.replace(/["\\]/g, "\\$&");
+					for (const el of host.querySelectorAll(`[${SLOT_ATTR}="${escaped}"]`)) el.remove();
 				}
 				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;
+					}
 					const stub = document.createElement("div");
 					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);
 				}
@@ -1400,16 +1621,23 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				if (__DEV__ && _mountedHosts) _mountedHosts.delete(host);
 				stopRender();
 				detachListeners();
+				const pending = [];
+				for (const [, entry] of mountedSlots) {
+					const result = entry.unmount();
+					if (result instanceof Promise) pending.push(result);
+				}
 				if (transition?.leave) {
 					const result = transition.leave(host);
-					if (result instanceof Promise) {
-						result.then(() => {
-							for (const c of cleanups) c();
-						}).catch(console.error);
-						return;
-					}
+					if (result instanceof Promise) pending.push(result);
 				}
-				for (const c of cleanups) c();
+				const finish = () => {
+					for (const c of cleanups) c();
+				};
+				if (pending.length > 0) return Promise.all(pending).then(finish).catch((err) => {
+					console.error(err);
+					finish();
+				});
+				finish();
 			};
 			const updateProps = (nextProps) => {
 				if (tornDown) return;
@@ -1569,7 +1797,14 @@ function mountAll(registry, options = {}) {
 			io.disconnect();
 		});
 	} else els.forEach(activateEl);
-	return { unmount: () => unmounts.forEach((u) => u()) };
+	return { unmount: () => {
+		const pending = [];
+		for (const u of unmounts) {
+			const result = u();
+			if (result instanceof Promise) pending.push(result);
+		}
+		if (pending.length > 0) return Promise.all(pending).then(() => {});
+	} };
 }
 const rootBuilder = new IlhaBuilder({
 	schema: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",