@esportsplus/template 0.28.3 → 0.29.1

package/build/attributes.d.ts

@@ -1,9 +1,15 @@
 import { Attributes, Element } from './types.js';
 declare const set: (element: Element, name: string, value: unknown) => void;
+declare const setClass: (element: Element, classlist: false | string | undefined, value: unknown) => void;
+declare const setProperty: (element: Element, name: string, value: unknown) => void;
+declare const setStyle: (element: Element, styles: false | string | undefined, value: unknown) => void;
 declare const spread: (element: Element, value: Attributes | Attributes[]) => void;
 declare const _default: {
     set: (element: Element, name: string, value: unknown) => void;
+    setClass: (element: Element, classlist: false | string | undefined, value: unknown) => void;
+    setProperty: (element: Element, name: string, value: unknown) => void;
+    setStyle: (element: Element, styles: false | string | undefined, value: unknown) => void;
     spread: (element: Element, value: Attributes | Attributes[]) => void;
 };
 export default _default;
-export { set, spread };
+export { set, setClass, setProperty, setStyle, spread };

package/build/attributes.js

@@ -1,9 +1,8 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants.js';
-import { className, removeAttribute, setAttribute } from './utilities/element.js';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants.js';
+import { raf } from './utilities.js';
 import q from '@esportsplus/queue';
