@esportsplus/template 0.13.0 → 0.15.0

package/build/attributes.js

@@ -1,4 +1,5 @@
 import { effect, root } from '@esportsplus/reactivity';
+import { oncleanup } from './slot.js';
 import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities.js';
 import event from './event.js';
 let attributes = {}, delimiters = {
@@ -24,19 +25,24 @@ function attribute(element, name, value) {
 }
 function reactive(element, id, name, value, wait = false) {
     if (typeof value === 'function') {
-        effect(() => {
+        let instance = effect(() => {
             let v = value(element);
             if (typeof v === 'function') {
-                root(() => {
+                root((root) => {
+                    instance.on('cleanup', () => root.dispose());
                     reactive(element, id, name, v(element), wait);
                 });
             }
+            else if (isArray(v) || isObject(v)) {
+                spread(element, v);
+            }
             else {
                 raf.add(() => {
                     update(element, id, name, v, wait);
                 });
             }
         });
+        oncleanup(element, () => instance.dispose());
         wait = false;
     }
     else {
@@ -144,7 +150,7 @@ const spread = function (element, attributes) {
         for (let i = 0, n = attributes.length; i < n; i++) {
             let attrs = attributes[i];
             if (!isObject(attrs)) {
-                continue;
+                throw new Error('@esportsplus/template: attributes must be of type `Attributes` or `Attributes[]`; Received ' + JSON.stringify(attributes));
             }
             for (let name in attrs) {
                 set(element, attrs[name], name);

package/build/constants.d.ts

@@ -9,7 +9,8 @@ declare const RENDERABLE: unique symbol;
 declare const RENDERABLE_REACTIVE: unique symbol;
 declare const RENDERABLE_TEMPLATE: unique symbol;
 declare const SLOT: unique symbol;
+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, SLOT_HTML, SLOT_MARKER, 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, SLOT_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/constants.js

@@ -29,7 +29,8 @@ const RENDERABLE = Symbol();
 const RENDERABLE_REACTIVE = Symbol();
 const RENDERABLE_TEMPLATE = Symbol();
 const SLOT = Symbol();
+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, SLOT_HTML, SLOT_MARKER, 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, SLOT_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/event.d.ts

@@ -1,3 +1,3 @@
 import { Element } from './types.js';
-declare const _default: (element: Element, event: string, listener: Function) => void;
+declare const _default: (element: Element, event: `on${string}`, listener: Function) => any;
 export default _default;

package/build/event.js

@@ -1,33 +1,15 @@
 import { root } from '@esportsplus/reactivity';
+import { oncleanup } from './slot.js';
 import { addEventListener, defineProperty, parentElement } from './utilities.js';
-let capture = new Set(['blur', 'focus', 'scroll']), keys = {}, passive = new Set([
-    'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
-    'scroll',
-    'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart',
-    'wheel'
+let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
+    'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
+    'onscroll',
+    'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart',
+    'onwheel'
 ]);
-function register(event) {
-    let key = keys[event] = Symbol(), type = event.slice(2);
-    addEventListener.call(window.document, type, (e) => {
-        let node = e.target;
-        defineProperty(e, 'currentTarget', {
-            configurable: true,
-            get() {
-                return node || window.document;
-            }
-        });
-        while (node) {
-            if (key in node) {
-                return node[key].call(node, e);
-            }
-            node = parentElement.call(node);
-        }
-    }, {
-        capture: capture.has(type),
-        passive: passive.has(type)
-    });
-    return key;
-}
+['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'].map(event => {
+    controllers.set(event, null);
+});
 export default (element, event, listener) => {
     if (event === 'onmount') {
         let interval = setInterval(() => {
@@ -45,5 +27,48 @@ export default (element, event, listener) => {
     else if (event === 'onrender') {
         return root(() => listener(element));
     }
-    element[keys[event] || register(event)] = listener;
+    let controller = controllers.get(event), signal;
+    if (controller === null) {
+        let { abort, signal } = new AbortController();
+        controllers.set(event, controller = {
+            abort,
+            signal,
+            listeners: 0,
+        });
+    }
+    if (controller) {
+        controller.listeners++;
+        oncleanup(element, () => {
+            if (--controller.listeners) {
+                return;
+            }
+            controller.abort();
+            controllers.set(event, null);
+        });
+        signal = controller.signal;
+    }
+    let key = keys[event];
+    if (!key) {
+        key = keys[event] = Symbol();
+        addEventListener.call(window.document, event.slice(2), (e) => {
+            let node = e.target;
+            defineProperty(e, 'currentTarget', {
+                configurable: true,
+                get() {
+                    return node || window.document;
+                }
+            });
+            while (node) {
+                if (key in node) {
+                    return node[key].call(node, e);
+                }
+                node = parentElement.call(node);
+            }
+        }, {
+            capture: capture.has(event),
+            passive: passive.has(event),
+            signal
+        });
+    }
+    element[key] = listener;
 };

package/build/slot.d.ts

@@ -10,13 +10,14 @@ declare class Slot {
     set length(n: number);
     anchor(index?: number): Element;
     clear(): void;
-    pop(): Elements | undefined;
+    pop(): Elements[] | undefined;
     push(...groups: Elements[]): number;
     render(input: unknown): this;
-    shift(): Elements | undefined;
+    shift(): Elements[] | undefined;
     splice(start: number, stop?: number, ...groups: Elements[]): Elements[];
     unshift(...groups: Elements[]): number;
 }
+declare const oncleanup: (element: Element, fn: VoidFunction) => void;
 declare const _default: (marker: Element, value: unknown) => Slot;
 export default _default;
-export { Slot };
+export { oncleanup, Slot };

package/build/slot.js

@@ -1,9 +1,9 @@
 import { effect, root, DIRTY } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT } from './constants.js';
+import { RENDERABLE, RENDERABLE_REACTIVE, SLOT, SLOT_CLEANUP } from './constants.js';
 import { hydrate } from './html/index.js';
 import { firstChild, isArray, isObject, nextSibling, nodeValue, raf, text } from './utilities.js';
-let cleanup = [], key = Symbol(), scheduled = false;
-function afterGroups(anchor, groups) {
+let cleanup = [], scheduled = false;
+function after(anchor, groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
         if (group.length) {
@@ -13,29 +13,13 @@ function afterGroups(anchor, groups) {
     }
     return groups;
 }
-function removeGroup(group) {
-    if (group === undefined) {
-        return group;
-    }
-    for (let i = 0, n = group.length; i < n; i++) {
-        let item = group[i];
-        if (key in item) {
-            cleanup.push(item[key]);
-        }
-        item.remove();
-    }
-    if (!scheduled && cleanup.length) {
-        schedule();
-    }
-    return group;
-}
-function removeGroups(groups) {
+function remove(...groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
         for (let j = 0, o = group.length; j < o; j++) {
             let item = group[j];
-            if (key in item) {
-                cleanup.push(item[key]);
+            if (item[SLOT_CLEANUP]) {
+                cleanup.push(...item[SLOT_CLEANUP]);
             }
             item.remove();
         }
@@ -55,12 +39,12 @@ function render(anchor, input, slot) {
             for (let i = 0, n = input.length; i < n; i++) {
                 groups.push(render(null, input[i]));
             }
-            return anchor ? afterGroups(anchor, groups) : groups;
+            return anchor ? after(anchor, groups) : groups;
         }
         let nodes = [];
         if (RENDERABLE in input) {
             if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-                return afterGroups(anchor, hydrate.reactive(input, slot));
+                return after(anchor, hydrate.reactive(input, slot));
             }
             else {
                 nodes = hydrate.static(input);
@@ -98,13 +82,16 @@ function schedule() {
     scheduled = true;
     raf.add(() => {
         try {
-            let slot;
-            while (slot = cleanup.pop()) {
-                slot.clear();
+            let fn;
+            while (fn = cleanup.pop()) {
+                fn();
             }
         }
         catch (e) { }
         scheduled = false;
+        if (cleanup.length) {
+            schedule();
+        }
     });
 }
 class Slot {
@@ -113,7 +100,7 @@ class Slot {
     nodes;
     text = null;
     constructor(marker) {
-        marker[key] = this;
+        oncleanup(marker, () => this.clear());
         this.marker = marker;
         this.nodes = [];
     }
@@ -131,14 +118,18 @@ class Slot {
         return node || this.marker;
     }
     clear() {
-        removeGroups(this.nodes);
+        remove(...this.nodes);
         this.text = null;
     }
     pop() {
-        return removeGroup(this.nodes.pop());
+        let group = this.nodes.pop();
+        if (!group) {
+            return undefined;
+        }
+        return remove(group);
     }
     push(...groups) {
-        afterGroups(this.anchor(), groups);
+        after(this.anchor(), groups);
         for (let i = 0, n = groups.length; i < n; i++) {
             this.nodes.push(groups[i]);
         }
@@ -146,10 +137,11 @@ class Slot {
     }
     render(input) {
         if (typeof input === 'function') {
-            effect((self) => {
+            let instance = effect((self) => {
                 let v = input();
                 if (typeof v === 'function') {
-                    root(() => {
+                    root((root) => {
+                        instance.on('cleanup', () => root.dispose());
                         this.render(v());
                     });
                 }
@@ -162,6 +154,7 @@ class Slot {
                     });
                 }
             });
+            oncleanup(this.marker, () => instance.dispose());
             return this;
         }
         if (this.text) {
@@ -182,16 +175,23 @@ class Slot {
         return this;
     }
     shift() {
-        return removeGroup(this.nodes.shift());
+        let group = this.nodes.shift();
+        if (!group) {
+            return undefined;
+        }
+        return remove(group);
     }
     splice(start, stop = this.nodes.length, ...groups) {
-        return removeGroups(this.nodes.splice(start, stop, ...afterGroups(this.anchor(start), groups)));
+        return remove(...this.nodes.splice(start, stop, ...after(this.anchor(start), groups)));
     }
     unshift(...groups) {
-        return this.nodes.unshift(...afterGroups(this.marker, groups));
+        return this.nodes.unshift(...after(this.marker, groups));
     }
 }
+const oncleanup = (element, fn) => {
+    (element[SLOT_CLEANUP] ??= []).push(fn);
+};
 export default (marker, value) => {
     return new Slot(marker).render(value);
 };
-export { Slot };
+export { oncleanup, Slot };

package/build/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants.js';
+import { 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';
@@ -17,7 +17,9 @@ type Attributes = {
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
-type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
+type Element = HTMLElement & Attributes & {
+    [SLOT_CLEANUP]?: VoidFunction[];
+} & Record<PropertyKey, unknown>;
 type Elements = Element[];
 type Primitive = bigint | boolean | null | number | string | undefined;
 type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;

package/build/types.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/reactivity": "^0.4.6",
+    "@esportsplus/reactivity": "^0.4.7",
     "@esportsplus/tasks": "^0.1.9",
     "@esportsplus/utilities": "^0.19.0"
   },
@@ -13,7 +13,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,4 +1,5 @@
 import { effect, root } from '@esportsplus/reactivity';
+import { oncleanup } from './slot';
 import { Attributes, Element } from './types';
 import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities';
 import event from './event';
@@ -33,20 +34,27 @@ function attribute(element: Element, name: string, value: unknown) {
 
 function reactive(element: Element, id: string, name: string, value: unknown, wait = false) {
     if (typeof value === 'function') {
-        effect(() => {
-            let v = (value as Function)(element);
+        let instance = effect(() => {
+                let v = (value as Function)(element);
+
+                if (typeof v === 'function') {
+                    root((root) => {
+                        instance.on('cleanup', () => root.dispose());
+                        reactive(element, id, name, v(element), wait);
+                    });
+                }
+                else if (isArray(v) || isObject(v)) {
+                    spread(element, v as Attributes | Attributes[]);
+                }
+                else {
+                    raf.add(() => {
+                        update(element, id, name, v, wait);
+                    });
+                }
+            });
+
+        oncleanup(element, () => instance.dispose());
 
-            if (typeof v === 'function') {
-                root(() => {
-                    reactive(element, id, name, v(element), wait);
-                });
-            }
-            else {
-                raf.add(() => {
-                    update(element, id, name, v, wait);
-                });
-            }
-        });
         wait = false;
     }
     else {
@@ -67,7 +75,7 @@ function set(element: Element, value: unknown, name: string) {
     }
     else if (typeof value === 'function') {
         if (name.startsWith('on')) {
-            event(element, name, value);
+            event(element, name as `on${string}`, value);
         }
         else {
             reactive(element, ('e' + store(element)[key]++), name, value, true);
@@ -184,7 +192,7 @@ const spread = function (element: Element, attributes: Attributes | Attributes[]
             let attrs = attributes[i];
 
             if (!isObject(attrs)) {
-                continue;
+                throw new Error('@esportsplus/template: attributes must be of type `Attributes` or `Attributes[]`; Received ' + JSON.stringify(attributes));
             }
 
             for (let name in attrs) {
@@ -197,5 +205,6 @@ const spread = function (element: Element, attributes: Attributes | Attributes[]
     }
 };
 
+
 export default { apply, spread };
 export { apply, spread }

package/src/constants.ts

@@ -45,6 +45,8 @@ const RENDERABLE_TEMPLATE = Symbol();
 
 const SLOT = Symbol();
 
+const SLOT_CLEANUP = Symbol();
+
 const SLOT_HTML = '<!--$-->';
 
 const SLOT_MARKER = '{{$}}';
@@ -64,6 +66,7 @@ export {
     RENDERABLE_REACTIVE,
     RENDERABLE_TEMPLATE,
     SLOT,
+    SLOT_CLEANUP,
     SLOT_HTML,
     SLOT_MARKER,
     SLOT_MARKER_LENGTH

package/src/event.ts

@@ -1,51 +1,31 @@
 import { root } from '@esportsplus/reactivity';
+import { oncleanup } from './slot';
 import { Element } from './types';
 import { addEventListener, defineProperty, parentElement } from './utilities';
 
 
-let capture = new Set(['blur', 'focus', 'scroll']),
+let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
+    controllers = new Map<
+        `on${string}`,
+        (AbortController & { listeners: number }) | null
+    >(),
     keys: Record<string, symbol> = {},
-    passive = new Set([
-        'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
-        'scroll',
-        'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart',
-        'wheel'
+    passive = new Set<`on${string}`>([
+        'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
+        'onscroll',
+        'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart',
+        'onwheel'
     ]);
 
 
-function register(event: string) {
-    let key = keys[event] = Symbol(),
-        type = event.slice(2);
+(['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'] as `on${string}`[]).map(event => {
+    controllers.set(event, null);
+});
 
-    addEventListener.call(window.document, type, (e) => {
-        let node = e.target as Element | null;
 
-        defineProperty(e, 'currentTarget', {
-            configurable: true,
-            get() {
-                return node || window.document;
-            }
-        });
-
-        while (node) {
-            if (key in node) {
-                return (node[key] as Function).call(node, e);
-            }
-
-            node = parentElement.call(node);
-        }
-    }, {
-        capture: capture.has(type),
-        passive: passive.has(type)
-    });
-
-    return key;
-}
-
-
-export default (element: Element, event: string, listener: Function): void => {
+export default (element: Element, event: `on${string}`, listener: Function) => {
     if (event === 'onmount') {
-        let interval: ReturnType<typeof setInterval> = setInterval(() => {
+        let interval = setInterval(() => {
                 retry--;
 
                 if (element.isConnected) {
@@ -66,5 +46,64 @@ export default (element: Element, event: string, listener: Function): void => {
         return root(() => listener(element));
     }
 
-    element[keys[event] || register(event)] = listener;
+    let controller = controllers.get(event),
+        signal: AbortController['signal'] | undefined;
+
+    if (controller === null) {
+        let { abort, signal } = new AbortController();
+
+        controllers.set(
+            event,
+            controller = {
+                abort,
+                signal,
+                listeners: 0,
+            }
+        );
+    }
+
+    if (controller) {
+        controller.listeners++;
+
+        oncleanup(element, () => {
+            if (--controller.listeners) {
+                return;
+            }
+
+            controller.abort();
+            controllers.set(event, null);
+        });
+        signal = controller.signal;
+    }
+
+    let key = keys[event];
+
+    if (!key) {
+        key = keys[event] = Symbol();
+
+        addEventListener.call(window.document, event.slice(2), (e) => {
+            let node = e.target as Element | null;
+
+            defineProperty(e, 'currentTarget', {
+                configurable: true,
+                get() {
+                    return node || window.document;
+                }
+            });
+
+            while (node) {
+                if (key in node) {
+                    return (node[key] as Function).call(node, e);
+                }
+
+                node = parentElement.call(node);
+            }
+        }, {
+            capture: capture.has(event),
+            passive: passive.has(event),
+            signal
+        });
+    }
+
+    element[key] = listener;
 };

package/src/slot.ts

@@ -1,17 +1,15 @@
 import { effect, root, DIRTY } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT } from './constants';
+import { RENDERABLE, RENDERABLE_REACTIVE, SLOT, SLOT_CLEANUP } from './constants';
 import { hydrate } from './html';
 import { Element, Elements, RenderableReactive, RenderableTemplate } from './types';
 import { firstChild, isArray, isObject, nextSibling, nodeValue, raf, text } from './utilities'
 
 
-let cleanup: Slot[] = [],
-    // Using a private symbol since 'SLOT' is used as a different flag in 'render.ts'
-    key = Symbol(),
+let cleanup: VoidFunction[] = [],
     scheduled = false;
 
 
-function afterGroups(anchor: Element, groups: Elements[]) {
+function after(anchor: Element, groups: Elements[]) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
 
@@ -24,37 +22,15 @@ function afterGroups(anchor: Element, groups: Elements[]) {
     return groups;
 }
 
-function removeGroup(group?: Elements) {
-    if (group === undefined) {
-        return group;
-    }
-
-    for (let i = 0, n = group.length; i < n; i++) {
-        let item = group[i];
-
-        if (key in item) {
-            cleanup.push(item[key] as Slot);
-        }
-
-        item.remove();
-    }
-
-    if (!scheduled && cleanup.length) {
-        schedule();
-    }
-
-    return group;
-}
-
-function removeGroups(groups: Elements[]) {
+function remove(...groups: Elements[]) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
 
         for (let j = 0, o = group.length; j < o; j++) {
             let item = group[j];
 
-            if (key in item) {
-                cleanup.push(item[key] as Slot);
+            if (item[SLOT_CLEANUP]) {
+                cleanup.push(...item[SLOT_CLEANUP]);
             }
 
             item.remove();
@@ -80,14 +56,14 @@ function render(anchor: Element | null, input: unknown, slot?: Slot): Elements |
                 groups.push( render(null, input[i]) as Elements );
             }
 
-            return anchor ? afterGroups(anchor, groups) : groups;
+            return anchor ? after(anchor, groups) : groups;
         }
 
         let nodes: Elements = [];
 
         if (RENDERABLE in input) {
             if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-                return afterGroups(anchor!, hydrate.reactive(input as RenderableReactive, slot!));
+                return after(anchor!, hydrate.reactive(input as RenderableReactive, slot!));
             }
             else {
                 nodes = hydrate.static(input as RenderableTemplate<unknown>);
@@ -135,15 +111,19 @@ function schedule() {
 
     raf.add(() => {
         try {
-            let slot;
+            let fn;
 
-            while (slot = cleanup.pop()) {
-                slot.clear();
+            while (fn = cleanup.pop()) {
+                fn();
             }
         }
-        catch(e) {}
+        catch(e) { }
 
         scheduled = false;
+
+        if (cleanup.length) {
+            schedule();
+        }
     });
 }
 
@@ -157,7 +137,7 @@ class Slot {
 
 
     constructor(marker: Element) {
-        marker[key] = this;
+        oncleanup(marker, () => this.clear());
 
         this.marker = marker;
         this.nodes = [];
@@ -185,16 +165,22 @@ class Slot {
     }
 
     clear() {
-        removeGroups(this.nodes);
+        remove(...this.nodes);
         this.text = null;
     }
 
     pop() {
-        return removeGroup(this.nodes.pop());
+        let group = this.nodes.pop();
+
+        if (!group) {
+            return undefined;
+        }
+
+        return remove(group);
     }
 
     push(...groups: Elements[]) {
-        afterGroups(this.anchor(), groups);
+        after(this.anchor(), groups);
 
         for (let i = 0, n = groups.length; i < n; i++) {
             this.nodes.push(groups[i]);
@@ -205,23 +191,26 @@ class Slot {
 
     render(input: unknown) {
         if (typeof input === 'function') {
-            effect((self) => {
-                let v = (input as Function)();
-
-                if (typeof v === 'function') {
-                    root(() => {
-                        this.render(v());
-                    });
-                }
-                else if (self.state === DIRTY) {
-                    this.render(v);
-                }
-                else {
-                    raf.add(() => {
+            let instance = effect((self) => {
+                    let v = (input as Function)();
+
+                    if (typeof v === 'function') {
+                        root((root) => {
+                            instance.on('cleanup', () => root.dispose());
+                            this.render(v());
+                        });
+                    }
+                    else if (self.state === DIRTY) {
                         this.render(v);
-                    });
-                }
-            });
+                    }
+                    else {
+                        raf.add(() => {
+                            this.render(v);
+                        });
+                    }
+                });
+
+            oncleanup(this.marker, () => instance.dispose());
 
             return this;
         }
@@ -252,22 +241,33 @@ class Slot {
     }
 
     shift() {
-        return removeGroup(this.nodes.shift());
+        let group = this.nodes.shift();
+
+        if (!group) {
+            return undefined;
+        }
+
+        return remove(group);
     }
 
     splice(start: number, stop: number = this.nodes.length, ...groups: Elements[]) {
-        return removeGroups(
-            this.nodes.splice(start, stop, ...afterGroups(this.anchor(start), groups))
+        return remove(
+            ...this.nodes.splice(start, stop, ...after(this.anchor(start), groups))
         );
     }
 
     unshift(...groups: Elements[]) {
-        return this.nodes.unshift(...afterGroups(this.marker, groups));
+        return this.nodes.unshift(...after(this.marker, groups));
     }
 }
 
 
+const oncleanup = (element: Element, fn: VoidFunction) => {
+    ( element[SLOT_CLEANUP] ??= [] ).push(fn);
+};
+
+
 export default (marker: Element, value: unknown) => {
     return new Slot(marker).render(value);
 };
-export { Slot };
+export { oncleanup, Slot };

package/src/types.ts

@@ -1,5 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants';
+import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants';
 import { firstChild } from './utilities';
 import attributes from './attributes';
 import event from './event';
@@ -26,7 +26,7 @@ type Effect<T> = () => EffectResponse<T>;
 
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 
-type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
+type Element = HTMLElement & Attributes & { [SLOT_CLEANUP]?: VoidFunction[] } & Record<PropertyKey, unknown>;
 
 type Elements = Element[];