@esportsplus/template 0.15.19 → 0.16.1

package/build/attributes.d.ts

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

package/build/attributes.js

@@ -5,7 +5,6 @@ import { className, raf, removeAttribute, setAttribute } from './utilities.js';
 import q from '@esportsplus/queue';
 import event from './event.js';
 const EFFECT_KEY = Symbol();
-const HYDRATE_KEY = Symbol();
 const STORE_KEY = Symbol();
 const UPDATES_KEY = Symbol();
 const STATE_HYDRATING = 0;
@@ -140,7 +139,7 @@ function update(context, id, name, value, state) {
         store[name] = value;
     }
     if (state === STATE_HYDRATING) {
-        (context.element[HYDRATE_KEY] ??= {})[name] = value;
+        attribute(context.element, name, value);
     }
     else {
         context.updates[name] = value;
@@ -153,16 +152,6 @@ function update(context, id, name, value, state) {
         }
     }
 }
-const apply = (element) => {
-    let attributes = element[HYDRATE_KEY];
-    if (!attributes) {
-        return;
-    }
-    for (let key in attributes) {
-        attribute(element, key, attributes[key]);
-    }
-    delete element[HYDRATE_KEY];
-};
 const spread = function (element, value) {
     let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }), context = {
         element,
@@ -184,5 +173,5 @@ const spread = function (element, value) {
         }
     }
 };
-export default { apply, spread };
-export { apply, spread };
+export default { spread };
+export { spread };

package/build/constants.d.ts

@@ -1,3 +1,4 @@
+declare const EMPTY_FRAGMENT: DocumentFragment;
 declare const NODE_CLOSING = 1;
 declare const NODE_ELEMENT = 3;
 declare const NODE_SLOT = 4;
@@ -11,4 +12,4 @@ declare const RENDERABLE_TEMPLATE: 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_HTML, SLOT_MARKER, 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, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/constants.js

@@ -1,3 +1,5 @@
+import { fragment } from './utilities.js';
+const EMPTY_FRAGMENT = fragment('');
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
 const NODE_ELEMENT = 3;
@@ -31,4 +33,4 @@ const RENDERABLE_TEMPLATE = 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_HTML, SLOT_MARKER, 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, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/html/cache.d.ts

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

package/build/html/cache.js

@@ -3,8 +3,9 @@ import { firstChild, firstElementChild, fragment, nextElementSibling, nextSiblin
 import { spread } from '../attributes.js';
 import s from '../slot.js';
 let cache = new WeakMap();
-function build(literals, values) {
-    if (values.length === 0) {
+function build(literals) {
+    let n = literals.length - 1;
+    if (n === 0) {
         return set(literals, literals[0]);
     }
     let buffer = '', html = literals.join(SLOT_MARKER)
@@ -13,20 +14,26 @@ function build(literals, values) {
             children: 0,
             elements: 0,
             path: []
-        }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [], total = values.length;
+        }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
     for (let match of html.matchAll(REGEX_SLOT_NODES)) {
         let parent = levels[level], type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || NODE_ELEMENT);
         if ((match.index || 1) - 1 > index) {
             parent.children++;
         }
         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);
+                let i = attr.indexOf(SLOT_MARKER), p = {
+                    absolute: path,
+                    parent: parent.path,
+                    relative: path.slice(parent.path.length)
+                };
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        path,
+                        path: p,
                         slot
                     });
                     buffer += parsed[slot++];
@@ -37,22 +44,25 @@ function build(literals, values) {
                 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;
         }
@@ -84,7 +94,7 @@ function set(literals, html, slots = null) {
     cache.set(literals, template);
     return template;
 }
