@esportsplus/template 0.15.12 → 0.15.14

package/build/attributes.js

@@ -1,6 +1,6 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { onRemove } from './slot.js';
+import { ondisconnect } from './slot.js';
 import { className, raf, removeAttribute, setAttribute } from './utilities.js';
 import event from './event.js';
 let attributes = {}, delimiters = {
@@ -8,10 +8,7 @@ let attributes = {}, delimiters = {
     style: ';'
 }, key = Symbol();
 function attribute(element, name, value) {
-    if (value === false || value == null) {
-        value = '';
-    }
-    if (value === '') {
+    if (value === '' || value === false || value == null) {
         removeAttribute.call(element, name);
     }
     else if (name === 'class') {
@@ -36,7 +33,7 @@ function set(element, value, name, wait = false) {
         }
         else {
             let id = ('e' + store(element)[key]++);
-            onRemove(element, effect(() => {
+            ondisconnect(element, effect(() => {
                 let v = value(element);
                 if (isArray(v)) {
                     let last = v.length - 1;
@@ -136,17 +133,11 @@ const spread = function (element, attributes) {
     else if (isArray(attributes)) {
         for (let i = 0, n = attributes.length; i < n; i++) {
             let attrs = attributes[i];
-            if (!isObject(attrs)) {
-                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, true);
             }
         }
     }
-    else {
-        throw new Error('@esportsplus/template: attributes must be of type `Attributes` or `Attributes[]`; Received ' + JSON.stringify(attributes));
-    }
 };
 export default { apply, spread };
 export { apply, spread };

package/build/event.js

@@ -1,6 +1,6 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { onRemove } from './slot.js';
+import { ondisconnect } 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',
@@ -12,7 +12,7 @@ let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(
     controllers.set(event, null);
 });
 export default (element, event, listener) => {
-    if (event === 'onconnected') {
+    if (event === 'onconnect') {
         let interval = setInterval(() => {
             retry--;
             if (element.isConnected) {
@@ -25,8 +25,8 @@ export default (element, event, listener) => {
         }, 1000 / 60), retry = 60;
         return;
     }
-    else if (event === 'ondisconnected') {
-        onRemove(element, () => listener(element));
+    else if (event === 'ondisconnect') {
+        ondisconnect(element, () => listener(element));
         return;
     }
     else if (event === 'onrender') {
@@ -44,7 +44,7 @@ export default (element, event, listener) => {
     }
     if (controller) {
         controller.listeners++;
-        onRemove(element, () => {
+        ondisconnect(element, () => {
             if (--controller.listeners) {
                 return;
             }

package/build/slot.d.ts

@@ -15,7 +15,7 @@ declare class Slot {
     splice(start: number, stop?: number, ...groups: Elements[]): Elements[];
     unshift(...groups: Elements[]): number;
 }
-declare const onRemove: (element: Element, fn: VoidFunction) => void;
+declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const _default: (marker: Element, value: unknown) => Slot;
 export default _default;
-export { onRemove, Slot };
+export { ondisconnect, Slot };

package/build/slot.js

@@ -3,7 +3,8 @@ import { isArray, isFunction, isInstanceOf, isObject } from '@esportsplus/utilit
 import { RENDERABLE, RENDERABLE_REACTIVE, SLOT_CLEANUP } from './constants.js';
 import { hydrate } from './html/index.js';
 import { firstChild, nextSibling, nodeValue, raf, text } from './utilities.js';
-let cleanup = [], scheduled = false;
+import queue from '@esportsplus/queue';
+let cleanup = queue(), scheduled = false;
 function after(anchor, groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
@@ -20,7 +21,7 @@ function remove(...groups) {
         for (let j = 0, o = group.length; j < o; j++) {
             let item = group[j];
             if (item[SLOT_CLEANUP]) {
-                cleanup.push(...item[SLOT_CLEANUP]);
+                cleanup.add(item[SLOT_CLEANUP]);
             }
             item.remove();
         }
@@ -83,9 +84,11 @@ function schedule() {
     scheduled = true;
     raf.add(() => {
         try {
-            let fn;
-            while (fn = cleanup.pop()) {
-                fn();
+            let fns;
+            while (fns = cleanup.next()) {
+                for (let i = 0, n = fns.length; i < n; i++) {
+                    fns[i]();
+                }
             }
         }
         catch (e) { }
@@ -100,7 +103,7 @@ class Slot {
     nodes;
     text = null;
     constructor(marker) {
-        onRemove(marker, () => this.clear());
+        ondisconnect(marker, () => this.clear());
         this.marker = marker;
         this.nodes = [];
     }
@@ -137,7 +140,7 @@ class Slot {
     }
     render(input) {
         if (isFunction(input)) {
-            onRemove(this.marker, effect(() => {
+            ondisconnect(this.marker, effect(() => {
                 let v = input();
                 if (isFunction(v)) {
                     root(() => this.render(v()));
@@ -181,10 +184,10 @@ class Slot {
         return this.nodes.unshift(...after(this.marker, groups));
     }
 }
-const onRemove = (element, fn) => {
+const ondisconnect = (element, fn) => {
     (element[SLOT_CLEANUP] ??= []).push(fn);
 };
 export default (marker, value) => {
     return new Slot(marker).render(value);
 };
-export { onRemove, Slot };
+export { ondisconnect, Slot };

package/build/types.d.ts

@@ -13,8 +13,8 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
-    onconnected?: (element: Element) => void;
-    ondisconnected?: (element: Element) => void;
+    onconnect?: (element: Element) => void;
+    ondisconnect?: (element: Element) => void;
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;

package/package.json

@@ -1,8 +1,9 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/reactivity": "^0.11.8",
-    "@esportsplus/tasks": "^0.1.11",
+    "@esportsplus/queue": "^0.0.1",
+    "@esportsplus/reactivity": "^0.12.1",
+    "@esportsplus/tasks": "^0.2.0",
     "@esportsplus/utilities": "^0.21.1"
   },
   "devDependencies": {
@@ -13,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.15.12",
+  "version": "0.15.14",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,6 +1,6 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { onRemove } from './slot';
+import { ondisconnect } from './slot';
 import { Attributes, Element } from './types';
 import { className, raf, removeAttribute, setAttribute } from './utilities';
 import event from './event';
@@ -15,11 +15,7 @@ let attributes: Record<string, unknown> = {},
 
 
 function attribute(element: Element, name: string, value: unknown) {
-    if (value === false || value == null) {
-        value = '';
-    }
-
-    if (value === '') {
+    if (value === '' || value === false || value == null) {
         removeAttribute.call(element, name);
     }
     else if (name === 'class') {
@@ -46,7 +42,7 @@ function set(element: Element, value: unknown, name: string, wait = false) {
         else {
             let id = ('e' + store(element)[key]++);
 
-            onRemove(
+            ondisconnect(
                 element,
                 effect(() => {
                     let v = (value as Function)(element);
@@ -181,18 +177,11 @@ const spread = function (element: Element, attributes: Attributes | Attributes[]
         for (let i = 0, n = attributes.length; i < n; i++) {
             let attrs = attributes[i];
 
-            if (!isObject(attrs)) {
-                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, true);
             }
         }
     }
-    else {
-        throw new Error('@esportsplus/template: attributes must be of type `Attributes` or `Attributes[]`; Received ' + JSON.stringify(attributes));
-    }
 };
 
 

package/src/event.ts

@@ -1,6 +1,6 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { onRemove } from './slot';
+import { ondisconnect } from './slot';
 import { Element } from './types';
 import { addEventListener, parentElement } from './utilities';
 
@@ -25,7 +25,7 @@ let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
 
 
 export default (element: Element, event: `on${string}`, listener: Function): void => {
-    if (event === 'onconnected') {
+    if (event === 'onconnect') {
         let interval = setInterval(() => {
                 retry--;
 
@@ -42,8 +42,8 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
 
         return;
     }
-    else if (event === 'ondisconnected') {
-        onRemove(element, () => listener(element));
+    else if (event === 'ondisconnect') {
+        ondisconnect(element, () => listener(element));
         return;
     }
     else if (event === 'onrender') {
@@ -70,7 +70,7 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
     if (controller) {
         controller.listeners++;
 
-        onRemove(element, () => {
+        ondisconnect(element, () => {
             if (--controller.listeners) {
                 return;
             }

package/src/slot.ts

@@ -4,9 +4,10 @@ import { RENDERABLE, RENDERABLE_REACTIVE, SLOT_CLEANUP } from './constants';
 import { hydrate } from './html';
 import { Element, Elements, RenderableReactive, RenderableTemplate } from './types';
 import { firstChild, nextSibling, nodeValue, raf, text } from './utilities'
+import queue from '@esportsplus/queue';
 
 
-let cleanup: VoidFunction[] = [],
+let cleanup = queue<VoidFunction[]>(),
     scheduled = false;
 
 
@@ -31,7 +32,7 @@ function remove(...groups: Elements[]) {
             let item = group[j];
 
             if (item[SLOT_CLEANUP]) {
-                cleanup.push(...item[SLOT_CLEANUP]);
+                cleanup.add( item[SLOT_CLEANUP] );
             }
 
             item.remove();
@@ -112,10 +113,12 @@ function schedule() {
 
     raf.add(() => {
         try {
-            let fn;
+            let fns;
 
-            while (fn = cleanup.pop()) {
-                fn();
+            while (fns = cleanup.next()) {
+                for (let i = 0, n = fns.length; i < n; i++) {
+                    fns[i]();
+                }
             }
         }
         catch(e) { }
@@ -136,7 +139,7 @@ class Slot {
 
 
     constructor(marker: Element) {
-        onRemove(marker, () => this.clear());
+        ondisconnect(marker, () => this.clear());
 
         this.marker = marker;
         this.nodes = [];
@@ -190,7 +193,7 @@ class Slot {
 
     render(input: unknown) {
         if (isFunction(input)) {
-            onRemove(
+            ondisconnect(
                 this.marker,
                 effect(() => {
                     let v = (input as Function)();
@@ -256,7 +259,7 @@ class Slot {
 }
 
 
-const onRemove = (element: Element, fn: VoidFunction) => {
+const ondisconnect = (element: Element, fn: VoidFunction) => {
     ( element[SLOT_CLEANUP] ??= [] ).push(fn);
 };
 
@@ -264,4 +267,4 @@ const onRemove = (element: Element, fn: VoidFunction) => {
 export default (marker: Element, value: unknown) => {
     return new Slot(marker).render(value);
 };
-export { onRemove, Slot };
+export { ondisconnect, Slot };

package/src/types.ts

@@ -16,8 +16,8 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
-    onconnected?: (element: Element) => void;
-    ondisconnected?: (element: Element) => void;
+    onconnect?: (element: Element) => void;
+    ondisconnect?: (element: Element) => void;
     // Rendered in fragment
     // - Used to retrieve reference to the element
     onrender?: (element: Element) => void;