@praxisjs/runtime 0.5.5 → 0.7.0

package/src/__tests__/dom.test.ts

@@ -323,4 +323,112 @@ describe("addEvent", () => {
     expect(fn).toHaveBeenCalledOnce();
     scope.dispose();
   });
+
+  it("batches signal writes made by a handler so effects run once", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const a = signal(0);
+    const b = signal(0);
+    const runs = vi.fn();
+    scope.effect(() => {
+      void a();
+      void b();
+      runs();
+    });
+    runs.mockClear();
+    addEvent(el, "click", () => {
+      a.set(1);
+      b.set(1);
+    }, scope);
+    el.dispatchEvent(new MouseEvent("click"));
+    expect(runs).toHaveBeenCalledOnce();
+    scope.dispose();
+  });
+
+  it("calls the handler with the element as this and forwards the event", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    let seenThis: unknown;
+    let seenEvent: Event | undefined;
+    addEvent(el, "click", function (this: unknown, e: Event) {
+      seenThis = this;
+      seenEvent = e;
+    }, scope);
+    const event = new MouseEvent("click");
+    el.dispatchEvent(event);
+    expect(seenThis).toBe(el);
+    expect(seenEvent).toBe(event);
+    scope.dispose();
+  });
+
+  it("registers the same handler on different elements independently", () => {
+    const a = document.createElement("button");
+    const b = document.createElement("button");
+    const scope = new Scope();
+    const fn = vi.fn();
+    addEvent(a, "click", fn, scope);
+    addEvent(b, "click", fn, scope);
+    a.dispatchEvent(new MouseEvent("click"));
+    b.dispatchEvent(new MouseEvent("click"));
+    expect(fn).toHaveBeenCalledTimes(2);
+    scope.dispose();
+    a.dispatchEvent(new MouseEvent("click"));
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe("applyProp writable-property cache", () => {
+  it("assigns prototype properties and keeps doing so for later elements of the same tag", () => {
+    const scope = new Scope();
+    const first = document.createElement("input");
+    const second = document.createElement("input");
+    applyProp(first, "value", "a", scope);
+    applyProp(second, "value", "b", scope);
+    expect(first.value).toBe("a");
+    expect(second.value).toBe("b");
+  });
+
+  it("falls back to attributes for unknown and read-only properties, consistently across elements", () => {
+    const scope = new Scope();
+    for (let i = 0; i < 2; i++) {
+      const input = document.createElement("input");
+      applyProp(input, "data-x", "1", scope);
+      applyProp(input, "list", "dl", scope);
+      expect(input.getAttribute("data-x")).toBe("1");
+      expect(input.getAttribute("list")).toBe("dl");
+    }
+  });
+
+  it("honours own properties: writable ones are assigned, getter-only ones become attributes", () => {
+    const scope = new Scope();
+    const el = document.createElement("div") as unknown as HTMLElement & Record<string, unknown>;
+    el.expando = "old";
+    Object.defineProperty(el, "readonlyThing", { get: () => "fixed", configurable: true });
+    applyProp(el, "expando", "new", scope);
+    applyProp(el, "readonlyThing", "attr", scope);
+    expect(el.expando).toBe("new");
+    expect(el.readonlyThing).toBe("fixed");
+    expect(el.getAttribute("readonlyThing")).toBe("attr");
+  });
+
+  it("an own property with a setter is assigned", () => {
+    const scope = new Scope();
+    const el = document.createElement("div") as unknown as HTMLElement & Record<string, unknown>;
+    let stored = "";
+    Object.defineProperty(el, "custom", { get: () => stored, set: (v: string) => { stored = v; }, configurable: true });
+    applyProp(el, "custom", "set", scope);
+    expect(stored).toBe("set");
+  });
+
+  it("runs ref callbacks untracked so they do not subscribe the enclosing effect", () => {
+    const scope = new Scope();
+    const s = signal(0);
+    const runs = vi.fn();
+    scope.effect(() => {
+      runs();
+      applyProp(document.createElement("div"), "ref", () => { void s(); }, scope);
+    });
+    s.set(1);
+    expect(runs).toHaveBeenCalledOnce();
+  });
 });

package/src/__tests__/hydration.test.ts

@@ -0,0 +1,360 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { isServerRenderPass, setServerRenderPass, signal } from "@praxisjs/core/internal";
+
+import { mountComponent } from "../component";
+import { getCurrentScope } from "../context";
+import { mountElement } from "../element";
+import { reconcile } from "../hydration";
+import { registerReactiveNode } from "../hydration-context";
+import { render, Portal } from "../index";
+import { Scope } from "../scope";
+
+const SSG_MARKER = "data-praxis-ssg";
+
+/** Renders `factory` into a throwaway container and returns the resulting markup, simulating SSR output. */
+function ssrHTML(factory: () => Node | Node[] | null): string {
+  const serverContainer = document.createElement("div");
+  const unmount = render(factory, serverContainer);
+  const html = serverContainer.innerHTML;
+  unmount();
+  return html;
+}
+
+function hydratable(factory: () => Node | Node[] | null): HTMLElement {
+  const container = document.createElement("div");
+  container.innerHTML = ssrHTML(factory);
+  container.setAttribute(SSG_MARKER, "1");
+  document.body.appendChild(container);
+  return container;
+}
+
+afterEach(() => { setServerRenderPass(false); });
+
+describe("render() — hydration (build + reconcile)", () => {
+  it("adopts a flat element instead of recreating it", () => {
+    const factory = () => mountElement("p", { id: "greet", children: "hello" }, new Scope());
+    const container = hydratable(factory);
+    const serverEl = container.querySelector("#greet");
+    expect(serverEl).not.toBeNull();
+
+    render(factory, container);
+
+    expect(container.querySelector("#greet")).toBe(serverEl);
+    document.body.removeChild(container);
+  });
+
+  it("adopts nested elements at every level — the case that broke the ambient-cursor attempt", () => {
+    const factory = () => mountElement("div", {
+      id: "outer",
+      children: mountElement("span", { id: "inner", children: "text" }, new Scope()),
+    }, new Scope());
+    const container = hydratable(factory);
+    const outerBefore = container.querySelector("#outer");
+    const innerBefore = container.querySelector("#inner");
+
+    render(factory, container);
+
+    expect(container.querySelector("#outer")).toBe(outerBefore);
+    expect(container.querySelector("#inner")).toBe(innerBefore);
+    expect(container.textContent).toBe("text");
+    document.body.removeChild(container);
+  });
+
+  it("adopts three levels deep with siblings at each level", () => {
+    const factory = () => mountElement("ul", {
+      id: "list",
+      children: [
+        mountElement("li", { id: "a", children: mountElement("b", { children: "1" }, new Scope()) }, new Scope()),
+        mountElement("li", { id: "b", children: "2" }, new Scope()),
+      ],
+    }, new Scope());
+    const container = hydratable(factory);
+    const before = {
+      list: container.querySelector("#list"),
+      a: container.querySelector("#a"),
+      b: container.querySelector("#b"),
+      bold: container.querySelector("b"),
+    };
+
+    render(factory, container);
+
+    expect(container.querySelector("#list")).toBe(before.list);
+    expect(container.querySelector("#a")).toBe(before.a);
+    expect(container.querySelector("#b")).toBe(before.b);
+    expect(container.querySelector("b")).toBe(before.bold);
+    document.body.removeChild(container);
+  });
+
+  it("wires event listeners onto the adopted (real) element via replay", () => {
+    let clicks = 0;
+    const factory = () => mountElement("div", {
+      children: mountElement("button", { onClick: () => { clicks++; }, children: "Click" }, new Scope()),
+    }, new Scope());
+    const container = hydratable(factory);
+    const buttonBefore = container.querySelector("button");
+
+    render(factory, container);
+
+    expect(container.querySelector("button")).toBe(buttonBefore);
+    container.querySelector("button")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(clicks).toBe(1);
+    document.body.removeChild(container);
+  });
+
+  it("hydrates reactive text and keeps reacting to signal changes afterwards", () => {
+    const text = signal("initial");
+    const factory = () => mountElement("span", { children: () => text() }, new Scope());
+    const container = hydratable(factory);
+    expect(container.textContent).toBe("initial");
+
+    render(factory, container);
+
+    text.set("updated");
+    expect(container.textContent).toBe("updated");
+    text.set("initial");
+    document.body.removeChild(container);
+  });
+
+  it("hydrates a reactive list of elements, keeping real nodes, and stays correct after a later update", () => {
+    const items = signal(["a", "b", "c"]);
+    const factory = () => mountElement("ul", {
+      id: "list",
+      children: () => items().map((item) => mountElement("li", { children: item }, new Scope())),
+    }, new Scope());
+    const container = hydratable(factory);
+    const list = container.querySelector("#list") as HTMLElement;
+    const firstLiBefore = list.querySelector("li");
+    expect(container.textContent).toBe("abc");
+
+    render(factory, container);
+
+    expect(container.querySelector("#list")?.querySelector("li")).toBe(firstLiBefore);
+    expect(container.textContent).toBe("abc");
+
+    // A subsequent reactive update must diff correctly — this only works if
+    // reconcile() rewrote mountReactive's `currentNodes` bookkeeping in place
+    // when it kept the real <li> elements instead of the fresh ones.
+    items.set(["x", "y"]);
+    expect(container.textContent).toBe("xy");
+    items.set(["z"]);
+    expect(container.textContent).toBe("z");
+    document.body.removeChild(container);
+  });
+
+  it("hydrates a component nested inside another component, firing onMount/onUnmount correctly", async () => {
+    class Inner extends StatefulComponent {
+      static __isComponent = true as const;
+      static __isStateless = false;
+      onMount() {}
+      onUnmount() {}
+      render() { return mountElement("em", { children: "inner" }, getCurrentScope()); }
+    }
+    class Outer extends StatefulComponent {
+      static __isComponent = true as const;
+      static __isStateless = false;
+      onMount() {}
+      render() {
+        return mountElement("section", {
+          children: mountComponent(Inner, {}, getCurrentScope()),
+        }, getCurrentScope());
+      }
+    }
+
+    const factory = () => mountComponent(Outer, {}, getCurrentScope());
+    const container = hydratable(factory);
+    const emBefore = container.querySelector("em");
+
+    const outerMount = vi.spyOn(Outer.prototype, "onMount");
+    const innerMount = vi.spyOn(Inner.prototype, "onMount");
+    const innerUnmount = vi.spyOn(Inner.prototype, "onUnmount");
+    const dispose = render(factory, container);
+    await Promise.resolve();
+
+    expect(outerMount).toHaveBeenCalledOnce();
+    expect(innerMount).toHaveBeenCalledOnce();
+    expect(container.querySelector("em")).toBe(emBefore);
+    expect(container.textContent).toBe("inner");
+
+    dispose();
+    expect(innerUnmount).toHaveBeenCalledOnce();
+
+    outerMount.mockRestore();
+    innerMount.mockRestore();
+    innerUnmount.mockRestore();
+    document.body.removeChild(container);
+  });
+
+  it("a tag mismatch at one node replaces only that node — siblings stay adopted", () => {
+    const factory = () => mountElement("div", {
+      id: "wrap",
+      children: [
+        mountElement("p", { id: "before", children: "before" }, new Scope()),
+        mountElement("span", { id: "target", children: "new" }, new Scope()),
+        mountElement("p", { id: "after", children: "after" }, new Scope()),
+      ],
+    }, new Scope());
+
+    const container = document.createElement("div");
+    container.innerHTML =
+      '<div id="wrap"><p id="before">before</p><strong id="target">old</strong><p id="after">after</p></div>';
+    container.setAttribute(SSG_MARKER, "1");
+    document.body.appendChild(container);
+
+    const beforeEl = container.querySelector("#before");
+    const afterEl = container.querySelector("#after");
+
+    render(factory, container);
+
+    expect(container.querySelector("#before")).toBe(beforeEl);
+    expect(container.querySelector("#after")).toBe(afterEl);
+    expect(container.querySelector("#target")?.tagName.toLowerCase()).toBe("span");
+    expect(container.textContent).toBe("beforenewafter");
+    document.body.removeChild(container);
+  });
+
+  it("appends extra fresh nodes when the real DOM has fewer children than the fresh tree", () => {
+    // Client factory produces three items; the server only rendered two —
+    // exercises reconcile()'s mismatch branch once realCursor has run out.
+    const factory = () => mountElement("ul", {
+      id: "list",
+      children: [
+        mountElement("li", { id: "a", children: "a" }, new Scope()),
+        mountElement("li", { id: "b", children: "b" }, new Scope()),
+        mountElement("li", { id: "c", children: "c" }, new Scope()),
+      ],
+    }, new Scope());
+
+    const container = document.createElement("div");
+    container.innerHTML = '<ul id="list"><li id="a">a</li><li id="b">b</li></ul>';
+    container.setAttribute(SSG_MARKER, "1");
+    document.body.appendChild(container);
+
+    const aBefore = container.querySelector("#a");
+    const bBefore = container.querySelector("#b");
+
+    render(factory, container);
+
+    expect(container.querySelector("#a")).toBe(aBefore);
+    expect(container.querySelector("#b")).toBe(bBefore);
+    expect(container.querySelector("#c")?.textContent).toBe("c");
+    expect(container.querySelectorAll("#list > li")).toHaveLength(3);
+    document.body.removeChild(container);
+  });
+
+  it("keeps the real element even when its fresh counterpart bypassed mountElement (nothing recorded to replay)", () => {
+    class RawComp extends StatefulComponent {
+      static __isComponent = true as const;
+      static __isStateless = false;
+      render() {
+        const el = document.createElement("mark");
+        el.id = "raw";
+        el.textContent = "raw content";
+        return el;
+      }
+    }
+
+    const factory = () => mountComponent(RawComp, {}, getCurrentScope());
+    const container = hydratable(factory);
+    const markBefore = container.querySelector("#raw");
+
+    render(factory, container);
+
+    expect(container.querySelector("#raw")).toBe(markBefore);
+    expect(container.textContent).toBe("raw content");
+    document.body.removeChild(container);
+  });
+
+  it("removes trailing real nodes the fresh tree no longer produces", () => {
+    // Server rendered three items; the client factory only produces two —
+    // exercises reconcile()'s cleanup loop for leftover real siblings past
+    // the end of freshChildren.
+    const factory = () => mountElement("ul", {
+      id: "list",
+      children: [
+        mountElement("li", { id: "a", children: "a" }, new Scope()),
+        mountElement("li", { id: "b", children: "b" }, new Scope()),
+      ],
+    }, new Scope());
+
+    const container = document.createElement("div");
+    container.innerHTML =
+      '<ul id="list"><li id="a">a</li><li id="b">b</li><li id="c">c</li></ul>';
+    container.setAttribute(SSG_MARKER, "1");
+    document.body.appendChild(container);
+
+    const aBefore = container.querySelector("#a");
+    const bBefore = container.querySelector("#b");
+
+    render(factory, container);
+
+    expect(container.querySelector("#a")).toBe(aBefore);
+    expect(container.querySelector("#b")).toBe(bBefore);
+    expect(container.querySelector("#c")).toBeNull();
+    expect(container.querySelectorAll("#list > li")).toHaveLength(2);
+    document.body.removeChild(container);
+  });
+
+  it("reconcile() is a safe no-op when a fresh node's registered reactive owner doesn't actually contain it", () => {
+    // Defensive guard in notifyReplacement(): registerReactiveNode() always
+    // registers a node into the exact array collectNodes() just built it
+    // into, so indexOf() finding nothing shouldn't happen through normal
+    // mounting — this exercises that branch directly, at the unit level, to
+    // confirm the guard degrades safely (no throw, no corruption) rather
+    // than silently trusting it can never occur.
+    const fresh = document.createElement("span");
+    const bogusOwner: Node[] = [];
+    registerReactiveNode(fresh, bogusOwner);
+
+    const container = document.createElement("div");
+    const real = document.createElement("span");
+    container.appendChild(real);
+
+    expect(() => { reconcile(container, [fresh]); }).not.toThrow();
+    expect(bogusOwner).toEqual([]);
+    expect(container.firstChild).toBe(real);
+  });
+
+  it("plain client render (no SSG marker) is completely unaffected", () => {
+    const factory = () => mountElement("p", { children: "hello" }, new Scope());
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    render(factory, container);
+
+    expect(container.textContent).toBe("hello");
+    document.body.removeChild(container);
+  });
+});
+
+describe("Portal — server render pass", () => {
+  it("renders nothing into the target during a server render pass", () => {
+    setServerRenderPass(true);
+    expect(isServerRenderPass()).toBe(true);
+
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const scope = new Scope();
+    const nodes = mountComponent(Portal, { to: target, children: document.createTextNode("hi") }, scope);
+
+    expect(target.textContent).toBe("");
+    expect(nodes.every((n) => n.nodeType === Node.COMMENT_NODE)).toBe(true);
+    scope.dispose();
+    document.body.removeChild(target);
+  });
+
+  it("mounts normally on the client once the server pass is over", () => {
+    setServerRenderPass(false);
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const scope = new Scope();
+
+    mountComponent(Portal, { to: target, children: document.createTextNode("hi") }, scope);
+
+    expect(target.textContent).toBe("hi");
+    scope.dispose();
+    document.body.removeChild(target);
+  });
+});

package/src/__tests__/portal.test.ts

@@ -150,4 +150,28 @@ describe("resolvePortalTarget", () => {
     expect(resolvePortalTarget("#resolve-test")).toBe(el);
     document.body.removeChild(el);
   });
+
+  it("attaches the whole subtree to the target in one operation", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const spy = vi.spyOn(target, "appendChild");
+    const children = [document.createElement("p"), document.createElement("span")];
+    const { scope } = mount({ to: target, children });
+    expect(spy).toHaveBeenCalledOnce();
+    expect(target.querySelector("p")).not.toBeNull();
+    expect(target.querySelector("span")).not.toBeNull();
+    scope.dispose();
+  });
+
+  it("reactive children mounted through the portal keep updating after attach", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const s = signal("one");
+    const { scope } = mount({ to: target, children: () => s() });
+    expect(target.textContent).toContain("one");
+    s.set("two");
+    expect(target.textContent).toContain("two");
+    expect(target.textContent).not.toContain("one");
+    scope.dispose();
+  });
 });

package/src/__tests__/remove.test.ts

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+
+import { removeNodes } from "../dom/remove";
+
+function siblings(...names: string[]): { parent: HTMLElement; nodes: HTMLElement[] } {
+  const parent = document.createElement("div");
+  const nodes = names.map((name) => {
+    const el = document.createElement(name);
+    parent.appendChild(el);
+    return el;
+  });
+  return { parent, nodes };
+}
+
+describe("removeNodes", () => {
+  it("removes the first-to-last span and leaves the surrounding siblings", () => {
+    const { parent, nodes } = siblings("a", "b", "c", "d", "e");
+    removeNodes(nodes.slice(1, 4));
+    expect([...parent.children].map((c) => c.localName)).toEqual(["a", "e"]);
+  });
+
+  it("also removes nodes inserted between first and last after the list was captured", () => {
+    const { parent, nodes } = siblings("a", "b");
+    const late = document.createElement("late");
+    parent.insertBefore(late, nodes[1]);
+    removeNodes(nodes);
+    expect(parent.childNodes).toHaveLength(0);
+  });
+
+  it("removes a single node", () => {
+    const { parent, nodes } = siblings("a", "b");
+    removeNodes([nodes[0]]);
+    expect([...parent.children]).toEqual([nodes[1]]);
+  });
+
+  it("removes the attached nodes individually when the first one is detached", () => {
+    const { parent, nodes } = siblings("a", "b", "c");
+    parent.removeChild(nodes[0]);
+    expect(() => { removeNodes(nodes); }).not.toThrow();
+    expect(parent.childNodes).toHaveLength(0);
+  });
+
+  it("removes each node from its own parent when first and last have different parents", () => {
+    const one = siblings("a", "b");
+    const two = siblings("c", "d");
+    removeNodes([one.nodes[0], one.nodes[1], two.nodes[0]]);
+    expect(one.parent.childNodes).toHaveLength(0);
+    expect([...two.parent.children]).toEqual([two.nodes[1]]);
+  });
+});

package/src/component.ts

@@ -11,6 +11,28 @@ import { runInScope } from "./context";
 
 import type { Scope } from "./scope";
 
+let pendingMounts: Array<() => void> = [];
+
+// One shared microtask drains every component mounted in the same synchronous pass, in mount
+// order (children before parents). A throwing onMount is rethrown on its own microtask so it
+// can't stop the others, as it couldn't when each component had a microtask of its own.
+function scheduleMount(run: () => void): void {
+  if (pendingMounts.length === 0) {
+    queueMicrotask(() => {
+      const queue = pendingMounts;
+      pendingMounts = [];
+      for (const job of queue) {
+        try {
+          job();
+        } catch (e) {
+          queueMicrotask(() => { throw e; });
+        }
+      }
+    });
+  }
+  pendingMounts.push(run);
+}
+
 export function mountComponent(
   ctor: ComponentConstructor,
   props: Record<string, unknown>,
@@ -56,7 +78,7 @@ export function mountComponent(
     mountChildren(container, dom, scope);
     container.appendChild(end);
 
-    queueMicrotask(() => {
+    scheduleMount(() => {
       if (disposed) return;
       setComponentMounted(instance, true);
       instance.onMount?.();

package/src/dom/events.ts

@@ -1,11 +1,30 @@
+import { batch } from "@praxisjs/core/internal";
+
 import type { Scope } from "../scope";
 
+// One wrapper per handler keeps addEventListener's dedupe of an identical listener intact.
+const batchedHandlers = new WeakMap<EventListener, EventListener>();
+
+// Handlers run inside batch() so several signal writes in one event flush their effects once,
+// instead of re-running the same reactive subtree after every write.
+function batched(handler: EventListener): EventListener {
+  let wrapper = batchedHandlers.get(handler);
+  if (!wrapper) {
+    wrapper = function (this: Element, event) {
+      batch(() => { handler.call(this, event); });
+    };
+    batchedHandlers.set(handler, wrapper);
+  }
+  return wrapper;
+}
+
 export function addEvent(
   el: Element,
   eventName: string,
   handler: EventListener,
   scope: Scope,
 ): void {
-  el.addEventListener(eventName, handler);
-  scope.add(() => { el.removeEventListener(eventName, handler); });
+  const listener = batched(handler);
+  el.addEventListener(eventName, listener);
+  scope.add(() => { el.removeEventListener(eventName, listener); });
 }

package/src/dom/props.ts

@@ -1,3 +1,5 @@
+import { untrack } from "@praxisjs/core/internal";
+
 import { EVENT_MAP } from "./constants";
 import { addEvent } from "./events";
 
@@ -42,10 +44,10 @@ function applyAttr(el: Element, key: string, value: unknown): void {
   }
 }
 
-// Read-only accessors (SVG geometry, `list`, `form`, `part`, `classList`…)
-// must be excluded here or assignment below throws.
-function hasWritableProperty(el: Element, key: string): boolean {
-  let target: object | null = el;
+const writableCache = new WeakMap<object, Map<string, boolean>>();
+
+function lookupWritable(proto: object, key: string): boolean {
+  let target: object | null = proto;
   while (target) {
     const descriptor = Object.getOwnPropertyDescriptor(target, key);
     if (descriptor) {
@@ -56,6 +58,28 @@ function hasWritableProperty(el: Element, key: string): boolean {
   return false;
 }
 
+// Read-only accessors (SVG geometry, `list`, `form`, `part`, `classList`…)
+// must be excluded here or assignment below throws. The prototype walk is cached per
+// prototype because every element of a given tag repeats the same lookups; a property defined on
+// a prototype after its first lookup (e.g. a late polyfill) is therefore not picked up.
+function hasWritableProperty(el: Element, key: string): boolean {
+  const own = Object.getOwnPropertyDescriptor(el, key);
+  if (own) return own.set !== undefined || own.writable === true;
+
+  const proto = Object.getPrototypeOf(el) as object;
+  let keys = writableCache.get(proto);
+  if (!keys) {
+    keys = new Map();
+    writableCache.set(proto, keys);
+  }
+  let writable = keys.get(key);
+  if (writable === undefined) {
+    writable = lookupWritable(proto, key);
+    keys.set(key, writable);
+  }
+  return writable;
+}
+
 function setProp(el: Element, key: string, value: unknown): void {
   if (key === "class" || key === "className") {
     applyClass(el, value);
@@ -81,7 +105,8 @@ export function applyProp(
   if (normalizedKey === "key" || normalizedKey === "children") return;
 
   if (normalizedKey === "ref") {
-    (value as (el: Element) => void)(el);
+    // untracked: a ref callback that reads a signal must not subscribe the enclosing reactive child
+    untrack(() => { (value as (el: Element) => void)(el); });
     return;
   }