ilha 0.4.1 → 0.4.3

package/dist/index.js

@@ -4,6 +4,18 @@ const __DEV__ = typeof process !== "undefined" ? process.env?.["NODE_ENV"] !== "
 function warn(msg) {
 	if (__DEV__) console.warn(`[ilha] ${msg}`);
 }
+function shallowEqualInput(a, b) {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false;
+	const ak = Object.keys(a);
+	const bk = Object.keys(b);
+	if (ak.length !== bk.length) return false;
+	for (const k of ak) {
+		if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+		if (!Object.is(a[k], b[k])) return false;
+	}
+	return true;
+}
 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);
@@ -80,6 +92,7 @@ const RAW = Symbol("ilha.raw");
 const SIGNAL_ACCESSOR = Symbol("ilha.signalAccessor");
 const ISLAND = Symbol("ilha.island");
 const ISLAND_CALL = Symbol("ilha.islandCall");
+const ISLAND_MOUNT_INTERNAL = Symbol("ilha.islandMountInternal");
 const SLOT_ATTR = "data-ilha-slot";
 const PROPS_ATTR = "data-ilha-props";
 const STATE_ATTR = "data-ilha-state";
@@ -262,81 +275,137 @@ function batch(fn) {
 		endBatch();
 	}
 }
-function buildDerivedSignals(entries, state, input, derivedSnapshot) {
+function createDerivedProxy(entries, state, input, derivedSnapshot) {
 	const envelopes = /* @__PURE__ */ new Map();
-	const stops = [];
 	for (const entry of entries) {
-		const env = signal(derivedSnapshot?.[entry.key] ?? {
+		let initialEnvelope;
+		if (derivedSnapshot != null && entry.key in derivedSnapshot) initialEnvelope = { ...derivedSnapshot[entry.key] };
+		else if (!(entry.fn.constructor.name === "AsyncFunction" || entry.fn.constructor.name === "AsyncGeneratorFunction")) {
+			const ac = new AbortController();
+			try {
+				const result = entry.fn({
+					state,
+					input,
+					signal: ac.signal
+				});
+				if (!(result instanceof Promise)) initialEnvelope = {
+					loading: false,
+					value: result,
+					error: void 0
+				};
+				else {
+					initialEnvelope = {
+						loading: true,
+						value: void 0,
+						error: void 0
+					};
+					result.catch(() => {});
+				}
+			} catch (err) {
+				initialEnvelope = {
+					loading: false,
+					value: void 0,
+					error: err instanceof Error ? err : new Error(String(err))
+				};
+			} finally {
+				ac.abort();
+			}
+		} else initialEnvelope = {
 			loading: true,
 			value: void 0,
 			error: void 0
-		});
+		};
+		const env = signal(initialEnvelope);
 		envelopes.set(entry.key, env);
-		let ac = new AbortController();
-		let skipFirst = derivedSnapshot != null && entry.key in derivedSnapshot;
-		const stopEffect = effect(() => {
-			ac.abort();
-			ac = new AbortController();
-			const currentAc = ac;
-			const result = entry.fn({
-				state,
-				input,
-				signal: currentAc.signal
-			});
-			if (skipFirst) {
-				skipFirst = false;
-				if (result instanceof Promise) result.catch(() => {});
-				return;
-			}
-			if (!(result instanceof Promise)) {
+	}
+	const proxy = new Proxy({}, { get(_, key) {
+		const env = envelopes.get(key);
+		if (!env) return {
+			loading: false,
+			value: void 0,
+			error: void 0
+		};
+		return env();
+	} });
+	const setup = () => {
+		const stops = [];
+		for (const entry of entries) {
+			const env = envelopes.get(entry.key);
+			let ac = new AbortController();
+			let skipFirst = derivedSnapshot != null && entry.key in derivedSnapshot;
+			const stopEffect = effect(() => {
+				ac.abort();
+				ac = new AbortController();
+				const currentAc = ac;
+				let result;
+				try {
+					result = entry.fn({
+						state,
+						input,
+						signal: currentAc.signal
+					});
+				} catch (err) {
+					if (skipFirst) {
+						skipFirst = false;
+						return;
+					}
+					const prevSub = setActiveSub(void 0);
+					env({
+						loading: false,
+						value: void 0,
+						error: err instanceof Error ? err : new Error(String(err))
+					});
+					setActiveSub(prevSub);
+					return;
+				}
+				if (skipFirst) {
+					skipFirst = false;
+					if (result instanceof Promise) result.catch(() => {});
+					return;
+				}
+				if (!(result instanceof Promise)) {
+					const prevSub = setActiveSub(void 0);
+					env({
+						loading: false,
+						value: result,
+						error: void 0
+					});
+					setActiveSub(prevSub);
+					return;
+				}
 				const prevSub = setActiveSub(void 0);
 				env({
-					loading: false,
-					value: result,
+					loading: true,
+					value: env().value,
 					error: void 0
 				});
 				setActiveSub(prevSub);
-				return;
-			}
-			const prevSub = setActiveSub(void 0);
-			env({
-				loading: true,
-				value: env().value,
-				error: void 0
-			});
-			setActiveSub(prevSub);
-			result.then((value) => {
-				if (currentAc.signal.aborted) return;
-				env({
-					loading: false,
-					value,
-					error: void 0
-				});
-			}).catch((err) => {
-				if (currentAc.signal.aborted) return;
-				env({
-					loading: false,
-					value: void 0,
-					error: err instanceof Error ? err : new Error(String(err))
+				result.then((value) => {
+					if (currentAc.signal.aborted) return;
+					env({
+						loading: false,
+						value,
+						error: void 0
+					});
+				}).catch((err) => {
+					if (currentAc.signal.aborted) return;
+					env({
+						loading: false,
+						value: void 0,
+						error: err instanceof Error ? err : new Error(String(err))
+					});
 				});
 			});
-		});
-		stops.push(() => {
-			stopEffect();
-			ac.abort();
-		});
-	}
+			stops.push(() => {
+				stopEffect();
+				ac.abort();
+			});
+		}
+		return () => stops.forEach((s) => s());
+	};
 	return {
-		proxy: new Proxy({}, { get(_, key) {
-			const env = envelopes.get(key);
-			if (!env) return {
-				loading: false,
-				value: void 0,
-				error: void 0
-			};
-			return env();
-		} }),
-		stop: () => stops.forEach((s) => s())
+		proxy,
+		setup
 	};
 }
 function resolveBindConfig(el) {
@@ -685,11 +754,18 @@ var IlhaBuilder = class IlhaBuilder {
 			});
 		}
 		function mountIsland(host, props) {
+			return mountIslandInternal(host, props).unmount;
+		}
+		function mountIslandInternal(host, props) {
+			const noop = {
+				unmount: () => {},
+				updateProps: () => {}
+			};
 			if (__DEV__ && _mountedHosts) {
 				if (_mountedHosts.has(host)) {
 					warn(`mount(): this element is already mounted. Call the previous unmount() first to avoid memory leaks and duplicate event listeners.
 Element: ${host.outerHTML.slice(0, 120)}`);
-					return () => {};
+					return noop;
 				}
 				_mountedHosts.add(host);
 			}
@@ -701,7 +777,31 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 					warn("Failed to parse data-ilha-props — invalid JSON, falling back to empty props.");
 				}
 			}
-			const input = resolveInput(props);
+			const inputSignal = signal(resolveInput(props));
+			const input = new Proxy({}, {
+				get(_t, key) {
+					return inputSignal()[key];
+				},
+				has(_t, key) {
+					return key in inputSignal();
+				},
+				ownKeys() {
+					const prevSub = setActiveSub(void 0);
+					try {
+						return Reflect.ownKeys(inputSignal());
+					} finally {
+						setActiveSub(prevSub);
+					}
+				},
+				getOwnPropertyDescriptor(_t, key) {
+					const prevSub = setActiveSub(void 0);
+					try {
+						return Reflect.getOwnPropertyDescriptor(inputSignal(), key);
+					} finally {
+						setActiveSub(prevSub);
+					}
+				}
+			});
 			let snapshotRaw;
 			const rawState = host.getAttribute(STATE_ATTR);
 			if (rawState) try {
@@ -730,8 +830,8 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				const result = transition.enter(host);
 				if (result instanceof Promise) result.catch(console.error);
 			}
-			const { proxy: derived, stop: stopDerived } = buildDerivedSignals(deriveds, state, input, derivedSnapshot);
-			cleanups.push(stopDerived);
+			const { proxy: derived, setup: setupDerived } = createDerivedProxy(deriveds, state, input, derivedSnapshot);
+			let stopDerived = () => {};
 			function reportError(err, source) {
 				const error = err instanceof Error ? err : new Error(String(err));
 				if (onErrors.length === 0) {
@@ -771,7 +871,11 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 					mountedSlots.delete(id);
 				}
 				for (const [id, { island: childIsland, props }] of slotMap) {
-					if (mountedSlots.has(id)) continue;
+					const existing = mountedSlots.get(id);
+					if (existing) {
+						existing.updateProps(props);
+						continue;
+					}
 					const slotEl = findSlot(id);
 					if (!slotEl) continue;
 					let slotProps = props;
@@ -784,15 +888,19 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 						}
 					}
 					const prevSub = setActiveSub(void 0);
-					let unmount;
+					let handle;
 					try {
-						unmount = childIsland.mount(slotEl, slotProps);
+						const internal = childIsland[ISLAND_MOUNT_INTERNAL];
+						handle = internal ? internal(slotEl, slotProps) : {
+							unmount: childIsland.mount(slotEl, slotProps),
+							updateProps: () => {}
+						};
 					} finally {
 						setActiveSub(prevSub);
 					}
 					mountedSlots.set(id, {
 						el: slotEl,
-						unmount
+						...handle
 					});
 				}
 			}
