@esportsplus/template 0.15.1 → 0.15.2

package/build/attributes.js

@@ -1,4 +1,4 @@
-import { effect, root } from '@esportsplus/reactivity';
+import { computed, dispose, root } from '@esportsplus/reactivity';
 import { oncleanup } from './slot.js';
 import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities.js';
 import event from './event.js';
@@ -25,11 +25,10 @@ function attribute(element, name, value) {
 }
 function reactive(element, id, name, value, wait = false) {
     if (typeof value === 'function') {
-        let instance = effect(() => {
+        let instance = computed(() => {
             let v = value(element);
             if (typeof v === 'function') {
-                root((root) => {
-                    instance.on('cleanup', () => root.dispose());
+                root(() => {
                     reactive(element, id, name, v(element), wait);
                 });
             }
@@ -42,7 +41,7 @@ function reactive(element, id, name, value, wait = false) {
                 });
             }
         });
-        oncleanup(element, () => instance.dispose());
+        oncleanup(element, () => dispose(instance));
         wait = false;
     }
     else {

package/build/event.js

@@ -11,17 +11,21 @@ let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(
     controllers.set(event, null);
 });
 export default (element, event, listener) => {
-    if (event === 'onmount') {
+    if (event === 'onconnected') {
         let interval = setInterval(() => {
             retry--;
             if (element.isConnected) {
                 retry = 0;
-                root(() => listener(element), scheduler);
+                root(() => listener(element));
             }
             if (retry === 0) {
                 clearInterval(interval);
             }
-        }, 1000 / 60), retry = 60, scheduler = root(({ scheduler }) => scheduler);
+        }, 1000 / 60), retry = 60;
+        return;
+    }
+    else if (event === 'oncleanup') {
+        oncleanup(element, () => listener(element));
         return;
     }
     else if (event === 'onrender') {

package/build/html/hydrate.js

@@ -7,8 +7,8 @@ function reactive(renderable, slot) {
         slot.length = 0;
         reactive(renderable, slot);
     }, render = (i, n) => {
-        return root(() => template(array, factory, i, n), scheduler);
-    }, renderables = array.map(factory), scheduler = root((scope) => scope.scheduler);
+        return root(() => template(array, factory, i, n));
+    }, renderables = array.map(factory);
     array.on('pop', () => slot.pop());
     array.on('push', ({ items }) => slot.push(...render(array.length - items.length)));
     array.on('reverse', refresh);

package/build/slot.js

@@ -1,7 +1,8 @@
-import { effect, root, DIRTY } from '@esportsplus/reactivity';
+import { computed, dispose, root } from '@esportsplus/reactivity';
 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';
+import { isFunction } from '@esportsplus/utilities';
 let cleanup = [], scheduled = false;
 function after(anchor, groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
@@ -136,17 +137,11 @@ class Slot {
         return this.nodes.length;
     }
     render(input) {
-        if (typeof input === 'function') {
-            let instance = effect((self) => {
+        if (isFunction(input)) {
+            let instance = computed(() => {
                 let v = input();
-                if (typeof v === 'function') {
-                    root((root) => {
-                        instance.on('cleanup', () => root.dispose());
-                        this.render(v());
-                    });
-                }
-                else if (self.state === DIRTY) {
-                    this.render(v);
+                if (isFunction(v)) {
+                    root(() => this.render(v()));
                 }
                 else {
                     raf.add(() => {
@@ -154,7 +149,7 @@ class Slot {
                     });
                 }
             });
-            oncleanup(this.marker, () => instance.dispose());
+            oncleanup(this.marker, () => dispose(instance));
             return this;
         }
         if (this.text) {

package/build/types.d.ts

@@ -12,7 +12,8 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
-    onmount?: (element: Element) => void;
+    onconnected?: (element: Element) => void;
+    oncleanup?: (element: Element) => void;
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;
@@ -26,7 +27,7 @@ type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
 type RenderableReactive<T = unknown> = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_REACTIVE;
     literals: null;
-    template: (this: ReactiveArray<T>, value: T, i: number) => RenderableTemplate<T>;
+    template: (...args: Parameters<Parameters<ReactiveArray<T>['map']>[0]>) => RenderableTemplate<T>;
     values: ReactiveArray<T>;
 }>;
 type RenderableTemplate<T> = {

package/package.json

@@ -1,19 +1,19 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/reactivity": "^0.4.7",
-    "@esportsplus/tasks": "^0.1.9",
-    "@esportsplus/utilities": "^0.19.0"
+    "@esportsplus/reactivity": "^0.6.2",
+    "@esportsplus/tasks": "^0.1.11",
+    "@esportsplus/utilities": "^0.21.0"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.1"
+    "@esportsplus/typescript": "^0.9.2"
   },
   "main": "./build/index.js",
   "name": "@esportsplus/template",
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,4 +1,4 @@
-import { effect, root } from '@esportsplus/reactivity';
+import { computed, dispose, root } from '@esportsplus/reactivity';
 import { oncleanup } from './slot';
 import { Attributes, Element } from './types';
 import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities';
@@ -34,12 +34,11 @@ 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 = effect(() => {
+        let instance = computed(() => {
                 let v = (value as Function)(element);
 
                 if (typeof v === 'function') {
-                    root((root) => {
-                        instance.on('cleanup', () => root.dispose());
+                    root(() => {
                         reactive(element, id, name, v(element), wait);
                     });
                 }
@@ -53,7 +52,7 @@ function reactive(element: Element, id: string, name: string, value: unknown, wa
                 }
             });
 
-        oncleanup(element, () => instance.dispose());
+        oncleanup(element, () => dispose(instance));
 
         wait = false;
     }

package/src/event.ts

@@ -24,24 +24,27 @@ let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
 
 
 export default (element: Element, event: `on${string}`, listener: Function) => {
-    if (event === 'onmount') {
+    if (event === 'onconnected') {
         let interval = setInterval(() => {
                 retry--;
 
                 if (element.isConnected) {
                     retry = 0;
-                    root(() => listener(element), scheduler);
+                    root(() => listener(element));
                 }
 
                 if (retry === 0) {
                     clearInterval(interval);
                 }
             }, 1000 / 60),
-            retry = 60,
-            scheduler = root(({ scheduler }) => scheduler);
+            retry = 60;
 
         return;
     }
+    else if (event === 'oncleanup') {
+        oncleanup(element, () => listener(element));
+        return;
+    }
     else if (event === 'onrender') {
         return root(() => listener(element));
     }

package/src/html/hydrate.ts

@@ -14,10 +14,9 @@ function reactive<T>(renderable: RenderableReactive<T>, slot: Slot) {
             reactive(renderable, slot);
         },
         render = (i: number, n?: number) => {
-            return root(() => template(array, factory, i, n), scheduler);
+            return root(() => template(array, factory, i, n));
         },
-        renderables = array.map( factory ),
-        scheduler = root((scope) => scope.scheduler);
+        renderables = array.map(factory);
 
     array.on('pop', () => slot.pop());
     array.on('push', ({ items }) => slot.push(...render(array.length - items.length)));

package/src/slot.ts

@@ -1,8 +1,9 @@
-import { effect, root, DIRTY } from '@esportsplus/reactivity';
+import { computed, dispose, root } from '@esportsplus/reactivity';
 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'
+import { isFunction } from '@esportsplus/utilities';
 
 
 let cleanup: VoidFunction[] = [],
@@ -190,18 +191,12 @@ class Slot {
     }
 
     render(input: unknown) {
-        if (typeof input === 'function') {
-            let instance = effect((self) => {
+        if (isFunction(input)) {
+            let instance = computed(() => {
                     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);
+                    if (isFunction(v)) {
+                        root(() => this.render(v()));
                     }
                     else {
                         raf.add(() => {
@@ -210,7 +205,7 @@ class Slot {
                     }
                 });
 
-            oncleanup(this.marker, () => instance.dispose());
+            oncleanup(this.marker, () => dispose(instance));
 
             return this;
         }

package/src/types.ts

@@ -14,10 +14,9 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
-    // Element is mounted to DOM
-    // - Trigger animations, etc.
-    onmount?: (element: Element) => void;
-    // Element is rendered in fragment
+    onconnected?: (element: Element) => void;
+    oncleanup?: (element: Element) => void;
+    // Rendered in fragment
     // - Used to retrieve reference to the element
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
@@ -39,7 +38,9 @@ type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
 type RenderableReactive<T = unknown> = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_REACTIVE;
     literals: null;
-    template: (this: ReactiveArray<T>, value: T, i: number) => RenderableTemplate<T>;
+    template: (
+        ...args: Parameters< Parameters<ReactiveArray<T>['map']>[0] >
+    ) => RenderableTemplate<T>;
     values: ReactiveArray<T>;
 }>;