@esportsplus/template 0.15.16 → 0.15.18

package/build/attributes.d.ts

@@ -1,9 +1,9 @@
 import { Attributes, Element } from './types.js';
 declare const apply: (element: Element) => void;
-declare const spread: (element: Element, attributes: Attributes | Attributes[]) => void;
+declare const spread: (element: Element, value: Attributes | Attributes[]) => void;
 declare const _default: {
     apply: (element: Element) => void;
-    spread: (element: Element, attributes: Attributes | Attributes[]) => void;
+    spread: (element: Element, value: Attributes | Attributes[]) => void;
 };
 export default _default;
 export { apply, spread };

package/build/attributes.js

@@ -2,11 +2,19 @@ import { effect } from '@esportsplus/reactivity';
 import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
 import { ondisconnect } from './slot.js';
 import { className, raf, removeAttribute, setAttribute } from './utilities.js';
+import q from '@esportsplus/queue';
 import event from './event.js';
-let attributes = {}, delimiters = {
+const EFFECT_KEY = Symbol();
+const HYDRATE_KEY = Symbol();
+const STORE_KEY = Symbol();
+const UPDATES_KEY = Symbol();
+const STATE_HYDRATING = 0;
+const STATE_NONE = 1;
+const STATE_WAITING = 2;
+let delimiters = {
     class: ' ',
     style: ';'
-}, key = Symbol();
+}, queue = q(64), scheduled = false;
 function attribute(element, name, value) {
     if (value === '' || value === false || value == null) {
         removeAttribute.call(element, name);
@@ -21,55 +29,79 @@ function attribute(element, name, value) {
         element[name] = value;
     }
 }
-function set(element, value, name, wait = false) {
+function schedule() {
+    if (scheduled) {
+        return;
+    }
+    scheduled = true;
+    raf.add(task);
+}
+function set(context, name, value, state) {
     if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            set(element, value[i], name, wait);
+            set(context, name, value[i], state);
         }
     }
     else if (isFunction(value)) {
         if (name.startsWith('on')) {
-            event(element, name, value);
+            event(context.element, name, value);
         }
         else {
-            let id = ('e' + store(element)[key]++);
-            ondisconnect(element, effect(() => {
-                let v = value(element);
+            context.store[EFFECT_KEY] ??= 0;
+            let id = context.store[EFFECT_KEY]++;
+            ondisconnect(context.element, effect(() => {
+                let v = value(context.element);
                 if (isArray(v)) {
                     let last = v.length - 1;
                     for (let i = 0, n = v.length; i < n; i++) {
-                        update(element, id, name, v[i], wait || i !== last);
+                        update(context, id, name, v[i], state === STATE_HYDRATING
+                            ? state
+                            : i !== last ? STATE_WAITING : state);
                     }
                 }
                 else {
-                    update(element, id, name, v, wait);
+                    update(context, id, name, v, state);
                 }
             }));
-            wait = false;
+            state = STATE_NONE;
         }
     }
     else {
-        update(element, null, name, value, wait);
+        update(context, null, name, value, state);
     }
 }
-function store(element) {
-    return (element[key] || (element[key] = { [key]: 0 }));
+function task() {
+    let context, n = queue.length;
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+        for (let name in updates) {
+            attribute(element, name, updates[name]);
+            delete updates[name];
+        }
+        context.updating = false;
+    }
+    if (queue.length) {
+        raf.add(task);
+    }
+    else {
+        scheduled = false;
+    }
 }
-function update(element, id, name, value, wait = false) {
+function update(context, id, name, value, state) {
     if (value === false || value == null) {
         value = '';
     }
-    let data = store(element);
+    let store = context.store;
     if (name in delimiters) {
-        let cache = name + '.static', delimiter = delimiters[name], dynamic = data[name];
+        let cache = name + '.static', delimiter = delimiters[name], dynamic = store[name];
         if (dynamic === undefined) {
-            let value = (element.getAttribute(name) || '').trim();
-            data[cache] = value.endsWith(delimiter) ? value.slice(0, -1) : value;
-            data[name] = dynamic = {};
+            let value = (context.element.getAttribute(name) || '').trim();
+            store[cache] = value;
+            store[name] = dynamic = {};
         }
         if (id === null) {
             if (value && isString(value)) {
-                data[cache] += (data[cache] ? delimiter : '') + value;
+                store[cache] += (store[cache] ? delimiter : '') + value;
             }
         }
         else {
@@ -85,7 +117,7 @@ function update(element, id, name, value, wait = false) {
                     hot[part] = null;
                 }
             }
-            let cold = data[id];
+            let cold = store[id];
             if (cold !== undefined) {
                 for (let part in cold) {
                     if (part in hot) {
@@ -94,48 +126,61 @@ function update(element, id, name, value, wait = false) {
                     delete dynamic[part];
                 }
             }
-            data[id] = hot;
+            store[id] = hot;
         }
-        value = data[cache];
+        value = store[cache];
         for (let key in dynamic) {
             value += (value ? delimiter : '') + key;
         }
     }
-    else if (isString(id)) {
-        if (data[name] === value) {
+    else if (id !== null) {
+        if (store[name] === value) {
             return;
         }
-        data[name] = value;
+        store[name] = value;
     }
-    if (wait) {
-        if (id === null) {
-            attributes[name] = value;
-        }
+    if (state === STATE_HYDRATING) {
+        (context.element[HYDRATE_KEY] ??= {})[name] = value;
     }
     else {
-        raf.add(() => {
-            attribute(element, name, value);
-        });
+        context.updates[name] = value;
+        if (state === STATE_NONE && !context.updating) {
+            context.updating = true;
+            queue.add(context);
+        }
+        if (!scheduled) {
+            schedule();
+        }
     }
 }
 const apply = (element) => {
+    let attributes = element[HYDRATE_KEY];
+    if (!attributes) {
+        return;
+    }
     for (let key in attributes) {
         attribute(element, key, attributes[key]);
     }
-    attributes = {};
+    delete element[HYDRATE_KEY];
 };
-const spread = function (element, attributes) {
-    if (isObject(attributes)) {
-        for (let name in attributes) {
-            set(element, attributes[name], name, true);
+const spread = function (element, value) {
+    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }), context = {
+        element,
+        store: cache,
+        updates: cache[UPDATES_KEY],
+        updating: false
+    };
+    if (isArray(value)) {
+        for (let i = 0, n = value.length; i < n; i++) {
+            let v = value[i];
+            for (let name in v) {
+                set(context, name, v[name], STATE_HYDRATING);
+            }
         }
     }
-    else if (isArray(attributes)) {
-        for (let i = 0, n = attributes.length; i < n; i++) {
-            let attrs = attributes[i];
-            for (let name in attrs) {
-                set(element, attrs[name], name, true);
-            }
+    else if (isObject(value)) {
+        for (let name in value) {
+            set(context, name, value[name], STATE_HYDRATING);
         }
     }
 };

package/build/constants.d.ts

@@ -8,8 +8,7 @@ declare const REGEX_SLOT_NODES: RegExp;
 declare const RENDERABLE: unique symbol;
 declare const RENDERABLE_REACTIVE: unique symbol;
 declare const RENDERABLE_TEMPLATE: 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_CLEANUP, 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_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/constants.js

@@ -28,8 +28,7 @@ const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{
 const RENDERABLE = Symbol();
 const RENDERABLE_REACTIVE = Symbol();
 const RENDERABLE_TEMPLATE = 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_CLEANUP, 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_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/event.js

@@ -1,7 +1,7 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
 import { ondisconnect } from './slot.js';
-import { addEventListener, parentElement } from './utilities.js';
+import { addEventListener, parentElement, raf } from './utilities.js';
 let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
     'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
     'onscroll',
@@ -13,16 +13,17 @@ let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(
 });
 export default (element, event, listener) => {
     if (event === 'onconnect') {
-        let interval = setInterval(() => {
+        let retry = 60, task = () => {
             retry--;
             if (element.isConnected) {
                 retry = 0;
                 root(() => listener(element));
             }
-            if (!retry) {
-                clearInterval(interval);
+            if (retry) {
+                raf.add(task);
             }
-        }, 1000 / 60), retry = 60;
+        };
+        raf.add(task);
         return;
     }
     else if (event === 'ondisconnect') {

package/build/html/hydrate.d.ts

@@ -1,7 +1,7 @@
-import { Elements, RenderableReactive, RenderableTemplate } from '../types.js';
+import { HydrateResult, RenderableReactive, RenderableTemplate } from '../types.js';
 import { Slot } from '../slot.js';
 declare const _default: {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => Elements[];
-    static: <T>(renderable: RenderableTemplate<T>) => Elements;
+    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => HydrateResult[];
+    static: <T>(renderable: RenderableTemplate<T>) => HydrateResult;
 };
 export default _default;

package/build/html/hydrate.js

@@ -4,28 +4,37 @@ import { apply } from '../attributes.js';
 import cache from './cache.js';
 function reactive(renderable, slot) {
     let array = renderable.values, factory = renderable.template, refresh = () => {
-        slot.length = 0;
-        reactive(renderable, slot);
-    }, render = (i, n) => {
-        return root(() => template(array, factory, i, n));
-    }, renderables = array.map(factory);
-    array.on('pop', () => slot.pop());
-    array.on('push', ({ items }) => slot.push(...render(array.length - items.length)));
+        slot.render(root(() => array.map(template)));
+    }, template = function (data, i) {
+        let renderable = factory.call(this, data, i);
+        return hydrate(renderable, cache.get(renderable));
+    };
+    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());
+    array.on('shift', () => {
+        slot.shift();
+    });
     array.on('sort', refresh);
-    array.on('splice', ({ deleteCount: d, items: i, start: s }) => slot.splice(s, d, ...render(s, i.length)));
-    array.on('unshift', ({ items }) => slot.unshift(...render(0, items.length)));
-    return template(array, factory, 0, renderables.length);
+    array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
+        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
+    });
+    array.on('unshift', ({ items }) => {
+        slot.unshift(...root(() => array.map(template, 0, items.length)));
+    });
+    return array.map(template);
 }
-function render(renderable, template) {
+function hydrate(renderable, template) {
     let elements = [], fragment = cloneNode.call(template.fragment, true), slots = template.slots;
     if (slots !== null) {
         let node, previous, values = renderable.values;
         for (let i = slots.length - 1; i >= 0; i--) {
             let { fn, path, slot } = slots[i];
-            if (path === previous) { }
-            else {
+            if (path !== previous) {
                 apply(node);
                 node = fragment;
                 previous = path;
@@ -33,28 +42,20 @@ function render(renderable, template) {
                     node = path[o].call(node);
                 }
             }
-            fn(node, values[slot], name);
+            fn(node, values[slot]);
         }
         apply(node);
     }
     for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
         elements.push(element);
     }
-    return elements;
-}
-function template(array, template, i, n) {
-    let groups = [], renderables = array.map(template, i, n);
-    for (let i = 0, n = renderables.length; i < n; i++) {
-        let renderable = renderables[i];
-        groups.push(render(renderable, cache.get(renderable)));
-    }
-    return groups;
+    return { elements, fragment };
 }
 export default {
     reactive: (renderable, slot) => {
         return reactive(renderable, slot);
     },
     static: (renderable) => {
-        return render(renderable, renderable.template || (renderable.template = cache.get(renderable)));
+        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
     }
 };

package/build/slot.d.ts

@@ -1,4 +1,4 @@
-import { Element, Elements } from './types.js';
+import { Element, Elements, HydrateResult } from './types.js';
 declare class Slot {
     marker: Element;
     nodes: Elements[];
@@ -9,11 +9,11 @@ declare class Slot {
     anchor(index?: number): Element;
     clear(): void;
     pop(): Elements[] | undefined;
-    push(...groups: Elements[]): number;
+    push(...groups: HydrateResult[]): number;
     render(input: unknown): this;
     shift(): Elements[] | undefined;
-    splice(start: number, stop?: number, ...groups: Elements[]): Elements[];
-    unshift(...groups: Elements[]): number;
+    splice(start: number, stop?: number, ...groups: HydrateResult[]): Elements[];
+    unshift(...groups: HydrateResult[]): number;
 }
 declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const _default: (marker: Element, value: unknown) => Slot;

package/build/slot.js

@@ -1,27 +1,37 @@
 import { effect, root } from '@esportsplus/reactivity';
 import { isArray, isFunction, isInstanceOf, isObject } from '@esportsplus/utilities';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT_CLEANUP } from './constants.js';
+import { RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
 import { hydrate } from './html/index.js';
-import { firstChild, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
+import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
 import queue from '@esportsplus/queue';
-let cleanup = queue(1024), scheduled = false;
+const CLEANUP_KEY = Symbol();
+let cleanup = queue(64), scheduled = false, template = fragment('');
 function after(anchor, groups) {
-    for (let i = 0, n = groups.length; i < n; i++) {
-        let group = groups[i];
-        if (group.length) {
-            anchor.after(anchor, ...group);
-            anchor = group.at(-1);
+    let n = groups.length;
+    if (n === 0) {
+        return [];
+    }
+    let elements = [], fragment = groups[0].fragment || cloneNode.call(template);
+    if (n === 1) {
+        elements.push(groups[0].elements);
+    }
+    else {
+        for (let i = 1; i < n; i++) {
+            let { elements: e, fragment: f } = groups[i];
+            append.call(fragment, f);
+            elements.push(e);
         }
     }
-    return groups;
+    anchor.after(fragment);
+    return elements;
 }
 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 (item[SLOT_CLEANUP]) {
-                cleanup.add(item[SLOT_CLEANUP]);
+            if (CLEANUP_KEY in item) {
+                cleanup.add(item[CLEANUP_KEY]);
             }
             item.remove();
         }
@@ -31,51 +41,50 @@ function remove(...groups) {
     }
     return groups;
 }
-function render(anchor, input, slot) {
-    if (input === false || input == null) {
-        input = '';
-    }
-    else if (isObject(input)) {
-        if (isArray(input)) {
-            let groups = [];
-            for (let i = 0, n = input.length; i < n; i++) {
-                groups.push(render(null, input[i]));
-            }
-            return anchor ? after(anchor, groups) : groups;
-        }
-        let nodes = [];
-        if (RENDERABLE in input) {
-            if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-                return after(anchor, hydrate.reactive(input, slot));
-            }
-            else {
-                nodes = hydrate.static(input);
-            }
+function render(elements, fragment, input, slot) {
+    if (input === false || input == null || input === '') {
+        return;
+    }
+    if (isArray(input)) {
+        for (let i = 0, n = input.length; i < n; i++) {
+            render(elements, fragment, input[i]);
         }
-        else if (isInstanceOf(input, NodeList)) {
-            for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-                nodes.push(node);
+    }
+    else if (isObject(input) && RENDERABLE in input) {
+        if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
+            let response = hydrate.reactive(input, slot);
+            for (let i = 0, n = response.length; i < n; i++) {
+                let { elements: e, fragment: f } = response[i];
+                append.call(fragment, f);
+                elements.push(e);
             }
         }
-        else if (isInstanceOf(input, Node)) {
-            nodes = [input];
+        else {
+            let { elements: e, fragment: f } = hydrate.static(input);
+            append.call(fragment, f);
+            elements.push(e);
         }
-        if (anchor) {
-            anchor.after(...nodes);
+    }
+    else if (isInstanceOf(input, NodeList)) {
+        let e = [];
+        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
+            e.push(node);
         }
-        return nodes;
+        append.call(fragment, ...e);
+        elements.push(e);
     }
-    if (input === '') {
-        return [];
+    else if (isInstanceOf(input, Node)) {
+        append.call(fragment, input);
+        elements.push([input]);
     }
-    let node = text(input);
-    if (anchor) {
-        anchor.after(node);
+    else {
+        let element = text(typeof input === 'string' ? input : String(input));
         if (slot) {
-            slot.text = node;
+            slot.text = element;
         }
+        append.call(fragment, element);
+        elements.push([element]);
     }
-    return [node];
 }
 function schedule() {
     if (scheduled) {
@@ -85,14 +94,14 @@ function schedule() {
     microtask.add(task);
 }
 function task() {
-    let fns;
+    let fn, fns;
     while (fns = cleanup.next()) {
-        for (let i = 0, n = fns.length; i < n; i++) {
-            try {
-                fns[i]();
+        try {
+            while (fn = fns.pop()) {
+                fn();
             }
-            catch { }
         }
+        catch { }
     }
     scheduled = false;
     if (cleanup.length) {
@@ -117,12 +126,13 @@ class Slot {
     anchor(index = this.nodes.length - 1) {
         let node, nodes = this.nodes[index];
         if (nodes) {
-            node = nodes.at(-1);
+            node = nodes[nodes.length - 1];
         }
         return node || this.marker;
     }
     clear() {
         remove(...this.nodes);
+        this.nodes.length = 0;
         this.text = null;
     }
     pop() {
@@ -133,11 +143,7 @@ class Slot {
         return remove(group);
     }
     push(...groups) {
-        after(this.anchor(), groups);
-        for (let i = 0, n = groups.length; i < n; i++) {
-            this.nodes.push(groups[i]);
-        }
-        return this.nodes.length;
+        return this.nodes.push(...after(this.anchor(), groups));
     }
     render(input) {
         if (isFunction(input)) {
@@ -156,19 +162,18 @@ class Slot {
         }
         if (this.text) {
             let type = typeof input;
-            if (type === 'object' && input !== null) { }
+            if (type === 'object' && input !== null) {
+            }
             else if (this.text.isConnected) {
                 nodeValue.call(this.text, (type === 'string' || type === 'number') ? input : '');
                 return this;
             }
         }
         this.clear();
-        if (isArray(input) || (isObject(input) && input[RENDERABLE] === RENDERABLE_REACTIVE)) {
-            this.nodes = render(this.marker, input, this);
-        }
-        else {
-            this.nodes = [render(this.marker, input, this)];
-        }
+        let fragment = cloneNode.call(template), nodes = [];
+        render(nodes, fragment, input, this);
+        this.marker.after(fragment);
+        this.nodes = nodes;
         return this;
     }
     shift() {
@@ -186,7 +191,7 @@ class Slot {
     }
 }
 const ondisconnect = (element, fn) => {
-    (element[SLOT_CLEANUP] ??= []).push(fn);
+    (element[CLEANUP_KEY] ??= []).push(fn);
 };
 export default (marker, value) => {
     return new Slot(marker).render(value);

package/build/types.d.ts

@@ -1,8 +1,7 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants.js';
+import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants.js';
 import { firstChild } from './utilities.js';
 import attributes from './attributes.js';
-import event from './event.js';
 import slot from './slot.js';
 type Attribute = Primitive | Effect<Primitive | Primitive[]>;
 type Attributes = {
@@ -19,10 +18,12 @@ 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 & {
-    [SLOT_CLEANUP]?: VoidFunction[];
-} & Record<PropertyKey, unknown>;
+type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
+type HydrateResult = {
+    elements: Elements;
+    fragment: DocumentFragment | Node;
+};
 type Primitive = bigint | boolean | null | number | string | undefined;
 type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
 type RenderableReactive<T = unknown> = Readonly<{
@@ -43,9 +44,9 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof event | typeof slot;
+        fn: typeof attributes.spread | typeof slot;
         path: typeof firstChild[];
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };
+export type { Attributes, Effect, Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };

package/build/types.js

@@ -1 +1 @@
-import { RENDERABLE, SLOT_CLEANUP } from './constants.js';
+import { RENDERABLE } from './constants.js';