@@ -895,7 +1003,49 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				}
 				if (userCleanup) cleanups.push(userCleanup);
 			}
+			for (const entry of effects) {
+				let userCleanup;
+				let runController = null;
+				const stopEffect = effect(() => {
+					if (userCleanup) {
+						try {
+							userCleanup();
+						} catch (err) {
+							reportError(err, "effect");
+						}
+						userCleanup = void 0;
+					}
+					if (runController) runController.abort();
+					runController = new AbortController();
+					const runSignal = anySignal([unmountController.signal, runController.signal]);
+					startBatch();
+					try {
+						userCleanup = entry.fn({
+							state,
+							input,
+							host,
+							signal: runSignal
+						});
+					} catch (err) {
+						reportError(err, "effect");
+					} finally {
+						endBatch();
+					}
+				});
+				cleanups.push(() => {
+					stopEffect();
+					if (userCleanup) try {
+						userCleanup();
+					} catch (err) {
+						reportError(err, "effect");
+					}
+					if (runController) runController.abort();
+				});
+			}
+			stopDerived = setupDerived();
+			cleanups.push(stopDerived);
 			let initialized = false;
+			const initialRenderedHtml = initial.html;
 			const stopRender = effect(() => {
 				const { html: rendered, slots: newSlotMap } = renderWithCtx(() => fn({
 					state,
@@ -905,7 +1055,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				const html = stylePrefix + rendered;
 				if (!initialized) {
 					initialized = true;
-					return;
+					if (rendered === initialRenderedHtml) return;
 				}
 				detachListeners();
 				stopBindings();
@@ -936,47 +1086,8 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 			});
 			cleanups.push(stopRender);
 			cleanups.push(detachListeners);
-			for (const entry of effects) {
-				let userCleanup;
-				let runController = null;
-				const stopEffect = effect(() => {
-					if (userCleanup) {
-						try {
-							userCleanup();
-						} catch (err) {
-							reportError(err, "effect");
-						}
-						userCleanup = void 0;
-					}
-					if (runController) runController.abort();
-					runController = new AbortController();
-					const runSignal = anySignal([unmountController.signal, runController.signal]);
-					startBatch();
-					try {
-						userCleanup = entry.fn({
-							state,
-							input,
-							host,
-							signal: runSignal
-						});
-					} catch (err) {
-						reportError(err, "effect");
-					} finally {
-						endBatch();
-					}
-				});
-				cleanups.push(() => {
-					stopEffect();
-					if (userCleanup) try {
-						userCleanup();
-					} catch (err) {
-						reportError(err, "effect");
-					}
-					if (runController) runController.abort();
-				});
-			}
 			let tornDown = false;
-			return () => {
+			const unmount = () => {
 				if (tornDown) return;
 				tornDown = true;
 				if (__DEV__ && _mountedHosts) _mountedHosts.delete(host);
@@ -989,6 +1100,16 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				}
 				cleanups.forEach((c) => c());
 			};
+			const updateProps = (nextProps) => {
+				if (tornDown) return;
+				const next = resolveInput(nextProps);
+				if (shallowEqualInput(inputSignal(), next)) return;
+				inputSignal(next);
+			};
+			return {
+				unmount,
+				updateProps
+			};
 		}
 		/**
 		* Dual-mode island invocation:
@@ -1012,6 +1133,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 		};
 		island.toString = (props) => renderToString(props, true);
 		island.mount = (host, props) => mountIsland(host, props);
+		island[ISLAND_MOUNT_INTERNAL] = (host, props) => mountIslandInternal(host, props);
 		island.key = (key) => {
 			if (typeof key !== "string" || key.trim().length === 0) throw new Error("island.key() requires a non-empty string.");
 			if (key.includes(":")) throw new Error(`island.key() key cannot contain the slot separator ":" (got "${key}").`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
@@ -23,7 +23,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "alien-signals": "3.1.2"
+    "alien-signals": "3.2.0"
   },
   "devDependencies": {
     "zod": "^4.4.3"