@esportsplus/template 0.16.1 → 0.17.0

package/build/html/index.js

@@ -1,10 +1,18 @@
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from '../constants.js';
+import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
 import hydrate from './hydrate.js';
+import cache from './cache.js';
 const html = (literals, ...values) => {
-    return { [RENDERABLE]: RENDERABLE_TEMPLATE, literals, template: null, values };
+    return {
+        [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
+        fragment: hydrate(cache.get(literals), values),
+        literals
+    };
 };
 html.reactive = (array, template) => {
-    return { [RENDERABLE]: RENDERABLE_REACTIVE, literals: null, template, values: array };
+    return {
+        [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
+        array,
+        template
+    };
 };
 export default html;
-export { hydrate };

package/build/render.d.ts

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

package/build/render.js

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

package/build/slot/cleanup.d.ts

@@ -0,0 +1,4 @@
+import { SlotGroup } from '../types.js';
+declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
+declare const remove: (groups: SlotGroup[]) => void;
+export { ondisconnect, remove };

package/build/slot/cleanup.js

@@ -0,0 +1,51 @@
+import queue from '@esportsplus/queue';
+import { CLEANUP } from '../constants.js';
+import { microtask, previousSibling } from '../utilities.js';
+let cleanup = queue(64), scheduled = false;
+function schedule() {
+    if (!cleanup.length || scheduled) {
+        return;
+    }
+    scheduled = true;
+    microtask.add(task);
+}
+function task() {
+    try {
+        let fns, fn, n = cleanup.length;
+        while ((fns = cleanup.next()) && n--) {
+            while (fn = fns.pop()) {
+                fn();
+            }
+        }
+    }
+    catch { }
+    if (cleanup.length) {
+        microtask.add(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
+const ondisconnect = (element, fn) => {
+    (element[CLEANUP] ??= []).push(fn);
+};
+const remove = (groups) => {
+    let group, head, tail;
+    while (group = groups.pop()) {
+        head = group.head;
+        tail = group.tail || head;
+        for (let node = tail; node; node = previousSibling.call(node)) {
+            if (CLEANUP in node) {
+                cleanup.add(node[CLEANUP]);
+            }
+            node.remove();
+            if (head === node) {
+                break;
+            }
+        }
+    }
+    if (!scheduled && cleanup.length) {
+        schedule();
+    }
+};
+export { ondisconnect, remove };

package/build/slot/effect.d.ts

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

package/build/slot/effect.js

@@ -0,0 +1,51 @@
+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 { remove } from './cleanup.js';
+import render from './render.js';
+function update(anchor, fragment, value) {
+    let type = typeof value;
+    if (this.group) {
+        remove([this.group]);
+        this.group = undefined;
+    }
+    if (value == null || type !== 'object') {
+        let textnode = this.textnode;
+        if (textnode) {
+            nodeValue.call(textnode, String(value));
+        }
+        else {
+            textnode = this.textnode = text(String(value));
+        }
+        if (!textnode.isConnected) {
+            anchor.after(textnode);
+        }
+    }
+    else {
+        render(anchor, fragment, value);
+        this.group = {
+            head: firstChild.call(fragment),
+            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(() => {
+        let value = fn();
+        if (state === STATE_HYDRATING) {
+            update.call(context, anchor, fragment, value);
+            state = STATE_NONE;
+        }
+        else if (state === STATE_NONE) {
+            raf.add(() => {
+                update.call(context, anchor, fragment, value);
+            });
+        }
+    }));
+};

package/build/slot/index.d.ts

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

package/build/slot/index.js

@@ -0,0 +1,15 @@
+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);
+    }
+    return slot(anchor, value);
+};

package/build/slot/reactive.d.ts

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

package/build/slot/reactive.js

@@ -0,0 +1,117 @@
+import { root } from '@esportsplus/reactivity';
+import { EMPTY_FRAGMENT } from '../constants.js';
+import { append, cloneNode, firstChild, lastChild } from '../utilities.js';
+import { remove } from './cleanup.js';
+class ReactiveArraySlot {
+    array;
+    fragment = cloneNode.call(EMPTY_FRAGMENT);
+    marker;
+    nodes = [];
+    template;
+    constructor(anchor, array, template) {
+        let fragment = this.fragment;
+        this.array = array;
+        this.marker = anchor;
+        this.template = function (data, i) {
+            let frag = template.call(this, data, i).fragment, group = {
+                head: firstChild.call(frag),
+                tail: lastChild.call(frag)
+            };
+            append.call(fragment, frag);
+            return group;
+        };
+        let render = () => {
+            root(() => this.render());
+        };
+        array.on('clear', () => this.clear());
+        array.on('reverse', 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('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;
+    }
+    set length(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 = this.nodes[index];
+        if (node) {
+            return node.tail || node.head;
+        }
+        return this.marker;
+    }
+    clear() {
+        remove(this.nodes);
+    }
+    pop() {
+        let group = this.nodes.pop();
+        if (group) {
+            remove([group]);
+        }
+    }
+    push(items) {
+        let anchor = this.anchor(), array = this.array;
+        for (let i = 0, n = items.length; i < n; i++) {
+            this.nodes.push(this.template.call(array, items[i], i));
+        }
+        anchor.after(this.fragment);
+    }
+    render() {
+        let nodes = this.nodes;
+        if (nodes.length) {
+            remove(nodes);
+        }
+        nodes = this.array.map(this.template);
+        this.marker.after(this.fragment);
+    }
+    shift() {
+        let group = this.nodes.shift();
+        if (group) {
+            remove([group]);
+        }
+    }
+    splice(start, stop = this.nodes.length, ...items) {
+        if (!items.length) {
+            return remove(this.nodes.splice(start, stop));
+        }
+        let array = this.array, n = items.length, nodes = new Array(n);
+        for (let i = 0; i < n; i++) {
+            nodes[i] = this.template.call(array, items[i], i);
+        }
+        remove(this.nodes.splice(start, stop, ...nodes));
+        this.anchor(start - 1).after(this.fragment);
+    }
+    unshift(items) {
+        let array = this.array, n = items.length, nodes = new Array(n);
+        for (let i = 0; i < n; i++) {
+            nodes[i] = this.template.call(array, items[i], i);
+        }
+        this.nodes.unshift(...nodes);
+        this.marker.after(this.fragment);
+    }
+}
+export default (anchor, renderable) => {
+    new ReactiveArraySlot(anchor, renderable.array, renderable.template);
+};

package/build/slot/render.d.ts

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

package/build/slot/render.js

@@ -0,0 +1,58 @@
+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 reactive from './reactive.js';
+function type(input) {
+    if (input === false || input == null || input === '') {
+        return RENDERABLE_VOID;
+    }
+    if (typeof input !== 'object') {
+        return RENDERABLE_TEXT;
+    }
+    if (RENDERABLE in input) {
+        return input[RENDERABLE];
+    }
+    if (isArray(input)) {
+        return RENDERABLE_ARRAY;
+    }
+    let nodeType = input.nodeType;
+    if (nodeType === 11) {
+        return RENDERABLE_FRAGMENT;
+    }
+    if (nodeType !== undefined) {
+        return RENDERABLE_NODE;
+    }
+    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;
+    }
+}
+;

package/build/svg.d.ts

@@ -1,6 +1,5 @@
 import html from './html/index.js';
-import { RenderableTemplate } from './types.js';
 declare const svg: typeof html & {
-    sprite: <T>(symbol: string) => RenderableTemplate<T>;
+    sprite: (symbol: string) => ReturnType<typeof html>;
 };
 export default svg;

package/build/types.d.ts

@@ -1,8 +1,9 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants.js';
+import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
 import { firstChild } from './utilities.js';
 import attributes from './attributes.js';
-import slot from './slot.js';
+import slot from './slot/index.js';
+import html from './html/index.js';
 type Attribute = Primitive | Effect<Primitive | Primitive[]>;
 type Attributes = {
     class?: Attribute | Attribute[];
@@ -17,25 +18,28 @@ type Attributes = {
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;
-type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
+type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
-type Fragment = DocumentFragment | Node;
+type Fragment = (DocumentFragment | Node) & Record<PropertyKey, unknown>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
-type RenderableReactive<T = unknown> = Readonly<{
-    [RENDERABLE]: typeof RENDERABLE_REACTIVE;
-    literals: null;
-    template: (this: ThisParameterType<Parameters<ReactiveArray<T>['map']>[0]>, ...args: Parameters<Parameters<ReactiveArray<T>['map']>[0]>) => RenderableTemplate<T>;
-    values: ReactiveArray<T>;
+type Renderable = Fragment | RenderableReactive;
+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<T = unknown> = {
-    [RENDERABLE]: typeof RENDERABLE_TEMPLATE;
+type RenderableTemplate = {
+    [RENDERABLE]: typeof RENDERABLE_HTML_FRAGMENT;
+    fragment: Fragment;
     literals: TemplateStringsArray;
-    template: Template | null;
-    values: (RenderableValue<T> | RenderableValue<T>[])[];
 };
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | Renderable;
+type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Fragment | Primitive | RenderableReactive;
+type RenderableValues = RenderableValue | RenderableValue[];
+type SlotGroup = {
+    head: Element;
+    tail: Element;
+};
 type Template = {
     fragment: DocumentFragment;
     html: string;
@@ -50,4 +54,4 @@ type Template = {
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };
+export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderableValues, SlotGroup, Template };

package/build/utilities.d.ts

@@ -12,17 +12,17 @@ declare const className: (v: any) => void;
 declare const innerHTML: (v: any) => void;
 declare const firstElementChild: () => any;
 declare const nextElementSibling: () => any;
-declare const prepend: (...nodes: (Node | string)[]) => void;
 declare const removeAttribute: (qualifiedName: string) => void;
 declare const setAttribute: (qualifiedName: string, value: string) => void;
 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 parentNode: () => any;
+declare const previousSibling: () => any;
 declare const fragment: (html: string) => DocumentFragment;
 declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const text: (value: string) => E;
-export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, lastChild, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, previousSibling, raf, removeAttribute, removeEventListener, setAttribute, text };

package/build/utilities.js

@@ -1,24 +1,24 @@
 import { micro as m, raf as r } from '@esportsplus/tasks';
-let prototype, template = document.createElement('template'), t = document.createTextNode('');
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype, template = document.createElement('template'), t = document.createTextNode('');
 prototype = DocumentFragment.prototype;
 const append = prototype.append;
 prototype = Element.prototype;
 const addEventListener = prototype.addEventListener;
 const removeEventListener = prototype.removeEventListener;
-const className = Object.getOwnPropertyDescriptor(prototype, 'className').set;
-const innerHTML = Object.getOwnPropertyDescriptor(prototype, 'innerHTML').set;
-const firstElementChild = Object.getOwnPropertyDescriptor(prototype, 'firstElementChild').get;
-const nextElementSibling = Object.getOwnPropertyDescriptor(prototype, 'nextElementSibling').get;
-const prepend = prototype.prepend;
+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;
 prototype = Node.prototype;
 const cloneNode = prototype.cloneNode;
-const firstChild = Object.getOwnPropertyDescriptor(prototype, 'firstChild').get;
-const nextSibling = Object.getOwnPropertyDescriptor(prototype, 'nextSibling').get;
-const nodeValue = Object.getOwnPropertyDescriptor(prototype, 'nodeValue').set;
-const parentElement = Object.getOwnPropertyDescriptor(prototype, 'parentElement').get;
-const parentNode = Object.getOwnPropertyDescriptor(prototype, 'parentNode').get;
+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;
 const fragment = (html) => {
     innerHTML.call(template, html);
     let { content } = template;
@@ -34,4 +34,4 @@ const text = (value) => {
     }
     return element;
 };
-export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, lastChild, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, previousSibling, raf, removeAttribute, removeEventListener, setAttribute, text };

package/package.json

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

package/src/attributes.ts

@@ -1,24 +1,18 @@
 import { effect } from '@esportsplus/reactivity';
-import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { ondisconnect } from './slot';
+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 q from '@esportsplus/queue';
 import event from './event';
 
 
-const EFFECT_KEY = Symbol();
+const EFFECT = Symbol();
 
-const STORE_KEY = Symbol();
+const STORE = Symbol();
 
-const UPDATES_KEY = Symbol();
-
-
-const STATE_HYDRATING = 0;
-
-const STATE_NONE = 1;
-
-const STATE_WAITING = 2;
+const UPDATES = Symbol();
 
 
 type Context = {
@@ -64,19 +58,20 @@ function schedule() {
 }
 
 function set(context: Context, name: string, value: unknown, state: State) {
-    if (isArray(value)) {
-        for (let i = 0, n = value.length; i < n; i++) {
-            set(context, name, value[i], state);
-        }
+    if (value === false || value == null) {
+        value = '';
     }
-    else if (isFunction(value)) {
+
+    let type = typeof value;
+
+    if (type === 'function') {
         if (name.startsWith('on')) {
-            event(context.element, name as `on${string}`, value);
+            event(context.element, name as `on${string}`, value as Function);
         }
         else {
-            context.store[EFFECT_KEY] ??= 0;
+            context.store[EFFECT] ??= 0;
 
-            let id = (context.store[EFFECT_KEY] as number)++;
+            let id = (context.store[EFFECT] as number)++;
 
             ondisconnect(
                 context.element,
@@ -107,6 +102,13 @@ function set(context: Context, name: string, value: unknown, state: State) {
             state = STATE_NONE;
         }
     }
+    else if (type === 'object') {
+        if (isArray(value)) {
+            for (let i = 0, n = value.length; i < n; i++) {
+                set(context, name, value[i], state);
+            }
+        }
+    }
     else {
         update(context, null, name, value, state);
     }
@@ -232,15 +234,20 @@ function update(
 
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {
-    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }) as Record<PropertyKey, unknown>,
+    let cache = (element[STORE] ??= { [UPDATES]: {} }) as Record<PropertyKey, unknown>,
         context = {
             element,
             store: cache,
-            updates: cache[UPDATES_KEY] as Record<PropertyKey, unknown>,
+            updates: cache[UPDATES] as Record<PropertyKey, unknown>,
             updating: false
         };
 
-    if (isArray(value)) {
+    if (isObject(value)) {
+        for (let name in value) {
+            set(context, name, value[name], STATE_HYDRATING);
+        }
+    }
+    else if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
             let v = value[i];
 
@@ -249,11 +256,6 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
             }
         }
     }
-    else if (isObject(value)) {
-        for (let name in value) {
-            set(context, name, value[name], STATE_HYDRATING);
-        }
-    }
 };