@esportsplus/template 0.15.15 → 0.15.17

package/build/attributes.d.ts

@@ -1,9 +1,9 @@
 import { Attributes, Element } from './types.js';
 declare const apply: (element: Element) => void;
-declare const spread: (element: Element, attributes: Attributes | Attributes[]) => void;
+declare const spread: (element: Element, value: Attributes | Attributes[]) => void;
 declare const _default: {
     apply: (element: Element) => void;
-    spread: (element: Element, attributes: Attributes | Attributes[]) => void;
+    spread: (element: Element, value: Attributes | Attributes[]) => void;
 };
 export default _default;
 export { apply, spread };

package/build/attributes.js

@@ -1,12 +1,19 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
+import { ATTRIBUTE_STORE } from './constants.js';
 import { ondisconnect } from './slot.js';
 import { className, raf, removeAttribute, setAttribute } from './utilities.js';
+import q from '@esportsplus/queue';
 import event from './event.js';
-let attributes = {}, delimiters = {
+const EFFECT_KEY = Symbol();
+const UPDATES_KEY = Symbol();
+const STATE_HYDRATING = 0;
+const STATE_NONE = 1;
+const STATE_WAITING = 2;
+let delimiters = {
     class: ' ',
     style: ';'
-}, key = Symbol();
+}, hydrating = {}, queue = q(64), scheduled = false;
 function attribute(element, name, value) {
     if (value === '' || value === false || value == null) {
         removeAttribute.call(element, name);
@@ -21,55 +28,79 @@ function attribute(element, name, value) {
         element[name] = value;
     }
 }
-function set(element, value, name, wait = false) {
+function schedule() {
+    if (scheduled) {
+        return;
+    }
+    scheduled = true;
+    raf.add(task);
+}
+function set(context, name, value, state) {
     if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            set(element, value[i], name, wait);
+            set(context, name, value[i], state);
         }
     }
     else if (isFunction(value)) {
         if (name.startsWith('on')) {
-            event(element, name, value);
+            event(context.element, name, value);
         }
         else {
-            let id = ('e' + store(element)[key]++);
-            ondisconnect(element, effect(() => {
-                let v = value(element);
+            context.store[EFFECT_KEY] ??= 0;
+            let id = context.store[EFFECT_KEY]++;
+            ondisconnect(context.element, effect(() => {
+                let v = value(context.element);
                 if (isArray(v)) {
                     let last = v.length - 1;
                     for (let i = 0, n = v.length; i < n; i++) {
-                        update(element, id, name, v[i], wait || i !== last);
+                        update(context, id, name, v[i], state === STATE_HYDRATING
+                            ? state
+                            : i !== last ? STATE_WAITING : state);
                     }
                 }
                 else {
-                    update(element, id, name, v, wait);
+                    update(context, id, name, v, state);
                 }
             }));
-            wait = false;
+            state = STATE_NONE;
         }
     }
     else {
-        update(element, null, name, value, wait);
+        update(context, null, name, value, state);
     }
 }
-function store(element) {
-    return (element[key] || (element[key] = { [key]: 0 }));
+function task() {
+    let context, n = queue.length;
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+        for (let name in updates) {
+            attribute(element, name, updates[name]);
+            delete updates[name];
+        }
+        context.updating = false;
+    }
+    if (queue.length) {
+        raf.add(task);
+    }
+    else {
+        scheduled = false;
+    }
 }
-function update(element, id, name, value, wait = false) {
+function update(context, id, name, value, state) {
     if (value === false || value == null) {
         value = '';
     }
-    let data = store(element);
+    let store = context.store;
     if (name in delimiters) {
-        let cache = name + '.static', delimiter = delimiters[name], dynamic = data[name];
+        let cache = name + '.static', delimiter = delimiters[name], dynamic = store[name];
         if (dynamic === undefined) {
-            let value = (element.getAttribute(name) || '').trim();
-            data[cache] = value.endsWith(delimiter) ? value.slice(0, -1) : value;
-            data[name] = dynamic = {};
+            let value = (context.element.getAttribute(name) || '').trim();
+            store[cache] = value;
+            store[name] = dynamic = {};
         }
         if (id === null) {
             if (value && isString(value)) {
-                data[cache] += (data[cache] ? delimiter : '') + value;
+                store[cache] += (store[cache] ? delimiter : '') + value;
             }
         }
         else {
@@ -85,7 +116,7 @@ function update(element, id, name, value, wait = false) {
                     hot[part] = null;
                 }
             }
-            let cold = data[id];
+            let cold = store[id];
             if (cold !== undefined) {
                 for (let part in cold) {
                     if (part in hot) {
@@ -94,48 +125,57 @@ function update(element, id, name, value, wait = false) {
                     delete dynamic[part];
                 }
             }
-            data[id] = hot;
+            store[id] = hot;
         }
-        value = data[cache];
+        value = store[cache];
         for (let key in dynamic) {
             value += (value ? delimiter : '') + key;
         }
     }
-    else if (isString(id)) {
-        if (data[name] === value) {
+    else if (id !== null) {
+        if (store[name] === value) {
             return;
         }
-        data[name] = value;
+        store[name] = value;
     }
-    if (wait) {
-        if (id === null) {
-            attributes[name] = value;
-        }
+    if (state === STATE_HYDRATING) {
+        hydrating[name] = value;
     }
     else {
-        raf.add(() => {
-            attribute(element, name, value);
-        });
+        context.updates[name] = value;
+        if (state === STATE_NONE && !context.updating) {
+            context.updating = true;
+            queue.add(context);
+        }
+        if (!scheduled) {
+            schedule();
+        }
     }
 }
 const apply = (element) => {
-    for (let key in attributes) {
-        attribute(element, key, attributes[key]);
+    for (let key in hydrating) {
+        attribute(element, key, hydrating[key]);
     }
-    attributes = {};
+    hydrating = {};
 };
-const spread = function (element, attributes) {
-    if (isObject(attributes)) {
-        for (let name in attributes) {
-            set(element, attributes[name], name, true);
+const spread = function (element, value) {
+    let cache = element[ATTRIBUTE_STORE] ??= { [UPDATES_KEY]: {} }, context = {
+        element,
+        store: cache,
+        updates: cache[UPDATES_KEY],
+        updating: false
+    };
+    if (isArray(value)) {
+        for (let i = 0, n = value.length; i < n; i++) {
+            let v = value[i];
+            for (let name in v) {
+                set(context, name, v[name], STATE_HYDRATING);
+            }
         }
     }
-    else if (isArray(attributes)) {
-        for (let i = 0, n = attributes.length; i < n; i++) {
-            let attrs = attributes[i];
-            for (let name in attrs) {
-                set(element, attrs[name], name, true);
-            }
+    else if (isObject(value)) {
+        for (let name in value) {
+            set(context, name, value[name], STATE_HYDRATING);
         }
     }
 };

package/build/constants.d.ts

@@ -1,3 +1,4 @@
+declare const ATTRIBUTE_STORE: unique symbol;
 declare const NODE_CLOSING = 1;
 declare const NODE_ELEMENT = 3;
 declare const NODE_SLOT = 4;
@@ -12,4 +13,4 @@ declare const SLOT_CLEANUP: unique symbol;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
 declare const SLOT_MARKER_LENGTH: number;
-export { NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };
+export { ATTRIBUTE_STORE, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/constants.js

@@ -1,3 +1,4 @@
+const ATTRIBUTE_STORE = Symbol();
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
 const NODE_ELEMENT = 3;
@@ -32,4 +33,4 @@ const SLOT_CLEANUP = Symbol();
 const SLOT_HTML = '<!--$-->';
 const SLOT_MARKER = '{{$}}';
 const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
-export { NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };
+export { ATTRIBUTE_STORE, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/event.js

@@ -1,7 +1,7 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
 import { ondisconnect } from './slot.js';
-import { addEventListener, parentElement } from './utilities.js';
+import { addEventListener, parentElement, raf } from './utilities.js';
 let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
     'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
     'onscroll',
@@ -13,16 +13,17 @@ let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(
 });
 export default (element, event, listener) => {
     if (event === 'onconnect') {
-        let interval = setInterval(() => {
+        let retry = 60, task = () => {
             retry--;
             if (element.isConnected) {
                 retry = 0;
                 root(() => listener(element));
             }
-            if (!retry) {
-                clearInterval(interval);
+            if (retry) {
+                raf.add(task);
             }
-        }, 1000 / 60), retry = 60;
+        };
+        raf.add(task);
         return;
     }
     else if (event === 'ondisconnect') {

package/build/html/hydrate.d.ts

@@ -1,7 +1,10 @@
-import { Elements, RenderableReactive, RenderableTemplate } from '../types.js';
+import { Elements, RenderableReactive, RenderableTemplate, RenderedGroup } from '../types.js';
 import { Slot } from '../slot.js';
 declare const _default: {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => Elements[];
-    static: <T>(renderable: RenderableTemplate<T>) => Elements;
+    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => RenderedGroup[];
+    static: <T>(renderable: RenderableTemplate<T>) => {
+        elements: Elements;
+        fragment: Node;
+    };
 };
 export default _default;

package/build/html/hydrate.js

@@ -4,19 +4,31 @@ import { apply } from '../attributes.js';
 import cache from './cache.js';
 function reactive(renderable, slot) {
     let array = renderable.values, factory = renderable.template, refresh = () => {
-        slot.length = 0;
-        reactive(renderable, slot);
-    }, render = (i, n) => {
-        return root(() => template(array, factory, i, n));
-    }, renderables = array.map(factory);
-    array.on('pop', () => slot.pop());
-    array.on('push', ({ items }) => slot.push(...render(array.length - items.length)));
+        slot.render(root(() => array.map(template)));
+    }, renderer = (i, n) => {
+        return root(() => array.map(template, i, n));
+    }, template = function (data, i) {
+        let renderable = factory.call(this, data, i);
+        return render(renderable, cache.get(renderable));
+    };
+    array.on('pop', () => {
+        slot.pop();
+    });
+    array.on('push', ({ items }) => {
+        slot.push(...renderer(array.length - items.length));
+    });
     array.on('reverse', refresh);
-    array.on('shift', () => slot.shift());
+    array.on('shift', () => {
+        slot.shift();
+    });
     array.on('sort', refresh);
-    array.on('splice', ({ deleteCount: d, items: i, start: s }) => slot.splice(s, d, ...render(s, i.length)));
-    array.on('unshift', ({ items }) => slot.unshift(...render(0, items.length)));
-    return template(array, factory, 0, renderables.length);
+    array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
+        slot.splice(s, d, ...renderer(s, i.length));
+    });
+    array.on('unshift', ({ items }) => {
+        slot.unshift(...renderer(0, items.length));
+    });
+    return array.map(template);
 }
 function render(renderable, template) {
     let elements = [], fragment = cloneNode.call(template.fragment, true), slots = template.slots;
@@ -24,8 +36,7 @@ function render(renderable, template) {
         let node, previous, values = renderable.values;
         for (let i = slots.length - 1; i >= 0; i--) {
             let { fn, path, slot } = slots[i];
-            if (path === previous) { }
-            else {
+            if (path !== previous) {
                 apply(node);
                 node = fragment;
                 previous = path;
@@ -33,22 +44,14 @@ function render(renderable, template) {
                     node = path[o].call(node);
                 }
             }
-            fn(node, values[slot], name);
+            fn(node, values[slot]);
         }
         apply(node);
     }
     for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
         elements.push(element);
     }
-    return elements;
-}
-function template(array, template, i, n) {
-    let groups = [], renderables = array.map(template, i, n);
-    for (let i = 0, n = renderables.length; i < n; i++) {
-        let renderable = renderables[i];
-        groups.push(render(renderable, cache.get(renderable)));
-    }
-    return groups;
+    return { elements, fragment };
 }
 export default {
     reactive: (renderable, slot) => {

package/build/slot.d.ts

@@ -1,4 +1,4 @@
-import { Element, Elements } from './types.js';
+import { Element, Elements, RenderedGroup } from './types.js';
 declare class Slot {
     marker: Element;
     nodes: Elements[];
@@ -9,11 +9,11 @@ declare class Slot {
     anchor(index?: number): Element;
     clear(): void;
     pop(): Elements[] | undefined;
-    push(...groups: Elements[]): number;
+    push(...groups: RenderedGroup[]): number;
     render(input: unknown): this;
     shift(): Elements[] | undefined;
-    splice(start: number, stop?: number, ...groups: Elements[]): Elements[];
-    unshift(...groups: Elements[]): number;
+    splice(start: number, stop?: number, ...groups: RenderedGroup[]): Elements[];
+    unshift(...groups: RenderedGroup[]): number;
 }
 declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const _default: (marker: Element, value: unknown) => Slot;

package/build/slot.js

@@ -2,18 +2,30 @@ import { effect, root } from '@esportsplus/reactivity';
 import { isArray, isFunction, isInstanceOf, isObject } from '@esportsplus/utilities';
 import { RENDERABLE, RENDERABLE_REACTIVE, SLOT_CLEANUP } from './constants.js';
 import { hydrate } from './html/index.js';
-import { firstChild, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
+import { append, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
 import queue from '@esportsplus/queue';
-let cleanup = queue(1024), scheduled = false;
+let cleanup = queue(64), fallback = fragment(''), scheduled = false;
 function after(anchor, groups) {
-    for (let i = 0, n = groups.length; i < n; i++) {
-        let group = groups[i];
-        if (group.length) {
-            anchor.after(anchor, ...group);
-            anchor = group.at(-1);
+    let elements = [], n = groups.length;
+    if (n) {
+        let fragment = groups[0].fragment || fallback;
+        if (n === 1) {
+            elements.push(groups[0].elements);
+        }
+        else {
+            for (let i = 1; i < n; i++) {
+                let group = groups[i];
+                if (group.fragment) {
+                    append.call(fragment, group.fragment);
+                    group.fragment = null;
+                }
+                elements.push(group.elements);
+            }
         }
+        anchor.after(fragment);
+        groups[0].fragment = null;
     }
-    return groups;
+    return elements;
 }
 function remove(...groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
@@ -31,51 +43,47 @@ function remove(...groups) {
     }
     return groups;
 }
-function render(anchor, input, slot) {
-    if (input === false || input == null) {
-        input = '';
-    }
-    else if (isObject(input)) {
-        if (isArray(input)) {
-            let groups = [];
-            for (let i = 0, n = input.length; i < n; i++) {
-                groups.push(render(null, input[i]));
-            }
-            return anchor ? after(anchor, groups) : groups;
-        }
-        let nodes = [];
-        if (RENDERABLE in input) {
-            if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-                return after(anchor, hydrate.reactive(input, slot));
-            }
-            else {
-                nodes = hydrate.static(input);
-            }
+function render(groups, input, slot) {
+    if (input === false || input == null || input === '') {
+        return groups;
+    }
+    if (isArray(input)) {
+        for (let i = 0, n = input.length; i < n; i++) {
+            render(groups, input[i]);
         }
-        else if (isInstanceOf(input, NodeList)) {
-            for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-                nodes.push(node);
-            }
+    }
+    else if (isObject(input) && RENDERABLE in input) {
+        if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
+            groups.push(...hydrate.reactive(input, slot));
         }
-        else if (isInstanceOf(input, Node)) {
-            nodes = [input];
+        else {
+            groups.push(hydrate.static(input));
         }
-        if (anchor) {
-            anchor.after(...nodes);
+    }
+    else if (isInstanceOf(input, NodeList)) {
+        let elements = [];
+        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
+            elements.push(node);
         }
-        return nodes;
+        groups.push({ elements, fragment: null });
     }
-    if (input === '') {
-        return [];
+    else if (isInstanceOf(input, Node)) {
+        groups.push({
+            elements: [input],
+            fragment: input
+        });
     }
-    let node = text(input);
-    if (anchor) {
-        anchor.after(node);
+    else {
+        let element = text(typeof input === 'string' ? input : String(input));
         if (slot) {
-            slot.text = node;
+            slot.text = element;
         }
+        groups.push({
+            elements: [element],
+            fragment: element
+        });
     }
-    return [node];
+    return groups;
 }
 function schedule() {
     if (scheduled) {
@@ -85,14 +93,14 @@ function schedule() {
     microtask.add(task);
 }
 function task() {
-    let fns;
+    let fn, fns;
     while (fns = cleanup.next()) {
-        for (let i = 0, n = fns.length; i < n; i++) {
-            try {
-                fns[i]();
+        try {
+            while (fn = fns.pop()) {
+                fn();
             }
-            catch { }
         }
+        catch { }
     }
     scheduled = false;
     if (cleanup.length) {
@@ -123,6 +131,7 @@ class Slot {
     }
     clear() {
         remove(...this.nodes);
+        this.nodes.length = 0;
         this.text = null;
     }
     pop() {
@@ -133,11 +142,7 @@ class Slot {
         return remove(group);
     }
     push(...groups) {
-        after(this.anchor(), groups);
-        for (let i = 0, n = groups.length; i < n; i++) {
-            this.nodes.push(groups[i]);
-        }
-        return this.nodes.length;
+        return this.nodes.push(...after(this.anchor(), groups));
     }
     render(input) {
         if (isFunction(input)) {
@@ -156,19 +161,15 @@ class Slot {
         }
         if (this.text) {
             let type = typeof input;
-            if (type === 'object' && input !== null) { }
+            if (type === 'object' && input !== null) {
+            }
             else if (this.text.isConnected) {
                 nodeValue.call(this.text, (type === 'string' || type === 'number') ? input : '');
                 return this;
             }
         }
         this.clear();
-        if (isArray(input) || (isObject(input) && input[RENDERABLE] === RENDERABLE_REACTIVE)) {
-            this.nodes = render(this.marker, input, this);
-        }
-        else {
-            this.nodes = [render(this.marker, input, this)];
-        }
+        this.nodes = after(this.marker, render([], input, this));
         return this;
     }
     shift() {

package/build/types.d.ts

@@ -1,8 +1,7 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants.js';
+import { ATTRIBUTE_STORE, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants.js';
 import { firstChild } from './utilities.js';
 import attributes from './attributes.js';
-import event from './event.js';
 import slot from './slot.js';
 type Attribute = Primitive | Effect<Primitive | Primitive[]>;
 type Attributes = {
@@ -20,6 +19,7 @@ type Attributes = {
 type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 type Element = HTMLElement & Attributes & {
+    [ATTRIBUTE_STORE]?: Record<PropertyKey, unknown>;
     [SLOT_CLEANUP]?: VoidFunction[];
 } & Record<PropertyKey, unknown>;
 type Elements = Element[];
@@ -38,14 +38,18 @@ type RenderableTemplate<T> = {
     values: (RenderableValue<T> | RenderableValue<T>[])[];
 };
 type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | Renderable;
+type RenderedGroup = {
+    elements: Elements;
+    fragment: DocumentFragment | Node | null;
+};
 type Template = {
     fragment: DocumentFragment;
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof event | typeof slot;
+        fn: typeof attributes.spread | typeof slot;
         path: typeof firstChild[];
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };
+export type { Attributes, Effect, Element, Elements, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderedGroup, Template };

package/build/types.js

@@ -1 +1 @@
-import { RENDERABLE, SLOT_CLEANUP } from './constants.js';
+import { ATTRIBUTE_STORE, RENDERABLE, SLOT_CLEANUP } from './constants.js';

package/build/utilities.d.ts

@@ -3,6 +3,7 @@ declare const addEventListener: {
     <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
     (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 };
+declare const append: (...nodes: (Node | string)[]) => void;
 declare const removeEventListener: {
     <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
     (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
@@ -24,4 +25,4 @@ declare const fragment: (html: string) => DocumentFragment;
 declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const text: (value: string) => E;
-export { addEventListener, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };

package/build/utilities.js

@@ -2,6 +2,7 @@ import { micro as m, raf as r } from '@esportsplus/tasks';
 let prototype, template = document.createElement('template'), t = document.createTextNode('');
 prototype = Element.prototype;
 const addEventListener = prototype.addEventListener;
+const append = prototype.append;
 const removeEventListener = prototype.removeEventListener;
 const className = Object.getOwnPropertyDescriptor(prototype, 'className').set;
 const innerHTML = Object.getOwnPropertyDescriptor(prototype, 'innerHTML').set;
@@ -32,4 +33,4 @@ const text = (value) => {
     }
     return element;
 };
-export { addEventListener, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };