@esportsplus/template 0.16.0

package/build/slot/cleanup.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,23 @@
+import { CLEANUP } from '../constants.js';
+const ondisconnect = (element, fn) => {
+    (element[CLEANUP] ??= []).push(fn);
+};
+const remove = (...groups) => {
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let fns, fn, group = groups[i], head = group.head, next, tail = group.tail || head;
+        while (tail) {
+            if (fns = tail[CLEANUP]) {
+                while (fn = fns.pop()) {
+                    fn();
+                }
+            }
+            next = tail.previousSibling;
+            tail.remove();
+            if (head === tail) {
+                break;
+            }
+            tail = next;
+        }
+    }
+};
+export { ondisconnect, remove };

package/build/slot/effect.d.ts

@@ -0,0 +1,12 @@
+import { Element, Renderable, SlotGroup } from '../types.js';
+declare class EffectSlot {
+    anchor: Element;
+    disposer: VoidFunction;
+    group: SlotGroup | null;
+    scheduled: boolean;
+    textnode: Node | null;
+    constructor(anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>);
+    dispose(): void;
+    update(value: unknown): void;
+}
+export { EffectSlot };

package/build/slot/effect.js

@@ -0,0 +1,85 @@
+import { effect } from '@esportsplus/reactivity';
+import { raf, text } from '../utilities.js';
+import { remove } from './cleanup.js';
+import render from './render.js';
+function read(value) {
+    if (typeof value === 'function') {
+        return read(value());
+    }
+    if (value == null || value === false) {
+        return '';
+    }
+    return value;
+}
+class EffectSlot {
+    anchor;
+    disposer;
+    group = null;
+    scheduled = false;
+    textnode = null;
+    constructor(anchor, fn) {
+        let dispose = fn.length ? () => this.dispose() : undefined, value;
+        this.anchor = anchor;
+        this.disposer = effect(() => {
+            value = read(fn(dispose));
+            if (!this.disposer) {
+                this.update(value);
+            }
+            else if (!this.scheduled) {
+                this.scheduled = true;
+                raf(() => {
+                    this.scheduled = false;
+                    this.update(value);
+                });
+            }
+        });
+    }
+    dispose() {
+        let { anchor, group, textnode } = this;
+        if (textnode) {
+            group = { head: anchor, tail: textnode };
+        }
+        else if (group) {
+            group.head = anchor;
+        }
+        this.disposer();
+        if (group) {
+            remove(group);
+        }
+    }
+    update(value) {
+        let { anchor, group, textnode } = this;
+        if (group) {
+            remove(group);
+            this.group = null;
+        }
+        if (typeof value !== 'object') {
+            if (typeof value !== 'string') {
+                value = String(value);
+            }
+            if (textnode) {
+                textnode.nodeValue = value;
+                if (!textnode.isConnected) {
+                    anchor.after(textnode);
+                }
+            }
+            else {
+                anchor.after(this.textnode = text(value));
+            }
+        }
+        else {
+            let fragment = render(anchor, value), head = fragment.firstChild;
+            if (textnode?.isConnected) {
+                remove({ head: textnode, tail: textnode });
+            }
+            if (head) {
+                this.group = {
+                    head: head,
+                    tail: fragment.lastChild
+                };
+                anchor.after(fragment);
+            }
+        }
+    }
+}
+export { EffectSlot };

package/build/slot/index.d.ts

@@ -0,0 +1,7 @@
+import { Element, Renderable } from '../types.js';
+declare const _default: <T>(anchor: Element, renderable: Renderable<T>) => void;
+export default _default;
+export * from './array.js';
+export * from './cleanup.js';
+export * from './effect.js';
+export { default as render } from './render.js';

package/build/slot/index.js

@@ -0,0 +1,14 @@
+import { EffectSlot } from './effect.js';
+import render from './render.js';
+export default (anchor, renderable) => {
+    if (typeof renderable === 'function') {
+        new EffectSlot(anchor, renderable);
+    }
+    else {
+        anchor.after(render(anchor, renderable));
+    }
+};
+export * from './array.js';
+export * from './cleanup.js';
+export * from './effect.js';
+export { default as render } from './render.js';

package/build/slot/render.d.ts

@@ -0,0 +1,2 @@
+import { Element } from '../types.js';
+export default function render(anchor: Element, value: unknown): Node;

package/build/slot/render.js

