@microsoft/fast-html 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist/esm/components/template.js

@@ -1,54 +1,124 @@
-import { __awaiter, __decorate, __metadata } from "tslib";
-import { attr, FAST, FASTElement, fastElementRegistry, ViewTemplate, } from "@microsoft/fast-element";
-import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
-import { getAllPartials, getNextBehavior, getOperator, pathResolver, } from "./utilities.js";
+import { __decorate, __metadata } from "tslib";
+import { attr, children, elements, FAST, FASTElement, FASTElementDefinition, fastElementRegistry, HydratableElementController, ref, repeat, slotted, ViewTemplate, when, } from "@microsoft/fast-element";
+import "@microsoft/fast-element/install-hydratable-view-templates.js";
+import { ObserverMap } from "./observer-map.js";
+import { Schema } from "./schema.js";
+import { bindingResolver, getExpressionChain, getNextBehavior, getRootPropertyName, resolveWhen, transformInnerHTML, } from "./utilities.js";
+/**
+ * Values for the observerMap element option.
+ */
+export const ObserverMapOption = {
+    all: "all",
+};
 /**
  * The <f-template> custom element that will provide view logic to the element
  */
 class TemplateElement extends FASTElement {
+    /**
+     * Configure lifecycle callbacks for hydration events.
+     *
+     * @param callbacks - Lifecycle callbacks to configure.
+     * @returns The {@link TemplateElement} class.
+     */
+    static config(callbacks) {
+        TemplateElement.lifecycleCallbacks = callbacks;
+        // Pass the hydration-specific callbacks to HydratableElementController
+        HydratableElementController.config({ ...callbacks });
+        return this;
+    }
+    /**
+     * Set options for custom elements.
+     *
+     * @param elementOptions - A dictionary of custom element options
+     * @returns The TemplateElement class.
+     */
+    static options(elementOptions = {}) {
+        const result = {};
+        for (const key in elementOptions) {
+            const value = elementOptions[key];
+            result[key] = {
+                observerMap: value.observerMap,
+            };
+        }
+        TemplateElement.elementOptions = result;
+        HydratableElementController.install();
+        return this;
+    }
     constructor() {
-        super(...arguments);
-        this.partials = {};
+        super();
+        // Ensure elementOptions is initialized if it's empty
+        if (!TemplateElement.elementOptions ||
+            Object.keys(TemplateElement.elementOptions).length === 0) {
+            TemplateElement.options();
+        }
+    }
+    /**
+     * Set options for a custom element
+     * @param name - The name of the custom element to set options for.
+     */
+    static setOptions(name) {
+        if (!TemplateElement.elementOptions[name]) {
+            TemplateElement.elementOptions[name] = TemplateElement.defaultElementOptions;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.name) {
-            this.$fastController.definition.registry
-                .whenDefined(this.name)
-                .then((value) => __awaiter(this, void 0, void 0, function* () {
-                const registeredFastElement = fastElementRegistry.getByType(value);
-                const template = this.getElementsByTagName("template").item(0);
-                if (template) {
-                    yield this.resolveAllPartials(this.innerHTML);
-                    const { strings, values } = yield this.resolveStringsAndValues(this.innerHTML);
-                    if (registeredFastElement) {
-                        // all new elements will get the updated template
-                        registeredFastElement.template =
-                            this.resolveTemplateOrBehavior(strings, values);
-                    }
-                }
-                else {
-                    throw FAST.error(2000 /* Message.noTemplateProvided */, { name: this.name });
-                }
-            }));
+        const name = this.name;
+        if (typeof name !== "string") {
+            return;
         }
+        this.schema = new Schema(name);
+        FASTElementDefinition.registerAsync(name).then(async (value) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            (_b = (_a = TemplateElement.lifecycleCallbacks).elementDidRegister) === null || _b === void 0 ? void 0 : _b.call(_a, name);
+            if (!((_c = TemplateElement.elementOptions) === null || _c === void 0 ? void 0 : _c[name])) {
+                TemplateElement.setOptions(name);
+            }
+            if (((_d = TemplateElement.elementOptions[name]) === null || _d === void 0 ? void 0 : _d.observerMap) === "all") {
+                this.observerMap = new ObserverMap(value.prototype, this.schema);
+            }
+            const registeredFastElement = fastElementRegistry.getByType(value);
+            const template = this.getElementsByTagName("template").item(0);
+            if (template) {
+                // Callback: Before template has been evaluated and assigned
+                (_f = (_e = TemplateElement.lifecycleCallbacks).templateWillUpdate) === null || _f === void 0 ? void 0 : _f.call(_e, name);
+                const innerHTML = transformInnerHTML(this.innerHTML);
+                // Cache paths during template processing (pass undefined if observerMap is not available)
+                const { strings, values } = await this.resolveStringsAndValues(null, innerHTML, false, null, 0, this.schema, this.observerMap);
+                // Define the root properties cached in the observer map as observable (only if observerMap exists)
+                (_g = this.observerMap) === null || _g === void 0 ? void 0 : _g.defineProperties();
+                if (registeredFastElement) {
+                    // Attach lifecycle callbacks to the definition before assigning template
+                    // This allows the Observable notification to trigger the callbacks
+                    registeredFastElement.lifecycleCallbacks = {
+                        templateDidUpdate: TemplateElement.lifecycleCallbacks.templateDidUpdate,
+                        elementDidDefine: TemplateElement.lifecycleCallbacks.elementDidDefine,
+                    };
+                    // All new elements will get the updated template
+                    // This assignment triggers the Observable notification → callbacks fire
+                    registeredFastElement.template = this.resolveTemplateOrBehavior(strings, values);
+                }
+            }
+            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.
+     * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    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,
-            };
-        });
+    async resolveStringsAndValues(rootPropertyName, innerHTML, self = false, parentContext, level, schema, observerMap) {
+        const strings = [];
+        const values = []; // these can be bindings, directives, etc.
+        await this.resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self, parentContext, level, schema, observerMap);
+        strings.raw = strings.map(value => String.raw({ raw: value }));
+        return {
+            strings,
+            values,
+        };
     }
     /**
      * Resolve a template or behavior
@@ -56,103 +126,35 @@ class TemplateElement extends FASTElement {
      * @param values - The interpreted values.
      */
     resolveTemplateOrBehavior(strings, values) {
-        return ViewTemplate.create(strings, values, DOMPolicy.create());
+        return ViewTemplate.create(strings, values);
     }
     /**
      * Resolve a template directive
      * @param behaviorConfig - The directive behavior configuration object.
      * @param externalValues - The interpreted values from the parent.
      * @param innerHTML - The innerHTML.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    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) => pathResolver(left, self)(x);
-                        switch (operator) {
-                            case "!":
-                                whenLogic = (x) => !pathResolver(left, self)(x);
-                                break;
-                            case "==":
-                                whenLogic = (x) => pathResolver(left, self)(x) ==
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case "!=":
-                                whenLogic = (x) => pathResolver(left, self)(x) !=
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case "&&":
-                            case "&amp;&amp;":
-                                whenLogic = (x) => pathResolver(left, self)(x) &&
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case "||":
-                                whenLogic = (x) => pathResolver(left, self)(x) ||
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case ">=":
-                                whenLogic = (x) => pathResolver(left, self)(x) >=
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case ">":
-                                whenLogic = (x) => pathResolver(left, self)(x) >
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case "<=":
-                                whenLogic = (x) => pathResolver(left, self)(x) <=
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                break;
-                            case "<":
-                                whenLogic = (x) => pathResolver(left, self)(x) <
-                                    (rightIsValue
-                                        ? right
-                                        : pathResolver(right, self)(x));
-                                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 => pathResolver(valueAttr[2], self)(x), 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 => pathResolver(behaviorConfig.value, self)(x), () => this.partials[partial]));
-                    }
-                }
+    async resolveTemplateDirective(rootPropertyName, behaviorConfig, externalValues, innerHTML, self = false, parentContext, level, schema, observerMap) {
+        switch (behaviorConfig.name) {
+            case "when": {
+                const expressionChain = getExpressionChain(behaviorConfig.value);
+                const whenLogic = resolveWhen(rootPropertyName, expressionChain, parentContext, level, schema);
+                const { strings, values } = await this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), self, parentContext, level, schema, observerMap);
+                externalValues.push(when(whenLogic, this.resolveTemplateOrBehavior(strings, values)));
+                break;
             }
-        });
+            case "repeat": {
+                const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
+                const updatedLevel = level + 1;
+                rootPropertyName = getRootPropertyName(rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name);
+                const binding = bindingResolver(null, rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name, schema, valueAttr[0], level);
+                const { strings, values } = await this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true, valueAttr[0], updatedLevel, schema, observerMap);
+                externalValues.push(repeat((x, c) => binding(x, c), this.resolveTemplateOrBehavior(strings, values)));
+                break;
+            }
+        }
     }
     /**
      * Resolve a template directive
@@ -160,29 +162,34 @@ class TemplateElement extends FASTElement {
      * @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));
+    async resolveAttributeDirective(name, propName, externalValues) {
+        switch (name) {
+            case "children": {
+                externalValues.push(children(propName));
+                break;
+            }
+            case "slotted": {
+                const parts = propName.trim().split(" filter ");
+                const slottedOption = {
+                    property: parts[0],
+                };
+                if (parts[1]) {
+                    if (parts[1].startsWith("elements(")) {
+                        let params = parts[1].replace("elements(", "");
+                        params = params.substring(0, params.lastIndexOf(")"));
+                        Object.assign(slottedOption, {
+                            filter: elements(params || undefined),
+                        });
                     }
-                    break;
+                }
+                externalValues.push(slotted(slottedOption));
+                break;
             }
-        });
+            case "ref": {
+                externalValues.push(ref(propName));
+                break;
+            }
+        }
     }
     /**
      * Resolver of a data binding
@@ -191,45 +198,60 @@ class TemplateElement extends FASTElement {
      * @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.
+     * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    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) => pathResolver(propName, self)(x);
-                        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 propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex - 2);
-                        const binding = (x) => pathResolver(propName, self)(x)();
-                        values.push(binding);
-                    }
-                    else {
-                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                        const binding = (x) => pathResolver(propName, self)(x);
-                        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;
+    async resolveDataBinding(rootPropertyName, innerHTML, strings, values, self = false, behaviorConfig, parentContext, level, schema, observerMap) {
+        switch (behaviorConfig.subtype) {
+            case "content": {
+                strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                const type = "access";
+                const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                const contentBinding = (x, c) => binding(x, c);
+                values.push(contentBinding);
+                await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                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 type = "event";
+                    rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                    const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
+                    const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                    const attributeBinding = (x, c) => binding(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
+                        ? [
+                            bindingResolver(strings.join(""), rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
+                        ]
+                        : []));
+                    values.push(attributeBinding);
+                }
+                else {
+                    const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                    const type = "access";
+                    rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                    const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                    const attributeBinding = (x, c) => binding(x, c);
+                    values.push(attributeBinding);
+                }
+                await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                break;
+            }
+            case "attributeDirective": {
+                strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex - behaviorConfig.name.length - 4));
+                const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                await this.resolveAttributeDirective(behaviorConfig.name, propName, values);
+                await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                break;
+            }
+        }
     }
     /**
      * Resolver of the innerHTML string
@@ -237,41 +259,41 @@ class TemplateElement extends FASTElement {
      * @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 observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    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;
+    async resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self = false, parentContext, level, schema, observerMap) {
+        const behaviorConfig = getNextBehavior(innerHTML);
+        if (behaviorConfig === null) {
+            strings.push(innerHTML);
+        }
+        else {
+            switch (behaviorConfig.type) {
+                case "dataBinding": {
+                    await this.resolveDataBinding(rootPropertyName, innerHTML, strings, values, self, behaviorConfig, parentContext, level, schema, observerMap);
+                    break;
+                }
+                case "templateDirective": {
+                    strings.push(innerHTML.slice(0, behaviorConfig.openingTagStartIndex));
+                    await this.resolveTemplateDirective(rootPropertyName, behaviorConfig, values, innerHTML, self, parentContext, level, schema, observerMap);
+                    await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingTagEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                    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 = {};
+/**
+ * Default element options
+ */
+TemplateElement.defaultElementOptions = {};
+/**
+ * Lifecycle callbacks for hydration events
+ */
+TemplateElement.lifecycleCallbacks = {};
 __decorate([
     attr,
     __metadata("design:type", String)