@esportsplus/template 0.26.6 → 0.28.0

package/.github/workflows/publish.yml

@@ -12,5 +12,5 @@ on:
 jobs:
   publish:
     secrets:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
-    uses: esportsplus/workflows/.github/workflows/publish.yml@main
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    uses: esportsplus/workflows/.github/workflows/publish.yml@main

package/build/attributes.js

@@ -2,8 +2,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 { raf } from './utilities/queue.js';
 import q from '@esportsplus/queue';
+import raf from './utilities/raf.js';
 import event from './event/index.js';
 const STORE = Symbol();
 let delimiters = {
@@ -17,7 +17,7 @@ function apply(element, name, value) {
     else if (name === 'class') {
         className.call(element, value);
     }
-    else if (name === 'style' || name.startsWith('data-') || 'ownerSVGElement' in element) {
+    else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
         setAttribute.call(element, name, value);
     }
     else {
@@ -58,7 +58,7 @@ function list(ctx, element, id, name, state, value) {
         let cold = store[id];
         if (cold !== undefined) {
             for (let part in cold) {
-                if (part in hot) {
+                if (hot[part] === undefined) {
                     continue;
                 }
                 dynamic.delete(part);
@@ -106,7 +106,7 @@ function schedule(ctx, element, name, state, value) {
         return;
     }
     scheduled = true;
-    raf.add(task);
+    raf(task);
 }
 function task() {
     let context, n = queue.length;
@@ -119,7 +119,7 @@ function task() {
         context.updating = false;
     }
     if (queue.length) {
-        raf.add(task);
+        raf(task);
     }
     else {
         scheduled = false;
@@ -128,7 +128,7 @@ function task() {
 const set = (element, name, value) => {
     let fn = name === 'class' || name === 'style' ? list : property, state = STATE_HYDRATING;
     if (typeof value === 'function') {
-        if (name.startsWith('on')) {
+        if (name[0] === 'o' && name[1] === 'n') {
             return event(element, name, value);
         }
         let ctx = context(element);

package/build/constants.d.ts

@@ -1,3 +1,4 @@
+declare const ARRAY_SLOT: unique symbol;
 declare const CLEANUP: unique symbol;
 declare const EMPTY_FRAGMENT: DocumentFragment;
 declare const NODE_CLOSING = 1;
@@ -9,11 +10,9 @@ 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 RENDERABLE: unique symbol;
-declare const RENDERABLE_HTML_REACTIVE_ARRAY = 1;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
 declare const STATE_HYDRATING = 0;
 declare const STATE_NONE = 1;
 declare const STATE_WAITING = 2;
-export { 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, RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY, SLOT_HTML, SLOT_MARKER, STATE_HYDRATING, STATE_NONE, STATE_WAITING };
+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 };

package/build/constants.js

@@ -1,5 +1,6 @@
 import { fragment } from './utilities/fragment.js';
-const CLEANUP = Symbol();
+const ARRAY_SLOT = Symbol('template.array.slot');
+const CLEANUP = Symbol('template.cleanup');
 const EMPTY_FRAGMENT = fragment('');
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
@@ -30,11 +31,9 @@ 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 RENDERABLE = Symbol();
-const RENDERABLE_HTML_REACTIVE_ARRAY = 1;
 const SLOT_HTML = '<!--$-->';
 const SLOT_MARKER = '{{$}}';
 const STATE_HYDRATING = 0;
 const STATE_NONE = 1;
 const STATE_WAITING = 2;
-export { 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, RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY, SLOT_HTML, SLOT_MARKER, STATE_HYDRATING, STATE_NONE, STATE_WAITING };
+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 };

package/build/event/index.js

@@ -7,9 +7,11 @@ 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',
+    'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart', 'ontransitionend',
     'onwheel'
 ]);
 ['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'].map(event => {
@@ -38,16 +40,17 @@ function register(element, event) {
     }
     let key = keys[event] = Symbol();
     addEventListener.call(window.document, event.slice(2), (e) => {
-        let node = e.target;
+        let fn, node = e.target;
         while (node) {
-            if (key in node) {
+            fn = node[key];
+            if (typeof fn === 'function') {
                 defineProperty(e, 'currentTarget', {
                     configurable: true,
                     get() {
                         return node || window.document;
                     }
                 });
-                return node[key].call(node, e);
+                return fn.call(node, e);
             }
             node = parentElement.call(node);
         }

package/build/event/ontick.js

@@ -1,5 +1,5 @@
 import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
-import { raf } from '../utilities/queue.js';
+import raf from '../utilities/raf.js';
 let tasks = Object.assign(new Set(), { running: false });
 function tick() {
     if (tasks.size === 0) {
@@ -9,13 +9,13 @@ function tick() {
     for (let task of tasks) {
         task();
     }
-    raf.add(tick);
+    raf(tick);
 }
 const add = (task) => {
     tasks.add(task);
     if (!tasks.running) {
         tasks.running = true;
-        raf.add(tick);
+        raf(tick);
     }
 };
 const remove = (task) => {

package/build/html/index.d.ts

@@ -1,8 +1,9 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { Attribute, Attributes, Renderable, RenderableReactive } from '../types.js';
-type Values<T> = Attribute | Attributes<any> | Renderable<T>;
+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>[])[]): Node;
-    reactive<T>(array: ReactiveArray<T>, template: RenderableReactive<T>["template"]): RenderableReactive<T>;
+    reactive<T>(arr: ReactiveArray<T>, template: (value: T) => ReturnType<typeof html>): ArraySlot<T>;
 };
 export default html;

package/build/html/index.js

@@ -1,5 +1,5 @@
-import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
 import { cloneNode } from '../utilities/node.js';
+import { ArraySlot } from '../slot/array.js';
 import parser from './parser.js';
 const html = (literals, ...values) => {
     let { fragment, slots } = parser.parse(literals), clone = cloneNode.call(fragment, true);
@@ -23,11 +23,7 @@ const html = (literals, ...values) => {
     }
     return clone;
 };
-html.reactive = (array, template) => {
-    return {
-        [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
-        array,
-        template
-    };
+html.reactive = (arr, template) => {
+    return new ArraySlot(arr, template);
 };
 export default html;

package/build/html/parser.js

@@ -18,8 +18,9 @@ function build(literals) {
             path: []
         }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
     {
-        let attribute = '', buffer = '', char = '', quote = '';
-        for (let match of html.matchAll(REGEX_SLOT_ATTRIBUTES)) {
+        let attribute = '', buffer = '', char = '', match, quote = '';
+        REGEX_SLOT_ATTRIBUTES.lastIndex = 0;
+        while (match = REGEX_SLOT_ATTRIBUTES.exec(html)) {
             let found = match[1], metadata = attributes[found];
             if (metadata) {
                 continue;
@@ -71,58 +72,62 @@ function build(literals) {
             }
         }
     }
-    for (let match of html.matchAll(REGEX_SLOT_NODES)) {
-        let parent = levels[level], type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || NODE_ELEMENT);
-        if ((match.index || 1) - 1 > index) {
-            parent.children++;
-        }
-        if (type === NODE_ELEMENT || type === NODE_VOID) {
-            let attr = match[2], path = parent.path.length
-                ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
-                : methods(parent.children, [], firstChild, nextSibling);
-            if (attr) {
-                let metadata = attributes[attr];
-                if (!metadata) {
-                    throw new Error(`Template: attribute metadata could not be found for '${attr}'`);
+    REGEX_SLOT_NODES.lastIndex = 0;
+    {
+        let match;
+        while (match = REGEX_SLOT_NODES.exec(html)) {
+            let parent = levels[level], type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || NODE_ELEMENT);
+            if ((match.index || 1) - 1 > index) {
+                parent.children++;
+            }
+            if (type === NODE_ELEMENT || type === NODE_VOID) {
+                let attr = match[2], path = parent.path.length
+                    ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
+                    : methods(parent.children, [], firstChild, nextSibling);
+                if (attr) {
+                    let metadata = attributes[attr];
+                    if (!metadata) {
+                        throw new Error(`Template: attribute metadata could not be found for '${attr}'`);
+                    }
+                    for (let i = 0, n = metadata.length; i < n; i++) {
+                        let name = metadata[i];
+                        slots.push({
+                            fn: name === null ? a.spread : a.set,
+                            name,
+                            path
+                        });
+                        buffer += parsed[slot++];
+                    }
                 }
-                for (let i = 0, n = metadata.length; i < n; i++) {
-                    let name = metadata[i];
-                    slots.push({
-                        fn: name === null ? a.spread : a.set,
-                        name,
+                if (type === NODE_ELEMENT) {
+                    levels[++level] = {
+                        children: 0,
+                        elements: 0,
                         path
-                    });
-                    buffer += parsed[slot++];
+                    };
                 }
+                parent.elements++;
             }
-            if (type === NODE_ELEMENT) {
-                levels[++level] = {
-                    children: 0,
-                    elements: 0,
-                    path
-                };
+            else if (type === NODE_SLOT) {
+                buffer += parsed[slot++] + SLOT_HTML;
+                slots.push({
+                    fn: s,
+                    name: null,
+                    path: methods(parent.children, parent.path, firstChild, nextSibling)
+                });
             }
-            parent.elements++;
-        }
-        else if (type === NODE_SLOT) {
-            buffer += parsed[slot++] + SLOT_HTML;
-            slots.push({
-                fn: s,
-                name: null,
-                path: methods(parent.children, parent.path, firstChild, nextSibling)
-            });
-        }
-        if (n === slot) {
-            buffer += parsed[slot];
-            break;
-        }
-        if (type === NODE_CLOSING) {
-            level--;
-        }
-        else {
-            parent.children++;
+            if (n === slot) {
+                buffer += parsed[slot];
+                break;
+            }
+            if (type === NODE_CLOSING) {
+                level--;
+            }
+            else {
+                parent.children++;
+            }
+            index = (match.index || 0) + match[0].length;
         }
-        index = (match.index || 0) + match[0].length;
     }
     if (events) {
         buffer = buffer.replace(REGEX_EVENTS, '');
@@ -130,10 +135,13 @@ function build(literals) {
     return set(literals, buffer, slots);
 }
 function methods(children, copy, first, next) {
-    let methods = copy.slice();
-    methods.push(first);
-    for (let start = 0; start < children; start++) {
-        methods.push(next);
+    let length = copy.length, methods = new Array(length + 1 + children);
+    for (let i = 0, n = length; i < n; i++) {
+        methods[i] = copy[i];
+    }
+    methods[length] = first;
+    for (let i = 0, n = children; i < n; i++) {
+        methods[length + 1 + i] = next;
     }
     return methods;
 }

package/build/index.d.ts

@@ -1,4 +1,5 @@
 export { default as html } from './html/index.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
+export type { ArraySlot } from './slot/array.js';
 export type { Attributes, Element, Renderable } from './types.js';

package/build/render.js

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

package/build/slot/array.d.ts

@@ -1,3 +1,25 @@
-import { RenderableReactive } from '../types.js';
-declare const _default: <T>(anchor: Element, renderable: RenderableReactive<T>) => Node;
-export default _default;
+import { ReactiveArray } from '@esportsplus/reactivity';
+import html from '../html/index.js';
+declare class ArraySlot<T> {
+    private array;
+    private queue;
+    private marker;
+    private nodes;
+    private scheduled;
+    private signal;
+    private template;
+    readonly fragment: Node;
+    constructor(array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>));
+    private anchor;
+    private clear;
+    private pop;
+    private push;
+    private schedule;
+    private shift;
+    private sort;
+    private splice;
+    private sync;
+    private unshift;
+    get length(): number;
+}
+export { ArraySlot };

package/build/slot/array.js

@@ -1,22 +1,28 @@
-import { root } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT } from '../constants.js';
+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 } from '../utilities/node.js';
+import { cloneNode, firstChild, lastChild, nextSibling } from '../utilities/node.js';
 import { ondisconnect, remove } from './cleanup.js';
+import marker from '../utilities/marker.js';
+import raf from '../utilities/raf.js';
 class ArraySlot {
     array;
-    fragment;
+    queue = [];
     marker;
     nodes = [];
+    scheduled = false;
+    signal;
     template;
-    constructor(anchor, array, template) {
-        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
+    fragment;
+    constructor(array, template) {
         this.array = array;
-        this.marker = anchor;
-        this.template = function (data, i) {
+        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
+        this.marker = marker.cloneNode();
+        this.signal = signal(array.length);
+        this.template = function (data) {
             let dispose, frag = root((d) => {
                 dispose = d;
-                return template(data, i);
+                return template(data);
             }), group = {
                 head: firstChild.call(frag),
                 tail: lastChild.call(frag)
@@ -25,39 +31,41 @@ class ArraySlot {
             ondisconnect(group.head, dispose);
             return group;
         };
-        array.on('clear', () => this.clear());
-        array.on('reverse', () => {
-            root(() => this.render());
+        append.call(fragment, this.marker);
+        if (array.length) {
+            root(() => {
+                this.nodes = array.map(this.template);
+            });
+        }
+        array.on('clear', () => {
+            this.queue.length = 0;
+            this.schedule({ op: 'clear' });
+        });
+        array.on('concat', ({ items }) => {
+            this.schedule({ items, op: 'concat' });
+        });
+        array.on('pop', () => {
+            this.schedule({ op: 'pop' });
         });
-        array.on('pop', () => this.pop());
         array.on('push', ({ items }) => {
-            root(() => this.push(items));
+            this.schedule({ items, op: 'push' });
         });
-        array.on('shift', () => this.shift());
-        array.on('sort', () => {
-            root(() => this.render());
+        array.on('reverse', () => {
+            this.schedule({ op: 'reverse' });
+        });
+        array.on('shift', () => {
+            this.schedule({ op: 'shift' });
+        });
+        array.on('sort', ({ order }) => {
+            this.schedule({ op: 'sort', order });
         });
         array.on('splice', ({ deleteCount, items, start }) => {
-            root(() => this.splice(start, deleteCount, ...items));
+            this.schedule({ deleteCount, items, op: 'splice', start });
         });
         array.on('unshift', ({ items }) => {
-            root(() => this.unshift(items));
+            this.schedule({ items, op: 'unshift' });
         });
     }
-    get length() {
-        return this.nodes.length;
-    }
-    set length(n) {
-        if (n >= this.nodes.length) {
-            return;
-        }
-        else if (n === 0) {
-            this.clear();
-        }
-        else {
-            this.splice(n);
-        }
-    }
     anchor(index = this.nodes.length - 1) {
         let node = this.nodes[index];
         if (node) {
@@ -79,12 +87,53 @@ class ArraySlot {
         this.nodes.push(...items.map(this.template));
         anchor.after(this.fragment);
     }
-    render() {
-        if (this.nodes.length) {
-            remove(...this.nodes.splice(0));
+    schedule(op) {
+        this.queue.push(op);
+        if (this.scheduled) {
+            return;
         }
-        this.nodes = this.array.map(this.template);
-        this.marker.after(this.fragment);
+        this.scheduled = true;
+        raf(() => {
+            let queue = this.queue;
+            this.queue.length = 0;
+            root(() => {
+                for (let i = 0, n = queue.length; i < n; i++) {
+                    let op = queue[i];
+                    switch (op.op) {
+                        case 'clear':
+                            this.clear();
+                            break;
+                        case 'concat':
+                            this.push(op.items);
+                            break;
+                        case 'pop':
+                            this.pop();
+                            break;
+                        case 'push':
+                            this.push(op.items);
+                            break;
+                        case 'reverse':
+                            this.nodes.reverse();
+                            this.sync();
+                            break;
+                        case 'shift':
+                            this.shift();
+                            break;
+                        case 'sort':
+                            this.sort(op.order);
+                            break;
+                        case 'splice':
+                            this.splice(op.start, op.deleteCount, op.items);
+                            break;
+                        case 'unshift':
+                            this.unshift(op.items);
+                            break;
+                    }
+                }
+            });
+            set(this.signal, this.nodes.length);
+            this.scheduled = false;
+        });
     }
     shift() {
         let group = this.nodes.shift();
@@ -92,7 +141,22 @@ class ArraySlot {
             remove(group);
         }
     }
-    splice(start, stop = this.nodes.length, ...items) {
+    sort(order) {
+        let nodes = this.nodes, n = nodes.length;
+        if (n !== order.length) {
+            remove(...nodes.splice(0));
+            this.nodes = this.array.map(this.template);
+            this.marker.after(this.fragment);
+            return;
+        }
+        let sorted = new Array(n);
+        for (let i = 0; i < n; i++) {
+            sorted[i] = nodes[order[i]];
+        }
+        this.nodes = sorted;
+        this.sync();
+    }
+    splice(start, stop = this.nodes.length, items) {
         if (!items.length) {
             remove(...this.nodes.splice(start, stop));
             return;
@@ -100,17 +164,28 @@ class ArraySlot {
         remove(...this.nodes.splice(start, stop, ...items.map(this.template)));
         this.anchor(start - 1).after(this.fragment);
     }
+    sync() {
+        let nodes = this.nodes, n = nodes.length;
+        if (!n) {
+            return;
+        }
+        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);
+                node = next;
+            }
+        }
+        this.marker.after(this.fragment);
+    }
     unshift(items) {
         this.nodes.unshift(...items.map(this.template));
         this.marker.after(this.fragment);
     }
-}
-export default (anchor, renderable) => {
-    let array = renderable.array, slot = new ArraySlot(anchor, array, renderable.template);
-    if (array.length) {
-        root(() => {
-            slot.nodes = array.map(slot.template);
-        });
+    get length() {
+        return read(this.signal);
     }
-    return slot.fragment;
-};
+}
+Object.defineProperty(ArraySlot.prototype, ARRAY_SLOT, { value: true });
+export { ArraySlot };

package/build/slot/cleanup.js

@@ -7,8 +7,8 @@ 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) {
-                fns = tail[CLEANUP];
+            fns = tail[CLEANUP];
+            if (fns !== undefined) {
                 while (fn = fns.pop()) {
                     fn();
                 }

package/build/slot/effect.d.ts

@@ -1,3 +1,12 @@
-import { Element, Renderable } from '../types.js';
-declare const _default: (anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) => void;
-export default _default;
+import { Element, Renderable, SlotGroup } from '../types.js';
+declare class EffectSlot {
+    anchor: Element;
+    disposer: VoidFunction;
+    group: SlotGroup | null;
+    scheduled: boolean;
+    textnode: Node | null;
+    constructor(anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>);
+    dispose(): void;
+    update(value: unknown): void;
+}
+export { EffectSlot };