@@ -0,0 +1,44 @@
+import { isArray } from '@esportsplus/utilities';
+import { ARRAY_SLOT } from '../constants.js';
+import { clone, fragment, text } from '../utilities.js';
+const EMPTY_FRAGMENT = fragment('');
+export default function render(anchor, value) {
+    if (value == null || value === false || value === '') {
+        return EMPTY_FRAGMENT;
+    }
+    if (typeof value !== 'object') {
+        return text(value);
+    }
+    if (value[ARRAY_SLOT] === true) {
+        return value.fragment;
+    }
+    if (value.nodeType !== undefined) {
+        return value;
+    }
+    let n = value.length;
+    if (typeof n === 'number') {
+        if (n === 0) {
+            return EMPTY_FRAGMENT;
+        }
+        else if (n === 1) {
+            return render(anchor, value[0]);
+        }
+    }
+    if (isArray(value)) {
+        let fragment = clone(EMPTY_FRAGMENT);
+        for (let i = 0; i < n; i++) {
+            fragment.append(render(anchor, value[i]));
+            anchor = fragment.lastChild;
+        }
+        return fragment;
+    }
+    if (value instanceof NodeList) {
+        let fragment = clone(EMPTY_FRAGMENT);
+        for (let i = 0; i < n; i++) {
+            fragment.append(value[i]);
+        }
+        return fragment;
+    }
+    return text(value);
+}
+;

package/build/svg.d.ts

@@ -0,0 +1,5 @@
+import html from './html.js';
+declare const svg: typeof html & {
+    sprite: (href: string) => DocumentFragment;
+};
+export default svg;

package/build/svg.js

@@ -0,0 +1,14 @@
+import { setProperty } from './attributes.js';
+import { template } from './utilities.js';
+import html from './html.js';
+let factory = template('<svg><use /></svg>');
+const svg = html.bind(null);
+svg.sprite = (href) => {
+    if (href[0] !== '#') {
+        href = '#' + href;
+    }
+    let root = factory();
+    setProperty(root.firstChild.firstChild, 'href', href);
+    return root;
+};
+export default svg;

package/build/types.d.ts

@@ -0,0 +1,23 @@
+import { ArraySlot } from './slot/index.js';
+type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
+type Attributes<T extends HTMLElement = Element> = {
+    class?: Attribute | Attribute[];
+    onconnect?: (element: T) => void;
+    ondisconnect?: (element: T) => void;
+    onrender?: (element: T) => void;
+    ontick?: (dispose: VoidFunction, element: T) => void;
+    style?: Attribute | Attribute[];
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    [key: `data-${string}`]: string | undefined;
+} & {
+    [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: T, event: GlobalEventHandlersEventMap[K]) => void;
+} & Record<PropertyKey, unknown>;
+type Effect<T> = () => T extends [] ? Renderable<T>[] : Renderable<T>;
+type Element = HTMLElement & Attributes<any>;
+type Primitive = bigint | boolean | null | number | string | undefined;
+type Renderable<T> = ArraySlot<T> | DocumentFragment | Effect<T> | Node | NodeList | Primitive | Renderable<T>[];
+type SlotGroup = {
+    head: Element;
+    tail: Element;
+};
+export type { Attribute, Attributes, Effect, Element, Renderable, SlotGroup };

package/build/types.js

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

package/build/utilities.d.ts

@@ -0,0 +1,7 @@
+declare const clone: <T extends Node>(node: T, options?: boolean | ImportNodeOptions) => T;
+declare const fragment: (html: string) => DocumentFragment;
+declare const marker: ChildNode;
+declare const raf: typeof requestAnimationFrame;
+declare const template: (html: string) => () => DocumentFragment;
+declare const text: (value: string) => Node;
+export { clone, fragment, template, marker, raf, text };

package/build/utilities.js

