@esportsplus/template 0.15.4 → 0.15.6

package/build/attributes.js

@@ -1,6 +1,7 @@
-import { computed, dispose, root } from '@esportsplus/reactivity';
-import { oncleanup } from './slot.js';
-import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities.js';
+import { effect } from '@esportsplus/reactivity';
+import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
+import { onRemove } from './slot.js';
+import { className, raf, removeAttribute, setAttribute } from './utilities.js';
 import event from './event.js';
 let attributes = {}, delimiters = {
     class: ' ',
@@ -23,52 +24,35 @@ function attribute(element, name, value) {
         element[name] = value;
     }
 }
-function reactive(element, id, name, value, wait = false) {
-    if (typeof value === 'function') {
-        let instance = computed(() => {
-            let v = value(element);
-            if (typeof v === 'function') {
-                root(() => {
-                    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, () => dispose(instance));
-        wait = false;
-    }
-    else {
-        update(element, id, name, value, wait);
-    }
-}
-function set(element, value, name) {
-    if (name === 'style' && isObject(value)) {
-        for (let key in value) {
-            set(element, value[key], name);
-        }
-    }
-    else if (isArray(value)) {
+function set(element, value, name, wait = false) {
+    if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            set(element, value[i], name);
+            set(element, value[i], name, wait);
         }
     }
-    else if (typeof value === 'function') {
+    else if (isFunction(value)) {
         if (name.startsWith('on')) {
             event(element, name, value);
         }
         else {
-            reactive(element, ('e' + store(element)[key]++), name, value, true);
+            let id = ('e' + store(element)[key]++);
+            onRemove(element, effect(() => {
+                let v = value(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);
+                    }
+                }
+                else {
+                    update(element, id, name, v, wait);
+                }
+            }));
+            wait = false;
         }
     }
     else {
-        update(element, null, name, value, true);
+        update(element, null, name, value, wait);
     }
 }
 function store(element) {
@@ -87,13 +71,13 @@ function update(element, id, name, value, wait = false) {
             data[name] = dynamic = {};
         }
         if (id === null) {
-            if (value && typeof value === 'string') {
+            if (value && isString(value)) {
                 data[cache] += (data[cache] ? delimiter : '') + value;
             }
         }
         else {
             let hot = {};
-            if (typeof value === 'string') {
+            if (isString(value)) {
                 let part, parts = value.split(delimiter);
                 for (let i = 0, n = parts.length; i < n; i++) {
                     part = parts[i].trim();
@@ -120,17 +104,21 @@ function update(element, id, name, value, wait = false) {
             value += (value ? delimiter : '') + key;
         }
     }
-    else if (typeof id === 'string') {
+    else if (isString(id)) {
         if (data[name] === value) {
             return;
         }
         data[name] = value;
     }
     if (wait) {
-        attributes[name] = value;
+        if (id === null) {
+            attributes[name] = value;
+        }
     }
     else {
-        attribute(element, name, value);
+        raf.add(() => {
+            attribute(element, name, value);
+        });
     }
 }
 const apply = (element) => {
@@ -142,7 +130,7 @@ const apply = (element) => {
 const spread = function (element, attributes) {
     if (isObject(attributes)) {
         for (let name in attributes) {
-            set(element, attributes[name], name);
+            set(element, attributes[name], name, true);
         }
     }
     else if (isArray(attributes)) {
@@ -152,7 +140,7 @@ const spread = function (element, attributes) {
                 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);
+                set(element, attrs[name], name, true);
             }
         }
     }

package/build/constants.d.ts

@@ -8,9 +8,8 @@ declare const REGEX_SLOT_NODES: RegExp;
 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_CLEANUP, 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_CLEANUP, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/constants.js

@@ -28,9 +28,8 @@ const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{
 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_CLEANUP, 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_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: `on${string}`, listener: Function) => any;
+declare const _default: (element: Element, event: `on${string}`, listener: Function) => void;
 export default _default;

package/build/event.js

@@ -1,6 +1,7 @@
 import { root } from '@esportsplus/reactivity';
-import { oncleanup } from './slot.js';
-import { addEventListener, defineProperty, parentElement } from './utilities.js';
+import { defineProperty } from '@esportsplus/utilities';
+import { onRemove } from './slot.js';
+import { addEventListener, parentElement } 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',
@@ -18,18 +19,19 @@ export default (element, event, listener) => {
                 retry = 0;
                 root(() => listener(element));
             }
-            if (retry === 0) {
+            if (!retry) {
                 clearInterval(interval);
             }
         }, 1000 / 60), retry = 60;
         return;
     }
-    else if (event === 'oncleanup') {
-        oncleanup(element, () => listener(element));
+    else if (event === 'onremove') {
+        onRemove(element, () => listener(element));
         return;
     }
     else if (event === 'onrender') {
-        return root(() => listener(element));
+        root(() => listener(element));
+        return;
     }
     let controller = controllers.get(event), signal;
     if (controller === null) {
@@ -42,7 +44,7 @@ export default (element, event, listener) => {
     }
     if (controller) {
         controller.listeners++;
-        oncleanup(element, () => {
+        onRemove(element, () => {
             if (--controller.listeners) {
                 return;
             }

package/build/html/hydrate.js

@@ -35,9 +35,7 @@ function render(renderable, template) {
             }
             fn(node, values[slot], name);
         }
-        if (node) {
-            apply(node);
-        }
+        apply(node);
     }
     for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
         elements.push(element);

package/build/render.js

@@ -1,9 +1,10 @@
-import { SLOT, SLOT_HTML } from './constants.js';
-import slot from './slot.js';
+import { isInstanceOf } from '@esportsplus/utilities';
+import { SLOT_HTML } from './constants.js';
+import slot, { Slot } from './slot.js';
 import { firstChild, fragment, nodeValue, prepend } from './utilities.js';
 let marker = firstChild.call(fragment(SLOT_HTML)), node;
 export default (renderable, parent) => {
-    if (SLOT in parent) {
+    if (isInstanceOf(parent, Slot)) {
         return parent.render(renderable);
     }
     nodeValue.call(parent, '');

package/build/slot.d.ts

@@ -1,7 +1,5 @@
-import { SLOT } from './constants.js';
 import { Element, Elements } from './types.js';
 declare class Slot {
-    [SLOT]: null;
     marker: Element;
     nodes: Elements[];
     text: Element | null;
@@ -17,7 +15,7 @@ declare class Slot {
     splice(start: number, stop?: number, ...groups: Elements[]): Elements[];
     unshift(...groups: Elements[]): number;
 }
-declare const oncleanup: (element: Element, fn: VoidFunction) => void;
+declare const onRemove: (element: Element, fn: VoidFunction) => void;
 declare const _default: (marker: Element, value: unknown) => Slot;
 export default _default;
-export { oncleanup, Slot };
+export { onRemove, Slot };

package/build/slot.js

@@ -1,8 +1,8 @@
-import { computed, dispose, root } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT, SLOT_CLEANUP } from './constants.js';
+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, isArray, isObject, nextSibling, nodeValue, raf, text } from './utilities.js';
-import { isFunction } from '@esportsplus/utilities';
+import { firstChild, nextSibling, nodeValue, raf, text } from './utilities.js';
 let cleanup = [], scheduled = false;
 function after(anchor, groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
@@ -34,7 +34,7 @@ function render(anchor, input, slot) {
     if (input === false || input == null) {
         input = '';
     }
-    else if (typeof input === 'object') {
+    else if (isObject(input)) {
         if (isArray(input)) {
             let groups = [];
             for (let i = 0, n = input.length; i < n; i++) {
@@ -51,12 +51,12 @@ function render(anchor, input, slot) {
                 nodes = hydrate.static(input);
             }
         }
-        else if (input instanceof NodeList) {
+        else if (isInstanceOf(input, NodeList)) {
             for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
                 nodes.push(node);
             }
         }
-        else if (input instanceof Node) {
+        else if (isInstanceOf(input, Node)) {
             nodes = [input];
         }
         if (anchor) {
@@ -96,12 +96,11 @@ function schedule() {
     });
 }
 class Slot {
-    [SLOT] = null;
     marker;
     nodes;
     text = null;
     constructor(marker) {
-        oncleanup(marker, () => this.clear());
+        onRemove(marker, () => this.clear());
         this.marker = marker;
         this.nodes = [];
     }
@@ -138,7 +137,7 @@ class Slot {
     }
     render(input) {
         if (isFunction(input)) {
-            let instance = computed(() => {
+            onRemove(this.marker, effect(() => {
                 let v = input();
                 if (isFunction(v)) {
                     root(() => this.render(v()));
@@ -148,8 +147,7 @@ class Slot {
                         this.render(v);
                     });
                 }
-            });
-            oncleanup(this.marker, () => dispose(instance));
+            }));
             return this;
         }
         if (this.text) {
@@ -183,10 +181,10 @@ class Slot {
         return this.nodes.unshift(...after(this.marker, groups));
     }
 }
-const oncleanup = (element, fn) => {
+const onRemove = (element, fn) => {
     (element[SLOT_CLEANUP] ??= []).push(fn);
 };
 export default (marker, value) => {
     return new Slot(marker).render(value);
 };
-export { oncleanup, Slot };
+export { onRemove, Slot };

package/build/types.d.ts

@@ -5,15 +5,15 @@ import attributes from './attributes.js';
 import event from './event.js';
 import slot from './slot.js';
 type Attributes = {
-    class?: string | Effect<Primitive> | (string | Effect<Primitive>)[];
-    style?: string | Effect<Primitive> | (string | Effect<Primitive>)[];
+    class?: string | Effect<Primitive | Primitive[]> | (string | Effect<Primitive | Primitive[]>)[];
+    style?: string | Effect<Primitive | Primitive[]> | (string | Effect<Primitive | Primitive[]>)[];
 } & {
     [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: Element, event: GlobalEventHandlersEventMap[K]) => void;
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
     onconnected?: (element: Element) => void;
-    oncleanup?: (element: Element) => void;
+    onremove?: (element: Element) => void;
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;

package/build/utilities.d.ts

@@ -1,4 +1,3 @@
-import { defineProperty, isArray, isObject } from '@esportsplus/utilities';
 import { Element as E } from './types.js';
 declare const addEventListener: {
     <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -24,4 +23,4 @@ declare const parentNode: () => any;
 declare const fragment: (html: string) => DocumentFragment;
 declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const text: (value: string) => E;
-export { addEventListener, className, cloneNode, defineProperty, firstChild, firstElementChild, fragment, innerHTML, isArray, isObject, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };

package/build/utilities.js

@@ -1,5 +1,4 @@
 import { raf as tasks } from '@esportsplus/tasks';
-import { defineProperty, isArray, isObject } from '@esportsplus/utilities';
 let prototype, template = document.createElement('template'), t = document.createTextNode('');
 prototype = Element.prototype;
 const addEventListener = prototype.addEventListener;
@@ -32,4 +31,4 @@ const text = (value) => {
     }
     return element;
 };
-export { addEventListener, className, cloneNode, defineProperty, firstChild, firstElementChild, fragment, innerHTML, isArray, isObject, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };

package/package.json

@@ -1,7 +1,7 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/reactivity": "^0.8.0",
+    "@esportsplus/reactivity": "^0.10.1",
     "@esportsplus/tasks": "^0.1.11",
     "@esportsplus/utilities": "^0.21.0"
   },
@@ -13,7 +13,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.15.4",
+  "version": "0.15.6",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,7 +1,8 @@
-import { computed, dispose, root } from '@esportsplus/reactivity';
-import { oncleanup } from './slot';
+import { effect } from '@esportsplus/reactivity';
+import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
+import { onRemove } from './slot';
 import { Attributes, Element } from './types';
-import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities';
+import { className, raf, removeAttribute, setAttribute } from './utilities';
 import event from './event';
 
 
@@ -32,56 +33,42 @@ function attribute(element: Element, name: string, value: unknown) {
     }
 }
 
-function reactive(element: Element, id: string, name: string, value: unknown, wait = false) {
-    if (typeof value === 'function') {
-        let instance = computed(() => {
-                let v = (value as Function)(element);
-
-                if (typeof v === 'function') {
-                    root(() => {
-                        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, () => dispose(instance));
-
-        wait = false;
-    }
-    else {
-        update(element, id, name, value, wait);
-    }
-}
-
-function set(element: Element, value: unknown, name: string) {
-    if (name === 'style' && isObject(value)) {
-        for (let key in value) {
-            set(element, value[key], name);
-        }
-    }
-    else if (isArray(value)) {
+function set(element: Element, value: unknown, name: string, wait = false) {
+    if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            set(element, value[i], name);
+            set(element, value[i], name, wait);
         }
     }
-    else if (typeof value === 'function') {
+    else if (isFunction(value)) {
         if (name.startsWith('on')) {
             event(element, name as `on${string}`, value);
         }
         else {
-            reactive(element, ('e' + store(element)[key]++), name, value, true);
+            let id = ('e' + store(element)[key]++);
+
+            onRemove(
+                element,
+                effect(() => {
+                    let v = (value as Function)(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);
+                        }
+                    }
+                    else {
+                        update(element, id, name, v, wait);
+                    }
+                })
+            );
+
+            wait = false;
         }
     }
     else {
-        update(element, null, name, value, true);
+        update(element, null, name, value, wait);
     }
 }
 
@@ -111,14 +98,14 @@ function update(element: Element, id: null | string, name: string, value: unknow
         }
 
         if (id === null) {
-            if (value && typeof value === 'string') {
+            if (value && isString(value)) {
                 data[cache] += (data[cache] ? delimiter : '') + value;
             }
         }
         else {
             let hot: Attributes = {};
 
-            if (typeof value === 'string') {
+            if (isString(value)) {
                 let part: string,
                     parts = value.split(delimiter);
 
@@ -155,7 +142,7 @@ function update(element: Element, id: null | string, name: string, value: unknow
             value += (value ? delimiter : '') + key;
         }
     }
-    else if (typeof id === 'string') {
+    else if (isString(id)) {
         if (data[name] === value) {
             return;
         }
@@ -164,10 +151,14 @@ function update(element: Element, id: null | string, name: string, value: unknow
     }
 
     if (wait) {
-        attributes[name] = value;
+        if (id === null) {
+            attributes[name] = value;
+        }
     }
     else {
-        attribute(element, name, value);
+        raf.add(() => {
+            attribute(element, name, value);
+        });
     }
 }
 
@@ -183,7 +174,7 @@ const apply = (element: Element) => {
 const spread = function (element: Element, attributes: Attributes | Attributes[]) {
     if (isObject(attributes)) {
         for (let name in attributes) {
-            set(element, attributes[name], name);
+            set(element, attributes[name], name, true);
         }
     }
     else if (isArray(attributes)) {
@@ -195,7 +186,7 @@ const spread = function (element: Element, attributes: Attributes | Attributes[]
             }
 
             for (let name in attrs) {
-                set(element, attrs[name], name);
+                set(element, attrs[name], name, true);
             }
         }
     }

package/src/constants.ts

@@ -43,8 +43,6 @@ const RENDERABLE_REACTIVE = Symbol();
 const RENDERABLE_TEMPLATE = Symbol();
 
 
-const SLOT = Symbol();
-
 const SLOT_CLEANUP = Symbol();
 
 const SLOT_HTML = '<!--$-->';
@@ -65,7 +63,6 @@ export {
     RENDERABLE,
     RENDERABLE_REACTIVE,
     RENDERABLE_TEMPLATE,
-    SLOT,
     SLOT_CLEANUP,
     SLOT_HTML,
     SLOT_MARKER,

package/src/event.ts

@@ -1,7 +1,8 @@
 import { root } from '@esportsplus/reactivity';
-import { oncleanup } from './slot';
+import { defineProperty } from '@esportsplus/utilities';
+import { onRemove } from './slot';
 import { Element } from './types';
-import { addEventListener, defineProperty, parentElement } from './utilities';
+import { addEventListener, parentElement } from './utilities';
 
 
 let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
@@ -23,7 +24,7 @@ let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
 });
 
 
-export default (element: Element, event: `on${string}`, listener: Function) => {
+export default (element: Element, event: `on${string}`, listener: Function): void => {
     if (event === 'onconnected') {
         let interval = setInterval(() => {
                 retry--;
@@ -33,7 +34,7 @@ export default (element: Element, event: `on${string}`, listener: Function) => {
                     root(() => listener(element));
                 }
 
-                if (retry === 0) {
+                if (!retry) {
                     clearInterval(interval);
                 }
             }, 1000 / 60),
@@ -41,12 +42,13 @@ export default (element: Element, event: `on${string}`, listener: Function) => {
 
         return;
     }
-    else if (event === 'oncleanup') {
-        oncleanup(element, () => listener(element));
+    else if (event === 'onremove') {
+        onRemove(element, () => listener(element));
         return;
     }
     else if (event === 'onrender') {
-        return root(() => listener(element));
+        root(() => listener(element));
+        return;
     }
 
     let controller = controllers.get(event),
@@ -68,7 +70,7 @@ export default (element: Element, event: `on${string}`, listener: Function) => {
     if (controller) {
         controller.listeners++;
 
-        oncleanup(element, () => {
+        onRemove(element, () => {
             if (--controller.listeners) {
                 return;
             }

package/src/html/cache.ts

@@ -88,6 +88,8 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
 
         if (type === NODE_CLOSING) {
             level--;
+
+            // TODO: support multiple root nodes in template literals
         }
         else {
             parent.children++;

package/src/html/hydrate.ts

@@ -58,9 +58,7 @@ function render<T>(renderable: Renderable<T>, template: Template) {
             fn(node, values[slot], name);
         }
 
-        if (node) {
-            apply(node);
-        }
+        apply(node);
     }
 
     for (let element = firstChild.call(fragment as Element); element; element = nextSibling.call(element)) {

package/src/render.ts

@@ -1,15 +1,16 @@
-import { SLOT, SLOT_HTML } from './constants';
+import { isInstanceOf } from '@esportsplus/utilities';
+import { SLOT_HTML } from './constants';
 import slot, { Slot } from './slot';
 import { Renderable } from './types';
 import { firstChild, fragment, nodeValue, prepend } from './utilities';
 
 
-let marker = firstChild.call(fragment(SLOT_HTML)),
+let marker = firstChild.call( fragment(SLOT_HTML) ),
     node;
 
 
 export default (renderable: Renderable, parent: HTMLElement | Slot) => {
-    if (SLOT in parent) {
+    if (isInstanceOf(parent, Slot)) {
         return parent.render(renderable);
     }
 

package/src/slot.ts

@@ -1,9 +1,9 @@
-import { computed, dispose, root } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT, SLOT_CLEANUP } from './constants';
+import { effect, root } from '@esportsplus/reactivity';
+import { isArray, isFunction, isInstanceOf, isObject  } from '@esportsplus/utilities';
+import { RENDERABLE, RENDERABLE_REACTIVE, 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'
-import { isFunction } from '@esportsplus/utilities';
+import { firstChild, nextSibling, nodeValue, raf, text } from './utilities'
 
 
 let cleanup: VoidFunction[] = [],
@@ -49,7 +49,7 @@ function render(anchor: Element | null, input: unknown, slot?: Slot): Elements |
     if (input === false || input == null) {
         input = '';
     }
-    else if (typeof input === 'object') {
+    else if (isObject(input)) {
         if (isArray(input)) {
             let groups: Elements[] = [];
 
@@ -70,12 +70,12 @@ function render(anchor: Element | null, input: unknown, slot?: Slot): Elements |
                 nodes = hydrate.static(input as RenderableTemplate<unknown>);
             }
         }
-        else if (input instanceof NodeList) {
-            for (let node = firstChild.call(input as any as Element); node; node = nextSibling.call(node)) {
+        else if (isInstanceOf(input, NodeList)) {
+            for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
                 nodes.push(node);
             }
         }
-        else if (input instanceof Node) {
+        else if (isInstanceOf(input, Node)) {
             nodes = [input] as Elements;
         }
 
@@ -130,15 +130,13 @@ function schedule() {
 
 
 class Slot {
-    [SLOT] = null;
-
     marker: Element;
     nodes: Elements[];
     text: Element | null = null;
 
 
     constructor(marker: Element) {
-        oncleanup(marker, () => this.clear());
+        onRemove(marker, () => this.clear());
 
         this.marker = marker;
         this.nodes = [];
@@ -192,7 +190,9 @@ class Slot {
 
     render(input: unknown) {
         if (isFunction(input)) {
-            let instance = computed(() => {
+            onRemove(
+                this.marker,
+                effect(() => {
                     let v = (input as Function)();
 
                     if (isFunction(v)) {
@@ -203,9 +203,8 @@ class Slot {
                             this.render(v);
                         });
                     }
-                });
-
-            oncleanup(this.marker, () => dispose(instance));
+                })
+            );
 
             return this;
         }
@@ -257,7 +256,7 @@ class Slot {
 }
 
 
-const oncleanup = (element: Element, fn: VoidFunction) => {
+const onRemove = (element: Element, fn: VoidFunction) => {
     ( element[SLOT_CLEANUP] ??= [] ).push(fn);
 };
 
@@ -265,4 +264,4 @@ const oncleanup = (element: Element, fn: VoidFunction) => {
 export default (marker: Element, value: unknown) => {
     return new Slot(marker).render(value);
 };
-export { oncleanup, Slot };
+export { onRemove, Slot };

package/src/types.ts

@@ -7,15 +7,15 @@ import slot from './slot';
 
 
 type Attributes = {
-    class?: string | Effect<Primitive> | (string | Effect<Primitive>)[];
-    style?: string | Effect<Primitive> | (string | Effect<Primitive>)[];
+    class?: string | Effect<Primitive | Primitive[]> | (string | Effect<Primitive | Primitive[]>)[];
+    style?: string | Effect<Primitive | Primitive[]> | (string | Effect<Primitive | Primitive[]>)[];
 } & {
     [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: Element, event: GlobalEventHandlersEventMap[K]) => void;
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
     onconnected?: (element: Element) => void;
-    oncleanup?: (element: Element) => void;
+    onremove?: (element: Element) => void;
     // Rendered in fragment
     // - Used to retrieve reference to the element
     onrender?: (element: Element) => void;

package/src/utilities.ts

@@ -1,5 +1,4 @@
 import { raf as tasks } from '@esportsplus/tasks';
-import { defineProperty, isArray, isObject } from '@esportsplus/utilities';
 import { Element as E } from './types';
 
 
@@ -70,24 +69,12 @@ const text = (value: string) => {
 
 export {
     addEventListener,
-    className,
-    cloneNode,
-    defineProperty,
-    firstChild,
-    firstElementChild,
-    fragment,
+    className, cloneNode,
+    firstChild, firstElementChild, fragment,
     innerHTML,
-    isArray,
-    isObject,
-    nextElementSibling,
-    nextSibling,
-    nodeValue,
-    parentElement,
-    parentNode,
-    prepend,
-    raf,
-    removeAttribute,
-    removeEventListener,
+    nextElementSibling, nextSibling, nodeValue,
+    parentElement, parentNode, prepend,
+    raf, removeAttribute, removeEventListener,
     setAttribute,
     text
 };