@esportsplus/template 0.15.19 → 0.16.1

package/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.12.4",
+    "@esportsplus/reactivity": "^0.13.2",
     "@esportsplus/tasks": "^0.2.1",
     "@esportsplus/utilities": "^0.22.1"
   },
@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.15.19",
+  "version": "0.16.1",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -9,8 +9,6 @@ import event from './event';
 
 const EFFECT_KEY = Symbol();
 
-const HYDRATE_KEY = Symbol();
-
 const STORE_KEY = Symbol();
 
 const UPDATES_KEY = Symbol();
@@ -216,7 +214,7 @@ function update(
     }
 
     if (state === STATE_HYDRATING) {
-        ((context.element[HYDRATE_KEY] ??= {}) as Record<PropertyKey, unknown>)[name] = value;
+        attribute(context.element, name, value);
     }
     else {
         context.updates[name] = value;
@@ -233,20 +231,6 @@ function update(
 }
 
 
-const apply = (element: Element) => {
-    let attributes = element[HYDRATE_KEY] as Record<PropertyKey, unknown> | undefined;
-
-    if (!attributes) {
-        return;
-    }
-
-    for (let key in attributes) {
-        attribute(element, key, attributes[key]);
-    }
-
-    delete element[HYDRATE_KEY];
-};
-
 const spread = function (element: Element, value: Attributes | Attributes[]) {
     let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }) as Record<PropertyKey, unknown>,
         context = {
@@ -273,5 +257,5 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
 };
 
 
-export default { apply, spread };
-export { apply, spread };
+export default { spread };
+export { spread };

package/src/constants.ts

@@ -1,3 +1,9 @@
+import { fragment } from './utilities';
+
+
+const EMPTY_FRAGMENT = fragment('');
+
+
 const NODE_CLOSING = 1;
 
 const NODE_COMMENT = 2;
