@esportsplus/template 0.13.0 → 0.14.0

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 { SLOT_CLEANUP } from './constants.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++;
+        (element[SLOT_CLEANUP] ??= []).push(() => {
+            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,10 +10,10 @@ 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;
 }

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,9 @@ class Slot {
     nodes;
     text = null;
     constructor(marker) {
-        marker[key] = this;
+        (marker[SLOT_CLEANUP] ??= []).push(() => {
+            this.clear();
+        });
         this.marker = marker;
         this.nodes = [];
     }
@@ -131,14 +120,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]);
         }
@@ -182,13 +175,17 @@ 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));
     }
 }
 export default (marker, value) => {

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

@@ -13,7 +13,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -67,7 +67,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);
@@ -197,5 +197,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 { SLOT_CLEANUP } from './constants';
 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++;
+
+        ( element[SLOT_CLEANUP] ??= [] ).push(() => {
+            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,9 @@ class Slot {
 
 
     constructor(marker: Element) {
-        marker[key] = this;
+        ( marker[SLOT_CLEANUP] ??= [] ).push(() => {
+            this.clear();
+        });
 
         this.marker = marker;
         this.nodes = [];
@@ -185,16 +167,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]);
@@ -252,17 +240,23 @@ 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));
     }
 }
 

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[];