@microsoft/fast-html 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/esm/components/template.js

@@ -0,0 +1,313 @@
+import { __awaiter, __decorate, __metadata } from "tslib";
+import { attr, DOMAspect, FAST, FASTElement, fastElementRegistry, ViewTemplate, } from "@microsoft/fast-element";
+import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
+import { getAllPartials, getNextBehavior, getOperator, pathResolver, transformInnerHTML, } from "./utilities.js";
+function allow(tagName, aspect, aspectName, sink) {
+    return (target, name, value, ...rest) => {
+        sink(target, name, value, ...rest);
+    };
+}
+/**
+ * The <f-template> custom element that will provide view logic to the element
+ */
+class TemplateElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.partials = {};
+    }
+    static options(elementOptions = {}) {
+        this.elementOptions = elementOptions;
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.name) {
+            this.$fastController.definition.registry
+                .whenDefined(this.name)
+                .then((value) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const registeredFastElement = fastElementRegistry.getByType(value);
+                const template = this.getElementsByTagName("template").item(0);
+                if (template) {
+                    const innerHTML = yield transformInnerHTML(this.innerHTML);
+                    yield this.resolveAllPartials(innerHTML);
+                    const { strings, values } = yield this.resolveStringsAndValues(innerHTML);
+                    if (registeredFastElement) {
+                        // all new elements will get the updated template
+                        registeredFastElement.template =
+                            this.resolveTemplateOrBehavior(strings, values);
+                        // set shadow options as defined by the f-template
+                        registeredFastElement.shadowOptions =
+                            (_a = TemplateElement.elementOptions[this.name]) === null || _a === void 0 ? void 0 : _a.shadowOptions;
+                    }
+                }
+                else {
+                    throw FAST.error(2000 /* Message.noTemplateProvided */, { name: this.name });
+                }
+            }));
+        }
+    }
+    /**
+     * Resolve strings and values from an innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    resolveStringsAndValues(innerHTML, self = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const strings = [];
+            const values = []; // these can be bindings, directives, etc.
+            yield this.resolveInnerHTML(innerHTML, strings, values, self);
+            strings.raw = strings.map(value => String.raw({ raw: value }));
+            return {
+                strings,
+                values,
+            };
+        });
+    }
+    /**
+     * Resolve a template or behavior
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     */
+    resolveTemplateOrBehavior(strings, values) {
+        return ViewTemplate.create(strings, values, DOMPolicy.create({
+            guards: {
+                aspects: {
+                    [DOMAspect.property]: {
+                        innerHTML: allow,
+                    },
+                },
+            },
+        }));
+    }
+    /**
+     * Resolve a template directive
+     * @param behaviorConfig - The directive behavior configuration object.
+     * @param externalValues - The interpreted values from the parent.
+     * @param innerHTML - The innerHTML.
+     */
+    resolveTemplateDirective(behaviorConfig, externalValues, innerHTML, self = false) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (behaviorConfig.name) {
+                case "when":
+                    {
+                        const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex));
+                        const { when } = yield import("@microsoft/fast-element");
+                        const { operator, left, right, rightIsValue } = getOperator(behaviorConfig.value);
+                        let whenLogic = (x, c) => pathResolver(left, self)(x, c);
+                        switch (operator) {
+                            case "!":
+                                whenLogic = (x, c) => !pathResolver(left, self)(x, c);
+                                break;
+                            case "==":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) ==
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "!=":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) !=
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "&&":
+                            case "&amp;&amp;":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) &&
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "||":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) ||
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case ">=":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) >=
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case ">":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) >
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "<=":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) <=
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "<":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) <
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                        }
+                        externalValues.push(when(whenLogic, this.resolveTemplateOrBehavior(strings, values)));
+                    }
+                    break;
+                case "repeat":
+                    {
+                        const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
+                        const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true);
+                        const { repeat } = yield import("@microsoft/fast-element");
+                        externalValues.push(repeat((x, c) => pathResolver(valueAttr[2], self)(x, c), this.resolveTemplateOrBehavior(strings, values)));
+                    }
+                    break;
+                case "apply": {
+                    const openingTag = innerHTML.slice(behaviorConfig.openingTagStartIndex, behaviorConfig.openingTagEndIndex);
+                    const partial = (_a = openingTag
+                        .split(" ")
+                        .find(tagPart => {
+                        return tagPart.startsWith("partial");
+                    })) === null || _a === void 0 ? void 0 : _a.split('"')[1];
+                    if (partial) {
+                        const { when } = yield import("@microsoft/fast-element");
+                        externalValues.push(when((x, c) => pathResolver(behaviorConfig.value, self)(x, c), () => this.partials[partial]));
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * Resolve a template directive
+     * @param name - The name of the directive.
+     * @param propName - The property name to pass to the directive.
+     * @param externalValues - The interpreted values from the parent.
+     */
+    resolveAttributeDirective(name, propName, externalValues) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (name) {
+                case "children":
+                    {
+                        const { children } = yield import("@microsoft/fast-element");
+                        externalValues.push(children(propName));
+                    }
+                    break;
+                case "slotted":
+                    {
+                        const { slotted } = yield import("@microsoft/fast-element");
+                        externalValues.push(slotted(propName));
+                    }
+                    break;
+                case "ref":
+                    {
+                        const { ref } = yield import("@microsoft/fast-element");
+                        externalValues.push(ref(propName));
+                    }
+                    break;
+            }
+        });
+    }
+    /**
+     * Resolver of a data binding
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     * @param behaviorConfig - The binding behavior configuration object.
+     */
+    resolveDataBinding(innerHTML, strings, values, self = false, behaviorConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (behaviorConfig.subtype) {
+                case "content":
+                    {
+                        strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const binding = (x, c) => pathResolver(propName, self)(x, c);
+                        values.push(binding);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
+                    }
+                    break;
+                case "attribute":
+                    strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                    if (behaviorConfig.aspect === "@") {
+                        const bindingHTML = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const openingParenthesis = bindingHTML.indexOf("(");
+                        const closingParenthesis = bindingHTML.indexOf(")");
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex -
+                            (closingParenthesis - openingParenthesis) -
+                            1);
+                        const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
+                        const binding = (x, c) => pathResolver(propName, self)(x, c)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
+                            ? [pathResolver(arg)(x, c)]
+                            : []));
+                        values.push(binding);
+                    }
+                    else {
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const binding = (x, c) => pathResolver(propName, self)(x, c);
+                        values.push(binding);
+                    }
+                    yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
+                    break;
+                case "attributeDirective":
+                    {
+                        strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex -
+                            behaviorConfig.name.length -
+                            4));
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        yield this.resolveAttributeDirective(behaviorConfig.name, propName, values);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self);
+                    }
+                    break;
+            }
+        });
+    }
+    /**
+     * Resolver of the innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    resolveInnerHTML(innerHTML, strings, values, self = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const behaviorConfig = getNextBehavior(innerHTML);
+            if (behaviorConfig === null) {
+                strings.push(innerHTML);
+            }
+            else {
+                switch (behaviorConfig.type) {
+                    case "dataBinding":
+                        yield this.resolveDataBinding(innerHTML, strings, values, self, behaviorConfig);
+                        break;
+                    case "templateDirective":
+                        strings.push(innerHTML.slice(0, behaviorConfig.openingTagStartIndex));
+                        yield this.resolveTemplateDirective(behaviorConfig, values, innerHTML, self);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingTagEndIndex, innerHTML.length), strings, values, self);
+                        break;
+                }
+            }
+        });
+    }
+    /**
+     * Resolve all partial templates
+     * @param unresolvedInnerHTML - The innerHTML.
+     */
+    resolveAllPartials(unresolvedInnerHTML) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const allPartials = Object.entries(getAllPartials(unresolvedInnerHTML));
+            for (let i = 0, partialLength = allPartials.length; i < partialLength; i++) {
+                const { strings, values } = yield this.resolveStringsAndValues(allPartials[i][1].innerHTML);
+                this.partials[allPartials[i][0]] = this.resolveTemplateOrBehavior(strings, values);
+            }
+        });
+    }
+}
+/**
+ * A dictionary of custom element options
+ */
+TemplateElement.elementOptions = {};
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TemplateElement.prototype, "name", void 0);
+export { TemplateElement };