@@ -51,6 +57,7 @@ const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
 
 
 export {
+    EMPTY_FRAGMENT,
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
     REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES,
     RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE,

package/src/html/cache.ts

@@ -2,7 +2,7 @@ import {
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES,
     REGEX_SLOT_NODES, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH
 } from '~/constants';
-import { RenderableTemplate, Template } from '~/types';
+import { Template } from '~/types';
 import { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '~/utilities';
 import { spread } from '~/attributes';
 import s from '~/slot';
@@ -11,8 +11,10 @@ import s from '~/slot';
 let cache = new WeakMap<TemplateStringsArray, Template>();
 
 
-function build(literals: TemplateStringsArray, values: unknown[]) {
-    if (values.length === 0) {
+function build(literals: TemplateStringsArray) {
+    let n = literals.length - 1;
+
+    if (n === 0) {
         return set(literals, literals[0]);
     }
 
@@ -25,12 +27,11 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         levels = [{
             children: 0,
             elements: 0,
-            path: [] as NonNullable<Template['slots']>[0]['path']
+            path: [] as NonNullable<Template['slots']>[number]['path']['parent']
         }],
         parsed = html.split(SLOT_MARKER),
         slot = 0,
-        slots: Template['slots'] = [],
-        total = values.length;
+        slots: Template['slots'] = [];
 
     for (let match of html.matchAll(REGEX_SLOT_NODES)) {
         let parent = levels[level],
@@ -42,16 +43,23 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         }
 
         if (type === NODE_ELEMENT || type === NODE_VOID) {
-            let attr = match[2];
+            let attr = match[2],
+                path = parent.path.length
+                    ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
+                    : methods(parent.children, [], firstChild, nextSibling);
 
             if (attr) {
                 let i = attr.indexOf(SLOT_MARKER),
-                    path = methods(parent.children, parent.path, firstChild, nextSibling);
+                    p = {
+                        absolute: path,
+                        parent: parent.path,
+                        relative: path.slice(parent.path.length)
+                    };
 
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        path,
+                        path: p,
                         slot
                     });
 
@@ -64,24 +72,28 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
                 levels[++level] = {
                     children: 0,
                     elements: 0,
-                    path: parent.path.length
-                        ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
-                        : methods(parent.children, [], firstChild, nextSibling)
+                    path
                 };
             }
 
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
+            let relative = methods(parent.children, [], firstChild, nextSibling);
+
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: methods(parent.children, parent.path, firstChild, nextSibling),
+                path: {
+                    absolute: [...parent.path, ...relative],
+                    parent: parent.path,
+                    relative
+                },
                 slot: slot++
             });
         }
 
-        if (slot === total) {
+        if (slot === n) {
             buffer += parsed[slot];
             break;
         }
@@ -125,8 +137,8 @@ function set(literals: TemplateStringsArray, html: string, slots: Template['slot
 }
 
 
-const get = <T>({ literals, values }: RenderableTemplate<T>) => {
-    return cache.get(literals) || build(literals, values);
+const get = (literals: TemplateStringsArray) => {
+    return cache.get(literals) || build(literals);
 };
 
 

package/src/html/hydrate.ts

@@ -1,90 +1,125 @@
 import { root } from '@esportsplus/reactivity';
-import { Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, Template } from '~/types';
+import { EMPTY_FRAGMENT } from '~/constants';
+import { Elements, Fragment, RenderableReactive, RenderableTemplate } from '~/types';
 import { Slot } from '~/slot';
-import { cloneNode, firstChild, nextSibling } from '~/utilities';
-import { apply } from '~/attributes';
+import { cloneNode } from '~/utilities';
 import cache from './cache';
 
 
-function reactive<T>(renderable: RenderableReactive<T>, slot: Slot) {
+function reactive<T>(elements: Elements[], fragment: Fragment, renderable: RenderableReactive<T>, slot: Slot) {
     let array = renderable.values,
         factory = renderable.template,
         refresh = () => {
-            slot.render( root(() => array.map(template)) );
+            root(() => array.map(template));
+
+            slot.clear();
+            slot.anchor().after(fragment);
+            slot.nodes = elements;
+
+            reset();
+        },
+        reset = () => {
+            elements = [];
+            fragment = cloneNode.call(EMPTY_FRAGMENT);
         },
         template = function(data, i) {
-            let renderable = factory.call(this, data, i);
+            hydrate(elements, fragment, factory.call(this, data, i));
+        } as (this: typeof array, ...args: Parameters<Parameters<typeof array['map']>[0]>) => void;
 
-            return hydrate<T>(renderable, cache.get(renderable));
-        } as (this: typeof array, ...args: Parameters<Parameters<typeof array['map']>[0]>) => HydrateResult;
+    array.on('clear', () => slot.clear());
+    array.on('pop', () => slot.pop());
+    array.on('reverse', refresh);
+    array.on('shift', () => slot.shift());
+    array.on('sort', refresh);
 
-    array.on('pop', () => {
-        slot.pop();
-    });
     array.on('push', ({ items }) => {
-        slot.push( ...root(() => array.map(template, array.length - items.length)) );
-    });
-    array.on('reverse', refresh);
-    array.on('shift', () => {
-        slot.shift();
+        let anchor = slot.anchor();
+
+        elements = slot.nodes;
+
+        root(() => array.map(template, array.length - items.length));
+
+        anchor.after(fragment);
+        reset();
     });
-    array.on('sort', refresh);
     array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
-        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
+        if (array.length === 0) {
+            slot.clear();
+            return;
+        }
+
+        root(() => array.map(template, s, i.length))
+
+        slot.splice(s, d, fragment, ...elements);
+        reset();
     });
     array.on('unshift', ({ items }) => {
-        slot.unshift( ...root(() => array.map(template, 0, items.length)) );
+        root(() => array.map(template, 0, items.length))
+
+        slot.unshift(fragment, ...elements);
+        reset();
     });
 
-    return array.map(template);
+    root(() => array.map(template));
+    reset();
 }
 
-function hydrate<T>(renderable: Renderable<T>, template: Template): HydrateResult {
-    let elements: Elements = [],
-        fragment = cloneNode.call(template.fragment, true),
-        slots = template.slots;
+function hydrate<T>(elements: Elements[] | null, fragment: Fragment, renderable: RenderableTemplate<T>) {
+    let { fragment: frag, slots } = cache.get(renderable.literals),
+        clone = cloneNode.call(frag, true);
 
     if (slots !== null) {
         let node,
-            previous,
+            nodePath,
+            parent,
+            parentPath,
             values = renderable.values;
 
-        for (let i = slots.length - 1; i >= 0; i--) {
-            let { fn, path, slot } = slots[i];
+        for (let i = 0, n = slots.length; i < n; i++) {
+            let { fn, path, slot } = slots[i],
+                pp = path.parent,
+                pr = path.relative;
+
+            if (pp !== parentPath) {
+                if (pp === nodePath) {
+                    parent = node;
+                    parentPath = nodePath;
 
-            if (path !== previous) {
-                if (node) {
-                    apply(node);
+                    nodePath = undefined;
                 }
+                else {
+                    parent = clone;
+                    parentPath = pp;
 
-                node = fragment;
-                previous = path;
+                    for (let o = 0, j = pp.length; o < j; o++) {
+                        parent = pp[o].call(parent);
+                    }
+                }
+            }
+
+            if (pr !== nodePath) {
+                node = parent;
+                nodePath = path.absolute;
 
-                for (let o = 0, j = path.length; o < j; o++) {
-                    node = path[o].call(node as Element);
+                for (let o = 0, j = pr.length; o < j; o++) {
+                    node = pr[o].call(node);
                 }
             }
 
             // @ts-ignore
             fn(node, values[slot]);
         }
-
-        apply(node);
     }
 
-    for (let element = firstChild.call(fragment as Element); element; element = nextSibling.call(element)) {
-        elements.push(element);
+    if (elements) {
+        elements.push([...clone.childNodes] as Elements);
     }
 
-    return { elements, fragment };
+    fragment.appendChild(clone)
 }
 
 
 export default {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => {
-        return reactive(renderable, slot);
-    },
-    static: <T>(renderable: RenderableTemplate<T>) => {
-        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
-    }
+    reactive,
+    static: hydrate
 };