@vertexvis/html-templates 0.24.5-canary.5 → 1.0.0-testing.0

package/dist/binding.d.ts

@@ -1,36 +1,36 @@
-export declare type BindingDataMap = Record<string, any>;
-export interface Binding {
-    bind<T extends BindingDataMap>(data: T): void;
-}
-export declare class CollectionBinding implements Binding {
-    private bindings;
-    constructor(bindings: Binding[]);
-    bind<T extends BindingDataMap>(data: T): void;
-}
-export declare abstract class NodeBinding<N extends Node> implements Binding {
-    protected node: N;
-    protected expr: string;
-    protected constructor(node: N, expr: string);
-    abstract bind<T extends BindingDataMap>(data: T): void;
-}
-export declare class TextNodeBinding extends NodeBinding<Node> {
-    constructor(node: Node, expr: string);
-    bind<T extends BindingDataMap>(data: T): void;
-}
-export declare class AttributeBinding extends NodeBinding<Element> {
-    private attr;
-    constructor(node: Element, expr: string, attr: string);
-    bind<T extends BindingDataMap>(data: T): void;
-}
-export declare class PropertyBinding extends NodeBinding<Element> {
-    private prop;
-    constructor(node: Element, expr: string, prop: string);
-    bind<T extends BindingDataMap>(data: T): void;
-}
-export declare class EventHandlerBinding extends NodeBinding<Element> {
-    private eventName;
-    private disposable?;
-    constructor(node: Element, expr: string, eventName: string);
-    bind<T extends BindingDataMap>(data: T): void;
-}
-export declare function generateBindings(node: Node): Binding[];
+export type BindingDataMap = Record<string, any>;
+export interface Binding {
+    bind<T extends BindingDataMap>(data: T): void;
+}
+export declare class CollectionBinding implements Binding {
+    private bindings;
+    constructor(bindings: Binding[]);
+    bind<T extends BindingDataMap>(data: T): void;
+}
+export declare abstract class NodeBinding<N extends Node> implements Binding {
+    protected node: N;
+    protected expr: string;
+    protected constructor(node: N, expr: string);
+    abstract bind<T extends BindingDataMap>(data: T): void;
+}
+export declare class TextNodeBinding extends NodeBinding<Node> {
+    constructor(node: Node, expr: string);
+    bind<T extends BindingDataMap>(data: T): void;
+}
+export declare class AttributeBinding extends NodeBinding<Element> {
+    private readonly attr;
+    constructor(node: Element, expr: string, attr: string);
+    bind<T extends BindingDataMap>(data: T): void;
+}
+export declare class PropertyBinding extends NodeBinding<Element> {
+    private prop;
+    constructor(node: Element, expr: string, prop: string);
+    bind<T extends BindingDataMap>(data: T): void;
+}
+export declare class EventHandlerBinding extends NodeBinding<Element> {
+    private eventName;
+    private disposable?;
+    constructor(node: Element, expr: string, eventName: string);
+    bind<T extends BindingDataMap>(data: T): void;
+}
+export declare function generateBindings(node: Node): Binding[];

package/dist/bundle.cjs.js

@@ -67,240 +67,240 @@ function camelCase(input, options) {
     return pascalCase(input, tslib.__assign({ transform: camelCaseTransform }, options));
 }
 