package/dist/esm/components/utilities.js

@@ -0,0 +1,370 @@
+const openClientSideBinding = "{";
+const closeClientSideBinding = "}";
+const openContentBinding = "{{";
+const closeContentBinding = "}}";
+const openUnescapedBinding = "{{{";
+const closeUnescapedBinding = "}}}";
+const openTagStart = "<f-";
+const tagEnd = ">";
+const closeTagStart = "</f-";
+const attributeDirectivePrefix = "f-";
+const startInnerHTMLDiv = `<div :innerHTML="{{`;
+const startInnerHTMLDivLength = startInnerHTMLDiv.length;
+const endInnerHTMLDiv = `}}"></div>`;
+const endInnerHTMLDivLength = endInnerHTMLDiv.length;
+/**
+ * Get the index of the next matching tag
+ * @param openingTagStartSlice - The slice starting from the opening tag
+ * @param openingTag - The opening tag string
+ * @param closingTag - The closing tag
+ * @param openingTagStartIndex - The opening tag start index derived from the innerHTML
+ * @returns index
+ */
+export function getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex) {
+    let tagCount = 1;
+    let matchingCloseTagIndex = -1;
+    const openingTagLength = openingTag.length;
+    const closingTagLength = closingTag.length;
+    let nextSlice = openingTagStartSlice.slice(openingTagLength);
+    let nextOpenTag = nextSlice.indexOf(openingTag);
+    let nextCloseTag = nextSlice.indexOf(closingTag);
+    let tagOffset = openingTagStartIndex + openingTagLength;
+    do {
+        // if a closing tag has been found for the last open tag, decrement the tag count
+        if (nextOpenTag > nextCloseTag || nextOpenTag === -1) {
+            tagCount--;
+            if (tagCount === 0) {
+                matchingCloseTagIndex = nextCloseTag + tagOffset;
+                break;
+            }
+            tagOffset += nextCloseTag + closingTagLength;
+            nextSlice = nextSlice.slice(nextCloseTag + closingTagLength);
+            nextOpenTag = nextSlice.indexOf(openingTag);
+            nextCloseTag = nextSlice.indexOf(closingTag);
+        }
+        else if (nextOpenTag !== -1) {
+            tagCount++;
+            tagOffset += nextOpenTag + openingTagLength;
+            nextSlice = nextSlice.slice(nextOpenTag + openingTagLength);
+            nextOpenTag = nextSlice.indexOf(openingTag);
+            nextCloseTag = nextSlice.indexOf(closingTag);
+        }
+        if (tagCount === 0) {
+            matchingCloseTagIndex = nextCloseTag + tagOffset;
+            break;
+        }
+    } while (tagCount > 0);
+    return matchingCloseTagIndex;
+}
+/**
+ * Get the next directive
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DirectiveBehaviorConfig - A configuration object
+ */
+function getNextDirectiveBehavior(innerHTML) {
+    const openingTagStartIndex = innerHTML.indexOf(openTagStart);
+    const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
+    const openingTagEndIndex = // account for f-when which may include >= or > as operators, but will always include a condition attr
+     openingTagStartSlice.indexOf(`"${tagEnd}`) + openingTagStartIndex + 2;
+    const directiveTag = innerHTML
+        .slice(openingTagStartIndex + 3, openingTagEndIndex - 1)
+        .split(" ")[0];
+    const directiveValue = getNextDataBindingBehavior(innerHTML);
+    const openingTag = `${openTagStart}${directiveTag}`;
+    const closingTag = `${closeTagStart}${directiveTag}${tagEnd}`;
+    const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex);
+    return {
+        type: "templateDirective",
+        name: directiveTag,
+        value: innerHTML.slice(directiveValue.openingEndIndex, directiveValue.closingStartIndex),
+        openingTagStartIndex,
+        openingTagEndIndex,
+        closingTagStartIndex: matchingCloseTagIndex,
+        closingTagEndIndex: matchingCloseTagIndex + closingTag.length,
+    };
+}
+/**
+ * Determine if this binding is an attribute binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param openingStartIndex - The index of the binding opening marker
+ * @returns boolean
+ */
+function isAttribute(innerHTML, openingStartIndex) {
+    return innerHTML.slice(openingStartIndex - 2, openingStartIndex - 1) === "=";
+}
+/**
+ * Determine if this binding is an attribute directive binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param openingStartIndex - The index of the binding opening marker
+ * @returns boolean
+ */
+function isAttributeDirective(innerHTML, openingStartIndex) {
+    const splitHTML = innerHTML.slice(0, openingStartIndex - 2).split(" ");
+    return splitHTML[splitHTML.length - 1].startsWith(attributeDirectivePrefix);
+}
+/**
+ * Get the attribute binding config
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param config - The base configuration of the binding
+ * @returns AttributeDataBindingBehaviorConfig
+ */
+function getAttributeDataBindingConfig(innerHTML, config) {
+    const splitInnerHTML = innerHTML.slice(0, config.openingStartIndex).split(" ");
+    const firstCharOfAttribute = splitInnerHTML[splitInnerHTML.length - 1][0];
+    const aspect = firstCharOfAttribute === "?" ||
+        firstCharOfAttribute === "@" ||
+        firstCharOfAttribute === ":"
+        ? firstCharOfAttribute
+        : null;
+    return Object.assign(Object.assign({}, config), { subtype: "attribute", aspect });
+}
+/**
+ * Get the attribute directive binding config
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param config - The base configuration of the binding
+ * @returns AttributeDirectiveBindingBehaviorConfig
+ */
+function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
+    const splitInnerHTML = innerHTML.slice(0, config.openingStartIndex).split(" ");
+    const lastItem = splitInnerHTML[splitInnerHTML.length - 1];
+    const equals = lastItem.indexOf("=");
+    const name = lastItem.slice(2, equals);
+    return Object.assign(Object.assign({}, config), { subtype: "attributeDirective", name: name });
+}
+/**
+ * Get the content data binding config
+ * @param config - The base configuration of the binding
+ * @returns ContentDataBindingBehaviorConfig
+ */
+function getContentDataBindingConfig(config) {
+    return Object.assign(Object.assign({}, config), { subtype: "content" });
+}
+function getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML) {
+    // {{{}}} binding
+    const openingUnescapedStartIndex = innerHTML.indexOf(openUnescapedBinding);
+    const closingUnescapedStartIndex = innerHTML.indexOf(closeUnescapedBinding);
+    // {{}} binding
+    const openingContentStartIndex = innerHTML.indexOf(openContentBinding);
+    const closingContentStartIndex = innerHTML.indexOf(closeContentBinding);
+    // {} binding
+    const openingClientStartIndex = innerHTML.indexOf(openClientSideBinding);
+    const closingClientStartIndex = innerHTML.indexOf(closeClientSideBinding);
+    if (openingUnescapedStartIndex !== -1 &&
+        openingUnescapedStartIndex <= openingContentStartIndex &&
+        openingUnescapedStartIndex <= openingClientStartIndex) {
+        // is unescaped {{{}}}
+        return {
+            openingStartIndex: openingUnescapedStartIndex,
+            closingStartIndex: closingUnescapedStartIndex,
+            bindingType: "unescaped",
+        };
+    }
+    else if (openingContentStartIndex !== -1 &&
+        openingContentStartIndex <= openingClientStartIndex) {
+        // is default {{}}
+        return {
+            openingStartIndex: openingContentStartIndex,
+            closingStartIndex: closingContentStartIndex,
+            bindingType: "default",
+        };
+    }
+    // is client {}
+    return {
+        openingStartIndex: openingClientStartIndex,
+        closingStartIndex: closingClientStartIndex,
+        bindingType: "client",
+    };
+}
+/**
+ * Get the next data binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DataBindingBehaviorConfig - A configuration object
+ */
+function getNextDataBindingBehavior(innerHTML) {
+    const { openingStartIndex, closingStartIndex, bindingType } = getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML);
+    const bindingLength = bindingType === "client" ? 1 : bindingType === "default" ? 2 : 3;
+    const partialConfig = {
+        type: "dataBinding",
+        bindingType,
+        openingStartIndex,
+        openingEndIndex: openingStartIndex + bindingLength,
+        closingStartIndex,
+        closingEndIndex: closingStartIndex + bindingLength,
+    };
+    return isAttributeDirective(innerHTML, openingStartIndex)
+        ? getAttributeDirectiveDataBindingConfig(innerHTML, partialConfig)
+        : isAttribute(innerHTML, openingStartIndex)
+            ? getAttributeDataBindingConfig(innerHTML, partialConfig)
+            : getContentDataBindingConfig(partialConfig);
+}
+/**
+ * Get the next behavior
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
+ */
+export function getNextBehavior(innerHTML) {
+    const dataBindingOpen = innerHTML.indexOf(openClientSideBinding); // client side binding will capture all bindings starting with "{"
+    const directiveBindingOpen = innerHTML.indexOf(openTagStart);
+    if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
+        return null;
+    }
+    if (directiveBindingOpen !== -1 && dataBindingOpen > directiveBindingOpen) {
+        return getNextDirectiveBehavior(innerHTML);
+    }
+    return getNextDataBindingBehavior(innerHTML);
+}
+/**
+ * Gets all the partials with their IDs
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param offset - The index offset from the innerHTML
+ * @param partials - The partials found
+ * @returns {[key: string]: PartialTemplateConfig}
+ */
+export function getAllPartials(innerHTML, offset = 0, partials = {}) {
+    const openingTag = `${openTagStart}partial`;
+    const openingTagStartIndex = innerHTML.indexOf(openingTag);
+    if (openingTagStartIndex >= 0) {
+        const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
+        const closingTag = `${closeTagStart}partial${tagEnd}`;
+        const closingTagLength = closingTag.length;
+        const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex) + closingTagLength;
+        const startId = openingTagStartIndex + ' id="'.length + openingTag.length;
+        const endId = innerHTML.slice(startId).indexOf('"') + startId;
+        const id = innerHTML.slice(startId, endId);
+        const openingTagEndIndex = openingTagStartSlice.indexOf(tagEnd) + 1 + openingTagStartIndex;
+        const closingTagStartIndex = matchingCloseTagIndex - closingTagLength;
+        partials[id] = {
+            innerHTML: innerHTML.slice(openingTagEndIndex, closingTagStartIndex),
+            startIndex: openingTagEndIndex + offset,
+            endIndex: closingTagStartIndex + offset,
+        };
+        offset += matchingCloseTagIndex;
+        return getAllPartials(innerHTML.slice(matchingCloseTagIndex), offset, partials);
+    }
+    return partials;
+}
+/**
+ * Create a function to resolve a value from an object using a path with dot syntax.
+ * e.g. "foo.bar"
+ * @param path - The dot syntax path to an objects property.
+ * @param self - Where the first item in the path path refers to the item itself (used by repeat).
+ * @returns A function to access the value from a given path.
+ */
+export function pathResolver(path, self = false) {
+    let splitPath = path.split(".");
+    const usesContext = path.startsWith("../");
+    if (self && !usesContext) {
+        if (splitPath.length > 1) {
+            splitPath = splitPath.slice(1);
+        }
+        else {
+            return (accessibleObject) => {
+                return accessibleObject;
+            };
+        }
+    }
+    if (splitPath.length === 1 && !usesContext) {
+        return (accessibleObject) => {
+            return accessibleObject === null || accessibleObject === void 0 ? void 0 : accessibleObject[splitPath[0]];
+        };
+    }
+    return (accessibleObject, context) => {
+        if (usesContext) {
+            splitPath = [];
+            path.split("../").forEach(pathItem => {
+                if (pathItem === "") {
+                    splitPath.unshift("parent");
+                }
+                else {
+                    splitPath.push(...pathItem.split("."));
+                }
+            });
+            return splitPath.reduce((previousAccessors, pathItem) => {
+                return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
+            }, context);
+        }
+        return splitPath.reduce((previousAccessors, pathItem) => {
+            return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
+        }, accessibleObject);
+    };
+}
+/**
+ * Determine if the operand is a value (boolean, number, string) or an accessor.
+ * @param operand
+ */
+function isOperandValue(operand) {
+    try {
+        const value = JSON.parse(operand);
+        return {
+            value,
+            isValue: true,
+        };
+    }
+    catch (e) {
+        return {
+            value: operand,
+            isValue: false,
+        };
+    }
+}
+/**
+ * Get the operator used.
+ * @param value the binded value
+ * @returns Operator
+ */
+export function getOperator(value) {
+    if (value[0] === "!") {
+        return {
+            operator: "!",
+            left: value.slice(1),
+            right: null,
+            rightIsValue: null,
+        };
+    }
+    const split = value.split(" ");
+    if (split.length === 3) {
+        const operator = split[1];
+        const { value, isValue } = isOperandValue(split[2]);
+        return {
+            operator,
+            left: split[0],
+            right: isValue ? value : split[2],
+            rightIsValue: isValue,
+        };
+    }
+    return {
+        operator: "access",
+        left: value,
+        right: null,
+        rightIsValue: null,
+    };
+}
+/**
+ * This is the transform utility for rationalizing declarative HTML syntax
+ * with bindings in the ViewTemplate
+ * @param innerHTML The innerHTML to transform
+ * @param index The index to start the current slice of HTML to evaluate
+ */
+export function transformInnerHTML(innerHTML, index = 0) {
+    const sliceToEvaluate = innerHTML.slice(index);
+    const nextBinding = getNextBehavior(sliceToEvaluate);
+    let transformedInnerHTML = innerHTML;
+    if (nextBinding && nextBinding.type === "dataBinding") {
+        if (nextBinding.bindingType === "unescaped") {
+            transformedInnerHTML = `${innerHTML.slice(0, index)}${sliceToEvaluate.slice(0, nextBinding.openingStartIndex)}${startInnerHTMLDiv}${sliceToEvaluate.slice(nextBinding.openingStartIndex + 3, nextBinding.closingStartIndex)}${endInnerHTMLDiv}${sliceToEvaluate.slice(nextBinding.closingStartIndex + 3)}`;
+            return transformInnerHTML(transformedInnerHTML, index +
+                startInnerHTMLDivLength +
+                endInnerHTMLDivLength +
+                nextBinding.closingStartIndex -
+                3);
+        }
+        else if (nextBinding.bindingType === "client") {
+            return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingEndIndex);
+        }
+        return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingEndIndex);
+    }
+    else if (nextBinding) {
+        return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingTagEndIndex);
+    }
+    return transformedInnerHTML;
+}