-import raf from './utilities/raf.js';
 import event from './event/index.js';
 const STORE = Symbol();
 let delimiters = {
@@ -12,13 +11,13 @@ let delimiters = {
 }, queue = q(64), scheduled = false;
 function apply(element, name, value) {
     if (value == null || value === false || value === '') {
-        removeAttribute.call(element, name);
+        element.removeAttribute(name);
     }
     else if (name === 'class') {
-        className.call(element, value);
+        element.className = value;
     }
     else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
-        setAttribute.call(element, name, value);
+        element.setAttribute(name, value);
     }
     else {
         element[name] = value;
@@ -31,7 +30,7 @@ function list(ctx, element, id, name, state, value) {
     if (value == null || value === false || value === '') {
         value = '';
     }
-    let base = name + '.static', delimiter = delimiters[name], store = (ctx ??= context(element)).store ??= {}, dynamic = store[name];
+    let base = name + '.static', changed = false, delimiter = delimiters[name], store = (ctx ??= context(element)).store ??= {}, dynamic = store[name];
     if (dynamic === undefined) {
         let value = (element.getAttribute(name) || '').trim();
         store[base] = value;
@@ -39,10 +38,15 @@ function list(ctx, element, id, name, state, value) {
     }
     if (id === null) {
         if (value && typeof value === 'string') {
+            changed = true;
             store[base] += (store[base] ? delimiter : '') + value;
         }
     }
     else {
+        if (store[id + '.raw'] === value) {
+            return;
+        }
+        store[id + '.raw'] = value;
         let hot = {};
         if (value && typeof value === 'string') {
             let part, parts = value.split(delimiter);
@@ -51,7 +55,10 @@ function list(ctx, element, id, name, state, value) {
                 if (part === '') {
                     continue;
                 }
-                dynamic.add(part);
+                if (!dynamic.has(part)) {
+                    changed = true;
+                    dynamic.add(part);
+                }
                 hot[part] = true;
             }
         }
@@ -61,11 +68,15 @@ function list(ctx, element, id, name, state, value) {
                 if (hot[part] === true) {
                     continue;
                 }
+                changed = true;
                 dynamic.delete(part);
             }
         }
         store[id] = hot;
     }
+    if (!changed) {
+        return;
+    }
     value = store[base];
     for (let key of dynamic) {
         value += (value ? delimiter : '') + key;
@@ -95,6 +106,26 @@ function property(ctx, element, id, name, state, value) {
         schedule(ctx, element, name, state, value);
     }
 }
+function reactive(element, name, state, value) {
+    let ctx = context(element), fn = name === 'class' || name === 'style' ? list : property;
+    ctx.effect ??= 0;
+    let id = ctx.effect++;
+    effect(() => {
+        let v = value(element);
+        if (v == null || typeof v !== 'object') {
+            fn(ctx, element, id, name, state, v);
+        }
+        else if (isArray(v)) {
+            let last = v.length - 1;
+            for (let i = 0, n = v.length; i < n; i++) {
+                fn(ctx, element, id, name, state === STATE_HYDRATING
+                    ? state
+                    : i !== last ? STATE_WAITING : state, v[i]);
+            }
+        }
+    });
+    state = STATE_NONE;
+}
 function schedule(ctx, element, name, state, value) {
     ctx ??= context(element);
     (ctx.updates ??= {})[name] = value;
@@ -126,32 +157,25 @@ function task() {
     }
 }
 const set = (element, name, value) => {
-    let fn = name === 'class' || name === 'style' ? list : property, state = STATE_HYDRATING;
     if (typeof value === 'function') {
         if (name[0] === 'o' && name[1] === 'n') {
-            return event(element, name, value);
-        }
-        let ctx = context(element);
-        ctx.effect ??= 0;
-        let id = ctx.effect++;
-        effect(() => {
-            let v = value(element);
-            if (v == null || typeof v !== 'object') {
-                fn(ctx, element, id, name, state, v);
+            let e = name.slice(2).toLowerCase(), key = name.toLowerCase();
+            if (LIFECYCLE_EVENTS.has(key)) {
+                event[key](element, value);
             }
-            else if (isArray(v)) {
-                let last = v.length - 1;
-                for (let i = 0, n = v.length; i < n; i++) {
-                    fn(ctx, element, id, name, state === STATE_HYDRATING
-                        ? state
-                        : i !== last ? STATE_WAITING : state, v[i]);
-                }
+            else if (DIRECT_ATTACH_EVENTS.has(key)) {
+                event.direct(element, e, value);
+            }
+            else {
+                event.delegate(element, e, value);
             }
-        });
-        state = STATE_NONE;
+        }
+        else {
+            reactive(element, name, STATE_HYDRATING, value);
+        }
         return;
     }
-    if (typeof value !== 'object') {
+    else if (typeof value !== 'object') {
     }
     else if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
@@ -163,12 +187,41 @@ const set = (element, name, value) => {
         }
         return;
     }
-    fn(null, element, null, name, state, value);
+    (name === 'class' || name === 'style' ? list : property)(null, element, null, name, STATE_HYDRATING, value);
+};
+const setClass = (element, classlist, value) => {
+    let ctx = context(element), store = ctx.store ??= {};
+    store['class.static'] = classlist || '';
+    store['class'] ??= new Set();
+    if (typeof value === 'function') {
+        reactive(element, 'class', STATE_HYDRATING, value);
+    }
+    else {
+        list(ctx, element, null, 'class', STATE_HYDRATING, value);
+    }
+};
+const setProperty = (element, name, value) => {
+    if (typeof value === 'function') {
+        reactive(element, name, STATE_HYDRATING, value);
+    }
+    else {
+        property(null, element, null, name, STATE_HYDRATING, value);
+    }
+};
+const setStyle = (element, styles, value) => {
+    let ctx = context(element), store = ctx.store ??= {};
+    store['style.static'] = styles || '';
+    store['style'] ??= new Set();
+    if (typeof value === 'function') {
+        reactive(element, 'style', STATE_HYDRATING, value);
+    }
+    else {
+        list(ctx, element, null, 'style', STATE_HYDRATING, value);
+    }
 };
 const spread = function (element, value) {
     if (isObject(value)) {
-        let names = Object.keys(value), name;
-        while (name = names.pop()) {
+        for (let name in value) {
             let v = value[name];
             if (v == null || v === false || v === '') {
                 continue;
@@ -182,5 +235,5 @@ const spread = function (element, value) {
         }
     }
 };
-export default { set, spread };
-export { set, spread };
+export default { set, setClass, setProperty, setStyle, spread };
+export { set, setClass, setProperty, setStyle, spread };

package/build/constants.d.ts

@@ -1,18 +1,10 @@
 declare const ARRAY_SLOT: unique symbol;
 declare const CLEANUP: unique symbol;
 declare const EMPTY_FRAGMENT: DocumentFragment;
-declare const NODE_CLOSING = 1;
-declare const NODE_ELEMENT = 3;
-declare const NODE_SLOT = 4;
-declare const NODE_VOID = 5;
-declare const NODE_WHITELIST: Record<string, number>;
-declare const REGEX_EMPTY_TEXT_NODES: RegExp;
-declare const REGEX_EVENTS: RegExp;
-declare const REGEX_SLOT_ATTRIBUTES: RegExp;
-declare const REGEX_SLOT_NODES: RegExp;
 declare const SLOT_HTML = "<!--$-->";
-declare const SLOT_MARKER = "{{$}}";
 declare const STATE_HYDRATING = 0;
 declare const STATE_NONE = 1;
 declare const STATE_WAITING = 2;
-export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, SLOT_HTML, STATE_HYDRATING, SLOT_MARKER, STATE_NONE, STATE_WAITING };
+declare const STORE: unique symbol;
+export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE };
+export * from './event/constants.js';

package/build/constants.js

@@ -1,39 +1,11 @@
-import { fragment } from './utilities/fragment.js';
+import { fragment } from './utilities.js';
 const ARRAY_SLOT = Symbol('template.array.slot');
 const CLEANUP = Symbol('template.cleanup');
 const EMPTY_FRAGMENT = fragment('');
-const NODE_CLOSING = 1;
-const NODE_COMMENT = 2;
-const NODE_ELEMENT = 3;
-const NODE_SLOT = 4;
-const NODE_VOID = 5;
-const NODE_WHITELIST = {
-    '/': NODE_CLOSING,
-    '!': NODE_COMMENT,
-    'area': NODE_VOID,
-    'base': NODE_VOID,
-    'br': NODE_VOID,
-    'col': NODE_VOID,
-    'embed': NODE_VOID,
-    'hr': NODE_VOID,
-    'img': NODE_VOID,
-    'input': NODE_VOID,
-    'keygen': NODE_VOID,
-    'link': NODE_VOID,
-    'menuitem': NODE_VOID,
-    'meta': NODE_VOID,
-    'param': NODE_VOID,
-    'source': NODE_VOID,
-    'track': NODE_VOID,
-    'wbr': NODE_VOID
-};
-const REGEX_EMPTY_TEXT_NODES = /(>|}|\s)\s+(<|{|\s)/g;
-const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=(?:\s*["'][^"']*["'])*)/g;
-const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
-const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
 const SLOT_HTML = '<!--$-->';
-const SLOT_MARKER = '{{$}}';
 const STATE_HYDRATING = 0;
 const STATE_NONE = 1;
 const STATE_WAITING = 2;
-export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, SLOT_HTML, STATE_HYDRATING, SLOT_MARKER, STATE_NONE, STATE_WAITING };
+const STORE = Symbol('template.store');
+export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE };
+export * from './event/constants.js';

package/build/event/constants.d.ts

@@ -0,0 +1,3 @@
+declare const DIRECT_ATTACH_EVENTS: Set<string>;
+declare const LIFECYCLE_EVENTS: Set<string>;
+export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/build/event/constants.js

@@ -0,0 +1,13 @@
+const DIRECT_ATTACH_EVENTS = new Set([
+    'onblur',
+    'onerror',
+    'onfocus', 'onfocusin', 'onfocusout',
+    'onload',
+    'onplay', 'onpause', 'onended', 'ontimeupdate',
+    'onreset',
+    'onscroll', 'onsubmit'
+]);
+const LIFECYCLE_EVENTS = new Set([
+    'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
+]);
+export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/build/event/index.d.ts

@@ -1,3 +1,11 @@
 import { Element } from '../types.js';
-declare const _default: (element: Element, event: `on${string}`, listener: Function) => void;
+declare const _default: {
+    delegate: (element: Element, event: string, listener: Function) => void;
+    direct: (element: Element, event: string, listener: Function) => void;
+    onconnect: (element: globalThis.Element, listener: Function) => void;
+    ondisconnect: (element: Element, listener: Function) => void;
+    onrender: (element: Element, listener: Function) => void;
+    onresize: (element: Element, listener: Function) => void;
+    ontick: (element: globalThis.Element, listener: Function) => void;
+};
 export default _default;

package/build/event/index.js

@@ -1,20 +1,18 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { addEventListener } from '../utilities/element.js';
-import { parentElement } from '../utilities/node.js';
-import { ondisconnect } from '../slot/cleanup.js';
+import { ondisconnect as disconnect } from '../slot/cleanup.js';
 import onconnect from './onconnect.js';
 import onresize from './onresize.js';
 import ontick from './ontick.js';
-let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
-    'onanimationend', 'onanimationiteration', 'onanimationstart',
-    'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
-    'onpointerenter', 'onpointerleave', 'onpointermove', 'onpointerout', 'onpointerover',
-    'onscroll',
-    'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart', 'ontransitionend',
-    'onwheel'
+let controllers = new Map(), host = window.document, keys = {}, passive = new Set([
+    'animationend', 'animationiteration', 'animationstart',
+    'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
+    'pointerenter', 'pointerleave', 'pointermove', 'pointerout', 'pointerover',
+    'scroll',
+    'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart', 'transitionend',
+    'wheel'
 ]);
-['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'].map(event => {
+['mousemove', 'mousewheel', 'scroll', 'touchend', 'touchmove', 'touchstart', 'wheel'].map(event => {
     controllers.set(event, null);
 });
 function register(element, event) {
@@ -39,7 +37,7 @@ function register(element, event) {
         signal = controller.signal;
     }
     let key = keys[event] = Symbol();
-    addEventListener.call(window.document, event.slice(2), (e) => {
+    host.addEventListener(event.slice(2), (e) => {
         let fn, node = e.target;
         while (node) {
             fn = node[key];
@@ -52,34 +50,30 @@ function register(element, event) {
                 });
                 return fn.call(node, e);
             }
-            node = parentElement.call(node);
+            node = node.parentElement;
         }
     }, {
-        capture: capture.has(event),
         passive: passive.has(event),
         signal
     });
     return key;
 }
-export default (element, event, listener) => {
-    switch (event) {
-        case 'onconnect':
-            onconnect(element, listener);
-            return;
-        case 'ondisconnect':
-            ondisconnect(element, () => listener(element));
-            return;
-        case 'onrender':
-            root(() => listener(element));
-            return;
-        case 'onresize':
-            onresize(element, listener);
-            return;
-        case 'ontick':
-            ontick(element, listener);
-            return;
-        default:
-            element[keys[event] || register(element, event)] = listener;
-            return;
-    }
+const delegate = (element, event, listener) => {
+    element[keys[event] || register(element, event)] = listener;
+};
+const direct = (element, event, listener) => {
+    let handler = (e) => listener.call(element, e);
+    element.addEventListener(event, handler, {
+        passive: passive.has(event)
+    });
+    ondisconnect(element, () => {
+        element.removeEventListener(event, handler);
+    });
+};
+const ondisconnect = (element, listener) => {
+    disconnect(element, () => listener(element));
+};
+const onrender = (element, listener) => {
+    root(() => listener(element));
 };
+export default { delegate, direct, onconnect, ondisconnect, onrender, onresize, ontick };

package/build/event/ontick.js

@@ -1,5 +1,4 @@
-import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
-import raf from '../utilities/raf.js';
+import { raf } from '../utilities.js';
 let tasks = Object.assign(new Set(), { running: false });
 function tick() {
     if (tasks.size === 0) {
@@ -22,12 +21,10 @@ const remove = (task) => {
     tasks.delete(task);
 };
 export default (element, listener) => {
-    let dispose = () => {
-        remove(fn);
-    }, fn = () => {
-        if (state === STATE_HYDRATING) {
+    let connected = false, fn = () => {
+        if (connected === false) {
             if (element.isConnected) {
-                state = STATE_NONE;
+                connected = true;
             }
             else if (retry--) {
                 return;
@@ -37,8 +34,8 @@ export default (element, listener) => {
             remove(fn);
             return;
         }
-        listener(dispose, element);
-    }, retry = 60, state = STATE_HYDRATING;
+        listener(() => remove(fn), element);
+    }, retry = 60;
     add(fn);
 };
 export { add, remove };

package/build/html.d.ts

@@ -0,0 +1,9 @@
+import { ReactiveArray } from '@esportsplus/reactivity';
+import { Attribute, Attributes, Renderable } from './types.js';
+import { ArraySlot } from './slot/array.js';
+type Values<T> = Attribute | Attributes<any> | ArraySlot<T> | Renderable<T>;
+declare const html: {
+    <T>(_literals: TemplateStringsArray, ..._values: (Values<T> | Values<T>[])[]): DocumentFragment;
+    reactive<T>(_arr: ReactiveArray<T>, _template: (value: T) => DocumentFragment): ArraySlot<T>;
+};
+export default html;

package/build/html.js

@@ -0,0 +1,7 @@
+const html = (_literals, ..._values) => {
+    throw new Error('html`` templates must be compiled. Ensure vite-plugin is configured.');
+};
+html.reactive = (_arr, _template) => {
+    throw new Error('html.reactive() must be compiled. Ensure vite-plugin is configured.');
+};
+export default html;

package/build/index.d.ts

@@ -1,5 +1,11 @@
-export { default as html } from './html/index.js';
+import './runtime.js';
+export { default as attributes } from './attributes.js';
+export { default as event } from './event/index.js';
+export { default as html } from './html.js';
 export { default as render } from './render.js';
+export { default as slot } from './slot/index.js';
 export { default as svg } from './svg.js';
-export type { ArraySlot } from './slot/array.js';
+export { ArraySlot } from './slot/array.js';
+export { EffectSlot } from './slot/effect.js';
 export type { Attributes, Element, Renderable } from './types.js';
+export * from './utilities.js';

package/build/index.js

@@ -1,3 +1,10 @@
-export { default as html } from './html/index.js';
+import './runtime.js';
+export { default as attributes } from './attributes.js';
+export { default as event } from './event/index.js';
+export { default as html } from './html.js';
 export { default as render } from './render.js';
+export { default as slot } from './slot/index.js';
 export { default as svg } from './svg.js';
+export { ArraySlot } from './slot/array.js';
+export { EffectSlot } from './slot/effect.js';
+export * from './utilities.js';

package/build/render.d.ts

@@ -1,3 +1,3 @@
-import { Renderable } from './types.js';
-declare const _default: <T>(parent: HTMLElement, renderable: Renderable<T>) => void;
+import { Effect, Renderable } from './types.js';
+declare const _default: <T>(parent: HTMLElement, renderable: Exclude<Renderable<T>, Effect<T>>) => void;
 export default _default;

package/build/render.js

@@ -1,9 +1,8 @@
-import { nodeValue } from './utilities/node.js';
-import marker from './utilities/marker.js';
+import { marker } from './utilities.js';
 import slot from './slot/index.js';
 export default (parent, renderable) => {
     let anchor = marker.cloneNode();
-    nodeValue.call(parent, '');
+    parent.nodeValue = '';
     parent.append(anchor);
     slot(anchor, renderable);
 };

package/build/runtime.d.ts

@@ -0,0 +1 @@
+export {};

package/build/runtime.js

@@ -0,0 +1,5 @@
+import { CLEANUP, STORE } from './constants.js';
+if (typeof Node !== 'undefined') {
+    Node.prototype[CLEANUP] = null;
+    Node.prototype[STORE] = null;
+}

package/build/slot/array.d.ts

@@ -1,14 +1,14 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import html from '../html/index.js';
+import html from '../html.js';
 declare class ArraySlot<T> {
     private array;
-    private queue;
     private marker;
     private nodes;
+    private queue;
     private scheduled;
     private signal;
     private template;
-    readonly fragment: Node;
+    readonly fragment: DocumentFragment;
     constructor(array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>));
     private anchor;
     private clear;

package/build/slot/array.js

@@ -1,22 +1,19 @@
 import { read, root, set, signal } from '@esportsplus/reactivity';
 import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
-import { append } from '../utilities/fragment.js';
-import { cloneNode, firstChild, lastChild, nextSibling } from '../utilities/node.js';
+import { clone, marker, raf } from '../utilities.js';
 import { ondisconnect, remove } from './cleanup.js';
-import marker from '../utilities/marker.js';
-import raf from '../utilities/raf.js';
 class ArraySlot {
     array;
-    queue = [];
     marker;
     nodes = [];
+    queue = [];
     scheduled = false;
     signal;
     template;
     fragment;
     constructor(array, template) {
         this.array = array;
-        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = this.fragment = clone(EMPTY_FRAGMENT);
         this.marker = marker.cloneNode();
         this.signal = signal(array.length);
         this.template = function (data) {
@@ -24,14 +21,14 @@ class ArraySlot {
                 dispose = d;
                 return template(data);
             }), group = {
-                head: firstChild.call(frag),
-                tail: lastChild.call(frag)
+                head: frag.firstChild,
+                tail: frag.lastChild
             };
-            append.call(fragment, frag);
+            fragment.append(frag);
             ondisconnect(group.head, dispose);
             return group;
         };
-        append.call(fragment, this.marker);
+        fragment.append(this.marker);
         if (array.length) {
             root(() => {
                 this.nodes = array.map(this.template);
@@ -95,7 +92,8 @@ class ArraySlot {
         this.scheduled = true;
         raf(() => {
             let queue = this.queue;
-            this.queue.length = 0;
+            this.queue = [];
+            this.scheduled = false;
             root(() => {
                 for (let i = 0, n = queue.length; i < n; i++) {
                     let op = queue[i];
@@ -132,7 +130,6 @@ class ArraySlot {
                 }
             });
             set(this.signal, this.nodes.length);
-            this.scheduled = false;
         });
     }
     shift() {
@@ -172,8 +169,8 @@ class ArraySlot {
         for (let i = 0; i < n; i++) {
             let group = nodes[i], next, node = group.head;
             while (node) {
-                next = node === group.tail ? null : nextSibling.call(node);
-                append.call(this.fragment, node);
+                next = node === group.tail ? null : node.nextSibling;
+                this.fragment.append(node);
                 node = next;
             }
         }

package/build/slot/cleanup.d.ts

@@ -1,4 +1,4 @@
-import { SlotGroup } from '../types.js';
+import { Element, SlotGroup } from '../types.js';
 declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const remove: (...groups: SlotGroup[]) => void;
 export { ondisconnect, remove };

package/build/slot/cleanup.js

@@ -1,5 +1,4 @@
 import { CLEANUP } from '../constants.js';
-import { previousSibling } from '../utilities/node.js';
 const ondisconnect = (element, fn) => {
     (element[CLEANUP] ??= []).push(fn);
 };
@@ -13,7 +12,7 @@ const remove = (...groups) => {
                     fn();
                 }
             }
-            next = previousSibling.call(tail);
+            next = tail.previousSibling;
             tail.remove();
             if (head === tail) {
                 break;