@@ -0,0 +1,31 @@
+import { SLOT_HTML } from './constants.js';
+let tmpl = document.createElement('template'), txt = document.createTextNode('');
+const clone = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+    ? document.importNode.bind(document)
+    : (node, deep = true) => node.cloneNode(deep);
+const fragment = (html) => {
+    let element = tmpl.cloneNode();
+    element.innerHTML = html;
+    return element.content;
+};
+const marker = fragment(SLOT_HTML).firstChild;
+const raf = globalThis?.requestAnimationFrame;
+const template = (html) => {
+    let cached;
+    return () => {
+        if (!cached) {
+            let element = tmpl.cloneNode();
+            element.innerHTML = html;
+            cached = element.content;
+        }
+        return clone(cached, true);
+    };
+};
+const text = (value) => {
+    let element = txt.cloneNode();
+    if (value !== '') {
+        element.nodeValue = value;
+    }
+    return element;
+};
+export { clone, fragment, template, marker, raf, text };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "author": "ICJR",
+  "dependencies": {
+    "@esportsplus/pipeline": "^1.2.2",
+    "@esportsplus/queue": "^0.2.0",
+    "@esportsplus/reactivity": "^0.29.19",
+    "@esportsplus/typescript": "^0.28.2",
+    "@esportsplus/utilities": "^0.27.2"
+  },
+  "exports": {
+    "./compiler": {
+      "types": "./build/compiler/index.d.ts",
+      "default": "./build/compiler/index.js"
+    },
+    "./compiler/tsc": {
+      "types": "./build/compiler/plugins/tsc.d.ts",
+      "default": "./build/compiler/plugins/tsc.js"
+    },
+    "./compiler/vite": {
+      "types": "./build/compiler/plugins/vite.d.ts",
+      "default": "./build/compiler/plugins/vite.js"
+    },
+    ".": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    }
+  },
+  "main": "./build/index.js",
+  "name": "@esportsplus/template",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/esportsplus/template"
+  },
+  "type": "module",
+  "types": "./build/index.d.ts",
+  "version": "0.16.0",
+  "scripts": {
+    "build": "tsc",
+    "build:test": "vite build --config test/vite.config.ts",
+    "-": "-"
+  }
+}

package/src/attributes.ts

