@esportsplus/template 0.28.3 → 0.29.2

package/build/constants.js

@@ -1,39 +1,11 @@
-import { fragment } from './utilities/fragment.js';
+import { fragment } from './utilities.js';
 const ARRAY_SLOT = Symbol('template.array.slot');
 const CLEANUP = Symbol('template.cleanup');
 const EMPTY_FRAGMENT = fragment('');
-const NODE_CLOSING = 1;
-const NODE_COMMENT = 2;
-const NODE_ELEMENT = 3;
-const NODE_SLOT = 4;
-const NODE_VOID = 5;
-const NODE_WHITELIST = {
-    '/': NODE_CLOSING,
-    '!': NODE_COMMENT,
-    'area': NODE_VOID,
-    'base': NODE_VOID,
-    'br': NODE_VOID,
-    'col': NODE_VOID,
-    'embed': NODE_VOID,
-    'hr': NODE_VOID,
-    'img': NODE_VOID,
-    'input': NODE_VOID,
-    'keygen': NODE_VOID,
-    'link': NODE_VOID,
-    'menuitem': NODE_VOID,
-    'meta': NODE_VOID,
-    'param': NODE_VOID,
-    'source': NODE_VOID,
-    'track': NODE_VOID,
-    'wbr': NODE_VOID
-};
-const REGEX_EMPTY_TEXT_NODES = /(>|}|\s)\s+(<|{|\s)/g;
-const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=(?:\s*["'][^"']*["'])*)/g;
-const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
-const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
 const SLOT_HTML = '<!--$-->';
-const SLOT_MARKER = '{{$}}';
 const STATE_HYDRATING = 0;
 const STATE_NONE = 1;
 const STATE_WAITING = 2;
-export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, SLOT_HTML, STATE_HYDRATING, SLOT_MARKER, STATE_NONE, STATE_WAITING };
+const STORE = Symbol('template.store');
+export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE };
+export * from './event/constants.js';

package/build/event/constants.d.ts

@@ -0,0 +1,3 @@
+declare const DIRECT_ATTACH_EVENTS: Set<string>;
+declare const LIFECYCLE_EVENTS: Set<string>;
+export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/build/event/constants.js

@@ -0,0 +1,13 @@
+const DIRECT_ATTACH_EVENTS = new Set([
+    'onblur',
+    'onerror',
+    'onfocus', 'onfocusin', 'onfocusout',
+    'onload',
+    'onplay', 'onpause', 'onended', 'ontimeupdate',
+    'onreset',
+    'onscroll', 'onsubmit'
+]);
+const LIFECYCLE_EVENTS = new Set([
+    'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
+]);
+export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/build/event/index.d.ts

@@ -1,3 +1,11 @@
 import { Element } from '../types.js';
-declare const _default: (element: Element, event: `on${string}`, listener: Function) => void;
+declare const _default: {
+    delegate: (element: Element, event: string, listener: Function) => void;
+    direct: (element: Element, event: string, listener: Function) => void;
+    onconnect: (element: globalThis.Element, listener: Function) => void;
+    ondisconnect: (element: Element, listener: Function) => void;
+    onrender: (element: Element, listener: Function) => void;
+    onresize: (element: Element, listener: Function) => void;
+    ontick: (element: globalThis.Element, listener: Function) => void;
+};
 export default _default;

package/build/event/index.js

@@ -1,20 +1,18 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { addEventListener } from '../utilities/element.js';
-import { parentElement } from '../utilities/node.js';
-import { ondisconnect } from '../slot/cleanup.js';
+import { ondisconnect as disconnect } from '../slot/cleanup.js';
 import onconnect from './onconnect.js';
 import onresize from './onresize.js';
 import ontick from './ontick.js';
-let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
-    'onanimationend', 'onanimationiteration', 'onanimationstart',
-    'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
-    'onpointerenter', 'onpointerleave', 'onpointermove', 'onpointerout', 'onpointerover',
-    'onscroll',
-    'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart', 'ontransitionend',
-    'onwheel'
+let controllers = new Map(), host = window.document, keys = {}, passive = new Set([
+    'animationend', 'animationiteration', 'animationstart',
+    'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
+    'pointerenter', 'pointerleave', 'pointermove', 'pointerout', 'pointerover',
+    'scroll',
+    'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart', 'transitionend',
+    'wheel'
 ]);
