@esportsplus/template 0.23.1 → 0.23.3

package/build/attributes.d.ts

@@ -1,10 +1,8 @@
-import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants.js';
 import { Attributes, Element } from './types.js';
-type State = typeof STATE_HYDRATING | typeof STATE_NONE | typeof STATE_WAITING;
-declare const set: (element: Element, name: string, value: unknown, state?: State) => void;
+declare const set: (element: Element, name: string, value: unknown) => void;
 declare const spread: (element: Element, value: Attributes | Attributes[]) => void;
 declare const _default: {
-    set: (element: Element, name: string, value: unknown, state?: State) => void;
+    set: (element: Element, name: string, value: unknown) => void;
     spread: (element: Element, value: Attributes | Attributes[]) => void;
 };
 export default _default;

package/build/attributes.js

@@ -31,27 +31,51 @@ function list(ctx, element, id, name, state, value) {
     if (value == null || value === false || value === '') {
         value = '';
     }
-    if (!value || typeof value !== 'string') {
-        return;
-    }
-    let delimiter = delimiters[name], store = (ctx ??= context(element)).store ??= {}, v = store[name];
-    if (v === undefined) {
-        v = store[name] = (element.getAttribute(name) || '').trim();
+    let base = name + '.static', delimiter = delimiters[name], store = (ctx ??= context(element)).store ??= {}, dynamic = store[name], type = typeof value;
+    if (dynamic === undefined) {
+        let value = (element.getAttribute(name) || '').trim();
+        store[base] = value;
+        store[name] = dynamic = new Set();
     }
     if (id === null) {
-        v = store[name] += (v ? delimiter : '') + value;
+        if (value && type === 'string') {
+            store[base] += (store[base] ? delimiter : '') + value;
+        }
     }
     else {
-        let current = delimiter + value, previous = store[id];
-        if (previous === undefined) {
-            v = store[name] += current;
+        let hot = {};
+        if (value && type === 'string') {
+            let part, parts = value.split(delimiter);
+            for (let i = 0, n = parts.length; i < n; i++) {
+                part = parts[i].trim();
+                if (part === '') {
+                    continue;
+                }
+                dynamic.add(part);
+                hot[part] = null;
+            }
         }
-        else if (previous !== current) {
-            v = store[name] = store[name].replace(previous, current);
+        let cold = store[id];
+        if (cold !== undefined) {
+            for (let part in cold) {
+                if (part in hot) {
+                    continue;
+                }
+                dynamic.delete(part);
+            }
         }
-        store[id] = current;
+        store[id] = hot;
+    }
+    value = store[base];
+    for (let key of dynamic) {
+        value += (value ? delimiter : '') + key;
+    }
+    if (state === STATE_HYDRATING) {
+        apply(element, name, value);
+    }
+    else {
+        schedule(ctx, element, name, state, value);
     }
-    schedule(ctx, element, name, state, v);
 }
 function property(ctx, element, id, name, state, value) {
     if (value == null || value === false || value === '') {
@@ -64,13 +88,14 @@ function property(ctx, element, id, name, state, value) {
         }
         ctx[name] = value;
     }
-    schedule(ctx, element, name, state, value);
-}
-function schedule(ctx, element, name, state, value) {
     if (state === STATE_HYDRATING) {
         apply(element, name, value);
-        return;
     }
+    else {
+        schedule(ctx, element, name, state, value);
+    }
+}
+function schedule(ctx, element, name, state, value) {
     ctx ??= context(element);
     (ctx.updates ??= {})[name] = value;
     if (state === STATE_NONE && !ctx.updating) {
@@ -100,12 +125,11 @@ function task() {
         scheduled = false;
     }
 }
-const set = (element, name, value, state = STATE_HYDRATING) => {
-    let fn = name === 'class' || name === 'style' ? list : property, type = typeof value;
+const set = (element, name, value) => {
+    let fn = name === 'class' || name === 'style' ? list : property, state = STATE_HYDRATING, type = typeof value;
     if (type === 'function') {
         if (name.startsWith('on')) {
-            event(element, name, value);
-            return;
+            return event(element, name, value);
         }
         let ctx = context(element);
         ctx.effect ??= 0;
@@ -113,7 +137,7 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
         effect(() => {
             let v = value(element);
             if (v == null || typeof v !== 'object') {
-                fn(ctx, element, id, name, v, state);
+                fn(ctx, element, id, name, state, v);
             }
             else if (isArray(v)) {
                 let last = v.length - 1;
@@ -128,8 +152,7 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
         return;
     }
     if (type !== 'object') {
-        fn(null, element, null, name, state, value);
-        return;
+        return fn(null, element, null, name, state, value);
     }
     if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
@@ -137,7 +160,7 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
             if (v == null || v === false || v === '') {
                 continue;
             }
-            set(element, name, v, state);
+            set(element, name, v);
         }
         return;
     }
@@ -145,7 +168,8 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
 };
 const spread = function (element, value) {
     if (isObject(value)) {
-        for (let name in value) {
+        let names = Object.keys(value), name;
+        while (name = names.pop()) {
             let v = value[name];
             if (v == null || v === false || v === '') {
                 continue;

package/build/event/index.js

@@ -66,15 +66,15 @@ export default (element, event, listener) => {
         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;
-        case 'onrender':
-            root(() => listener(element));
-            return;
         default:
             element[keys[event] || register(element, event)] = listener;
             return;

package/build/slot/{reactive.js → array.js}

@@ -3,7 +3,7 @@ import { EMPTY_FRAGMENT } from '../constants.js';
 import { append } from '../utilities/fragment.js';
 import { cloneNode, firstChild, lastChild } from '../utilities/node.js';
 import { ondisconnect, remove } from './cleanup.js';
-class ReactiveArraySlot {
+class ArraySlot {
     array;
     fragment;
     marker;
@@ -16,7 +16,7 @@ class ReactiveArraySlot {
         this.template = function (data, i) {
             let dispose, frag = root((d) => {
                 dispose = d;
-                return template.call(this, data, i);
+                return template(data, i);
             }), group = {
                 head: firstChild.call(frag),
                 tail: lastChild.call(frag)
@@ -66,58 +66,46 @@ class ReactiveArraySlot {
         return this.marker;
     }
     clear() {
-        remove(this.nodes);
+        remove(...this.nodes.splice(0));
     }
     pop() {
         let group = this.nodes.pop();
         if (group) {
-            remove([group]);
+            remove(group);
         }
     }
     push(items) {
-        let anchor = this.anchor(), array = this.array, length = this.nodes.length;
-        this.nodes.length = length + items.length;
-        for (let i = 0, n = items.length; i < n; i++) {
-            this.nodes[i + length] = this.template.call(array, items[i], i);
-        }
+        let anchor = this.anchor();
+        this.nodes.push(...items.map(this.template));
         anchor.after(this.fragment);
     }
     render() {
-        let nodes = this.nodes;
-        if (nodes.length) {
-            remove(nodes);
+        if (this.nodes.length) {
+            remove(...this.nodes.splice(0));
         }
-        nodes = this.array.map(this.template);
+        this.nodes = this.array.map(this.template);
         this.marker.after(this.fragment);
     }
     shift() {
         let group = this.nodes.shift();
         if (group) {
-            remove([group]);
+            remove(group);
         }
     }
     splice(start, stop = this.nodes.length, ...items) {
         if (!items.length) {
-            return remove(this.nodes.splice(start, stop));
-        }
-        let array = this.array, n = items.length, nodes = new Array(n);
-        for (let i = 0; i < n; i++) {
-            nodes[i] = this.template.call(array, items[i], i);
+            return remove(...this.nodes.splice(start, stop));
         }
-        remove(this.nodes.splice(start, stop, ...nodes));
+        remove(...this.nodes.splice(start, stop, ...items.map(this.template)));
         this.anchor(start - 1).after(this.fragment);
     }
     unshift(items) {
-        let array = this.array, n = items.length, nodes = new Array(n);
-        for (let i = 0; i < n; i++) {
-            nodes[i] = this.template.call(array, items[i], i);
-        }
-        this.nodes.unshift(...nodes);
+        this.nodes.unshift(...items.map(this.template));
         this.marker.after(this.fragment);
     }
 }
 export default (anchor, renderable) => {
-    let { array, template } = renderable, slot = new ReactiveArraySlot(anchor, array, template);
+    let { array, template } = renderable, slot = new ArraySlot(anchor, array, template);
     if (array.length) {
         root(() => {
             slot.nodes = array.map(slot.template);

package/build/slot/cleanup.d.ts

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

package/build/slot/cleanup.js

@@ -1,42 +1,17 @@
-import queue from '@esportsplus/queue';
 import { CLEANUP } from '../constants.js';
-import { microtask } from '../utilities/queue.js';
 import { previousSibling } from '../utilities/node.js';
-let cleanup = queue(64), scheduled = false;
-function schedule() {
-    if (!cleanup.length || scheduled) {
-        return;
-    }
-    scheduled = true;
-    microtask.add(task);
-}
-function task() {
-    try {
-        let fns, fn, n = cleanup.length;
-        while ((fns = cleanup.next()) && n--) {
-            while (fn = fns.pop()) {
-                fn();
-            }
-        }
-    }
-    catch { }
-    if (cleanup.length) {
-        microtask.add(task);
-    }
-    else {
-        scheduled = false;
-    }
-}
 const ondisconnect = (element, fn) => {
     (element[CLEANUP] ??= []).push(fn);
 };
-const remove = (groups) => {
-    let group;
-    while (group = groups.pop()) {
-        let head = group.head, next, tail = group.tail || head;
+const remove = (...groups) => {
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let fns, fn, group = groups[i], head = group.head, next, tail = group.tail || head;
         while (tail) {
             if (CLEANUP in tail) {
-                cleanup.add(tail[CLEANUP]);
+                fns = tail[CLEANUP];
+                while (fn = fns.pop()) {
+                    fn();
+                }
             }
             next = previousSibling.call(tail);
             tail.remove();
@@ -46,8 +21,5 @@ const remove = (groups) => {
             tail = next;
         }
     }
-    if (!scheduled && cleanup.length) {
-        schedule();
-    }
 };
 export { ondisconnect, remove };

package/build/slot/effect.js

@@ -5,67 +5,75 @@ import { raf } from '../utilities/queue.js';
 import { remove } from './cleanup.js';
 import text from '../utilities/text.js';
 import render from './render.js';
-function update(anchor, value) {
-    if (this.group) {
-        remove([this.group]);
-        this.group = undefined;
-    }
-    if (value == null || value === false) {
-        value = '';
-    }
-    let textnode = this.textnode;
-    if (typeof value !== 'object') {
-        if (textnode) {
-            nodeValue.call(textnode, String(value));
-            if (!textnode.isConnected) {
-                anchor.after(textnode);
+class EffectSlot {
+    anchor;
+    disposer;
+    group = null;
+    textnode = null;
+    constructor(anchor, fn) {
+        let dispose = fn.length ? () => this.dispose() : undefined, state = STATE_HYDRATING;
+        this.anchor = anchor;
+        this.disposer = effect(() => {
+            let value = fn(dispose);
+            if (state === STATE_HYDRATING) {
+                state = STATE_NONE;
+                this.update(value);
             }
-        }
-        else {
-            anchor.after(this.textnode = text(String(value)));
-        }
-    }
-    else {
-        let fragment = render(anchor, value), head = firstChild.call(fragment);
-        if (textnode && textnode.isConnected) {
-            remove([{ head: textnode, tail: textnode }]);
-        }
-        if (head) {
-            this.group = {
-                head,
-                tail: lastChild.call(fragment)
-            };
-            anchor.after(fragment);
-        }
+            else {
+                raf.add(() => {
+                    this.update(value);
+                });
+            }
+        });
     }
-}
-export default (anchor, fn) => {
-    let context = {
-        group: undefined,
-        textnode: undefined
-    }, dispose = fn.length ? () => {
-        let { group, textnode } = context;
+    dispose() {
+        let { anchor, group, textnode } = this;
         if (textnode) {
             group = { head: anchor, tail: textnode };
         }
         else if (group) {
             group.head = anchor;
         }
-        d();
+        this.disposer();
         if (group) {
-            remove([group]);
+            remove(group);
         }
-    } : undefined, state = STATE_HYDRATING;
-    let d = effect(() => {
-        let value = fn(dispose);
-        if (state === STATE_HYDRATING) {
-            update.call(context, anchor, value);
-            state = STATE_NONE;
+    }
+    update(value) {
+        if (this.group) {
+            remove(this.group);
+            this.group = null;
+        }
+        if (value == null || value === false) {
+            value = '';
         }
-        else if (state === STATE_NONE) {
-            raf.add(() => {
-                update.call(context, anchor, value);
-            });
+        let { anchor, textnode } = this;
+        if (typeof value !== 'object') {
+            if (textnode) {
+                nodeValue.call(textnode, String(value));
+                if (!textnode.isConnected) {
+                    anchor.after(textnode);
+                }
+            }
+            else {
+                anchor.after(this.textnode = text(String(value)));
+            }
         }
-    });
+        else {
+            let fragment = render(anchor, value), head = firstChild.call(fragment);
+            if (textnode?.isConnected) {
+                remove({ head: textnode, tail: textnode });
+            }
+            if (head) {
+                this.group = {
+                    head,
+                    tail: lastChild.call(fragment)
+                };
+                anchor.after(fragment);
+            }
+        }
+    }
+}
+export default (anchor, fn) => {
+    new EffectSlot(anchor, fn);
 };

package/build/slot/render.js

@@ -3,7 +3,7 @@ import { EMPTY_FRAGMENT, RENDERABLE } from '../constants.js';
 import { cloneNode, lastChild } from '../utilities/node.js';
 import { append } from '../utilities/fragment.js';
 import text from '../utilities/text.js';
-import reactive from './reactive.js';
+import array from './array.js';
 export default function render(anchor, input) {
     if (input == null || input === false || input === '') {
         return EMPTY_FRAGMENT;
@@ -11,12 +11,12 @@ export default function render(anchor, input) {
     if (typeof input !== 'object') {
         return text(input);
     }
+    if (RENDERABLE in input) {
+        return array(anchor, input);
+    }
     if ('nodeType' in input) {
         return input;
     }
-    if (RENDERABLE in input) {
-        return reactive(anchor, input);
-    }
     if (isArray(input)) {
         let fragment = cloneNode.call(EMPTY_FRAGMENT);
         for (let i = 0, n = input.length; i < n; i++) {

package/build/types.d.ts

@@ -6,14 +6,14 @@ import slot from './slot/index.js';
 import html from './html/index.js';
 type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
 type Attributes<T extends HTMLElement = Element> = {
-    [key: `aria-${string}`]: string | number | boolean | undefined;
-    [key: `data-${string}`]: string | undefined;
     class?: Attribute | Attribute[];
     onconnect?: (element: T) => void;
     ondisconnect?: (element: T) => void;
     onrender?: (element: T) => void;
     ontick?: (dispose: VoidFunction, element: T) => void;
     style?: Attribute | Attribute[];
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    [key: `data-${string}`]: string | undefined;
 } & {
     [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: T, event: GlobalEventHandlersEventMap[K]) => void;
 } & Record<PropertyKey, unknown>;
@@ -24,7 +24,7 @@ type Renderable<T> = DocumentFragment | Effect<T> | Node | NodeList | Primitive
 type RenderableReactive<T> = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
     array: ReactiveArray<T>;
-    template: (this: ReactiveArray<T>, value: T, i: number) => ReturnType<typeof html>;
+    template: (value: T, i: number) => ReturnType<typeof html>;
 }>;
 type SlotGroup = {
     head: Element;

package/build/utilities/fragment.js

@@ -1,11 +1,10 @@
 import { innerHTML } from './element.js';
 import { cloneNode } from './node.js';
-let scratchpad = document.createElement('template');
+let template = document.createElement('template');
 const append = DocumentFragment.prototype.append;
 const fragment = (html) => {
-    innerHTML.call(scratchpad, html);
-    let content = scratchpad.content;
-    scratchpad = cloneNode.call(scratchpad);
-    return content;
+    let element = cloneNode.call(template);
+    innerHTML.call(element, html);
+    return element.content;
 };
 export { append, fragment };

package/build/utilities/queue.d.ts

@@ -1,3 +1,2 @@
-declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
-export { microtask, raf };
+export { raf };

package/build/utilities/queue.js

@@ -1,4 +1,3 @@
-import { micro as m, raf as r } from '@esportsplus/tasks';
-const microtask = m();
+import { raf as r } from '@esportsplus/tasks';
 const raf = r();
-export { microtask, raf };
+export { raf };

package/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.16.7",
+    "@esportsplus/reactivity": "^0.17.1",
     "@esportsplus/tasks": "^0.2.1",
     "@esportsplus/utilities": "^0.22.1"
   },
@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -61,36 +61,70 @@ function list(
         value = '';
     }
 
-    if (!value || typeof value !== 'string') {
-        return;
-    }
-
-    let delimiter = delimiters[name],
+    let base = name + '.static',
+        delimiter = delimiters[name],
         store = (ctx ??= context(element)).store ??= {},
-        v = store[name];
+        dynamic = store[name] as Set<string> | undefined,
+        type = typeof value;
+
+    if (dynamic === undefined) {
+        let value = (element.getAttribute(name) || '').trim();
 
-    if (v === undefined) {
-        v = store[name] = (element.getAttribute(name) || '').trim();
+        store[base] = value;
+        store[name] = dynamic = new Set();
     }
 
     if (id === null) {
-        v = store[name] += (v ? delimiter : '') + value;
+        if (value && type === 'string') {
+            store[base] += (store[base] ? delimiter : '') + value;
+        }
     }
     else {
-        let current = delimiter + value,
-            previous = store[id] as string | undefined;
+        let hot: Attributes = {};
+
+        if (value && type === 'string') {
+            let part: string,
+                parts = (value as string).split(delimiter);
+
+            for (let i = 0, n = parts.length; i < n; i++) {
+                part = parts[i].trim();
+
+                if (part === '') {
+                    continue;
+                }
 
-        if (previous === undefined) {
-            v = store[name] += current;
+                dynamic.add(part);
+                hot[part] = null;
+            }
         }
-        else if (previous !== current) {
-            v = store[name] = (store[name] as string).replace(previous, current);
+
+        let cold = store[id] as Attributes | undefined;
+
+        if (cold !== undefined) {
+            for (let part in cold) {
+                if (part in hot) {
+                    continue;
+                }
+
+                dynamic.delete(part);
+            }
         }
 
-        store[id] = current;
+        store[id] = hot;
+    }
+
+    value = store[base];
+
+    for (let key of dynamic) {
+        value += (value ? delimiter : '') + key;
     }
 
-    schedule(ctx, element, name, state, v);
+    if (state === STATE_HYDRATING) {
+        apply(element, name, value);
+    }
+    else {
+        schedule(ctx, element, name, state, value);
+    }
 }
 
 function property(
@@ -115,15 +149,15 @@ function property(
         ctx[name] = value as string;
     }
 
-    schedule(ctx, element, name, state, value);
-}
-
-function schedule(ctx: Context | null, element: Element, name: string, state: State, value: unknown) {
     if (state === STATE_HYDRATING) {
         apply(element, name, value);
-        return;
     }
+    else {
+        schedule(ctx, element, name, state, value);
+    }
+}
 
+function schedule(ctx: Context | null, element: Element, name: string, state: State, value: unknown) {
     ctx ??= context(element);
     (ctx.updates ??= {})[name] = value;
 
@@ -164,14 +198,14 @@ function task() {
 }
 
 
-const set = (element: Element, name: string, value: unknown, state: State = STATE_HYDRATING) => {
+const set = (element: Element, name: string, value: unknown) => {
     let fn = name === 'class' || name === 'style' ? list : property,
+        state: State = STATE_HYDRATING,
         type = typeof value;
 
     if (type === 'function') {
         if (name.startsWith('on')) {
-            event(element, name as `on${string}`, value as Function);
-            return;
+            return event(element, name as `on${string}`, value as Function);
         }
 
         let ctx = context(element);
@@ -184,7 +218,7 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
             let v = (value as Function)(element);
 
             if (v == null || typeof v !== 'object') {
-                fn(ctx, element, id, name, v, state);
+                fn(ctx, element, id, name, state, v);
             }
             else if (isArray(v)) {
                 let last = v.length - 1;
@@ -210,8 +244,7 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
     }
 
     if (type !== 'object') {
-        fn(null, element, null, name, state, value);
-        return;
+        return fn(null, element, null, name, state, value);
     }
 
     if (isArray(value)) {
@@ -222,7 +255,7 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
                 continue;
             }
 
-            set(element, name, v, state);
+            set(element, name, v);
         }
         return;
     }
@@ -232,7 +265,10 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {
     if (isObject(value)) {
-        for (let name in value) {
+        let names = Object.keys(value),
+            name;
+
+        while (name = names.pop()) {
             let v = value[name];
 
             if (v == null || v === false || v === '') {

package/src/event/index.ts

@@ -98,6 +98,10 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
             ondisconnect(element, () => listener(element));
             return;
 
+        case 'onrender':
+            root(() => listener(element));
+            return;
+
         case 'onresize':
             onresize(element, listener);
             return;
@@ -106,10 +110,6 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
             ontick(element, listener);
             return;
 
-        case 'onrender':
-            root(() => listener(element));
-            return;
-
         default:
             element[ keys[event] || register(element, event) ] = listener;
             return;

package/src/slot/{reactive.ts → array.ts}

@@ -6,15 +6,12 @@ import { cloneNode, firstChild, lastChild } from '~/utilities/node';
 import { ondisconnect, remove } from './cleanup';
 
 
-class ReactiveArraySlot<T> {
+class ArraySlot<T> {
     array: ReactiveArray<T>;
     fragment: Node;
     marker: Element;
     nodes: SlotGroup[] = [];
-    template: (
-        this: ReactiveArray<T>,
-        ...args: Parameters< Parameters<ReactiveArray<T>['map']>[0] >
-    ) => SlotGroup;
+    template: (...args: Parameters< RenderableReactive<T>['template'] >) => SlotGroup;
 
 
     constructor(anchor: Element, array: ReactiveArray<T>, template: RenderableReactive<T>['template']) {
@@ -26,7 +23,7 @@ class ReactiveArraySlot<T> {
             let dispose: VoidFunction,
                 frag = root((d) => {
                     dispose = d;
-                    return template.call(this, data, i);
+                    return template(data, i);
                 }),
                 group = {
                     head: firstChild.call(frag),
@@ -88,38 +85,31 @@ class ReactiveArraySlot<T> {
     }
 
     clear() {
-        remove(this.nodes);
+        remove(...this.nodes.splice(0));
     }
 
     pop() {
         let group = this.nodes.pop();
 
         if (group) {
-            remove([group]);
+            remove(group);
         }
     }
 
     push(items: T[]) {
-        let anchor = this.anchor(),
-            array = this.array,
-            length = this.nodes.length;
+        let anchor = this.anchor();
 
-        this.nodes.length = length + items.length;
+        this.nodes.push( ...items.map(this.template) );
 
-        for (let i = 0, n = items.length; i < n; i++) {
-            this.nodes[i + length] = this.template.call(array, items[i], i);
-        }
         anchor.after(this.fragment);
     }
 
     render() {
-        let nodes = this.nodes;
-
-        if (nodes.length) {
-            remove(nodes);
+        if (this.nodes.length) {
+            remove(...this.nodes.splice(0));
         }
 
-        nodes = this.array.map(this.template);
+        this.nodes = this.array.map(this.template);
         this.marker.after(this.fragment);
     }
 
@@ -127,37 +117,21 @@ class ReactiveArraySlot<T> {
         let group = this.nodes.shift();
 
         if (group) {
-            remove([group]);
+            remove(group);
         }
     }
 
     splice(start: number, stop: number = this.nodes.length, ...items: T[]) {
         if (!items.length) {
-            return remove(this.nodes.splice(start, stop));
-        }
-
-        let array = this.array,
-            n = items.length,
-            nodes = new Array(n);
-
-        for (let i = 0; i < n; i++) {
-            nodes[i] = this.template.call(array, items[i], i);
+            return remove(...this.nodes.splice(start, stop));
         }
 
-        remove(this.nodes.splice(start, stop, ...nodes));
+        remove( ...this.nodes.splice(start, stop, ...items.map(this.template)) );
         this.anchor(start - 1).after(this.fragment);
     }
 
     unshift(items: T[]) {
-        let array = this.array,
-            n = items.length,
-            nodes = new Array(n);
-
-        for (let i = 0; i < n; i++) {
-            nodes[i] = this.template.call(array, items[i], i);
-        }
-
-        this.nodes.unshift(...nodes);
+        this.nodes.unshift(...items.map(this.template));
         this.marker.after(this.fragment);
     }
 }
@@ -165,7 +139,7 @@ class ReactiveArraySlot<T> {
 
 export default <T>(anchor: Element, renderable: RenderableReactive<T>) => {
     let { array, template } = renderable,
-        slot = new ReactiveArraySlot(anchor, array, template);
+        slot = new ArraySlot(anchor, array, template);
 
     if (array.length) {
         root(() => {

package/src/slot/cleanup.ts

@@ -1,60 +1,27 @@
-import queue from '@esportsplus/queue';
 import { CLEANUP } from '~/constants';
-import { microtask } from '~/utilities/queue';
 import { previousSibling } from '~/utilities/node';
 import { SlotGroup } from '~/types';
 
 
-let cleanup = queue<VoidFunction[]>(64),
-    scheduled = false;
-
-
-function schedule() {
-    if (!cleanup.length || scheduled) {
-        return;
-    }
-
-    scheduled = true;
-    microtask.add(task);
-}
-
-function task() {
-    try {
-        let fns, fn,
-            n = cleanup.length;
-
-        while ((fns = cleanup.next()) && n--) {
-            while (fn = fns.pop()) {
-                fn();
-            }
-        }
-    }
-    catch { }
-
-    if (cleanup.length) {
-        microtask.add(task);
-    }
-    else {
-        scheduled = false;
-    }
-}
-
-
 const ondisconnect = (element: Element, fn: VoidFunction) => {
     ((element as any)[CLEANUP] ??= []).push(fn);
 };
 
-const remove = (groups: SlotGroup[]) => {
-    let group;
-
-    while (group = groups.pop()) {
-        let head = group.head,
+const remove = (...groups: SlotGroup[]) => {
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let fns, fn,
+            group = groups[i],
+            head = group.head,
             next,
             tail = group.tail || head;
 
         while (tail) {
             if (CLEANUP in tail) {
-                cleanup.add( tail[CLEANUP] as VoidFunction[] );
+                fns = tail[CLEANUP] as VoidFunction[];
+
+                while (fn = fns.pop()) {
+                    fn();
+                }
             }
 
             next = previousSibling.call(tail);
@@ -67,10 +34,6 @@ const remove = (groups: SlotGroup[]) => {
             tail = next;
         }
     }
-
-    if (!scheduled && cleanup.length) {
-        schedule();
-    }
 };
 
 

package/src/slot/effect.ts

@@ -8,84 +8,96 @@ import text from '~/utilities/text';
 import render from './render';
 
 
-function update(this: { group?: SlotGroup, textnode?: Node }, anchor: Element, value: unknown) {
-    if (this.group) {
-        remove([this.group]);
-        this.group = undefined;
-    }
+class EffectSlot {
+    anchor: Element;
+    disposer: VoidFunction;
+    group: SlotGroup | null = null;
+    textnode: Node | null = null;
 
-    if (value == null || value === false) {
-        value = '';
-    }
 
-    let textnode = this.textnode;
+    constructor(anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) {
+        let dispose = fn.length ? () => this.dispose() : undefined,
+            state = STATE_HYDRATING;
 
-    if (typeof value !== 'object') {
-        if (textnode) {
-            nodeValue.call(textnode, String(value));
+        this.anchor = anchor;
+        this.disposer = effect(() => {
+            let value = fn(dispose);
 
-            if (!textnode.isConnected) {
-                anchor.after(textnode);
+            if (state === STATE_HYDRATING) {
+                state = STATE_NONE;
+                this.update(value);
             }
-        }
-        else {
-            anchor.after( this.textnode = text( String(value) ) );
-        }
+            else {
+                raf.add(() => {
+                    this.update(value);
+                });
+            }
+        });
     }
-    else {
-        let fragment = render(anchor, value),
-            head = firstChild.call(fragment);
 
-        if (textnode && textnode.isConnected) {
-            remove([{ head: textnode as Element, tail: textnode as Element }]);
+
+    dispose() {
+        let { anchor, group, textnode } = this;
+
+        if (textnode) {
+            group = { head: anchor, tail: textnode as Element };
+        }
+        else if (group) {
+            group.head = anchor;
         }
 
-        if (head) {
-            this.group = {
-                head,
-                tail: lastChild.call(fragment)
-            };
+        this.disposer();
 
-            anchor.after(fragment);
+        if (group) {
+            remove(group);
         }
     }
-}
 
+    update(value: unknown) {
+        if (this.group) {
+            remove(this.group);
+            this.group = null;
+        }
 
-export default (anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) => {
-    let context = {
-            group: undefined as SlotGroup | undefined,
-            textnode: undefined as Node | undefined
-        },
-        dispose = fn.length ? () => {
-            let { group, textnode } = context;
+        if (value == null || value === false) {
+            value = '';
+        }
+
+        let { anchor, textnode } = this;
 
+        if (typeof value !== 'object') {
             if (textnode) {
-                group = { head: anchor, tail: textnode as Element };
+                nodeValue.call(textnode, String(value));
+
+                if (!textnode.isConnected) {
+                    anchor.after(textnode);
+                }
             }
-            else if (group) {
-                group.head = anchor;
+            else {
+                anchor.after( this.textnode = text( String(value) ) );
             }
+        }
+        else {
+            let fragment = render(anchor, value),
+                head = firstChild.call(fragment);
 
-            d();
-
-            if (group) {
-                remove([group]);
+            if (textnode?.isConnected) {
+                remove({ head: textnode as Element, tail: textnode as Element });
             }
-        } : undefined,
-        state = STATE_HYDRATING;
 
-    let d = effect(() => {
-            let value = fn(dispose);
+            if (head) {
+                this.group = {
+                    head,
+                    tail: lastChild.call(fragment)
+                };
 
-            if (state === STATE_HYDRATING) {
-                update.call(context, anchor, value);
-                state = STATE_NONE;
+                anchor.after(fragment);
             }
-            else if (state === STATE_NONE) {
-                raf.add(() => {
-                    update.call(context, anchor, value);
-                });
-            }
-        });
+        }
+    }
+}
+
+
+export default (anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) => {
+    new EffectSlot(anchor, fn);
 };

package/src/slot/render.ts

@@ -4,7 +4,7 @@ import { Element, RenderableReactive } from '~/types';
 import { cloneNode, lastChild } from '~/utilities/node';
 import { append } from '~/utilities/fragment';
 import text from '~/utilities/text';
-import reactive from './reactive';
+import array from './array';
 
 
 export default function render(anchor: Element, input: unknown): Node {
@@ -16,12 +16,12 @@ export default function render(anchor: Element, input: unknown): Node {
         return text(input as any);
     }
 
-    if ('nodeType' in input) {
-        return input as Node;
+    if (RENDERABLE in input) {
+        return array(anchor, input as RenderableReactive<unknown>);
     }
 
-    if (RENDERABLE in input) {
-        return reactive(anchor, input as RenderableReactive<unknown>);
+    if ('nodeType' in input) {
+        return input as Node;
     }
 
     if (isArray(input)) {

package/src/types.ts

@@ -9,14 +9,14 @@ import html from './html';
 type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
 
 type Attributes<T extends HTMLElement = Element> = {
-    [key: `aria-${string}`]: string | number | boolean | undefined;
-    [key: `data-${string}`]: string | undefined;
     class?: Attribute | Attribute[];
     onconnect?: (element: T) => void;
     ondisconnect?: (element: T) => void;
     onrender?: (element: T) => void;
     ontick?: (dispose: VoidFunction, element: T) => void;
     style?: Attribute | Attribute[];
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    [key: `data-${string}`]: string | undefined;
 } & {
     [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: T, event: GlobalEventHandlersEventMap[K]) => void;
 } & Record<PropertyKey, unknown>;
@@ -34,11 +34,7 @@ type Renderable<T> = DocumentFragment | Effect<T> | Node | NodeList | Primitive
 type RenderableReactive<T> = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
     array: ReactiveArray<T>;
-    template: (
-        this: ReactiveArray<T>,
-        value: T,
-        i: number
-    ) => ReturnType<typeof html>;
+    template: (value: T, i: number) => ReturnType<typeof html>;
 }>;
 
 type SlotGroup = {

package/src/utilities/fragment.ts

@@ -2,19 +2,17 @@ import { innerHTML } from './element';
 import { cloneNode } from './node';
 
 
-let scratchpad = document.createElement('template');
+let template = document.createElement('template');
 
 
 const append = DocumentFragment.prototype.append;
 
 const fragment = (html: string): DocumentFragment => {
-    innerHTML.call(scratchpad, html);
+    let element = cloneNode.call(template) as HTMLTemplateElement;
 
-    let content = scratchpad.content;
+    innerHTML.call(element, html);
 
-    scratchpad = cloneNode.call(scratchpad) as HTMLTemplateElement;
-
-    return content;
+    return element.content;
 };
 
 

package/src/utilities/queue.ts

@@ -1,9 +1,7 @@
-import { micro as m, raf as r } from '@esportsplus/tasks';
+import { raf as r } from '@esportsplus/tasks';
 
 
-const microtask = m();
-
 const raf = r();
 
 
-export { microtask, raf };
+export { raf };