@praxisjs/runtime 0.6.0 → 0.7.0

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;
   }
 

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) {