@esportsplus/template 0.14.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/event.js

@@ -1,5 +1,5 @@
 import { root } from '@esportsplus/reactivity';
-import { SLOT_CLEANUP } from './constants.js';
+import { oncleanup } from './slot.js';
 import { addEventListener, defineProperty, 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',
@@ -38,7 +38,7 @@ export default (element, event, listener) => {
     }
     if (controller) {
         controller.listeners++;
-        (element[SLOT_CLEANUP] ??= []).push(() => {
+        oncleanup(element, () => {
             if (--controller.listeners) {
                 return;
             }

package/build/slot.d.ts

@@ -17,6 +17,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 _default: (marker: Element, value: unknown) => Slot;
 export default _default;
-export { Slot };
+export { oncleanup, Slot };

package/build/slot.js

@@ -100,9 +100,7 @@ class Slot {
     nodes;
     text = null;
     constructor(marker) {
-        (marker[SLOT_CLEANUP] ??= []).push(() => {
-            this.clear();
-        });
+        oncleanup(marker, () => this.clear());
         this.marker = marker;
         this.nodes = [];
     }
@@ -139,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());
                     });
                 }
@@ -155,6 +154,7 @@ class Slot {
                     });
                 }
             });
+            oncleanup(this.marker, () => instance.dispose());
             return this;
         }
         if (this.text) {
@@ -188,7 +188,10 @@ class Slot {
         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/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.14.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 {
@@ -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) {

package/src/event.ts

@@ -1,5 +1,5 @@
 import { root } from '@esportsplus/reactivity';
-import { SLOT_CLEANUP } from './constants';
+import { oncleanup } from './slot';
 import { Element } from './types';
 import { addEventListener, defineProperty, parentElement } from './utilities';
 
@@ -65,14 +65,14 @@ export default (element: Element, event: `on${string}`, listener: Function) => {
     if (controller) {
         controller.listeners++;
 
-        ( element[SLOT_CLEANUP] ??= [] ).push(() => {
+        oncleanup(element, () => {
             if (--controller.listeners) {
                 return;
             }
 
             controller.abort();
             controllers.set(event, null);
-        })
+        });
         signal = controller.signal;
     }
 

package/src/slot.ts

@@ -137,9 +137,7 @@ class Slot {
 
 
     constructor(marker: Element) {
-        ( marker[SLOT_CLEANUP] ??= [] ).push(() => {
-            this.clear();
-        });
+        oncleanup(marker, () => this.clear());
 
         this.marker = marker;
         this.nodes = [];
@@ -193,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;
         }
@@ -261,7 +262,12 @@ class Slot {
 }
 
 
+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 };