@microsoft/fast-html 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/esm/components/template.js

@@ -1,7 +1,8 @@
 import { __awaiter, __decorate, __metadata } from "tslib";
 import { attr, elements, FAST, FASTElement, FASTElementDefinition, fastElementRegistry, HydratableElementController, ViewTemplate, } from "@microsoft/fast-element";
 import "@microsoft/fast-element/install-hydratable-view-templates.js";
-import { getAllPartials, getExpressionChain, getNextBehavior, pathResolver, resolveWhen, transformInnerHTML, } from "./utilities.js";
+import { bindingResolver, getAllPartials, getExpressionChain, getNextBehavior, resolveWhen, transformInnerHTML, } from "./utilities.js";
+import { ObserverMap } from "./observer-map.js";
 /**
  * The <f-template> custom element that will provide view logic to the element
  */
@@ -13,6 +14,7 @@ class TemplateElement extends FASTElement {
             const value = elementOptions[key];
             result[key] = {
                 shadowOptions: (_a = value.shadowOptions) !== null && _a !== void 0 ? _a : TemplateElement.defaultElementOptions.shadowOptions,
+                observerMap: value.observerMap,
             };
         }
         this.elementOptions = result;
@@ -22,7 +24,9 @@ class TemplateElement extends FASTElement {
     constructor() {
         super();
         this.partials = {};
-        if (!!TemplateElement.elementOptions) {
+        // Ensure elementOptions is initialized if it's empty
+        if (!TemplateElement.elementOptions ||
+            Object.keys(TemplateElement.elementOptions).length === 0) {
             TemplateElement.options();
         }
     }
@@ -31,30 +35,37 @@ class TemplateElement extends FASTElement {
      * @param name - The name of the custom element to set options for.
      */
     static setOptions(name) {
-        if (!!!TemplateElement.elementOptions[name]) {
+        if (!TemplateElement.elementOptions[name]) {
             TemplateElement.elementOptions[name] = TemplateElement.defaultElementOptions;
         }
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.name) {
+        if (typeof this.name === "string") {
             FASTElementDefinition.registerAsync(this.name).then((value) => __awaiter(this, void 0, void 0, function* () {
-                var _a, _b;
-                if (this.name && !!!((_a = TemplateElement.elementOptions) === null || _a === void 0 ? void 0 : _a[this.name])) {
+                var _a, _b, _c, _d;
+                if (!((_a = TemplateElement.elementOptions) === null || _a === void 0 ? void 0 : _a[this.name])) {
                     TemplateElement.setOptions(this.name);
                 }
+                if (((_b = TemplateElement.elementOptions[this.name]) === null || _b === void 0 ? void 0 : _b.observerMap) ===
+                    "all") {
+                    this.observerMap = new ObserverMap(value.prototype);
+                }
                 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);
+                    // Cache paths during template processing (pass undefined if observerMap is not available)
+                    const { strings, values } = yield this.resolveStringsAndValues(innerHTML, false, null, 0, this.observerMap);
+                    // Define the root properties cached in the observer map as observable (only if observerMap exists)
+                    (_c = this.observerMap) === null || _c === void 0 ? void 0 : _c.defineProperties();
                     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 =
-                            (_b = TemplateElement.elementOptions[this.name]) === null || _b === void 0 ? void 0 : _b.shadowOptions;
+                            (_d = TemplateElement.elementOptions[this.name]) === null || _d === void 0 ? void 0 : _d.shadowOptions;
                     }
                 }
                 else {
@@ -67,12 +78,13 @@ class TemplateElement extends FASTElement {
      * 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) {
+    resolveStringsAndValues(innerHTML, self = false, parentContext, level, observerMap) {
         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);
+            yield this.resolveInnerHTML(innerHTML, strings, values, self, parentContext, level, observerMap);
             strings.raw = strings.map(value => String.raw({ raw: value }));
             return {
                 strings,
@@ -93,28 +105,30 @@ class TemplateElement extends FASTElement {
      * @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) {
+    resolveTemplateDirective(behaviorConfig, externalValues, innerHTML, self = false, parentContext, level, observerMap) {
         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), self);
-                        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)));
-                    }
+                case "when": {
+                    const { when } = yield import("@microsoft/fast-element");
+                    const expressionChain = getExpressionChain(behaviorConfig.value);
+                    const whenLogic = resolveWhen(self, expressionChain, parentContext, level, observerMap);
+                    const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), self, parentContext, level, observerMap);
+                    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)));
-                    }
+                }
+                case "repeat": {
+                    const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
+                    const updatedLevel = level + 1;
+                    const { repeat } = yield import("@microsoft/fast-element");
+                    const binding = bindingResolver(valueAttr[2], self, parentContext, "repeat", observerMap !== null && observerMap !== void 0 ? observerMap : null, valueAttr[0], level);
+                    const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true, valueAttr[0], updatedLevel, observerMap);
+                    externalValues.push(repeat((x, c) => binding(x, c), this.resolveTemplateOrBehavior(strings, values)));
                     break;
