@esportsplus/template 0.17.0 → 0.19.0

package/build/html/index.js

@@ -1,12 +1,38 @@
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
-import hydrate from './hydrate.js';
-import cache from './cache.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(cache.get(literals), values),
-        literals
-    };
+    let { fragment, slots } = parser.parse(literals);
+    fragment = cloneNode.call(fragment, true);
+    if (slots !== null) {
+        let node, nodePath, parent, parentPath;
+        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;
+                    nodePath = undefined;
+                }
+                else {
+                    parent = fragment;
+                    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);
+                }
+            }
+            fn(node, values[slot]);
+        }
+    }
+    return fragment;
 };
 html.reactive = (array, template) => {
     return {

package/build/html/{cache.d.ts → parser.d.ts}

@@ -1,5 +1,5 @@
 import { Template } from '../types.js';
 declare const _default: {
-    get: (literals: TemplateStringsArray) => Template;
+    parse: (literals: TemplateStringsArray) => Template;
 };
 export default _default;

package/build/html/{cache.js → parser.js}

@@ -1,6 +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 { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '../utilities.js';
+import { firstElementChild, nextElementSibling } from '../utilities/element.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) {
@@ -85,16 +87,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 get = (literals) => {
-    return cache.get(literals) || build(literals);
+const parse = (literals) => {
+    let result = cache.get(literals);
+    if (result === undefined) {
+        result = build(literals);
+    }
+    return result;
 };
-export default { get };
+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/render.js

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

package/build/slot/cleanup.js

@@ -1,6 +1,7 @@
 import queue from '@esportsplus/queue';
 import { CLEANUP } from '../constants.js';
-import { microtask, previousSibling } from '../utilities.js';
+import { microtask } from '../utilities/queue.js';
+import { previousSibling } from '../utilities/node.js';
 let cleanup = queue(64), scheduled = false;
 function schedule() {
     if (!cleanup.length || scheduled) {

package/build/slot/effect.js

@@ -1,16 +1,19 @@
 import { effect } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT, STATE_HYDRATING, STATE_NONE } from '../constants.js';
-import { cloneNode, firstChild, lastChild, nodeValue, raf, text } from '../utilities.js';
-import { ondisconnect } from '../slot/cleanup.js';
+import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
+import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
+import { raf } from '../utilities/queue.js';
 import { remove } from './cleanup.js';
+import text from '../utilities/text.js';
 import render from './render.js';
-function update(anchor, fragment, value) {
-    let type = typeof value;
+function update(anchor, 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));
@@ -23,29 +26,31 @@ function update(anchor, fragment, value) {
         }
     }
     else {
-        render(anchor, fragment, value);
-        this.group = {
-            head: firstChild.call(fragment),
-            tail: lastChild.call(fragment)
-        };
-        anchor.after(fragment);
+        let fragment = render(anchor, value), head = firstChild.call(fragment);
+        if (head) {
+            this.group = {
+                head,
+                tail: lastChild.call(fragment)
+            };
+            anchor.after(fragment);
+        }
     }
 }
 export default (anchor, fn) => {
     let context = {
         group: undefined,
         textnode: undefined
-    }, fragment = cloneNode.call(EMPTY_FRAGMENT), state = STATE_HYDRATING;
-    ondisconnect(anchor, effect(() => {
+    }, state = STATE_HYDRATING;
+    effect(() => {
         let value = fn();
         if (state === STATE_HYDRATING) {
-            update.call(context, anchor, fragment, value);
+            update.call(context, anchor, value);
             state = STATE_NONE;
         }
         else if (state === STATE_NONE) {
             raf.add(() => {
-                update.call(context, anchor, fragment, value);
+                update.call(context, anchor, value);
             });
         }
-    }));
+    });
 };

package/build/slot/index.js

@@ -1,15 +1,10 @@
-import { EMPTY_FRAGMENT } from '../constants.js';
-import { cloneNode } from '../utilities.js';
 import effect from './effect.js';
 import render from './render.js';
-function slot(anchor, input) {
-    let fragment = cloneNode.call(EMPTY_FRAGMENT);
-    render(anchor, fragment, input);
-    anchor.after(fragment);
-}
 export default (anchor, value) => {
     if (typeof value === 'function') {
-        return effect(anchor, value);
+        effect(anchor, value);
+    }
+    else {
+        anchor.after(render(anchor, value));
     }
-    return slot(anchor, value);
 };

package/build/slot/reactive.d.ts

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

package/build/slot/reactive.js

@@ -1,45 +1,48 @@
 import { root } from '@esportsplus/reactivity';
 import { EMPTY_FRAGMENT } from '../constants.js';
-import { append, cloneNode, firstChild, lastChild } from '../utilities.js';
-import { remove } from './cleanup.js';
+import { append } from '../utilities/fragment.js';
+import { cloneNode, firstChild, lastChild } from '../utilities/node.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;
@@ -72,9 +75,10 @@ class ReactiveArraySlot {
         }
     }
     push(items) {
-        let anchor = this.anchor(), array = this.array;
+        let anchor = this.anchor(), array = this.array, length = this.nodes.length;
+        this.nodes.length = length + items.length;
         for (let i = 0, n = items.length; i < n; i++) {
-            this.nodes.push(this.template.call(array, items[i], i));
+            this.nodes[i + length] = this.template.call(array, items[i], i);
         }
         anchor.after(this.fragment);
     }
@@ -113,5 +117,11 @@ class ReactiveArraySlot {
     }
 }
 export default (anchor, renderable) => {
-    new ReactiveArraySlot(anchor, renderable.array, renderable.template);
+    let { array, template } = renderable, slot = new ReactiveArraySlot(anchor, array, template);
+    if (array.length) {
+        root(() => {
+            slot.nodes = array.map(slot.template);
+        });
+    }
+    return slot.fragment;
 };

