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

package/dist/esm/components/template.js

@@ -0,0 +1,259 @@
+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, getExpressionChain, getNextBehavior, pathResolver, resolveWhen, 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 expressionChain = getExpressionChain(behaviorConfig.value);
+                        const whenLogic = resolveWhen(self, expressionChain);
+                        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 };