@@ -0,0 +1,313 @@
+import { effect } from '@esportsplus/reactivity';
+import { isArray, isObject } from '@esportsplus/utilities';
+import { ATTRIBUTE_DELIMITERS, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE } from './constants';
+import { Attributes, Element } from './types';
+import { raf } from './utilities';
+import { runtime } from './event';
+import q from '@esportsplus/queue';
+
+
+type Context = {
+    effect?: 0,
+    element: Element;
+    store?: Record<string, unknown>;
+    updates?: Record<PropertyKey, unknown>;
+    updating?: boolean;
+} & Record<PropertyKey, unknown>;
+
+type State = typeof STATE_HYDRATING | typeof STATE_NONE | typeof STATE_WAITING;
+
+
+let queue = q<Context>(64),
+    scheduled = false;
+
+
+function apply(element: Element, name: string, value: unknown) {
+    if (value == null || value === false || value === '') {
+        element.removeAttribute(name);
+    }
+    else if (name === 'class') {
+        element.className = value as string;
+    }
+    else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
+        element.setAttribute(name, value as string);
+    }
+    else {
+        element[name] = value;
+    }
+}
+
+function context(element: Element) {
+    return (element[STORE] ??= { element }) as Context;
+}
+
+function list(
+    ctx: Context | null,
+    element: Element,
+    id: null | number,
+    name: string,
+    state: State,
+    value: unknown
+) {
+    if (value == null || value === false || value === '') {
+        value = '';
+    }
+
+    let changed = false,
+        delimiter = ATTRIBUTE_DELIMITERS[name],
+        store = (ctx ??= context(element)).store ??= {},
+        dynamic = store[name] as Set<string>;
+
+    // Runtime fallback
+    if (!dynamic) {
+        store[name + '.static'] = (element.getAttribute(name) || '').trim();
+        store[name] = dynamic = new Set();
+    }
+
+    if (id === null) {
+        if (value && typeof value === 'string') {
+            changed = true;
+            store[name + '.static'] += (store[name + '.static'] ? delimiter : '') + value;
+        }
+    }
+    else if (store[id + '.raw'] !== value) {
+        let hot: Record<PropertyKey, true> = {};
+
+        if (value && typeof value === 'string') {
+            let part: string | undefined,
+                parts = (value as string).split(delimiter);
+
+            while (part = parts.pop()) {
+                part = part.trim();
+
+                if (part === '') {
+                    continue;
+                }
+
+                if (!dynamic.has(part)) {
+                    changed = true;
+                    dynamic.add(part);
+                }
+
+                hot[part] = true;
+            }
+        }
+
+        let cold = store[id] as Record<PropertyKey, true>;
+
+        if (cold !== undefined) {
+            for (let part in cold) {
+                if (hot[part] === true) {
+                    continue;
+                }
+
+                changed = true;
+                dynamic.delete(part);
+            }
+        }
+
+        store[id + '.raw'] = value;
+        store[id] = hot;
+    }
+
+    if (!changed) {
+        return;
+    }
+
+    value = store[name + '.static'];
+
+    for (let key of dynamic) {
+        value += (value ? delimiter : '') + key;
+    }
+
+    if (state === STATE_HYDRATING) {
+        apply(element, name, value);
+    }
+    else {
+        schedule(ctx, element, name, state, value);
+    }
+}
+
+function property(
+    ctx: Context | null,
+    element: Element,
+    id: null | number,
+    name: string,
+    state: State,
+    value: unknown
+) {
+    if (value == null || value === false || value === '') {
+        value = '';
+    }
+
+    if (id !== null) {
+        ctx ??= context(element);
+
+        if (ctx[name] === value) {
+            return;
+        }
+
+        ctx[name] = value as string;
+    }
+
+    if (state === STATE_HYDRATING) {
+        apply(element, name, value);
+    }
+    else {
+        schedule(ctx, element, name, state, value);
+    }
+}
+
+function reactive(element: Element, name: string, state: State, value: unknown) {
+    let ctx = context(element),
+        fn = (name === 'class' || name === 'style') ? list : property;
+
+    ctx.effect ??= 0;
+
+    let id = (ctx.effect as number)++;
+
+    effect(() => {
+        let v = (value as Function)(element);
+
+        if (v == null || typeof v !== 'object') {
+            fn(ctx, element, id, name, state, v);
+        }
+        else if (isArray(v)) {
+            let last = v.length - 1;
+
+            for (let i = 0, n = v.length; i < n; i++) {
+                fn(
+                    ctx,
+                    element,
+                    id,
+                    name,
+                    state === STATE_HYDRATING
+                        ? state
+                        : i !== last ? STATE_WAITING : state,
+                    v[i],
+                );
+            }
+        }
+    });
+
+    state = STATE_NONE;
+}
+
+function schedule(ctx: Context | null, element: Element, name: string, state: State, value: unknown) {
+    ctx ??= context(element);
+    (ctx.updates ??= {})[name] = value;
+
+    if (state === STATE_NONE && !ctx.updating) {
+        ctx.updating = true;
+        queue.add(ctx);
+    }
+
+    if (scheduled) {
+        return;
+    }
+
+    scheduled = true;
+    raf(task);
+}
+
+function task() {
+    let context,
+        n = queue.length;
+
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+
+        for (let name in updates) {
+            apply(element, name, updates[name]);
+        }
+
+        context.updates = {};
+        context.updating = false;
+    }
+
+    if (queue.length) {
+        raf(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
+
+
+const setList = (element: Element, name: 'class' | 'style', value: unknown, attributes: Record<string, string> = {}) => {
+    let ctx = context(element),
+        store = ctx.store ??= {};
+
+    store[name] ??= new Set<string>();
+    store[name + '.static'] ??= '';
+    store[name + '.static'] += `${attributes[name] && store[name + '.static'] ? ATTRIBUTE_DELIMITERS[name] : ''}${attributes[name]}`;
+
+    if (typeof value === 'function') {
+        reactive(element, name, STATE_HYDRATING, value);
+    }
+    else if (typeof value !== 'object') {
+        list(ctx, element, null, name, STATE_HYDRATING, value);
+    }
+    else if (isArray(value)) {
+        for (let i = 0, n = value.length; i < n; i++) {
+            let v = value[i];
+
+            if (v == null || v === false || v === '') {
+                continue;
+            }
+
+            list(ctx, element, null, name, STATE_HYDRATING, v);
+        }
+    }
+};
+
+const setProperty = (element: Element, name: string, value: unknown) => {
+    if (typeof value === 'function') {
+        reactive(element, name, STATE_HYDRATING, value);
+    }
+    else {
+        property(null, element, null, name, STATE_HYDRATING, value);
+    }
+};
+
+const setProperties = function (
+    element: Element,
+    properties: Attributes | Attributes[] | false | null | undefined,
+    attributes: Record<string, string> = {}
+) {
+    if (!properties) {
+        return;
+    }
+    else if (isObject(properties)) {
+        for (let name in properties) {
+            let value = properties[name];
+
+            if (value == null || value === false || value === '') {
+                continue;
+            }
+
+            if (name === 'class' || name === 'style') {
+                setList(element, name, value, attributes);
+            }
+            else if (typeof value === 'function') {
+                if (name[0] === 'o' && name[1] === 'n') {
+                    runtime(element, name as `on${string}`, value as Function);
+                }
+                else {
+                    reactive(element, name, STATE_HYDRATING, value);
+                }
+            }
+            else  {
+                property(null, element, null, name, STATE_HYDRATING, value);
+            }
+        }
+    }
+    else if (isArray(properties)) {
+        for (let i = 0, n = properties.length; i < n; i++) {
+            setProperties(element, properties[i], attributes);
+        }
+    }
+};
+
+
+export { setList, setProperty, setProperties };