@praxisjs/runtime 0.2.16 → 0.2.17

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @praxisjs/runtime
 
+## 0.2.17
+
+### Patch Changes
+
+- 9aeec6a: Optimize DOM patching in the runtime for lower allocation and fewer reflows.
+
+  **element.ts** — prop iteration now uses `for...in` instead of `Object.entries()`, avoiding the intermediate key-value array allocation per element mount.
+
+  **reactive.ts** — `normalizeToNodes` (returned a new array on every call) is replaced by `collectNodes` (accumulates into a caller-supplied array), removing one allocation per reactive update. Node insertion is batched through `nodesToFragment`: when multiple nodes are produced, they are appended to a `DocumentFragment` and inserted in a single `insertBefore` call. Bulk removal of existing nodes uses `Range.deleteContents()` instead of individual `removeChild` calls, reducing the number of reflow-triggering operations to one.
+
+  No changes to the public API.
+
+- Updated dependencies [74d414a]
+  - @praxisjs/core@1.6.0
+  - @praxisjs/decorators@1.0.1
+
 ## 0.2.16
 
 ### Patch Changes

package/dist/element.js

@@ -3,10 +3,10 @@ import { createElement } from "./dom/create";
 import { applyProp } from "./dom/props";
 export function mountElement(tag, props, scope) {
     const el = createElement(tag);
-    for (const [key, val] of Object.entries(props)) {
+    for (const key in props) {
         if (key === "children")
             continue;
-        applyProp(el, key, val, scope);
+        applyProp(el, key, props[key], scope);
     }
     if (props.children !== undefined) {
         mountChildren(el, props.children, scope);

package/dist/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC,MAAM,UAAU,YAAY,CAC1B,GAAW,EACX,KAA8B,EAC9B,KAAY;IAEZ,MAAM,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAE9B,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC/C,IAAI,GAAG,KAAK,UAAU;YAAE,SAAS;QACjC,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;QACjC,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC,MAAM,UAAU,YAAY,CAC1B,GAAW,EACX,KAA8B,EAC9B,KAAY;IAEZ,MAAM,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAE9B,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,GAAG,KAAK,UAAU;YAAE,SAAS;QACjC,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;QACjC,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC"}

package/dist/reactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAYrC,wBAAgB,aAAa,CAC3B,MAAM,EAAE,IAAI,EACZ,EAAE,EAAE,MAAM,OAAO,EACjB,WAAW,EAAE,KAAK,GACjB,IAAI,CA8BN"}
+{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAmBrC,wBAAgB,aAAa,CAC3B,MAAM,EAAE,IAAI,EACZ,EAAE,EAAE,MAAM,OAAO,EACjB,WAAW,EAAE,KAAK,GACjB,IAAI,CAoCN"}

package/dist/reactive.js

@@ -1,36 +1,54 @@
 import { runInScope } from "./context";
-function normalizeToNodes(value) {
+function collectNodes(value, out) {
     if (value === null || value === undefined || value === false)
-        return [];
-    if (value instanceof Node)
-        return [value];
-    if (Array.isArray(value))
-        return value.flatMap(normalizeToNodes);
+        return;
+    if (value instanceof Node) {
+        out.push(value);
+        return;
+    }
+    if (Array.isArray(value)) {
+        for (const v of value)
+            collectNodes(v, out);
+        return;
+    }
     if (typeof value === "string" || typeof value === "number") {
-        return [document.createTextNode(String(value))];
+        out.push(document.createTextNode(String(value)));
+        return;
     }
-    return [];
+}
+function nodesToFragment(nodes) {
+    if (nodes.length === 1)
+        return nodes[0];
+    const fragment = document.createDocumentFragment();
+    for (const n of nodes)
+        fragment.appendChild(n);
+    return fragment;
 }
 export function mountReactive(parent, fn, parentScope) {
-    const end = document.createComment("reactive");
+    const end = document.createComment("");
     parent.appendChild(end);
     let currentNodes = [];
     let childScope = parentScope.fork();
     parentScope.effect(() => {
         childScope.dispose();
         childScope = parentScope.fork();
-        for (const n of currentNodes) {
-            n.parentNode?.removeChild(n);
-        }
-        currentNodes = [];
         const result = runInScope(childScope, fn);
-        const newNodes = normalizeToNodes(result);
-        // Use end.parentNode instead of the original `parent` — the parent
-        // reference may be a DocumentFragment that was emptied after its
-        // children were transferred to the real DOM by mountComponent.
+        const newNodes = [];
+        collectNodes(result, newNodes);
         const anchor = end.parentNode ?? parent;
-        for (const n of newNodes) {
-            anchor.insertBefore(n, end);
+        if (currentNodes.length > 0) {
+            if (currentNodes.length === 1) {
+                anchor.removeChild(currentNodes[0]);
+            }
+            else {
+                const range = document.createRange();
+                range.setStartBefore(currentNodes[0]);
+                range.setEndAfter(currentNodes[currentNodes.length - 1]);
+                range.deleteContents();
+            }
+        }
+        if (newNodes.length > 0) {
+            anchor.insertBefore(nodesToFragment(newNodes), end);
         }
         currentNodes = newNodes;
     });

package/dist/reactive.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIvC,SAAS,gBAAgB,CAAC,KAAc;IACtC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK;QAAE,OAAO,EAAE,CAAC;IACxE,IAAI,KAAK,YAAY,IAAI;QAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,MAAY,EACZ,EAAiB,EACjB,WAAkB;IAElB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAExB,IAAI,YAAY,GAAW,EAAE,CAAC;IAC9B,IAAI,UAAU,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IAEpC,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE;QACtB,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,UAAU,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;QAEhC,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;YAC7B,CAAC,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;QACD,YAAY,GAAG,EAAE,CAAC;QAElB,MAAM,MAAM,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAE1C,mEAAmE;QACnE,iEAAiE;QACjE,+DAA+D;QAC/D,MAAM,MAAM,GAAG,GAAG,CAAC,UAAU,IAAI,MAAM,CAAC;QACxC,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;YACzB,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9B,CAAC;QACD,YAAY,GAAG,QAAQ,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACnD,CAAC"}
+{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIvC,SAAS,YAAY,CAAC,KAAc,EAAE,GAAW;IAC/C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK;QAAE,OAAO;IACrE,IAAI,KAAK,YAAY,IAAI,EAAE,CAAC;QAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IACvD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAAC,KAAK,MAAM,CAAC,IAAI,KAAK;YAAE,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IAClF,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjD,OAAO;IACT,CAAC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,KAAa;IACpC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;IACnD,KAAK,MAAM,CAAC,IAAI,KAAK;QAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAC/C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,MAAY,EACZ,EAAiB,EACjB,WAAkB;IAElB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAExB,IAAI,YAAY,GAAW,EAAE,CAAC;IAC9B,IAAI,UAAU,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IAEpC,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE;QACtB,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,UAAU,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;QAEhC,MAAM,MAAM,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAW,EAAE,CAAC;QAC5B,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAE/B,MAAM,MAAM,GAAG,GAAG,CAAC,UAAU,IAAI,MAAM,CAAC;QAExC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC7B,MAAkB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;gBACrC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;gBACzD,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;QAED,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC;QACtD,CAAC;QAED,YAAY,GAAG,QAAQ,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/runtime",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,9 +14,9 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@praxisjs/core": "1.5.0",
-    "@praxisjs/decorators": "1.0.0",
-    "@praxisjs/shared": "0.2.0"
+    "@praxisjs/core": "1.6.0",
+    "@praxisjs/shared": "0.2.0",
+    "@praxisjs/decorators": "1.0.1"
   },
   "scripts": {
     "build": "tsc",

package/src/element.ts

@@ -11,9 +11,9 @@ export function mountElement(
 ): HTMLElement | SVGElement {
   const el = createElement(tag);
 
-  for (const [key, val] of Object.entries(props)) {
+  for (const key in props) {
     if (key === "children") continue;
-    applyProp(el, key, val, scope);
+    applyProp(el, key, props[key], scope);
   }
 
   if (props.children !== undefined) {

package/src/reactive.ts

@@ -2,14 +2,21 @@ import { runInScope } from "./context";
 
 import type { Scope } from "./scope";
 
-function normalizeToNodes(value: unknown): Node[] {
-  if (value === null || value === undefined || value === false) return [];
-  if (value instanceof Node) return [value];
-  if (Array.isArray(value)) return value.flatMap(normalizeToNodes);
+function collectNodes(value: unknown, out: Node[]): void {
+  if (value === null || value === undefined || value === false) return;
+  if (value instanceof Node) { out.push(value); return; }
+  if (Array.isArray(value)) { for (const v of value) collectNodes(v, out); return; }
   if (typeof value === "string" || typeof value === "number") {
-    return [document.createTextNode(String(value))];
+    out.push(document.createTextNode(String(value)));
+    return;
   }
-  return [];
+}
+
+function nodesToFragment(nodes: Node[]): Node {
+  if (nodes.length === 1) return nodes[0];
+  const fragment = document.createDocumentFragment();
+  for (const n of nodes) fragment.appendChild(n);
+  return fragment;
 }
 
 export function mountReactive(
@@ -17,7 +24,7 @@ export function mountReactive(
   fn: () => unknown,
   parentScope: Scope,
 ): void {
-  const end = document.createComment("reactive");
+  const end = document.createComment("");
   parent.appendChild(end);
 
   let currentNodes: Node[] = [];
@@ -27,21 +34,27 @@ export function mountReactive(
     childScope.dispose();
     childScope = parentScope.fork();
 
-    for (const n of currentNodes) {
-      n.parentNode?.removeChild(n);
-    }
-    currentNodes = [];
-
     const result = runInScope(childScope, fn);
-    const newNodes = normalizeToNodes(result);
+    const newNodes: Node[] = [];
+    collectNodes(result, newNodes);
 
-    // Use end.parentNode instead of the original `parent` — the parent
-    // reference may be a DocumentFragment that was emptied after its
-    // children were transferred to the real DOM by mountComponent.
     const anchor = end.parentNode ?? parent;
-    for (const n of newNodes) {
-      anchor.insertBefore(n, end);
+
+    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 (newNodes.length > 0) {
+      anchor.insertBefore(nodesToFragment(newNodes), end);
     }
+
     currentNodes = newNodes;
   });