@esportsplus/template 0.16.14 → 0.16.15

package/bench/runtime.bench.ts

@@ -0,0 +1,207 @@
+import { bench, describe } from 'vitest';
+
+
+describe('attributes - apply', () => {
+    let element: HTMLDivElement;
+
+    bench('setAttribute style', () => {
+        element = document.createElement('div');
+        element.setAttribute('style', 'color: red; font-size: 14px; display: flex;');
+    });
+
+    bench('style.cssText', () => {
+        element = document.createElement('div');
+        element.style.cssText = 'color: red; font-size: 14px; display: flex;';
+    });
+
+    bench('className assignment', () => {
+        element = document.createElement('div');
+        element.className = 'foo bar baz qux';
+    });
+
+    bench('setAttribute class', () => {
+        element = document.createElement('div');
+        element.setAttribute('class', 'foo bar baz qux');
+    });
+});
+
+
+describe('attributes - class list rebuild', () => {
+    bench('Set for..of + string concat', () => {
+        let set = new Set(['alpha', 'beta', 'gamma', 'delta', 'epsilon']),
+            result = '';
+
+        for (let key of set) {
+            result += (result ? ' ' : '') + key;
+        }
+    });
+
+    bench('Array.from(set).join', () => {
+        let set = new Set(['alpha', 'beta', 'gamma', 'delta', 'epsilon']);
+
+        Array.from(set).join(' ');
+    });
+
+    bench('set forEach + string concat', () => {
+        let set = new Set(['alpha', 'beta', 'gamma', 'delta', 'epsilon']),
+            result = '';
+
+        set.forEach(key => {
+            result += (result ? ' ' : '') + key;
+        });
+    });
+});
+
+
+describe('event - defineProperty overhead', () => {
+    let event: Event;
+
+    bench('defineProperty per dispatch', () => {
+        event = new Event('click');
+        let node: HTMLElement | null = document.createElement('div');
+
+        Object.defineProperty(event, 'currentTarget', {
+            configurable: true,
+            get() {
+                return node || document;
+            }
+        });
+    });
+
+    bench('defineProperty once + closure update', () => {
+        event = new Event('click');
+        let currentNode: HTMLElement | null = null;
+
+        Object.defineProperty(event, 'currentTarget', {
+            configurable: true,
+            get() {
+                return currentNode || document;
+            }
+        });
+
+        currentNode = document.createElement('div');
+    });
+});
+
+
+describe('marker - comment vs text node', () => {
+    let comment = document.createComment('$'),
+        textNode = document.createTextNode('');
+
+    bench('clone comment node', () => {
+        comment.cloneNode();
+    });
+
+    bench('clone text node', () => {
+        textNode.cloneNode();
+    });
+});
+
+
+describe('ontick - Set iteration', () => {
+    let tasks = new Set<VoidFunction>();
+
+    for (let i = 0; i < 10; i++) {
+        tasks.add(() => {});
+    }
+
+    bench('for..of Set', () => {
+        for (let task of tasks) {
+            task();
+        }
+    });
+
+    bench('Set.forEach', () => {
+        tasks.forEach(task => task());
+    });
+});
+
+
+describe('array sync - fragment append', () => {
+    let fragment: DocumentFragment,
+        nodes: Node[];
+
+    bench('individual append', () => {
+        fragment = document.createDocumentFragment();
+        nodes = [];
+
+        for (let i = 0; i < 50; i++) {
+            nodes.push(document.createElement('div'));
+        }
+
+        for (let i = 0, n = nodes.length; i < n; i++) {
+            fragment.append(nodes[i]);
+        }
+    });
+
+    bench('batch append spread', () => {
+        fragment = document.createDocumentFragment();
+        nodes = [];
+
+        for (let i = 0; i < 50; i++) {
+            nodes.push(document.createElement('div'));
+        }
+
+        fragment.append(...nodes);
+    });
+});
+
+
+describe('array sort - full resync vs minimal moves', () => {
+    let parent: HTMLDivElement,
+        fragment: DocumentFragment;
+
+    bench('full detach + reattach (current)', () => {
+        parent = document.createElement('div');
+        fragment = document.createDocumentFragment();
+
+        for (let i = 0; i < 50; i++) {
+            parent.appendChild(document.createElement('span'));
+        }
+
+        let children = Array.from(parent.children);
+
+        // Simulate: detach all, reattach in new order
+        for (let i = 0, n = children.length; i < n; i++) {
+            fragment.append(children[i]);
+        }
+
+        parent.appendChild(fragment);
+    });
+
+    bench('targeted insertBefore (LIS approach)', () => {
+        parent = document.createElement('div');
+
+        for (let i = 0; i < 50; i++) {
+            parent.appendChild(document.createElement('span'));
+        }
+
+        let children = Array.from(parent.children);
+
+        // Simulate: only move 5 out of 50 elements (90% stay)
+        for (let i = 0; i < 5; i++) {
+            let idx = Math.floor(Math.random() * children.length);
+
+            parent.insertBefore(children[idx], children[(idx + 10) % children.length]);
+        }
+    });
+});
+
+
+describe('fragment - dedup empty', () => {
+    let tmpl = document.createElement('template');
+
+    bench('fragment() call', () => {
+        let element = tmpl.cloneNode() as HTMLTemplateElement;
+
+        element.innerHTML = '';
+
+        element.content;
+    });
+
+    bench('cached fragment clone', () => {
+        let cached = document.createDocumentFragment();
+
+        cached.cloneNode(true);
+    });
+});