package/build/slot/render.d.ts

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

package/build/slot/render.js

@@ -1,58 +1,37 @@
 import { isArray } from '@esportsplus/utilities';
-import { 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 { append, text } from '../utilities.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;
-    }
-}
-export default function render(anchor, fragment, input) {
-    let t = type(input);
-    switch (t) {
-        case RENDERABLE_VOID:
-            return;
-        case RENDERABLE_TEXT:
-            append.call(fragment, text(String(input)));
-            return;
-        case RENDERABLE_HTML_FRAGMENT:
-            append.call(fragment, input.fragment);
-            return;
-        case RENDERABLE_HTML_REACTIVE_ARRAY:
-            return reactive(anchor, input);
-        case RENDERABLE_ARRAY:
-            for (let i = 0, n = input.length; i < n; i++) {
-                render(anchor, fragment, input[i]);
-            }
-            return;
-        case RENDERABLE_FRAGMENT:
-            append.call(fragment, input);
-            return;
-        case RENDERABLE_NODE:
-            append.call(fragment, input);
-            return;
-        case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...input);
-            return;
+        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 text(input);
 }
 ;

package/build/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
-import { firstChild } from './utilities.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';
 import html from './html/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 | RenderableReactive;
+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;
@@ -54,4 +46,4 @@ type Template = {
         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/element.d.ts

@@ -0,0 +1,11 @@
+declare const addEventListener: {
+    <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+};
+declare const className: (v: any) => void;
+declare const innerHTML: (v: any) => void;
+declare const firstElementChild: () => any;
+declare const nextElementSibling: () => any;
+declare const removeAttribute: (qualifiedName: string) => void;
+declare const setAttribute: (qualifiedName: string, value: string) => void;
+export { addEventListener, className, innerHTML, firstElementChild, nextElementSibling, removeAttribute, setAttribute };

package/build/utilities/element.js

@@ -0,0 +1,9 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype = Element.prototype;
+const addEventListener = prototype.addEventListener;
+const className = getOwnPropertyDescriptor(prototype, 'className').set;
+const innerHTML = getOwnPropertyDescriptor(prototype, 'innerHTML').set;
+const firstElementChild = getOwnPropertyDescriptor(prototype, 'firstElementChild').get;
+const nextElementSibling = getOwnPropertyDescriptor(prototype, 'nextElementSibling').get;
+const removeAttribute = prototype.removeAttribute;
+const setAttribute = prototype.setAttribute;
+export { addEventListener, className, innerHTML, firstElementChild, nextElementSibling, removeAttribute, setAttribute };

package/build/utilities/fragment.d.ts

@@ -0,0 +1,3 @@
+declare const append: (...nodes: (Node | string)[]) => void;
+declare const fragment: (html: string) => DocumentFragment;
+export { append, fragment };

package/build/utilities/fragment.js

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

package/build/utilities/node.d.ts

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

package/build/utilities/node.js

@@ -0,0 +1,10 @@
+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;
+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 { appendChild, cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/queue.d.ts

@@ -0,0 +1,3 @@
+declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
+declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
+export { microtask, raf };

package/build/utilities/queue.js

@@ -0,0 +1,4 @@
+import { micro as m, raf as r } from '@esportsplus/tasks';
+const microtask = m();
+const raf = r();
+export { microtask, raf };

package/build/utilities/text.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (value: string) => Node;
+export default _default;

package/build/utilities/text.js

@@ -0,0 +1,9 @@
+import { cloneNode, nodeValue } from './node.js';
+let text = document.createTextNode('');
+export default (value) => {
+    let element = cloneNode.call(text);
+    if (value !== '') {
+        nodeValue.call(element, value);
+    }
+    return element;
+};

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.17.0",
+  "version": "0.19.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,9 +1,9 @@
 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, raf, removeAttribute, setAttribute } from './utilities';
+import { className, removeAttribute, setAttribute } from './utilities/element';
+import { raf } from './utilities/queue';
 import q from '@esportsplus/queue';
 import event from './event';
 
@@ -73,31 +73,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
-                            );
-                        }
+            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);
-                    }
-                })
-            );
+                }
+                else {
+                    update(context, id, name, v, state);
+                }
+            });
 
             state = STATE_NONE;
         }

package/src/constants.ts

@@ -1,4 +1,4 @@
-import { fragment } from './utilities';
+import { fragment } from './utilities/fragment';
 
 
 const CLEANUP = Symbol();
@@ -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
 };