+                }
                 case "apply": {
                     const openingTag = innerHTML.slice(behaviorConfig.openingTagStartIndex, behaviorConfig.openingTagEndIndex);
                     const partial = (_a = openingTag
@@ -124,7 +138,8 @@ class TemplateElement extends FASTElement {
                     })) === 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]));
+                        const binding = bindingResolver(behaviorConfig.value, self, parentContext, "access", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level);
+                        externalValues.push(when((x, c) => binding(x, c), () => this.partials[partial]));
                     }
                 }
             }
@@ -139,37 +154,34 @@ class TemplateElement extends FASTElement {
     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));
-                    }
+                case "children": {
+                    const { children } = yield import("@microsoft/fast-element");
+                    externalValues.push(children(propName));
                     break;
-                case "slotted":
-                    {
-                        const { slotted } = yield import("@microsoft/fast-element");
-                        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),
-                                });
-                            }
+                }
+                case "slotted": {
+                    const { slotted } = yield import("@microsoft/fast-element");
+                    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),
+                            });
                         }
-                        externalValues.push(slotted(slottedOption));
                     }
+                    externalValues.push(slotted(slottedOption));
                     break;
-                case "ref":
-                    {
-                        const { ref } = yield import("@microsoft/fast-element");
-                        externalValues.push(ref(propName));
-                    }
+                }
+                case "ref": {
+                    const { ref } = yield import("@microsoft/fast-element");
+                    externalValues.push(ref(propName));
                     break;
+                }
             }
         });
     }
@@ -180,20 +192,21 @@ 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) {
+    resolveDataBinding(innerHTML, strings, values, self = false, behaviorConfig, parentContext, level, observerMap) {
         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);
-                    }
+                case "content": {
+                    strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                    const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                    const binding = bindingResolver(propName, self, parentContext, "access", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level);
+                    const contentBinding = (x, c) => binding(x, c);
+                    values.push(contentBinding);
+                    yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, observerMap);
                     break;
-                case "attribute":
+                }
+                case "attribute": {
                     strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
                     if (behaviorConfig.aspect === "@") {
                         const bindingHTML = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
@@ -203,28 +216,30 @@ class TemplateElement extends FASTElement {
                             (closingParenthesis - openingParenthesis) -
                             1);
                         const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
-                        const binding = (x, c) => pathResolver(propName, self)(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
-                            ? [pathResolver(arg)(x, c)]
+                        const binding = bindingResolver(propName, self, parentContext, "event", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level);
+                        const attributeBinding = (x, c) => binding(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
+                            ? [
+                                bindingResolver(arg, self, parentContext, "event", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level)(x, c),
+                            ]
                             : []));
-                        values.push(binding);
+                        values.push(attributeBinding);
                     }
                     else {
                         const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                        const binding = (x, c) => pathResolver(propName, self)(x, c);
-                        values.push(binding);
+                        const binding = bindingResolver(propName, self, parentContext, "access", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level);
+                        const attributeBinding = (x, c) => binding(x, c);
+                        values.push(attributeBinding);
                     }
-                    yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
+                    yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, observerMap);
                     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);
-                    }
+                }
+                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, parentContext, level, observerMap);
                     break;
+                }
             }
         });
     }
@@ -234,8 +249,9 @@ 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) {
+    resolveInnerHTML(innerHTML, strings, values, self = false, parentContext, level, observerMap) {
         return __awaiter(this, void 0, void 0, function* () {
             const behaviorConfig = getNextBehavior(innerHTML);
             if (behaviorConfig === null) {
@@ -243,14 +259,16 @@ class TemplateElement extends FASTElement {
             }
             else {
                 switch (behaviorConfig.type) {
-                    case "dataBinding":
-                        yield this.resolveDataBinding(innerHTML, strings, values, self, behaviorConfig);
+                    case "dataBinding": {
+                        yield this.resolveDataBinding(innerHTML, strings, values, self, behaviorConfig, parentContext, level, observerMap);
                         break;
-                    case "templateDirective":
+                    }
+                    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);
+                        yield this.resolveTemplateDirective(behaviorConfig, values, innerHTML, self, parentContext, level, observerMap);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingTagEndIndex, innerHTML.length), strings, values, self, parentContext, level, observerMap);
                         break;
+                    }
                 }
             }
         });
@@ -263,7 +281,7 @@ class TemplateElement extends FASTElement {
         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);
+                const { strings, values } = yield this.resolveStringsAndValues(allPartials[i][1].innerHTML, undefined, null, 0, this.observerMap);
                 this.partials[allPartials[i][0]] = this.resolveTemplateOrBehavior(strings, values);
             }
         });