-['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'].map(event => {
+['mousemove', 'mousewheel', 'scroll', 'touchend', 'touchmove', 'touchstart', 'wheel'].map(event => {
     controllers.set(event, null);
 });
 function register(element, event) {
@@ -39,7 +37,7 @@ function register(element, event) {
         signal = controller.signal;
     }
     let key = keys[event] = Symbol();
-    addEventListener.call(window.document, event.slice(2), (e) => {
+    host.addEventListener(event.slice(2), (e) => {
         let fn, node = e.target;
         while (node) {
             fn = node[key];
@@ -52,34 +50,30 @@ function register(element, event) {
                 });
                 return fn.call(node, e);
             }
-            node = parentElement.call(node);
+            node = node.parentElement;
         }
     }, {
-        capture: capture.has(event),
         passive: passive.has(event),
         signal
     });
     return key;
 }
-export default (element, event, listener) => {
-    switch (event) {
-        case 'onconnect':
-            onconnect(element, listener);
-            return;
-        case 'ondisconnect':
-            ondisconnect(element, () => listener(element));
-            return;
-        case 'onrender':
-            root(() => listener(element));
-            return;
-        case 'onresize':
-            onresize(element, listener);
-            return;
-        case 'ontick':
-            ontick(element, listener);
-            return;
-        default:
-            element[keys[event] || register(element, event)] = listener;
-            return;
-    }
+const delegate = (element, event, listener) => {
+    element[keys[event] || register(element, event)] = listener;
+};
+const direct = (element, event, listener) => {
+    let handler = (e) => listener.call(element, e);
+    element.addEventListener(event, handler, {
+        passive: passive.has(event)
+    });
+    ondisconnect(element, () => {
+        element.removeEventListener(event, handler);
+    });
+};
+const ondisconnect = (element, listener) => {
+    disconnect(element, () => listener(element));
+};
+const onrender = (element, listener) => {
+    root(() => listener(element));
 };
+export default { delegate, direct, onconnect, ondisconnect, onrender, onresize, ontick };

package/build/event/ontick.js

@@ -1,5 +1,4 @@
-import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
-import raf from '../utilities/raf.js';
+import { raf } from '../utilities.js';
 let tasks = Object.assign(new Set(), { running: false });
 function tick() {
     if (tasks.size === 0) {
@@ -22,12 +21,10 @@ const remove = (task) => {
     tasks.delete(task);
 };
 export default (element, listener) => {
-    let dispose = () => {
-        remove(fn);
-    }, fn = () => {
-        if (state === STATE_HYDRATING) {
+    let connected = false, fn = () => {
+        if (connected === false) {
             if (element.isConnected) {
-                state = STATE_NONE;
+                connected = true;
             }
             else if (retry--) {
                 return;
@@ -37,8 +34,8 @@ export default (element, listener) => {
             remove(fn);
             return;
         }
-        listener(dispose, element);
-    }, retry = 60, state = STATE_HYDRATING;
+        listener(() => remove(fn), element);
+    }, retry = 60;
     add(fn);
 };
 export { add, remove };

package/build/html.d.ts

@@ -0,0 +1,9 @@
+import { ReactiveArray } from '@esportsplus/reactivity';
+import { Attribute, Attributes, Renderable } from './types.js';
+import { ArraySlot } from './slot/array.js';
+type Values<T> = Attribute | Attributes<any> | ArraySlot<T> | Renderable<T>;
+declare const html: {
+    <T>(_literals: TemplateStringsArray, ..._values: (Values<T> | Values<T>[])[]): DocumentFragment;
+    reactive<T>(_arr: ReactiveArray<T>, _template: (value: T) => DocumentFragment): ArraySlot<T>;
+};
+export default html;

package/build/html.js

@@ -0,0 +1,7 @@
+const html = (_literals, ..._values) => {
+    throw new Error('html`` templates must be compiled. Ensure vite-plugin is configured.');
+};
+html.reactive = (_arr, _template) => {
+    throw new Error('html.reactive() must be compiled. Ensure vite-plugin is configured.');
+};
+export default html;

package/build/index.d.ts

@@ -1,5 +1,11 @@
-export { default as html } from './html/index.js';
+import './runtime.js';
+export { default as attributes } from './attributes.js';
+export { default as event } from './event/index.js';
+export { default as html } from './html.js';
 export { default as render } from './render.js';
+export { default as slot } from './slot/index.js';
 export { default as svg } from './svg.js';
-export type { ArraySlot } from './slot/array.js';
+export { ArraySlot } from './slot/array.js';
+export { EffectSlot } from './slot/effect.js';
 export type { Attributes, Element, Renderable } from './types.js';
+export * from './utilities.js';

package/build/index.js

@@ -1,3 +1,10 @@
-export { default as html } from './html/index.js';
+import './runtime.js';
+export { default as attributes } from './attributes.js';
+export { default as event } from './event/index.js';
+export { default as html } from './html.js';
 export { default as render } from './render.js';
+export { default as slot } from './slot/index.js';
 export { default as svg } from './svg.js';
+export { ArraySlot } from './slot/array.js';
+export { EffectSlot } from './slot/effect.js';
+export * from './utilities.js';

package/build/render.d.ts

@@ -1,3 +1,3 @@
-import { Renderable } from './types.js';
-declare const _default: <T>(parent: HTMLElement, renderable: Renderable<T>) => void;
+import { Effect, Renderable } from './types.js';
+declare const _default: <T>(parent: HTMLElement, renderable: Exclude<Renderable<T>, Effect<T>>) => void;
 export default _default;

package/build/render.js

@@ -1,9 +1,8 @@
-import { nodeValue } from './utilities/node.js';
-import marker from './utilities/marker.js';
+import { marker } from './utilities.js';
 import slot from './slot/index.js';
 export default (parent, renderable) => {
     let anchor = marker.cloneNode();
-    nodeValue.call(parent, '');
+    parent.nodeValue = '';
     parent.append(anchor);
     slot(anchor, renderable);
 };

package/build/runtime.d.ts

@@ -0,0 +1 @@
+export {};

package/build/runtime.js

@@ -0,0 +1,5 @@
+import { CLEANUP, STORE } from './constants.js';
+if (typeof Node !== 'undefined') {
+    Node.prototype[CLEANUP] = null;
+    Node.prototype[STORE] = null;
+}

package/build/slot/array.d.ts

@@ -1,14 +1,14 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import html from '../html/index.js';
+import html from '../html.js';
 declare class ArraySlot<T> {
     private array;
-    private queue;
     private marker;
     private nodes;
+    private queue;
     private scheduled;
     private signal;
     private template;
-    readonly fragment: Node;
+    readonly fragment: DocumentFragment;
     constructor(array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>));
     private anchor;
     private clear;

package/build/slot/array.js

@@ -1,22 +1,19 @@
 import { read, root, set, signal } from '@esportsplus/reactivity';
 import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
-import { append } from '../utilities/fragment.js';
-import { cloneNode, firstChild, lastChild, nextSibling } from '../utilities/node.js';
+import { clone, marker, raf } from '../utilities.js';
 import { ondisconnect, remove } from './cleanup.js';
-import marker from '../utilities/marker.js';
-import raf from '../utilities/raf.js';
 class ArraySlot {
     array;
-    queue = [];
     marker;
     nodes = [];
+    queue = [];
     scheduled = false;
     signal;
     template;
     fragment;
     constructor(array, template) {
         this.array = array;
-        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = this.fragment = clone(EMPTY_FRAGMENT);
         this.marker = marker.cloneNode();
         this.signal = signal(array.length);
         this.template = function (data) {
@@ -24,14 +21,14 @@ class ArraySlot {
                 dispose = d;
                 return template(data);
             }), group = {
-                head: firstChild.call(frag),
-                tail: lastChild.call(frag)
+                head: frag.firstChild,
+                tail: frag.lastChild
             };
-            append.call(fragment, frag);
+            fragment.append(frag);
             ondisconnect(group.head, dispose);
             return group;
         };
-        append.call(fragment, this.marker);
+        fragment.append(this.marker);
         if (array.length) {
             root(() => {
                 this.nodes = array.map(this.template);
@@ -95,7 +92,8 @@ class ArraySlot {
         this.scheduled = true;
         raf(() => {
             let queue = this.queue;
-            this.queue.length = 0;
+            this.queue = [];
+            this.scheduled = false;
             root(() => {
                 for (let i = 0, n = queue.length; i < n; i++) {
                     let op = queue[i];
@@ -132,7 +130,6 @@ class ArraySlot {
                 }
             });
             set(this.signal, this.nodes.length);
-            this.scheduled = false;
         });
     }
     shift() {
@@ -172,8 +169,8 @@ class ArraySlot {
         for (let i = 0; i < n; i++) {
             let group = nodes[i], next, node = group.head;
             while (node) {
-                next = node === group.tail ? null : nextSibling.call(node);
-                append.call(this.fragment, node);
+                next = node === group.tail ? null : node.nextSibling;
+                this.fragment.append(node);
                 node = next;
             }
         }

package/build/slot/cleanup.d.ts

@@ -1,4 +1,4 @@
-import { SlotGroup } from '../types.js';
+import { Element, SlotGroup } from '../types.js';
 declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const remove: (...groups: SlotGroup[]) => void;
 export { ondisconnect, remove };

package/build/slot/cleanup.js

@@ -1,5 +1,4 @@
 import { CLEANUP } from '../constants.js';
-import { previousSibling } from '../utilities/node.js';
 const ondisconnect = (element, fn) => {
     (element[CLEANUP] ??= []).push(fn);
 };
@@ -13,7 +12,7 @@ const remove = (...groups) => {
                     fn();
                 }
             }
-            next = previousSibling.call(tail);
+            next = tail.previousSibling;
             tail.remove();
             if (head === tail) {
                 break;

package/build/slot/effect.js

@@ -1,8 +1,6 @@
 import { effect } from '@esportsplus/reactivity';
-import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
 import { remove } from './cleanup.js';
-import raf from '../utilities/raf.js';
-import text from '../utilities/text.js';
+import { raf, text } from '../utilities.js';
 import render from './render.js';
 function read(value) {
     if (typeof value === 'function') {
@@ -60,7 +58,7 @@ class EffectSlot {
                 value = String(value);
             }
             if (textnode) {
-                nodeValue.call(textnode, value);
+                textnode.nodeValue = value;
                 if (!textnode.isConnected) {
                     anchor.after(textnode);
                 }
@@ -70,14 +68,14 @@ class EffectSlot {
             }
         }
         else {
-            let fragment = render(anchor, value), head = firstChild.call(fragment);
+            let fragment = render(anchor, value), head = fragment.firstChild;
             if (textnode?.isConnected) {
                 remove({ head: textnode, tail: textnode });
             }
             if (head) {
                 this.group = {
-                    head,
-                    tail: lastChild.call(fragment)
+                    head: head,
+                    tail: fragment.lastChild
                 };
                 anchor.after(fragment);
             }

package/build/slot/index.js

@@ -1,10 +1,4 @@
-import { EffectSlot } from './effect.js';
 import render from './render.js';
 export default (anchor, value) => {
-    if (typeof value === 'function') {
-        new EffectSlot(anchor, value);
-    }
-    else {
-        anchor.after(render(anchor, value));
-    }
+    anchor.after(render(anchor, value));
 };

package/build/slot/render.js

@@ -1,8 +1,6 @@
 import { isArray } from '@esportsplus/utilities';
 import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
-import { cloneNode, lastChild } from '../utilities/node.js';
-import { append } from '../utilities/fragment.js';
-import text from '../utilities/text.js';
+import { clone, text } from '../utilities.js';
 export default function render(anchor, value) {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;
@@ -26,17 +24,17 @@ export default function render(anchor, value) {
         }
     }
     if (isArray(value)) {
-        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = clone(EMPTY_FRAGMENT);
         for (let i = 0; i < n; i++) {
-            append.call(fragment, render(anchor, value[i]));
-            anchor = lastChild.call(fragment);
+            fragment.append(render(anchor, value[i]));
+            anchor = fragment.lastChild;
         }
         return fragment;
     }
     if (value instanceof NodeList) {
-        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = clone(EMPTY_FRAGMENT);
         for (let i = 0; i < n; i++) {
-            append.call(fragment, value[i]);
+            fragment.append(value[i]);
         }
         return fragment;
     }

package/build/svg.d.ts

@@ -1,4 +1,4 @@
-import html from './html/index.js';
+import html from './html.js';
 declare const svg: typeof html & {
     sprite: (href: string) => ReturnType<typeof html>;
 };

package/build/svg.js

@@ -1,4 +1,4 @@
-import html from './html/index.js';
+import html from './html.js';
 const svg = html.bind(null);
 svg.sprite = (href) => {
     if (href[0] !== '#') {

package/build/transformer/codegen.d.ts

@@ -0,0 +1,18 @@
+import type { ReactiveCallInfo, TemplateInfo } from './ts-parser.js';
+import ts from 'typescript';
+type CodegenResult = {
+    changed: boolean;
+    code: string;
+};
+declare const addArraySlotImport: (code: string) => string;
+declare const generateCode: (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile) => CodegenResult;
+declare const generateReactiveInlining: (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile) => string;
+declare const getNames: () => {
+    attr: string;
+    event: string;
+    slot: string;
+};
+declare const needsArraySlotImport: (sourceFile: ts.SourceFile) => boolean;
+declare const setTypeChecker: (checker: ts.TypeChecker | undefined) => void;
+export { addArraySlotImport, generateCode, generateReactiveInlining, getNames, needsArraySlotImport, setTypeChecker };
+export type { CodegenResult };