@sigil-dev/runtime 0.9.7 → 0.9.11

package/index.test.ts

@@ -805,6 +805,28 @@ describe("setProp", () => {
 		setProp(input, "value", "hello");
 		expect(input.value).toBe("hello");
 	});
+
+	test("routes getter-only HTML properties through setAttribute", () => {
+		const input = claim([], "input") as HTMLInputElement;
+		expect(() => setProp(input, "list", "people")).not.toThrow();
+		expect(input.getAttribute("list")).toBe("people");
+		setProp(input, "list", null);
+		expect(input.hasAttribute("list")).toBe(false);
+	});
+
+	test("routes unknown HTML props through setAttribute", () => {
+		const div = claim([], "div");
+		setProp(div, "popovertarget", "menu");
+		expect(div.getAttribute("popovertarget")).toBe("menu");
+	});
+
+	test("keeps IDL semantics for writable props like checked", () => {
+		const input = claim([], "input") as HTMLInputElement;
+		input.type = "checkbox";
+		setProp(input, "checked", true);
+		expect(input.checked).toBe(true);
+		expect(input.hasAttribute("checked")).toBe(false);
+	});
 });
 
 describe("claimText", () => {
@@ -1166,24 +1188,23 @@ describe("hydrateKeyedList", () => {
 		const pool: ChildNode[] = [open, li1, li2, close];
 		const items = [{ id: "a" }, { id: "b" }];
 
+		// compiled row bodies claim their element from the pool
 		const result = hydrateKeyedList(
 			pool,
 			items,
 			(item) => item.id,
-			(item) => {
-				const li = document.createElement("li");
-				li.textContent = item.id;
-				return li;
-			},
+			() => claim(pool, "li"),
 		);
 
 		expect(result.anchor).toBe(open);
 		expect(result.keyMap.size).toBe(2);
 		expect(result.keyMap.get("a")).toBe(li1);
 		expect(result.keyMap.get("b")).toBe(li2);
-		// Pool lost anchor (g) via claimComment.
-		// li nodes + /g remain in pool array (walk removes from DOM only)
-		expect(pool.length).toBe(3); // li1, li2, /g still in pool array
+		// the list's whole segment is consumed: a row created later can never
+		// claim a node that is already in use
+		expect(pool.length).toBe(0);
+		expect(close.parentNode).toBeNull();
+		expect(Array.from(parent.children)).toEqual([li1, li2]);
 	});
 
 	test("handles SSR/client order mismatch by reconciling", () => {
@@ -1209,11 +1230,7 @@ describe("hydrateKeyedList", () => {
 			pool,
 			items,
 			(item) => item.id,
-			(item) => {
-				const li = document.createElement("li");
-				li.textContent = item.id;
-				return li;
-			},
+			() => claim(pool, "li"),
 		);
 
 		// keyMap should have the claimed nodes (mapped by SSR position)
@@ -1885,3 +1902,53 @@ describe("transition directives (runtime)", () => {
 		expect(el.parentNode).toBeNull();
 	});
 });
+
+// An exported `$store` is a signal getter; files that import it read
+// `store.key` directly because the compiler only rewrites reads in the
+// declaring file.
+describe("object signal read from another module", () => {
+	test("property reads and writes reach the reactive object", () => {
+		const store = createSignal({ user: "a", n: 1 }) as unknown as {
+			user: string;
+			n: number;
+		};
+		expect(store.user).toBe("a");
+		store.n = 2;
+		expect((store as unknown as () => { n: number })().n).toBe(2);
+		expect(Object.keys(store)).toEqual(["user", "n"]);
+		expect("user" in store).toBe(true);
+		expect({ ...store }).toEqual({ user: "a", n: 2 });
+	});
+
+	test("reads are tracked inside effects", async () => {
+		const store = createSignal({ n: 1 }) as unknown as { n: number };
+		const seen: number[] = [];
+		createEffect(() => {
+			seen.push(store.n);
+		});
+		store.n = 5;
+		await tick();
+		expect(seen).toEqual([1, 5]);
+	});
+
+	test("arrays work through the getter", () => {
+		const list = createSignal([1, 2, 3]) as unknown as number[];
+		expect(list.length).toBe(3);
+		expect(list.map((x) => x * 2)).toEqual([2, 4, 6]);
+		expect([...list]).toEqual([1, 2, 3]);
+		list.push(4);
+		expect(list.length).toBe(4);
+	});
+
+	test("snapshot unwraps the getter", () => {
+		const store = createSignal({ a: { b: 1 } });
+		expect(snapshot(store as unknown as object)).toEqual({ a: { b: 1 } });
+	});
+
+	test("set and peek keep their signal meaning", () => {
+		const store = createSignal({ a: 1 });
+		store.set({ a: 2 });
+		expect(store().a).toBe(2);
+		expect(store.peek()).toEqual({ a: 2 });
+	});
+});

package/index.ts

@@ -220,6 +220,8 @@ export function tick(): Promise<void> {
 	return new Promise((resolve) => queueMicrotask(resolve));
 }
 
+const primitiveSignals = new WeakSet<object>();
+
 function createPrimitiveSignal<T>(initial: T): Signal<T> {
 	const subs = new Set<() => void>();
 	let value = initial;
@@ -240,10 +242,27 @@ function createPrimitiveSignal<T>(initial: T): Signal<T> {
 	};
 
 	getter.peek = () => value;
+	primitiveSignals.add(getter);
 
 	return getter;
 }
 
+/**
+ * The value behind a store imported from another module. The compiler wraps
+ * bare reads of project imports in this: an exported primitive `$store`
+ * arrives as its signal getter and is called (tracked inside effects);
+ * anything else, including object stores and plain functions, is returned
+ * as is.
+ */
+export function readStore<T>(value: T): T {
+	return typeof value === "function" && primitiveSignals.has(value)
+		? (value as () => T)()
+		: value;
+}
+
+// object signal getter → its reactive object
+const storeGetters = new WeakMap<object, object>();
+
 export function createSignal<T>(initial: T): Signal<T> {
 	if (typeof initial === "object" && initial !== null) {
 		const proxy = createReactiveProxy(initial);
@@ -256,7 +275,27 @@ export function createSignal<T>(initial: T): Signal<T> {
 		};
 		getter.set = (next: T) => (proxy as any).set(next);
 		getter.peek = () => initial;
-		return getter;
+		// The compiler turns reads of a signal into calls only in the file that
+		// declares it. An exported `$store` reaches other modules as this
+		// getter, and they read `store.key` straight off it; forward those
+		// reads and writes to the reactive object so they see real values
+		// (tracked inside effects, like any proxy read).
+		const forwarded = new Proxy(getter, {
+			get: (fn, key) =>
+				key === "set" || key === "peek"
+					? Reflect.get(fn, key)
+					: Reflect.get(proxy, key),
+			set: (_fn, key, value) => Reflect.set(proxy, key, value),
+			has: (_fn, key) => key in proxy,
+			deleteProperty: (_fn, key) => Reflect.deleteProperty(proxy, key),
+			ownKeys: () => Reflect.ownKeys(proxy),
+			getOwnPropertyDescriptor: (_fn, key) => {
+				const d = Reflect.getOwnPropertyDescriptor(proxy, key);
+				return d && { ...d, configurable: true };
+			},
+		});
+		storeGetters.set(forwarded, proxy);
+		return forwarded as unknown as Signal<T>;
 	}
 
 	return createPrimitiveSignal(initial);
@@ -269,6 +308,8 @@ export function createRawSignal<T>(initial: T): Signal<T> {
 
 // A2: $state.snapshot — deep un-proxy a signal value
 function deepUnproxy<T>(value: T): T {
+	if (typeof value === "function" && storeGetters.has(value))
+		return deepUnproxy(storeGetters.get(value) as T);
 	if (typeof value !== "object" || value === null) return value;
 	const raw = proxyToTarget.get(value as object);
 	if (!raw) return value; // not a proxy, return as-is
@@ -594,6 +635,18 @@ export function reconcile<T>(
  */
 const SVG_NS = "http://www.w3.org/2000/svg";
 
+const claimedNodes = new WeakSet<Node>();
+
+/**
+ * True when `claim()` took this element from server HTML rather than creating
+ * it. Hydration skips the element's static attributes then: the server
+ * already rendered them, and writing them again would wipe anything a page
+ * script changed before hydration ran (an added class, a data-* flag).
+ */
+export function isClaimed(el: Node): boolean {
+	return claimedNodes.has(el);
+}
+
 export function claim(
 	nodes: ChildNode[],
 	tag: string,
@@ -617,6 +670,7 @@ export function claim(
 				continue;
 			}
 			nodes.splice(i, 1);
+			claimedNodes.add(node);
 			return node;
 		}
 	}
@@ -629,27 +683,188 @@ export function claim(
 }
 
 /**
- * Write a JSX prop to an element. On HTML elements this is the classic blind
- * `el[name] = value` (preserves IDL semantics for value/checked/etc). On
- * SVG-namespace elements it goes through setAttribute instead — IDL property
- * assignment throws on real SVG elements (`svg.width = 15` hits a
- * getter-only property and aborts the whole render).
+ * Write a JSX prop to an element. On HTML elements this is `el[name] = value`
+ * (preserves IDL semantics for value/checked/etc) whenever the element has a
+ * writable property of that name. Names with no writable property go through
+ * setAttribute instead, like SSR does: some IDL attributes are getter-only
+ * (`input.list`, `input.form`, `button.form`), and assigning them throws and
+ * aborts the whole render; unknown names would otherwise land as a bare JS
+ * expando the DOM never sees. On SVG-namespace elements everything is
+ * attribute-routed — IDL property assignment throws there too (`svg.width`).
  */
-const SVG_ATTR_FIX: Record<string, string> = {
+// Never attribute-routed, even inside SVG.
+const SVG_PROP_ONLY = new Set(["textContent", "innerHTML", "outerHTML"]);
+
+// Per-prototype cache of "can `el[name] = v` be assigned?".
+const writableCache = new WeakMap<object, Map<string, boolean>>();
+
+function isWritableProp(el: Element, name: string): boolean {
+	const proto = Object.getPrototypeOf(el) as object;
+	let cache = writableCache.get(proto);
+	if (!cache) writableCache.set(proto, (cache = new Map()));
+	let writable = cache.get(name);
+	if (writable === undefined) {
+		writable = false;
+		for (let o: object | null = proto; o; o = Object.getPrototypeOf(o)) {
+			const d = Object.getOwnPropertyDescriptor(o, name);
+			if (d) {
+				writable = !!(d.set || d.writable);
+				break;
+			}
+		}
+		cache.set(name, writable);
+	}
+	// Own properties (expandos set earlier) are always assignable.
+	return writable || Object.hasOwn(el, name);
+}
+
+// JSX prop name → attribute name, where they differ.
+const PROP_ATTR: Record<string, string> = {
 	className: "class",
 	htmlFor: "for",
 };
 
-// Never attribute-routed, even inside SVG.
-const SVG_PROP_ONLY = new Set(["textContent", "innerHTML", "outerHTML"]);
+/**
+ * null/undefined remove the attribute. Booleans follow HTML for plain names
+ * (true → present, false → absent) but are spelled out for dashed ones,
+ * because `aria-hidden="true"` and `data-open="false"` carry their value.
+ */
+function setAttr(el: Element, attr: string, value: unknown): void {
+	if (value == null) el.removeAttribute(attr);
+	else if (typeof value === "boolean" && !attr.includes("-")) {
+		if (value) el.setAttribute(attr, "");
+		else el.removeAttribute(attr);
+	} else el.setAttribute(attr, String(value));
+}
+
+// `el.href = undefined` would store the string "undefined": clear instead.
+function clearProp(el: Element, name: string): void {
+	const rec = el as unknown as Record<string, unknown>;
+	if (typeof rec[name] === "boolean") rec[name] = false;
+	else if (
+		name === "value" ||
+		name === "innerHTML" ||
+		name === "textContent" ||
+		name === "innerText"
+	)
+		rec[name] = "";
+	else el.removeAttribute(PROP_ATTR[name] ?? name.toLowerCase());
+}
+
+// CSS properties that take plain numbers. Every other number gets "px",
+// the same list React uses. Keep in sync with the SSR copy in the compiler.
+const UNITLESS = new Set([
+	"animation-iteration-count",
+	"aspect-ratio",
+	"border-image-outset",
+	"border-image-slice",
+	"border-image-width",
+	"column-count",
+	"columns",
+	"fill-opacity",
+	"flex",
+	"flex-grow",
+	"flex-shrink",
+	"flood-opacity",
+	"font-weight",
+	"grid-area",
+	"grid-column",
+	"grid-column-end",
+	"grid-column-start",
+	"grid-row",
+	"grid-row-end",
+	"grid-row-start",
+	"line-clamp",
+	"line-height",
+	"opacity",
+	"order",
+	"orphans",
+	"scale",
+	"stop-opacity",
+	"stroke-dasharray",
+	"stroke-dashoffset",
+	"stroke-miterlimit",
+	"stroke-opacity",
+	"stroke-width",
+	"tab-size",
+	"widows",
+	"z-index",
+	"zoom",
+]);
+
+/** fontSize → font-size, WebkitMask → -webkit-mask, --accent stays. */
+export function cssName(key: string): string {
+	if (key.startsWith("--")) return key;
+	const kebab = key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+	return kebab.startsWith("ms-") ? `-${kebab}` : kebab;
+}
+
+/** One style declaration value: numbers get px unless the property is unitless. */
+export function cssValue(name: string, value: unknown): string | null {
+	if (value == null || value === false || value === "") return null;
+	if (
+		typeof value === "number" &&
+		value !== 0 &&
+		!name.startsWith("--") &&
+		!UNITLESS.has(name)
+	)
+		return `${value}px`;
+	return String(value);
+}
+
+/** `style={{ marginTop: 4 }}` → one declaration; null/false removes it. */
+export function setStyleProp(el: Element, key: string, value: unknown): void {
+	const style = (el as HTMLElement).style;
+	const name = cssName(key);
+	const v = cssValue(name, value);
+	if (v === null) style.removeProperty(name);
+	else style.setProperty(name, v);
+}
+
+function setStyle(el: Element, value: unknown): void {
+	if (value == null || value === false) el.removeAttribute("style");
+	else if (typeof value === "object") {
+		el.removeAttribute("style");
+		for (const [k, v] of Object.entries(value)) setStyleProp(el, k, v);
+	} else el.setAttribute("style", String(value));
+}
 
 export function setProp(el: Element, name: string, value: unknown): void {
-	if (el.namespaceURI === SVG_NS && !SVG_PROP_ONLY.has(name)) {
-		const attr = SVG_ATTR_FIX[name] ?? name;
-		if (value == null || value === false) el.removeAttribute(attr);
-		else el.setAttribute(attr, value === true ? "" : String(value));
+	if (name === "style") setStyle(el, value);
+	else if (el.namespaceURI === SVG_NS) {
+		if (SVG_PROP_ONLY.has(name))
+			(el as unknown as Record<string, unknown>)[name] = value;
+		else setAttr(el, PROP_ATTR[name] ?? name, value);
+	} else if (!name.includes("-") && isWritableProp(el, name)) {
+		if (value == null) clearProp(el, name);
+		else (el as unknown as Record<string, unknown>)[name] = value;
 	} else {
-		(el as unknown as Record<string, unknown>)[name] = value;
+		setAttr(el, PROP_ATTR[name] ?? name, value);
+	}
+}
+
+const SPREAD_PROP: Record<string, string> = {
+	class: "className",
+	for: "htmlFor",
+};
+
+/**
+ * `<div {...props}>`: listeners for on* functions, everything else through
+ * setProp. `attrs: false` attaches only the listeners (hydrating a claimed
+ * element, whose attributes are already in the server HTML).
+ */
+export function spread(
+	el: Element,
+	props: Record<string, unknown> | null | undefined,
+	attrs = true,
+): void {
+	if (!props) return;
+	for (const [key, value] of Object.entries(props)) {
+		if (/^on[A-Z]/.test(key) && typeof value === "function") {
+			el.addEventListener(key.slice(2).toLowerCase(), value as EventListener);
+		} else if (attrs && key !== "children" && key !== "key") {
+			setProp(el, SPREAD_PROP[key] ?? key, value);
+		}
 	}
 }
 
@@ -694,11 +909,16 @@ export function claimComment(
 }
 
 /**
- * Hydrate a keyed list: claim the comment anchor, walk its sibling elements
- * to build a keyMap, then reconcile with signal data.
+ * Hydrate a keyed list. SSR renders the rows as flat siblings between a
+ * `<!--g-->` / `<!--/g-->` pair.
  *
- * SSR renders items as flat siblings. Hydration claims them by position,
- * builds the keyMap, removes from DOM, then reconcile re-inserts in order.
+ * Each row is hydrated by running its own row body (`createNode`) against
+ * that row's server markup, so listeners, effects and bindings inside rows
+ * attach to the existing nodes. While the rows hydrate, the pool holds only
+ * the list's own segment: a row the server didn't render must create a fresh
+ * node, never claim some element that happens to follow the list. Afterwards
+ * the segment is gone from the pool for good, so rows created by later
+ * updates can't claim a node that is already in use.
  */
 export function hydrateKeyedList<T>(
 	nodesVar: ChildNode[],
@@ -707,38 +927,42 @@ export function hydrateKeyedList<T>(
 	createNode: (item: T) => Node,
 	parent?: Element,
 ): { anchor: Comment; keyMap: Map<unknown, Node> } {
-	// 1. Claim the <!--g--> opening delimiter as anchor
-	const anchor = claimComment(nodesVar, "g", parent);
-
-	// 2. Walk siblings after anchor, collect elements up to <!--/g-->, build keyMap
 	const keyMap = new Map<unknown, Node>();
-	const anchorParent = anchor.parentNode;
-	if (anchorParent && signalItems.length > 0) {
-		const claimed: Element[] = [];
-		let next = anchor.nextSibling;
-		while (next) {
-			const current = next;
-			next = next.nextSibling;
-			// Stop at closing <!--/g--> delimiter and consume it
-			if (current instanceof Comment && current.data === "/g") {
-				current.remove();
-				break;
-			}
-			if (current instanceof Element) {
-				current.remove();
-				claimed.push(current);
-			}
-		}
-		// Map claimed elements to keys by index
-		for (let i = 0; i < claimed.length && i < signalItems.length; i++) {
-			//@ts-expect-error i is always in bounds
-			const key = getKey(signalItems[i], i);
-			//@ts-expect-error i is always in bounds
-			keyMap.set(key, claimed[i]);
-		}
+	const isMarker = (n: ChildNode, data: string) =>
+		n instanceof Comment && n.data === data;
+	const start = nodesVar.findIndex((n) => isMarker(n, "g"));
+
+	if (start === -1) {
+		// no server markup (client navigation): build the list fresh
+		const anchor = claimComment(nodesVar, "g", parent);
+		reconcile(anchor, keyMap, signalItems, getKey, createNode);
+		return { anchor, keyMap };
+	}
+
+	const anchor = nodesVar[start] as Comment;
+	let end = nodesVar.findIndex((n, i) => i > start && isMarker(n, "/g"));
+	if (end === -1) end = nodesVar.length;
+	const all = nodesVar.splice(
+		0,
+		nodesVar.length,
+		...nodesVar.slice(start + 1, end),
+	);
+	for (let i = 0; i < signalItems.length; i++) {
+		const item = signalItems[i] as T;
+		const node = createNode(item);
+		lastItemFor.set(node, item);
+		keyMap.set(getKey(item, i), node);
 	}
+	// rows the server rendered but the client has no item for
+	for (const leftover of nodesVar) leftover.remove();
+	(all[end] as ChildNode | undefined)?.remove();
+	nodesVar.splice(
+		0,
+		nodesVar.length,
+		...all.slice(0, start),
+		...all.slice(end + 1),
+	);
 
-	// 3. Reconcile — keyMap is pre-populated with claimed nodes
 	reconcile(anchor, keyMap, signalItems, getKey, createNode);
 	return { anchor, keyMap };
 }
@@ -792,11 +1016,14 @@ export function hydrateSlot(
 		insert(parent, value);
 		return;
 	}
+	// Slots nest (a component's {children} can hold a child's own slot), so
+	// match the closing marker by depth rather than taking the first one.
 	let close = open + 1;
-	while (close < nodes.length) {
+	for (let depth = 0; close < nodes.length; close++) {
 		const node = nodes[close];
-		if (node instanceof Comment && node.data === "/g") break;
-		close++;
+		if (!(node instanceof Comment)) continue;
+		if (node.data === "g") depth++;
+		else if (node.data === "/g" && depth-- === 0) break;
 	}
 	const inner = nodes.slice(open + 1, close);
 	// Drop the whole run so later siblings can't claim slot content.
@@ -809,6 +1036,112 @@ export function hydrateSlot(
 	}
 }
 
+/**
+ * A slot whose value can change: `{title}` or `{children}` in a component,
+ * where the prop may be a string, nodes, or a thunk, and may be a getter over
+ * state (see the compiler's reactive props).
+ *
+ * The first run is exactly `hydrateSlot` (or a fresh insert when there is no
+ * server markup). After that, whenever `read` sees a new value, the content
+ * between the slot's markers is replaced: a text node is updated in place,
+ * anything else is rebuilt. Only `read` is tracked; building the content is
+ * not, so a child component's own reads never re-run the slot.
+ */
+export function liveSlot(
+	nodes: ChildNode[],
+	parent: Element | DocumentFragment,
+	read: () => unknown,
+): void {
+	// Claim the slot's markers now, not in the effect's first run: effects
+	// can be deferred while a page hydrates, and a sibling claimed after this
+	// call must not find these markers still in the pool.
+	let start: Comment | undefined;
+	let end: Comment | undefined;
+	let inner: ChildNode[] | null = null;
+	const open = nodes.findIndex((n) => n instanceof Comment && n.data === "g");
+	if (open !== -1) {
+		let close = open + 1;
+		for (let depth = 0; close < nodes.length; close++) {
+			const node = nodes[close];
+			if (!(node instanceof Comment)) continue;
+			if (node.data === "g") depth++;
+			else if (node.data === "/g" && depth-- === 0) break;
+		}
+		if (close < nodes.length) {
+			start = nodes[open] as Comment;
+			end = nodes[close] as Comment;
+			inner = nodes.slice(open + 1, close);
+			nodes.splice(open, close - open + 1);
+		}
+	}
+	if (!start || !end) {
+		start = document.createComment("g");
+		end = document.createComment("/g");
+		parent.appendChild(start);
+		parent.appendChild(end);
+	}
+	let first = true;
+	createEffect(() => {
+		const value = read();
+		untrack(() => {
+			if (first) {
+				first = false;
+				if (inner) {
+					pushHydrationNodes(inner);
+					try {
+						attachHydrated(parent, value);
+					} finally {
+						popHydrationNodes();
+					}
+				} else {
+					mountBefore(end!, value);
+				}
+				return;
+			}
+			const between: ChildNode[] = [];
+			for (let n = start!.nextSibling; n && n !== end; n = n.nextSibling) {
+				between.push(n);
+			}
+			const primitive =
+				value === null ||
+				value === undefined ||
+				typeof value === "string" ||
+				typeof value === "number" ||
+				typeof value === "boolean";
+			if (primitive && between.length === 1 && between[0] instanceof Text) {
+				between[0].data =
+					value === null || value === undefined || value === false
+						? ""
+						: String(value);
+				return;
+			}
+			for (const n of between) n.remove();
+			mountBefore(end!, value);
+		});
+	});
+}
+
+function mountBefore(marker: ChildNode, value: unknown): void {
+	if (value === null || value === undefined || value === false) return;
+	if (typeof value === "function") {
+		// a deferred child built now has no server markup to adopt
+		pushHydrationNodes([]);
+		try {
+			mountBefore(marker, (value as () => unknown)());
+		} finally {
+			popHydrationNodes();
+		}
+		return;
+	}
+	if (Array.isArray(value)) {
+		for (const item of value) mountBefore(marker, item);
+		return;
+	}
+	marker.before(
+		value instanceof Node ? value : document.createTextNode(String(value)),
+	);
+}
+
 /**
  * Realize a slot value that already has SSR markup in the DOM: run thunks,
  * skip primitives (their text is already rendered), and append only nodes

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/runtime",
   "module": "index.ts",
   "type": "module",
-  "version": "0.9.7",
+  "version": "0.9.11",
   "description": "Runtime for the Sigil framework",
   "private": false,
   "devDependencies": {