-const bindingRegEx = /{{(.+)}}/;
-class CollectionBinding {
-    constructor(bindings) {
-        this.bindings = bindings;
-    }
-    bind(data) {
-        this.bindings.forEach((binding) => binding.bind(data));
-    }
-}
-class NodeBinding {
-    constructor(node, expr) {
-        this.node = node;
-        this.expr = expr;
-    }
-}
-class TextNodeBinding extends NodeBinding {
-    constructor(node, expr) {
-        super(node, expr);
-    }
-    bind(data) {
-        const newContent = replaceBindingString(data, this.expr);
-        if (newContent !== this.node.textContent) {
-            this.node.textContent = newContent;
-        }
-    }
-}
-class AttributeBinding extends NodeBinding {
-    constructor(node, expr, attr) {
-        super(node, expr);
-        this.attr = attr;
-    }
-    bind(data) {
-        const newValue = replaceBindingString(data, this.expr);
-        const oldValue = this.node.getAttribute(this.attr);
-        if (oldValue !== newValue) {
-            this.node.setAttribute(this.attr, newValue);
-        }
-    }
-}
-class PropertyBinding extends NodeBinding {
-    constructor(node, expr, prop) {
-        super(node, expr);
-        this.prop = prop;
-    }
-    bind(data) {
-        const newValue = replaceBinding(data, this.expr);
-        /* eslint-disable @typescript-eslint/no-explicit-any */
-        const oldValue = this.node[this.prop];
-        if (oldValue !== newValue) {
-            this.node[this.prop] = newValue;
-        }
-        /* eslint-enable @typescript-eslint/no-explicit-any */
-    }
-}
-class EventHandlerBinding extends NodeBinding {
-    constructor(node, expr, eventName) {
-        super(node, expr);
-        this.eventName = eventName;
-    }
-    bind(data) {
-        var _a;
-        const path = extractBindingPath(this.expr);
-        if (path != null) {
-            (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-            const listener = getBindableValue(data, path, true);
-            this.node.addEventListener(this.eventName, listener);
-            this.disposable = {
-                dispose: () => {
-                    this.node.removeEventListener(this.eventName, listener);
-                },
-            };
-        }
-    }
-}
-function generateBindings(node) {
-    const bindings = [];
-    if (node.nodeType === Node.ELEMENT_NODE) {
-        const el = node;
-        const bindableAttributes = getBindableAttributes(el);
-        bindableAttributes.forEach((attr) => {
-            if (attr.name.startsWith('event:')) {
-                const eventName = camelCase(attr.name.replace('event:', ''));
-                bindings.push(new EventHandlerBinding(el, attr.value, eventName));
-            }
-            else if (attr.name.startsWith('attr:')) {
-                bindings.push(new AttributeBinding(el, attr.value, attr.name.replace('attr:', '')));
-            }
-            else if (attr.name.startsWith('prop:')) {
-                const propName = camelCase(attr.name.replace('prop:', ''));
-                bindings.push(new PropertyBinding(el, attr.value, propName));
-            }
-        });
-    }
-    else if (node.nodeType === Node.TEXT_NODE &&
-        node.textContent != null &&
-        bindingRegEx.test(node.textContent)) {
-        bindings.push(new TextNodeBinding(node, node.textContent));
-    }
-    for (let i = 0; i < node.childNodes.length; i++) {
-        bindings.push(...generateBindings(node.childNodes[i]));
-    }
-    return bindings;
-}
-function getBindableAttributes(element) {
-    return Array.from(element.attributes).filter((attr) => bindingRegEx.test(attr.value));
-}
-function extractBindingPath(expr) {
-    const result = bindingRegEx.exec(expr);
-    return result != null ? result[1] : undefined;
-}
-function replaceBindingString(data, expr) {
-    const path = extractBindingPath(expr);
-    if (path != null) {
-        const value = getBindableValue(data, path, true);
-        return expr.replace(`{{${path}}}`, value === null || value === void 0 ? void 0 : value.toString());
-    }
-    else {
-        return expr;
-    }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function replaceBinding(data, expr) {
-    const path = extractBindingPath(expr);
-    if (path != null) {
-        const value = getBindableValue(data, path, true);
-        return value;
-    }
-    else {
-        return expr;
-    }
-}
-function getBindableValue(data, path, isHead = false
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-) {
-    const [head, ...tail] = path.split('.');
-    if (isHead && tail.length === 0) {
-        return data;
-    }
-    else if (isHead && tail.length > 0) {
-        return getBindableValue(data, tail.join('.'), false);
-    }
-    else {
-        const value = data[head];
-        if (tail.length > 0) {
-            return getBindableValue(value, tail.join('.'), false);
-        }
-        else {
-            return value;
-        }
-    }
+const bindingRegEx = /{{(.+)}}/;
+class CollectionBinding {
+    constructor(bindings) {
+        this.bindings = bindings;
+    }
+    bind(data) {
+        this.bindings.forEach((binding) => binding.bind(data));
+    }
+}
+class NodeBinding {
+    constructor(node, expr) {
+        this.node = node;
+        this.expr = expr;
+    }
+}
+class TextNodeBinding extends NodeBinding {
+    constructor(node, expr) {
+        super(node, expr);
+    }
+    bind(data) {
+        const newContent = replaceBindingString(data, this.expr);
+        if (newContent !== this.node.textContent) {
+            this.node.textContent = newContent;
+        }
+    }
+}
+class AttributeBinding extends NodeBinding {
+    constructor(node, expr, attr) {
+        super(node, expr);
+        this.attr = attr;
+    }
+    bind(data) {
+        const newValue = replaceBindingString(data, this.expr);
+        const oldValue = this.node.getAttribute(this.attr);
+        if (oldValue !== newValue) {
+            this.node.setAttribute(this.attr, newValue);
+        }
+    }
+}
+class PropertyBinding extends NodeBinding {
+    constructor(node, expr, prop) {
+        super(node, expr);
+        this.prop = prop;
+    }
+    bind(data) {
+        const newValue = replaceBinding(data, this.expr);
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const oldValue = this.node[this.prop];
+        if (oldValue !== newValue) {
+            this.node[this.prop] = newValue;
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+}
+class EventHandlerBinding extends NodeBinding {
+    constructor(node, expr, eventName) {
+        super(node, expr);
+        this.eventName = eventName;
+    }
+    bind(data) {
+        var _a;
+        const path = extractBindingPath(this.expr);
+        if (path != null) {
+            (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
+            const listener = getBindableValue(data, path, true);
+            this.node.addEventListener(this.eventName, listener);
+            this.disposable = {
+                dispose: () => {
+                    this.node.removeEventListener(this.eventName, listener);
+                },
+            };
+        }
+    }
+}
+function generateBindings(node) {
+    const bindings = [];
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const bindableAttributes = getBindableAttributes(el);
+        bindableAttributes.forEach((attr) => {
+            if (attr.name.startsWith('event:')) {
+                const eventName = camelCase(attr.name.replace('event:', ''));
+                bindings.push(new EventHandlerBinding(el, attr.value, eventName));
+            }
+            else if (attr.name.startsWith('attr:')) {
+                bindings.push(new AttributeBinding(el, attr.value, attr.name.replace('attr:', '')));
+            }
+            else if (attr.name.startsWith('prop:')) {
+                const propName = camelCase(attr.name.replace('prop:', ''));
+                bindings.push(new PropertyBinding(el, attr.value, propName));
+            }
+        });
+    }
+    else if (node.nodeType === Node.TEXT_NODE &&
+        node.textContent != null &&
+        bindingRegEx.test(node.textContent)) {
+        bindings.push(new TextNodeBinding(node, node.textContent));
+    }
+    for (let i = 0; i < node.childNodes.length; i++) {
+        bindings.push(...generateBindings(node.childNodes[i]));
+    }
+    return bindings;
+}
+function getBindableAttributes(element) {
+    return Array.from(element.attributes).filter((attr) => bindingRegEx.test(attr.value));
+}
+function extractBindingPath(expr) {
+    const result = bindingRegEx.exec(expr);
+    return result != null ? result[1] : undefined;
+}
+function replaceBindingString(data, expr) {
+    const path = extractBindingPath(expr);
+    if (path != null) {
+        const value = getBindableValue(data, path, true);
+        return expr.replace(`{{${path}}}`, value === null || value === void 0 ? void 0 : value.toString());
+    }
+    else {
+        return expr;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function replaceBinding(data, expr) {
+    const path = extractBindingPath(expr);
+    if (path != null) {
+        const value = getBindableValue(data, path, true);
+        return value;
+    }
+    else {
+        return expr;
+    }
+}
+function getBindableValue(data, path, isHead = false
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
+    const [head, ...tail] = path.split('.');
+    if (isHead && tail.length === 0) {
+        return data;
+    }
+    else if (isHead && tail.length > 0) {
+        return getBindableValue(data, tail.join('.'), false);
+    }
+    else {
+        const value = data[head];
+        if (tail.length > 0) {
+            return getBindableValue(value, tail.join('.'), false);
+        }
+        else {
+            return value;
+        }
+    }
 }
 
-class ElementPool {
-    constructor(container, elementFactory) {
-        this.container = container;
-        this.elementFactory = elementFactory;
-        this.instanceMap = new Map();
-        this.elements = [];
-    }
-    swapHeadToTail(count) {
-        const sliced = this.elements.splice(0, count);
-        this.elements.splice(this.elements.length, 0, ...sliced);
-        return this.elements.concat();
-    }
-    swapTailToHead(count) {
-        const sliced = this.elements.splice(-count, count);
-        this.elements.splice(0, 0, ...sliced);
-        return this.elements.concat();
-    }
-    updateElements(count) {
-        const diff = count - this.elements.length;
-        if (diff > 0) {
-            for (let i = 0; i < diff; i++) {
-                this.createElement();
-            }
-        }
-        else {
-            for (let i = 0; i < -diff; i++) {
-                this.deleteElement();
-            }
-        }
-        return this.elements.concat();
-    }
-    updateData(f) {
-        this.elements.forEach((el, i) => {
-            const instance = this.instanceMap.get(el);
-            const data = f(i);
-            instance === null || instance === void 0 ? void 0 : instance.bindings.bind(data);
-        });
-    }
-    updateElementFactory(elementFactory) {
-        this.elementFactory = elementFactory;
-        this.updateElements(0);
-    }
-    iterateElements(f) {
-        this.elements.forEach((el, i) => {
-            const instance = this.instanceMap.get(el);
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            f(el, instance.bindings, i);
-        });
-    }
-    createElement() {
-        const instance = this.elementFactory();
-        this.elements.push(instance.element);
-        this.instanceMap.set(instance.element, instance);
-        this.container.append(instance.element);
-        return instance;
-    }
-    deleteElement() {
-        const element = this.elements.pop();
-        if (element != null) {
-            this.instanceMap.delete(element);
-            element.remove();
-        }
-    }
+class ElementPool {
+    constructor(container, elementFactory) {
+        this.container = container;
+        this.elementFactory = elementFactory;
+        this.instanceMap = new Map();
+        this.elements = [];
+    }
+    swapHeadToTail(count) {
+        const sliced = this.elements.splice(0, count);
+        this.elements.splice(this.elements.length, 0, ...sliced);
+        return this.elements.concat();
+    }
+    swapTailToHead(count) {
+        const sliced = this.elements.splice(-count, count);
+        this.elements.splice(0, 0, ...sliced);
+        return this.elements.concat();
+    }
+    updateElements(count) {
+        const diff = count - this.elements.length;
+        if (diff > 0) {
+            for (let i = 0; i < diff; i++) {
+                this.createElement();
+            }
+        }
+        else {
+            for (let i = 0; i < -diff; i++) {
+                this.deleteElement();
+            }
+        }
+        return this.elements.concat();
+    }
+    updateData(f) {
+        this.elements.forEach((el, i) => {
+            const instance = this.instanceMap.get(el);
+            const data = f(i);
+            instance === null || instance === void 0 ? void 0 : instance.bindings.bind(data);
+        });
+    }
+    updateElementFactory(elementFactory) {
+        this.elementFactory = elementFactory;
+        this.updateElements(0);
+    }
+    iterateElements(f) {
+        this.elements.forEach((el, i) => {
+            const instance = this.instanceMap.get(el);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            f(el, instance.bindings, i);
+        });
+    }
+    createElement() {
+        const instance = this.elementFactory();
+        this.elements.push(instance.element);
+        this.instanceMap.set(instance.element, instance);
+        this.container.append(instance.element);
+        return instance;
+    }
+    deleteElement() {
+        const element = this.elements.pop();
+        if (element != null) {
+            this.instanceMap.delete(element);
+            element.remove();
+        }
+    }
 }
 
-function append(container, element, data) {
-    const bindings = new CollectionBinding(generateBindings(element));
-    bindings.bind(data);
-    container.appendChild(element);
-    const created = container.lastElementChild;
-    if (created != null) {
-        return { element: created, bindings };
-    }
-    else {
-        throw new Error('Failed to append element');
-    }
-}
-function generateInstanceFromTemplate(template) {
-    const fragment = template.content.cloneNode(true);
-    const element = fragment.firstElementChild;
-    const bindings = new CollectionBinding(generateBindings(fragment));
-    return { element, bindings };
+function append(container, element, data) {
+    const bindings = new CollectionBinding(generateBindings(element));
+    bindings.bind(data);
+    container.appendChild(element);
+    const created = container.lastElementChild;
+    if (created != null) {
+        return { element: created, bindings };
+    }
+    else {
+        throw new Error('Failed to append element');
+    }
+}
+function generateInstanceFromTemplate(template) {
+    const fragment = template.content.cloneNode(true);
+    const element = fragment.firstElementChild;
+    const bindings = new CollectionBinding(generateBindings(fragment));
+    return { element, bindings };
 }
 
 exports.AttributeBinding = AttributeBinding;