-const get = ({ literals, values }) => {
-    return cache.get(literals) || build(literals, values);
+const get = (literals) => {
+    return cache.get(literals) || build(literals);
 };
 export default { get };

package/build/html/hydrate.d.ts

@@ -1,7 +1,9 @@
-import { HydrateResult, RenderableReactive, RenderableTemplate } from '../types.js';
+import { Elements, Fragment, RenderableReactive, RenderableTemplate } from '../types.js';
 import { Slot } from '../slot.js';
+declare function reactive<T>(elements: Elements[], fragment: Fragment, renderable: RenderableReactive<T>, slot: Slot): void;
+declare function hydrate<T>(elements: Elements[] | null, fragment: Fragment, renderable: RenderableTemplate<T>): void;
 declare const _default: {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => HydrateResult[];
-    static: <T>(renderable: RenderableTemplate<T>) => HydrateResult;
+    reactive: typeof reactive;
+    static: typeof hydrate;
 };
 export default _default;

package/build/html/hydrate.js

@@ -1,63 +1,85 @@
 import { root } from '@esportsplus/reactivity';
-import { cloneNode, firstChild, nextSibling } from '../utilities.js';
-import { apply } from '../attributes.js';
+import { EMPTY_FRAGMENT } from '../constants.js';
+import { cloneNode } from '../utilities.js';
 import cache from './cache.js';
-function reactive(renderable, slot) {
+function reactive(elements, fragment, renderable, 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);
-        return hydrate(renderable, cache.get(renderable));
+        hydrate(elements, fragment, factory.call(this, data, i));
     };
-    array.on('pop', () => {
-        slot.pop();
-    });
-    array.on('push', ({ items }) => {
-        slot.push(...root(() => array.map(template, array.length - items.length)));
-    });
+    array.on('clear', () => slot.clear());
+    array.on('pop', () => slot.pop());
     array.on('reverse', refresh);
-    array.on('shift', () => {
-        slot.shift();
-    });
+    array.on('shift', () => slot.shift());
     array.on('sort', refresh);
+    array.on('push', ({ items }) => {
+        let anchor = slot.anchor();
+        elements = slot.nodes;
+        root(() => array.map(template, array.length - items.length));
+        anchor.after(fragment);
+        reset();
+    });
     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(renderable, template) {
-    let elements = [], fragment = cloneNode.call(template.fragment, true), slots = template.slots;
+function hydrate(elements, fragment, renderable) {
+    let { fragment: frag, slots } = cache.get(renderable.literals), clone = cloneNode.call(frag, true);
     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) {
-                if (node) {
-                    apply(node);
+        let node, nodePath, parent, parentPath, values = renderable.values;
+        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;
                 }
-                node = fragment;
-                previous = path;
-                for (let o = 0, j = path.length; o < j; o++) {
-                    node = path[o].call(node);
+                else {
+                    parent = clone;
+                    parentPath = pp;
+                    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 = pr.length; o < j; o++) {
+                    node = pr[o].call(node);
                 }
             }
             fn(node, values[slot]);
         }
-        apply(node);
     }
-    for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
-        elements.push(element);
+    if (elements) {
+        elements.push([...clone.childNodes]);
     }
-    return { elements, fragment };
+    fragment.appendChild(clone);
 }
 export default {
-    reactive: (renderable, slot) => {
-        return reactive(renderable, slot);
-    },
-    static: (renderable) => {
-        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
-    }
+    reactive,
+    static: hydrate
 };

package/build/render.d.ts

@@ -1,4 +1,4 @@
 import { Slot } from './slot.js';
 import { Renderable } from './types.js';
-declare const _default: (renderable: Renderable, parent: HTMLElement | Slot) => Slot;
+declare const _default: (renderable: Renderable, parent: HTMLElement | Slot) => void | Slot;
 export default _default;

package/build/slot.d.ts

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

package/build/slot.js

