@esportsplus/template 0.18.0 → 0.19.1

package/build/html/index.js

@@ -1,12 +1,22 @@
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
-import hydrate from './hydrate.js';
+import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
+import { cloneNode } from '../utilities/node.js';
 import parser from './parser.js';
 const html = (literals, ...values) => {
-    return {
-        [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
-        fragment: hydrate(parser.parse(literals), values),
-        literals
-    };
+    let { fragment, slots } = parser.parse(literals), clone = cloneNode.call(fragment, true);
+    if (slots !== null) {
+        let node, nodePath;
+        for (let i = slots.length - 1; i >= 0; i--) {
+            let { fn, path, slot } = slots[i];
+            if (nodePath !== path) {
+                node = clone;
+                for (let i = 0, n = path.length; i < n; i++) {
+                    node = path[i].call(node);
+                }
+            }
+            fn(node, values[slot]);
+        }
+    }
+    return clone;
 };
 html.reactive = (array, template) => {
     return {

package/build/html/parser.js

@@ -1,8 +1,8 @@
 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.js';
 import { firstElementChild, nextElementSibling } from '../utilities/element.js';
-import { fragment } from '../utilities/fragment.js';
 import { firstChild, nextSibling } from '../utilities/node.js';
 import { spread } from '../attributes.js';
+import { fragment } from '../utilities/fragment.js';
 import s from '../slot/index.js';
 let cache = new WeakMap();
 function build(literals) {
@@ -27,15 +27,11 @@ function build(literals) {
                 ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
                 : methods(parent.children, [], firstChild, nextSibling);
             if (attr) {
-                let i = attr.indexOf(SLOT_MARKER), p = {
-                    absolute: path,
-                    parent: parent.path,
-                    relative: path.slice(parent.path.length)
-                };
+                let i = attr.indexOf(SLOT_MARKER);
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        path: p,
+                        path,
                         slot
                     });
                     buffer += parsed[slot++];
@@ -52,15 +48,10 @@ function build(literals) {
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
-            let relative = methods(parent.children, [], firstChild, nextSibling);
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: {
-                    absolute: [...parent.path, ...relative],
-                    parent: parent.path,
-                    relative
-                },
+                path: methods(parent.children, parent.path, firstChild, nextSibling),
                 slot: slot++
             });
         }
@@ -87,16 +78,20 @@ function methods(children, copy, first, next) {
     return methods;
 }
 function set(literals, html, slots = null) {
-    let template = {
+    let value = {
         fragment: fragment(html),
         html,
         literals,
         slots
     };
-    cache.set(literals, template);
-    return template;
+    cache.set(literals, value);
+    return value;
 }
 const parse = (literals) => {
-    return cache.get(literals) || build(literals);
+    let result = cache.get(literals);
+    if (result === undefined) {
+        result = build(literals);
+    }
+    return result;
 };
 export default { parse };

package/build/index.d.ts

@@ -1,4 +1,4 @@
 export { default as html } from './html/index.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export type { Attributes, Element, Elements, Renderable, RenderableValue } from './types.js';
+export type { Attributes, Element, Renderable, RenderableValue } from './types.js';

package/build/slot/effect.js

@@ -2,17 +2,18 @@ import { effect } from '@esportsplus/reactivity';
 import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
 import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
 import { raf } from '../utilities/queue.js';
-import { ondisconnect } from '../slot/cleanup.js';
 import { remove } from './cleanup.js';
 import text from '../utilities/text.js';
 import render from './render.js';
 function update(anchor, value) {
-    let type = typeof value;
     if (this.group) {
         remove([this.group]);
         this.group = undefined;
     }
-    if (value == null || type !== 'object') {
+    if (value == null || value === false) {
+        value = '';
+    }
+    if (typeof value !== 'object') {
         let textnode = this.textnode;
         if (textnode) {
             nodeValue.call(textnode, String(value));
@@ -25,15 +26,14 @@ function update(anchor, value) {
         }
     }
     else {
-        let fragment = render(anchor, value);
-        if (!fragment) {
-            return;
+        let fragment = render(anchor, value), head = firstChild.call(fragment);
+        if (head) {
+            this.group = {
+                head,
+                tail: lastChild.call(fragment)
+            };
+            anchor.after(fragment);
         }
-        this.group = {
-            head: firstChild.call(fragment),
-            tail: lastChild.call(fragment)
-        };
-        anchor.after(fragment);
     }
 }
 export default (anchor, fn) => {
@@ -41,7 +41,7 @@ export default (anchor, fn) => {
         group: undefined,
         textnode: undefined
     }, state = STATE_HYDRATING;
-    ondisconnect(anchor, effect(() => {
+    effect(() => {
         let value = fn();
         if (state === STATE_HYDRATING) {
             update.call(context, anchor, value);
@@ -52,5 +52,5 @@ export default (anchor, fn) => {
                 update.call(context, anchor, value);
             });
         }
-    }));
+    });
 };

package/build/slot/index.js

@@ -2,7 +2,9 @@ import effect from './effect.js';
 import render from './render.js';
 export default (anchor, value) => {
     if (typeof value === 'function') {
-        return effect(anchor, value);
+        effect(anchor, value);
+    }
+    else {
+        anchor.after(render(anchor, value));
     }
-    anchor.after(render(anchor, value));
 };

package/build/slot/reactive.d.ts

@@ -1,3 +1,3 @@
-import { Fragment, RenderableReactive } from '../types.js';
-declare const _default: (anchor: Element, renderable: RenderableReactive) => Fragment;
+import { RenderableReactive } from '../types.js';
+declare const _default: (anchor: Element, renderable: RenderableReactive) => Node;
 export default _default;

package/build/slot/reactive.js

@@ -2,45 +2,47 @@ import { root } from '@esportsplus/reactivity';
 import { EMPTY_FRAGMENT } from '../constants.js';
 import { append } from '../utilities/fragment.js';
 import { cloneNode, firstChild, lastChild } from '../utilities/node.js';
-import { remove } from './cleanup.js';
+import { ondisconnect, remove } from './cleanup.js';
 class ReactiveArraySlot {
     array;
-    fragment = cloneNode.call(EMPTY_FRAGMENT);
+    fragment;
     marker;
     nodes = [];
     template;
     constructor(anchor, array, template) {
-        let fragment = this.fragment;
+        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
         this.array = array;
         this.marker = anchor;
         this.template = function (data, i) {
-            let frag = template.call(this, data, i).fragment, group = {
+            let dispose, frag = root((d) => {
+                dispose = d;
+                return template.call(this, data, i);
+            }), group = {
                 head: firstChild.call(frag),
                 tail: lastChild.call(frag)
             };
             append.call(fragment, frag);
+            ondisconnect(group.head, dispose);
             return group;
         };
-        let render = () => {
-            root(() => this.render());
-        };
         array.on('clear', () => this.clear());
-        array.on('reverse', render);
+        array.on('reverse', () => {
+            root(() => this.render());
+        });
         array.on('pop', () => this.pop());
         array.on('push', ({ items }) => {
             root(() => this.push(items));
         });
         array.on('shift', () => this.shift());
-        array.on('sort', render);
+        array.on('sort', () => {
+            root(() => this.render());
+        });
         array.on('splice', ({ deleteCount, items, start }) => {
             root(() => this.splice(start, deleteCount, ...items));
         });
         array.on('unshift', ({ items }) => {
             root(() => this.unshift(items));
         });
-        if (array.length) {
-            render();
-        }
     }
     get length() {
         return this.nodes.length;

package/build/slot/render.js

@@ -1,81 +1,37 @@
 import { isArray } from '@esportsplus/utilities';
-import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_ARRAY, RENDERABLE_FRAGMENT, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY, RENDERABLE_NODE, RENDERABLE_NODE_LIST, RENDERABLE_TEXT, RENDERABLE_VOID } from '../constants.js';
-import { cloneNode } from '../utilities/node.js';
+import { EMPTY_FRAGMENT, RENDERABLE } from '../constants.js';
+import { cloneNode, lastChild } from '../utilities/node.js';
 import { append } from '../utilities/fragment.js';
 import text from '../utilities/text.js';
 import reactive from './reactive.js';
-function type(input) {
-    if (input === false || input == null || input === '') {
-        return RENDERABLE_VOID;
+export default function render(anchor, input) {
+    if (input == null || input === false || input === '') {
+        return EMPTY_FRAGMENT;
     }
     if (typeof input !== 'object') {
-        return RENDERABLE_TEXT;
+        return text(input);
+    }
+    if ('nodeType' in input) {
+        return input;
     }
     if (RENDERABLE in input) {
-        return input[RENDERABLE];
+        return reactive(anchor, input);
     }
     if (isArray(input)) {
-        return RENDERABLE_ARRAY;
-    }
-    let nodeType = input.nodeType;
-    if (nodeType === 11) {
-        return RENDERABLE_FRAGMENT;
-    }
-    if (nodeType !== undefined) {
-        return RENDERABLE_NODE;
+        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        for (let i = 0, n = input.length; i < n; i++) {
+            append.call(fragment, render(anchor, input[i]));
+            anchor = lastChild.call(fragment);
+        }
+        return fragment;
     }
     if (input instanceof NodeList) {
-        return RENDERABLE_NODE_LIST;
-    }
-    return RENDERABLE_TEXT;
-}
-function loop(fragment, input) {
-    let t = type(input);
-    switch (t) {
-        case RENDERABLE_HTML_REACTIVE_ARRAY:
-            throw new Error('@esportsplus/template: reactive arrays cannot be defined within an slot array value');
-        case RENDERABLE_VOID:
-            return;
-        case RENDERABLE_ARRAY:
-            for (let i = 0, n = input.length; i < n; i++) {
-                loop(fragment, input[i]);
-            }
-            return;
-        case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...input);
-            return;
-        default:
-            append.call(fragment, input);
-            return;
-    }
-}
-let scratchpad = cloneNode.call(EMPTY_FRAGMENT);
-export default function render(anchor, input) {
-    let fragment = scratchpad, t = type(input);
-    switch (t) {
-        case RENDERABLE_VOID:
-            break;
-        case RENDERABLE_TEXT:
-            append.call(fragment, text(input));
-            break;
-        case RENDERABLE_HTML_FRAGMENT:
-            return input.fragment;
-        case RENDERABLE_HTML_REACTIVE_ARRAY:
-            return reactive(anchor, input);
-        case RENDERABLE_ARRAY:
-            for (let i = 0, n = input.length; i < n; i++) {
-                loop(fragment, input[i]);
-            }
-            break;
-        case RENDERABLE_FRAGMENT:
-            return input;
-        case RENDERABLE_NODE:
-            append.call(fragment, input);
-            break;
-        case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...input);
-            break;
+        let fragment = cloneNode.call(EMPTY_FRAGMENT), nodes = Array.from(input);
+        for (let i = 0, n = nodes.length; i < n; i++) {
+            append.call(fragment, nodes[i]);
+        }
+        return fragment;
     }
-    return fragment;
+    return text(input);
 }
 ;

package/build/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
+import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
 import { firstChild } from './utilities/node.js';
 import attributes from './attributes.js';
 import slot from './slot/index.js';
@@ -20,22 +20,14 @@ type Attributes = {
 type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
-type Elements = Element[];
-type Fragment = (DocumentFragment | Node) & Record<PropertyKey, unknown>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable = Fragment | Primitive | RenderableReactive | RenderableTemplate;
+type Renderable = DocumentFragment | Node | NodeList | Primitive | RenderableReactive | Renderable[];
 type RenderableReactive = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
     array: ReactiveArray<unknown[]>;
     template: (this: ReactiveArray<unknown[]>, ...args: Parameters<Parameters<ReactiveArray<unknown[]>['map']>[0]>) => ReturnType<typeof html>;
 }>;
-type RenderableTemplate = {
-    [RENDERABLE]: typeof RENDERABLE_HTML_FRAGMENT;
-    fragment: Fragment;
-    literals: TemplateStringsArray;
-};
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Fragment | Primitive | RenderableReactive;
-type RenderableValues = RenderableValue | RenderableValue[];
+type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | RenderableReactive;
 type SlotGroup = {
     head: Element;
     tail: Element;
@@ -46,12 +38,8 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        path: {
-            absolute: typeof firstChild[];
-            parent: typeof firstChild[];
-            relative: typeof firstChild[];
-        };
+        path: typeof firstChild[];
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderableValues, SlotGroup, Template };
+export type { Attributes, Effect, Element, Renderable, RenderableReactive, RenderableValue, SlotGroup, Template };

package/build/utilities/fragment.js

@@ -1,11 +1,11 @@
 import { innerHTML } from './element.js';
 import { cloneNode } from './node.js';
-let prototype = DocumentFragment.prototype, template = document.createElement('template');
-const append = prototype.append;
+let scratchpad = document.createElement('template');
+const append = DocumentFragment.prototype.append;
 const fragment = (html) => {
-    innerHTML.call(template, html);
-    let content = template.content;
-    template = cloneNode.call(template);
+    innerHTML.call(scratchpad, html);
+    let content = scratchpad.content;
+    scratchpad = cloneNode.call(scratchpad);
     return content;
 };
 export { append, fragment };

package/build/utilities/node.d.ts

@@ -1,3 +1,4 @@
+declare const appendChild: <T extends Node>(node: T) => T;
 declare const cloneNode: (subtree?: boolean) => Node;
 declare const firstChild: () => any;
 declare const lastChild: () => any;
@@ -5,4 +6,4 @@ declare const nextSibling: () => any;
 declare const nodeValue: (v: any) => void;
 declare const parentElement: () => any;
 declare const previousSibling: () => any;
-export { cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };
+export { appendChild, cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/node.js

@@ -1,4 +1,5 @@
 let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype = Node.prototype;
+const appendChild = prototype.appendChild;
 const cloneNode = prototype.cloneNode;
 const firstChild = getOwnPropertyDescriptor(prototype, 'firstChild').get;
 const lastChild = getOwnPropertyDescriptor(prototype, 'lastChild').get;
@@ -6,4 +7,4 @@ const nextSibling = getOwnPropertyDescriptor(prototype, 'nextSibling').get;
 const nodeValue = getOwnPropertyDescriptor(prototype, 'nodeValue').set;
 const parentElement = getOwnPropertyDescriptor(prototype, 'parentElement').get;
 const previousSibling = getOwnPropertyDescriptor(prototype, 'previousSibling').get;
-export { cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };
+export { appendChild, cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/text.d.ts

@@ -1,3 +1,2 @@
-import { Element } from '../types.js';
-declare const _default: (value: string) => Element;
+declare const _default: (value: string) => Node;
 export default _default;

package/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.15.0",
+    "@esportsplus/reactivity": "^0.16.1",
     "@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.18.0",
+  "version": "0.19.1",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,6 +1,5 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject, isString } from '@esportsplus/utilities';
-import { ondisconnect } from './slot/cleanup';
 import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants';
 import { Attributes, Element } from './types';
 import { className, removeAttribute, setAttribute } from './utilities/element';
@@ -9,6 +8,9 @@ import q from '@esportsplus/queue';
 import event from './event';
 
 
+// TODO: Refactor
+
+
 const EFFECT = Symbol();
 
 const STORE = Symbol();
@@ -74,31 +76,28 @@ function set(context: Context, name: string, value: unknown, state: State) {
 
             let id = (context.store[EFFECT] as number)++;
 
-            ondisconnect(
-                context.element,
-                effect(() => {
-                    let v = (value as Function)(context.element);
-
-                    if (isArray(v)) {
-                        let last = v.length - 1;
-
-                        for (let i = 0, n = v.length; i < n; i++) {
-                            update(
-                                context,
-                                id,
-                                name,
-                                v[i],
-                                state === STATE_HYDRATING
-                                    ? state
-                                    : i !== last ? STATE_WAITING : state
-                            );
-                        }
-                    }
-                    else {
-                        update(context, id, name, v, state);
+            effect(() => {
+                let v = (value as Function)(context.element);
+
+                if (isArray(v)) {
+                    let last = v.length - 1;
+
+                    for (let i = 0, n = v.length; i < n; i++) {
+                        update(
+                            context,
+                            id,
+                            name,
+                            v[i],
+                            state === STATE_HYDRATING
+                                ? state
+                                : i !== last ? STATE_WAITING : state
+                        );
                     }
-                })
-            );
+                }
+                else {
+                    update(context, id, name, v, state);
+                }
+            });
 
             state = STATE_NONE;
         }

package/src/constants.ts

@@ -47,21 +47,7 @@ const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{
 
 const RENDERABLE = Symbol();
 
-const RENDERABLE_ARRAY = 0;
-
-const RENDERABLE_FRAGMENT = 1;
-
-const RENDERABLE_HTML_FRAGMENT = 2;
-
-const RENDERABLE_HTML_REACTIVE_ARRAY = 3;
-
-const RENDERABLE_NODE = 4;
-
-const RENDERABLE_NODE_LIST = 5;
-
-const RENDERABLE_TEXT = 6;
-
-const RENDERABLE_VOID = 7;
+const RENDERABLE_HTML_REACTIVE_ARRAY = 1;
 
 
 const SLOT_HTML = '<!--$-->';
@@ -83,10 +69,7 @@ export {
     EMPTY_FRAGMENT,
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
     REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES,
-    RENDERABLE, RENDERABLE_ARRAY, RENDERABLE_FRAGMENT,
-    RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY,
-    RENDERABLE_NODE, RENDERABLE_NODE_LIST, RENDERABLE_TEXT,
-    RENDERABLE_VOID,
+    RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY,
     SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH,
     STATE_HYDRATING, STATE_NONE, STATE_WAITING
 };

package/src/html/index.ts

@@ -1,19 +1,68 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
-import { RenderableReactive, RenderableTemplate, RenderableValues } from '~/types';
-import hydrate from './hydrate';
+import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
+import { RenderableReactive, RenderableValue } from '~/types';
+import { cloneNode } from '~/utilities/node';
 import parser from './parser';
 
 
-const html = (literals: TemplateStringsArray, ...values: RenderableValues[]): RenderableTemplate => {
-    return {
-        [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
-        fragment: hydrate(parser.parse(literals), values),
-        literals
-    };
+const html = (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]) => {
+    let { fragment, slots } = parser.parse(literals),
+        clone = cloneNode.call(fragment, true);
+
+    if (slots !== null) {
+        let node, nodePath; // , parent, parentPath;
+
+        // TODO: when a new slot is added it breaks pathfinding for the next slot
+        // for (let i = 0, n = slots.length; i < n; i++) {
+        for (let i = slots.length - 1; i >= 0; i--) {
+            let { fn, path, slot } = slots[i];
+
+            //     pp = path.parent,
+            //     pr = path.relative;
+
+            // if (pp !== parentPath) {
+            //     if (pp === nodePath) {
+            //         parent = node;
+            //         parentPath = nodePath;
+
+            //         nodePath = undefined;
+            //     }
+            //     else {
+            //         parent = clone;
+            //         parentPath = pp;
+
+            //         for (let i = 0, n = pp.length; i < n; i++) {
+            //             parent = pp[i].call(parent);
+            //         }
+            //     }
+            // }
+
+            // if (pr !== nodePath) {
+            //     node = parent;
+            //     nodePath = path.absolute;
+
+            //     for (let i = 0, n = pr.length; i < n; i++) {
+            //         node = pr[i].call(node);
+            //     }
+            // }
+
+            if (nodePath !== path) {
+                node = clone;
+
+                for (let i = 0, n = path.length; i < n; i++) {
+                    node = path[i].call(node);
+                }
+            }
+
+            // @ts-ignore
+            fn(node, values[slot]);
+        }
+    }
+
+    return clone;
 };
 
-html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']) => {
+html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']): RenderableReactive => {
     return {
         [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
         array,