@microsoft/fast-html 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist/esm/components/template.js

@@ -1,48 +1,120 @@
 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, pathResolver, } from "./utilities.js";
+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(Object.assign({}, 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((value) => __awaiter(this, void 0, void 0, function* () {
+            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 } = yield 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) {
+    resolveStringsAndValues(rootPropertyName, innerHTML, self = false, parentContext, level, schema, 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(rootPropertyName, innerHTML, strings, values, self, parentContext, level, schema, observerMap);
             strings.raw = strings.map(value => String.raw({ raw: value }));
             return {
                 strings,
@@ -56,44 +128,34 @@ 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;
+    resolveTemplateDirective(rootPropertyName, behaviorConfig, externalValues, innerHTML, self = false, parentContext, level, schema, observerMap) {
         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");
-                        externalValues.push(when(x => pathResolver(behaviorConfig.value, self)(x), this.resolveTemplateOrBehavior(strings, values)));
-                    }
+                case "when": {
+                    const expressionChain = getExpressionChain(behaviorConfig.value);
+                    const whenLogic = resolveWhen(rootPropertyName, expressionChain, parentContext, level, schema);
+                    const { strings, values } = yield 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 { 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)));
-                    }
+                }
+                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 } = yield 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;
-                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]));
-                    }
                 }
             }
         });
@@ -107,24 +169,31 @@ 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": {
+                    externalValues.push(children(propName));
                     break;
-                case "slotted":
-                    {
-                        const { slotted } = yield import("@microsoft/fast-element");
-                        externalValues.push(slotted(propName));
+                }
+                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),
+                            });
+                        }
                     }
+                    externalValues.push(slotted(slottedOption));
                     break;
-                case "ref":
-                    {
-                        const { ref } = yield import("@microsoft/fast-element");
-                        externalValues.push(ref(propName));
-                    }
+                }
+                case "ref": {
+                    externalValues.push(ref(propName));
                     break;
+                }
             }
         });
     }
@@ -135,43 +204,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) {
+    resolveDataBinding(rootPropertyName, innerHTML, strings, values, self = false, behaviorConfig, parentContext, level, schema, 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) => pathResolver(propName, self)(x);
-                        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 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);
+                    yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
                     break;
-                case "attribute":
+                }
+                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);
+                        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 binding = (x) => pathResolver(propName, self)(x);
-                        values.push(binding);
+                        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);
                     }
-                    yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
+                    yield 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);
-                        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(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
                     break;
+                }
             }
         });
     }
@@ -181,8 +267,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(rootPropertyName, innerHTML, strings, values, self = false, parentContext, level, schema, observerMap) {
         return __awaiter(this, void 0, void 0, function* () {
             const behaviorConfig = getNextBehavior(innerHTML);
             if (behaviorConfig === null) {
@@ -190,32 +277,33 @@ class TemplateElement extends FASTElement {
             }
             else {
                 switch (behaviorConfig.type) {
-                    case "dataBinding":
-                        yield this.resolveDataBinding(innerHTML, strings, values, self, behaviorConfig);
+                    case "dataBinding": {
+                        yield this.resolveDataBinding(rootPropertyName, innerHTML, strings, values, self, behaviorConfig, parentContext, level, schema, 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(rootPropertyName, behaviorConfig, values, innerHTML, self, parentContext, level, schema, observerMap);
+                        yield 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)