package/build/attributes.js

@@ -12,7 +12,10 @@ function apply(element, name, value) {
     else if (name === 'class') {
         element.className = value;
     }
-    else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
+    else if (name === 'style') {
+        element.style.cssText = value;
+    }
+    else if ((name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
         element.setAttribute(name, value);
     }
     else {

package/build/slot/array.js

@@ -1,8 +1,37 @@
 import { read, root, signal, write } from '@esportsplus/reactivity';
 import { ARRAY_SLOT } from '../constants.js';
-import { clone, fragment, marker, raf } from '../utilities.js';
+import { clone, EMPTY_FRAGMENT, marker, raf } from '../utilities.js';
 import { ondisconnect, remove } from './cleanup.js';
-const EMPTY_FRAGMENT = fragment('');
+function lis(arr) {
+    let n = arr.length;
+    if (n === 0) {
+        return new Set();
+    }
+    let ends = new Int32Array(n), predecessors = new Int32Array(n), len = 0;
+    for (let i = 0; i < n; i++) {
+        let lo = 0, hi = len, val = arr[i];
+        while (lo < hi) {
+            let mid = (lo + hi) >> 1;
+            if (arr[ends[mid]] < val) {
+                lo = mid + 1;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        ends[lo] = i;
+        predecessors[i] = lo > 0 ? ends[lo - 1] : -1;
+        if (lo >= len) {
+            len = lo + 1;
+        }
+    }
+    let idx = ends[len - 1], result = new Set();
+    for (let i = len - 1; i >= 0; i--) {
+        result.add(idx);
+        idx = predecessors[idx];
+    }
+    return result;
+}
 class ArraySlot {
     array;
     marker;
@@ -153,12 +182,29 @@ class ArraySlot {
             this.marker.after(this.fragment);
             return;
         }
-        let sorted = new Array(n);
+        let end = n > 0 ? nodes[n - 1].tail.nextSibling : null, keep = lis(order), parent = this.marker.parentNode, sorted = new Array(n);
         for (let i = 0; i < n; i++) {
             sorted[i] = nodes[order[i]];
         }
         this.nodes = sorted;
-        this.sync();
+        if (!parent || keep.size === n) {
+            return;
+        }
+        let ref = end;
+        for (let i = n - 1; i >= 0; i--) {
+            let group = sorted[i];
+            if (keep.has(i)) {
+                ref = group.head;
+                continue;
+            }
+            let node = group.tail;
+            while (node) {
+                let prev = node === group.head ? null : node.previousSibling;
+                parent.insertBefore(node, ref);
+                ref = node;
+                node = prev;
+            }
+        }
     }
     splice(start, stop = this.nodes.length, items) {
         if (!items.length) {

package/build/slot/render.js

@@ -1,7 +1,6 @@
 import { isArray } from '@esportsplus/utilities';
 import { ARRAY_SLOT } from '../constants.js';
-import { clone, fragment, text } from '../utilities.js';
-const EMPTY_FRAGMENT = fragment('');
+import { clone, EMPTY_FRAGMENT, text } from '../utilities.js';
 export default function render(anchor, value) {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;

package/build/utilities.d.ts

@@ -1,7 +1,8 @@
 declare const clone: <T extends Node>(node: T, options?: boolean | ImportNodeOptions) => T;
 declare const fragment: (html: string) => DocumentFragment;
+declare const EMPTY_FRAGMENT: DocumentFragment;
 declare const marker: ChildNode;
 declare const raf: typeof requestAnimationFrame;
 declare const template: (html: string) => () => DocumentFragment;
 declare const text: (value: string) => Node;
-export { clone, fragment, template, marker, raf, text };
+export { clone, EMPTY_FRAGMENT, fragment, marker, raf, template, text };

package/build/utilities.js

@@ -8,6 +8,7 @@ const fragment = (html) => {
     element.innerHTML = html;
     return element.content;
 };
+const EMPTY_FRAGMENT = fragment('');
 const marker = fragment(SLOT_HTML).firstChild;
 const raf = globalThis?.requestAnimationFrame;
 const template = (html) => {
@@ -28,4 +29,4 @@ const text = (value) => {
     }
     return element;
 };
-export { clone, fragment, template, marker, raf, text };
+export { clone, EMPTY_FRAGMENT, fragment, marker, raf, template, text };

package/package.json

@@ -38,8 +38,9 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.16.14",
+  "version": "0.16.15",
   "scripts": {
+    "bench:run": "vitest bench --config vitest.bench.config.ts",
     "build": "tsc",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/attributes.ts

@@ -29,7 +29,10 @@ function apply(element: Element, name: string, value: unknown) {
     else if (name === 'class') {
         element.className = value as string;
     }
-    else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
+    else if (name === 'style') {
+        element.style.cssText = value as string;
+    }
+    else if ((name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
         element.setAttribute(name, value as string);
     }
     else {

package/src/slot/array.ts

@@ -1,8 +1,9 @@
 import { read, root, signal, write, Reactive } from '@esportsplus/reactivity';
 import { ARRAY_SLOT } from '../constants';
 import { Element, SlotGroup } from '../types';
-import { clone, fragment, marker, raf } from '../utilities';
+import { clone, EMPTY_FRAGMENT, marker, raf } from '../utilities';
 import { ondisconnect, remove } from './cleanup';
+
 import html from '../html';
 
 
@@ -19,7 +20,51 @@ type ArraySlotOp<T> =
     | { op: 'sort'; order: number[] };
 
 
-const EMPTY_FRAGMENT = fragment('');
+function lis(arr: number[]): Set<number> {
+    let n = arr.length;
+
+    if (n === 0) {
+        return new Set();
+    }
+
+    let ends = new Int32Array(n),
+        predecessors = new Int32Array(n),
+        len = 0;
+
+    for (let i = 0; i < n; i++) {
+        let lo = 0,
+            hi = len,
+            val = arr[i];
+
+        while (lo < hi) {
+            let mid = (lo + hi) >> 1;
+
+            if (arr[ends[mid]] < val) {
+                lo = mid + 1;
+            }
+            else {
+                hi = mid;
+            }
+        }
+
+        ends[lo] = i;
+        predecessors[i] = lo > 0 ? ends[lo - 1] : -1;
+
+        if (lo >= len) {
+            len = lo + 1;
+        }
+    }
+
+    let idx = ends[len - 1],
+        result = new Set<number>();
+
+    for (let i = len - 1; i >= 0; i--) {
+        result.add(idx);
+        idx = predecessors[idx];
+    }
+
+    return result;
+}
 
 
 class ArraySlot<T> {
@@ -204,14 +249,41 @@ class ArraySlot<T> {
             return;
         }
 
-        let sorted = new Array(n) as SlotGroup[];
+        let end: Node | null = n > 0 ? nodes[n - 1].tail.nextSibling : null,
+            keep = lis(order),
+            parent = this.marker.parentNode,
+            sorted = new Array(n) as SlotGroup[];
 
         for (let i = 0; i < n; i++) {
             sorted[i] = nodes[order[i]];
         }
 
         this.nodes = sorted;
-        this.sync();
+
+        if (!parent || keep.size === n) {
+            return;
+        }
+
+        let ref: Node | null = end;
+
+        for (let i = n - 1; i >= 0; i--) {
+            let group = sorted[i];
+
+            if (keep.has(i)) {
+                ref = group.head;
+                continue;
+            }
+
+            let node: Node | null = group.tail;
+
+            while (node) {
+                let prev: Node | null = node === group.head ? null : node.previousSibling;
+
+                parent.insertBefore(node, ref);
+                ref = node;
+                node = prev;
+            }
+        }
     }
 
     private splice(start: number, stop: number = this.nodes.length, items: T[]) {

package/src/slot/render.ts

@@ -1,13 +1,10 @@
 import { isArray } from '@esportsplus/utilities';
 import { ARRAY_SLOT } from '../constants';
 import { Element } from '../types';
-import { clone, fragment, text } from '../utilities';
+import { clone, EMPTY_FRAGMENT, text } from '../utilities';
 import { ArraySlot } from './array';
 
 
-const EMPTY_FRAGMENT = fragment('');
-
-
 export default function render(anchor: Element, value: unknown): Node {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;

package/src/utilities.ts

@@ -19,6 +19,8 @@ const fragment = (html: string): DocumentFragment => {
     return element.content;
 };
 
+const EMPTY_FRAGMENT = fragment('');
+
 const marker = fragment(SLOT_HTML).firstChild!;
 
 const raf = globalThis?.requestAnimationFrame;
@@ -50,4 +52,4 @@ const text = (value: string) => {
 };
 
 
-export { clone, fragment, template, marker, raf, text };
+export { clone, EMPTY_FRAGMENT, fragment, marker, raf, template, text };