@@ -1,37 +1,20 @@
-import { effect, root } from '@esportsplus/reactivity';
-import { isArray, isFunction, isInstanceOf, isObject } from '@esportsplus/utilities';
-import { RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
+import { effect } from '@esportsplus/reactivity';
+import { isArray, isInstanceOf } from '@esportsplus/utilities';
+import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
 import { hydrate } from './html/index.js';
-import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
+import { append, cloneNode, microtask, nodeValue, raf, text } from './utilities.js';
 import queue from '@esportsplus/queue';
 const CLEANUP_KEY = Symbol();
-let cleanup = queue(64), scheduled = false, template = fragment('');
-function after(anchor, groups) {
-    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);
-        }
-    }
-    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];
+const CONNECTED = 0;
+const HYDRATING = 1;
+let cleanup = queue(64), scheduled = false;
+function remove(groups) {
+    let group, item;
+    while (group = groups.pop()) {
+        while (item = group.pop()) {
             if (CLEANUP_KEY in item) {
                 cleanup.add(item[CLEANUP_KEY]);
+                item[CLEANUP_KEY] = null;
             }
             item.remove();
         }
@@ -39,51 +22,47 @@ function remove(...groups) {
     if (!scheduled && cleanup.length) {
         schedule();
     }
-    return groups;
 }
-function render(elements, fragment, input, slot) {
+function render(anchor, 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 (isObject(input) && RENDERABLE in input) {
+    let type = typeof input;
+    if (type === 'object' && 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);
-            }
+            slot ??= new Slot(anchor);
+            hydrate.reactive(slot.nodes, fragment, input, slot);
         }
         else {
-            let { elements: e, fragment: f } = hydrate.static(input);
-            append.call(fragment, f);
-            elements.push(e);
+            hydrate.static(elements, fragment, input);
+        }
+    }
+    else if (type === 'string' || type === 'number') {
+        let element = text(type === 'string' ? input : String(input));
+        if (slot) {
+            slot.text = element;
+        }
+        append.call(fragment, element);
+        if (elements) {
+            elements.push([element]);
+        }
+    }
+    else if (isArray(input)) {
+        for (let i = 0, n = input.length; i < n; i++) {
+            render(anchor, elements, fragment, input[i], slot);
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let e = [];
-        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            e.push(node);
+        append.call(fragment, ...input);
+        if (elements) {
+            elements.push([...input]);
         }
-        append.call(fragment, ...e);
-        elements.push(e);
     }
     else if (isInstanceOf(input, Node)) {
         append.call(fragment, input);
-        elements.push([input]);
-    }
-    else {
-        let element = text(typeof input === 'string' ? input : String(input));
-        if (slot) {
-            slot.text = element;
+        if (elements) {
+            elements.push([input]);
         }
-        append.call(fragment, element);
-        elements.push([element]);
     }
 }
 function schedule() {
@@ -121,79 +100,105 @@ class Slot {
         return this.nodes.length;
     }
     set length(n) {
-        this.splice(n);
+        if (n >= this.nodes.length) {
+            return;
+        }
+        else if (n === 0) {
+            this.clear();
+        }
+        else {
+            this.splice(n);
+        }
     }
     anchor(index = this.nodes.length - 1) {
-        let node, nodes = this.nodes[index];
-        if (nodes) {
-            node = nodes[nodes.length - 1];
-        }
-        return node || this.marker;
+        let nodes = this.nodes[index];
+        return nodes ? nodes[nodes.length - 1] : this.marker;
     }
     clear() {
-        remove(...this.nodes);
-        this.nodes.length = 0;
-        this.text = null;
+        if (this.text) {
+            this.nodes.push([this.text]);
+            this.text = null;
+        }
+        remove(this.nodes);
+        return this;
     }
     pop() {
         let group = this.nodes.pop();
-        if (!group) {
-            return undefined;
+        if (group) {
+            remove([group]);
         }
-        return remove(group);
+        return this;
     }
-    push(...groups) {
-        return this.nodes.push(...after(this.anchor(), groups));
+    push(fragment, ...nodes) {
+        this.anchor().after(fragment);
+        this.nodes.push(...nodes);
+        return this;
     }
-    render(input) {
-        if (isFunction(input)) {
+    render(input, state = HYDRATING) {
+        let type = typeof input;
+        if (type === 'function') {
             ondisconnect(this.marker, effect(() => {
                 let v = input();
-                if (isFunction(v)) {
-                    root(() => this.render(v()));
+                if (state === HYDRATING) {
+                    this.render(v, state);
+                    state = CONNECTED;
                 }
-                else {
+                else if (state === CONNECTED) {
                     raf.add(() => {
-                        this.render(v);
+                        this.render(v, state);
                     });
                 }
             }));
             return this;
         }
-        if (this.text) {
-            let type = typeof input;
-            if (type === 'object' && input !== null) {
-            }
-            else if (this.text.isConnected) {
-                nodeValue.call(this.text, (type === 'string' || type === 'number') ? input : '');
-                return this;
-            }
+        let text = this.text;
+        if (text && text.isConnected && (input == null || type !== 'object')) {
+            nodeValue.call(text, (type === 'number' || type === 'string') ? input : '');
+        }
+        else {
+            this.clear();
+            let fragment = cloneNode.call(EMPTY_FRAGMENT);
+            render(this.marker, this.nodes, fragment, input, this);
+            this.marker.after(fragment);
         }
-        this.clear();
-        let fragment = cloneNode.call(template), nodes = [];
-        render(nodes, fragment, input, this);
-        this.marker.after(fragment);
-        this.nodes = nodes;
         return this;
     }
     shift() {
         let group = this.nodes.shift();
-        if (!group) {
-            return undefined;
+        if (group) {
+            remove([group]);
         }
-        return remove(group);
+        return this;
     }
-    splice(start, stop = this.nodes.length, ...groups) {
-        return remove(...this.nodes.splice(start, stop, ...after(this.anchor(start), groups)));
+    splice(start, stop = this.nodes.length, fragment, ...nodes) {
+        if (!fragment) {
+            remove(this.nodes.splice(start, stop));
+        }
+        else {
+            this.anchor(start).after(fragment);
+            remove(this.nodes.splice(start, stop, ...nodes));
+        }
+        return this;
     }
-    unshift(...groups) {
-        return this.nodes.unshift(...after(this.marker, groups));
+    unshift(fragment, ...nodes) {
+        this.marker.after(fragment);
+        this.nodes.unshift(...nodes);
+        return this;
     }
 }
 const ondisconnect = (element, fn) => {
     (element[CLEANUP_KEY] ??= []).push(fn);
 };
 export default (marker, value) => {
-    return new Slot(marker).render(value);
+    let type = typeof value;
+    if (type === 'function') {
+        new Slot(marker).render(value);
+    }
+    else {
+        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        render(marker, null, fragment, value);
+        marker.after(fragment);
+    }
+    ;
 };
 export { ondisconnect, Slot };

package/build/types.d.ts

@@ -20,10 +20,7 @@ type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
-type HydrateResult = {
-    elements: Elements;
-    fragment: DocumentFragment | Node;
-};
+type Fragment = DocumentFragment | Node;
 type Primitive = bigint | boolean | null | number | string | undefined;
 type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
 type RenderableReactive<T = unknown> = Readonly<{
@@ -32,7 +29,7 @@ type RenderableReactive<T = unknown> = Readonly<{
     template: (this: ThisParameterType<Parameters<ReactiveArray<T>['map']>[0]>, ...args: Parameters<Parameters<ReactiveArray<T>['map']>[0]>) => RenderableTemplate<T>;
     values: ReactiveArray<T>;
 }>;
-type RenderableTemplate<T> = {
+type RenderableTemplate<T = unknown> = {
     [RENDERABLE]: typeof RENDERABLE_TEMPLATE;
     literals: TemplateStringsArray;
     template: Template | null;
@@ -45,8 +42,12 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        path: typeof firstChild[];
+        path: {
+            absolute: typeof firstChild[];
+            parent: typeof firstChild[];
+            relative: typeof firstChild[];
+        };
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };
+export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };