@praxisjs/runtime 0.6.0 → 0.7.1

package/src/__tests__/dom.test.ts

@@ -323,4 +323,161 @@ 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();
+  });
+});
+
+describe("event props without a usable handler", () => {
+  it.each([undefined, null])("addEvent ignores a %s handler", (handler) => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const add = vi.spyOn(el, "addEventListener");
+    expect(() => { addEvent(el, "click", handler, scope); }).not.toThrow();
+    expect(add).not.toHaveBeenCalled();
+    expect(() => { scope.dispose(); }).not.toThrow();
+  });
+
+  it.each([undefined, null])("applyProp skips an onClick prop whose value is %s", (value) => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    expect(() => { applyProp(el, "onClick", value, scope); }).not.toThrow();
+    expect(() => { el.dispatchEvent(new MouseEvent("click")); }).not.toThrow();
+  });
+
+  it("still registers a handler passed later in the same props object", () => {
+    const el = document.createElement("form");
+    const scope = new Scope();
+    const onInput = vi.fn();
+    applyProp(el, "onSubmit", undefined, scope);
+    applyProp(el, "onInput", onInput, scope);
+    el.dispatchEvent(new Event("input"));
+    expect(onInput).toHaveBeenCalledOnce();
+  });
+
+  it("supports an EventListenerObject, calling handleEvent as the DOM does", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const handleEvent = vi.fn();
+    const listener = { handleEvent };
+    addEvent(el, "click", listener, scope);
+    const event = new MouseEvent("click");
+    el.dispatchEvent(event);
+    expect(handleEvent).toHaveBeenCalledWith(event);
+    scope.dispose();
+    el.dispatchEvent(new MouseEvent("click"));
+    expect(handleEvent).toHaveBeenCalledOnce();
+  });
+});
+
+describe("ref prop without a callback", () => {
+  it.each([undefined, null])("applyProp ignores a ref whose value is %s", (value) => {
+    const el = document.createElement("div");
+    expect(() => { applyProp(el, "ref", value, new Scope()); }).not.toThrow();
+  });
 });

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,33 @@
+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,
+  handler: EventListener | EventListenerObject | null | undefined,
   scope: Scope,
 ): void {
-  el.addEventListener(eventName, handler);
-  scope.add(() => { el.removeEventListener(eventName, handler); });
+  // Components forward optional handlers (`onSubmit={this.onSubmit}`) as-is, and addEventListener
+  // has always treated a missing listener as a no-op.
+  if (handler == null) return;
+  const listener = typeof handler === "function" ? batched(handler) : 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
+    if (typeof value === "function") untrack(() => { (value as (el: Element) => void)(el); });
     return;
   }
 

package/src/dom/remove.ts

@@ -0,0 +1,22 @@
+// Replaces Range.deleteContents(): creating a Range per removal is several times slower than
+// walking the siblings, and unreachable Ranges stay registered with the document until collected.
+// Walking first → last (rather than only the tracked nodes) also removes anything a nested reactive
+// child inserted between them after mount, which is what the Range used to cover.
+export function removeNodes(nodes: Node[]): void {
+  const first = nodes[0];
+  const last = nodes[nodes.length - 1];
+  const parent = first.parentNode;
+
+  if (parent === null || last.parentNode !== parent) {
+    for (const node of nodes) node.parentNode?.removeChild(node);
+    return;
+  }
+
+  let node: Node | null = first;
+  while (node) {
+    const next: Node | null = node.nextSibling;
+    parent.removeChild(node);
+    if (node === last) return;
+    node = next;
+  }
+}

package/src/portal.ts

@@ -3,6 +3,7 @@ import { isServerRenderPass } from "@praxisjs/core/internal";
 
 import { mountChildren } from "./children";
 import { getCurrentScope } from "./context";
+import { removeNodes } from "./dom/remove";
 
 export interface PortalProps {
   to?: Element | string | null;
@@ -27,16 +28,16 @@ export class Portal extends StatelessComponent<PortalProps> {
     const start = document.createComment("");
     const end = document.createComment("");
 
-    target.appendChild(start);
-    mountChildren(target, this.props.children, scope);
-    target.appendChild(end);
+    // Built off-document and attached once, so the target never sees a half-built subtree.
+    const fragment = document.createDocumentFragment();
+    fragment.appendChild(start);
+    mountChildren(fragment, this.props.children, scope);
+    fragment.appendChild(end);
+    target.appendChild(fragment);
 
     scope.add(() => {
       if (!start.parentNode || start.parentNode !== end.parentNode) return;
-      const range = document.createRange();
-      range.setStartBefore(start);
-      range.setEndAfter(end);
-      range.deleteContents();
+      removeNodes([start, end]);
     });
 
     return document.createComment("portal");

package/src/reactive.ts

@@ -1,4 +1,5 @@
 import { runInScope } from "./context";
+import { removeNodes } from "./dom/remove";
 import { isRecording, registerReactiveNode } from "./hydration-context";
 import { Scope } from "./scope";
 
@@ -49,15 +50,10 @@ export function mountReactive(
 
     const anchor = end.parentNode ?? parent;
 
-    if (currentNodes.length > 0) {
-      if (currentNodes.length === 1) {
-        (anchor as Element).removeChild(currentNodes[0]);
-      } else {
-        const range = document.createRange();
-        range.setStartBefore(currentNodes[0]);
-        range.setEndAfter(currentNodes[currentNodes.length - 1]);
-        range.deleteContents();
-      }
+    if (currentNodes.length === 1) {
+      (anchor as Element).removeChild(currentNodes[0]);
+    } else if (currentNodes.length > 1) {
+      removeNodes(currentNodes);
     }
 
     if (newNodes.length > 0) {