@microsoft/fast-html 1.0.0-alpha.19 → 1.0.0-alpha.20

package/dist/esm/components/schema.js

@@ -1,9 +1,9 @@
 // The context, in most cases the array property e.g. users
-const fastContextMetaData = "$fast_context";
+export const fastContextMetaData = "$fast_context";
 // The list of contexts preceeding this context, the first of which should be the root property
-const fastContextsMetaData = "$fast_parent_contexts";
-const defsPropertyName = "$defs";
-const refPropertyName = "$ref";
+export const fastContextsMetaData = "$fast_parent_contexts";
+export const defsPropertyName = "$defs";
+export const refPropertyName = "$ref";
 /**
  * A constructed JSON schema from a template
  */
@@ -20,7 +20,7 @@ export class Schema {
      * @param config RegisterPathConfig
      */
     addPath(config) {
-        var _a, _b;
+        var _a, _b, _c;
         const splitPath = this.getSplitPath(config.pathConfig.path);
         let schema = this.jsonSchemaMap.get(config.rootPropertyName);
         // Create a root level property JSON
@@ -31,27 +31,39 @@ export class Schema {
         switch (config.pathConfig.type) {
             case "default":
             case "access": {
-                if (config.pathConfig.currentContext === null) {
-                    this.addPropertiesToAnObject(schema, splitPath.slice(1), config.pathConfig.currentContext);
-                }
-                else {
-                    this.addPropertiesToAContext((_a = schema === null || schema === void 0 ? void 0 : schema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[splitPath[0]], splitPath.slice(1), config.pathConfig.currentContext);
+                if (splitPath.length > 1) {
+                    if (config.pathConfig.currentContext === null) {
+                        this.addPropertiesToAnObject(schema, splitPath.slice(1), config.pathConfig.currentContext);
+                    }
+                    else {
+                        if (!((_a = schema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[splitPath[0]])) {
+                            schema[defsPropertyName] = {
+                                [splitPath[0]]: {},
+                            };
+                        }
+                        this.addPropertiesToAContext(schema[defsPropertyName][splitPath[0]], splitPath.slice(1), config.pathConfig.currentContext);
+                    }
                 }
                 break;
             }
             case "repeat": {
-                this.addContext(schema, splitPath[splitPath.length - 1], // example items
+                this.addContext(schema, splitPath.at(-1), // example items
                 config.pathConfig.currentContext, // example item
                 config.pathConfig.parentContext);
                 if (splitPath.length > 2) {
                     let updatedSchema = schema;
-                    if (config.pathConfig.parentContext) {
+                    const hasParentContext = !!config.pathConfig.parentContext;
+                    if (hasParentContext) {
                         updatedSchema = this.addPropertiesToAnObject((_b = schema[defsPropertyName]) === null || _b === void 0 ? void 0 : _b[config.pathConfig.parentContext], splitPath.slice(1, -1), config.pathConfig.parentContext);
                     }
-                    this.addPropertiesToAnObject(updatedSchema, splitPath.slice(-1), config.pathConfig.currentContext, "array");
+                    this.addPropertiesToAnObject(updatedSchema, hasParentContext ? splitPath.slice(2) : splitPath.slice(1), config.pathConfig.currentContext, "array");
                 }
                 else if (splitPath.length > 1) {
-                    this.addPropertiesToAnObject(schema, splitPath.slice(1), config.pathConfig.currentContext, "array");
+                    let schemaDefinition;
+                    if (config.pathConfig.parentContext) {
+                        schemaDefinition = (_c = schema === null || schema === void 0 ? void 0 : schema[defsPropertyName]) === null || _c === void 0 ? void 0 : _c[config.pathConfig.parentContext];
+                    }
+                    this.addPropertiesToAnObject(schemaDefinition !== null && schemaDefinition !== void 0 ? schemaDefinition : schema, splitPath.slice(1), config.pathConfig.currentContext, "array");
                 }
                 else {
                     schema.type = "array";
@@ -70,6 +82,13 @@ export class Schema {
         var _a;
         return (_a = this.jsonSchemaMap.get(rootPropertyName)) !== null && _a !== void 0 ? _a : null;
     }
+    /**
+     * Gets root properties
+     * @returns IterableIterator<string>
+     */
+    getRootProperties() {
+        return this.jsonSchemaMap.keys();
+    }
     /**
      * Get a path split into property names
      * @param path The dot syntax path e.g. a.b.c
@@ -105,10 +124,10 @@ export class Schema {
      */
     addPropertiesToAContext(schema, splitPath, context) {
         schema.type = "object";
-        if (schema.properties) {
+        if (schema.properties && !schema.properties[splitPath[0]]) {
             schema.properties[splitPath[0]] = {};
         }
-        else {
+        else if (!schema.properties) {
             schema.properties = {
                 [splitPath[0]]: {},
             };
@@ -126,15 +145,15 @@ export class Schema {
      */
     addPropertiesToAnObject(schema, splitPath, context, type = "object") {
         schema.type = "object";
-        if (schema.properties) {
+        if (schema.properties && !schema.properties[splitPath[0]]) {
             schema.properties[splitPath[0]] = {};
         }
-        else {
+        else if (!schema.properties) {
             schema.properties = {
                 [splitPath[0]]: {},
             };
         }
-        if (context === null && type === "object" && splitPath.length > 1) {
+        if (type === "object" && splitPath.length > 1) {
             return this.addPropertiesToAnObject(schema.properties[splitPath[0]], splitPath.slice(1), context, type);
         }
         else if (type === "array") {
@@ -190,7 +209,7 @@ export class Schema {
         if (parentContext === null) {
             return [null, ...contexts];
         }
-        const parentParentContext = (_a = schema === null || schema === void 0 ? void 0 : schema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[parentContext].$fast_parent_contexts;
+        const parentParentContext = (_a = schema === null || schema === void 0 ? void 0 : schema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[parentContext][fastContextsMetaData];
         return this.getParentContexts(schema, parentParentContext.at(-1), [parentContext, ...contexts]);
     }
 }

package/dist/esm/components/schema.spec.js

@@ -17,6 +17,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "default",
                 path: "a",
                 currentContext: null,
+                parentContext: null,
             }
         });
         const schemaA = schema.getSchema("a");
@@ -32,6 +33,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "default",
                 path: "a.b",
                 currentContext: null,
+                parentContext: null,
             },
         });
         let schemaA = schema.getSchema("a");
@@ -43,6 +45,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "default",
                 path: "a.b.c",
                 currentContext: null,
+                parentContext: null,
             },
         });
         schemaA = schema.getSchema("a");
@@ -81,6 +84,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "default",
                 path: "a",
                 currentContext: null,
+                parentContext: null,
             },
         });
         schema.addPath({
@@ -109,6 +113,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "default",
                 path: "a",
                 currentContext: null,
+                parentContext: null,
             },
         });
         schema.addPath({
@@ -126,6 +131,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "access",
                 path: "item.b",
                 currentContext: "item",
+                parentContext: null,
             },
         });
         const schemaA = schema.getSchema("a");
@@ -146,6 +152,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "default",
                 path: "a",
                 currentContext: null,
+                parentContext: null,
             },
         });
         schema.addPath({
@@ -193,6 +200,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "access",
                 path: "user.a.b",
                 currentContext: "user",
+                parentContext: null,
             },
         });
         schema.addPath({
@@ -210,6 +218,7 @@ test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
                 type: "access",
                 path: "post.c.d",
                 currentContext: "post",
+                parentContext: null,
             },
         });
         schema.addPath({

package/dist/esm/components/template.js

@@ -1,8 +1,9 @@
 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 { bindingResolver, getAllPartials, getExpressionChain, getNextBehavior, resolveWhen, transformInnerHTML, } from "./utilities.js";
+import { bindingResolver, getExpressionChain, getNextBehavior, getRootPropertyName, resolveWhen, transformInnerHTML, } from "./utilities.js";
 import { ObserverMap } from "./observer-map.js";
+import { Schema } from "./schema.js";
 /**
  * The <f-template> custom element that will provide view logic to the element
  */
@@ -42,6 +43,7 @@ class TemplateElement extends FASTElement {
     connectedCallback() {
         super.connectedCallback();
         if (typeof this.name === "string") {
+            this.schema = new Schema(this.name);
             FASTElementDefinition.registerAsync(this.name).then((value) => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b, _c, _d;
                 if (!((_a = TemplateElement.elementOptions) === null || _a === void 0 ? void 0 : _a[this.name])) {
@@ -49,15 +51,14 @@ class TemplateElement extends FASTElement {
                 }
                 if (((_b = TemplateElement.elementOptions[this.name]) === null || _b === void 0 ? void 0 : _b.observerMap) ===
                     "all") {
-                    this.observerMap = new ObserverMap(value.prototype);
+                    this.observerMap = new ObserverMap(value.prototype, this.schema);
                 }
                 const registeredFastElement = fastElementRegistry.getByType(value);
                 const template = this.getElementsByTagName("template").item(0);
                 if (template) {
                     const innerHTML = yield transformInnerHTML(this.innerHTML);
-                    yield this.resolveAllPartials(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);
+                    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)
                     (_c = this.observerMap) === null || _c === void 0 ? void 0 : _c.defineProperties();
                     if (registeredFastElement) {
@@ -80,11 +81,11 @@ class TemplateElement extends FASTElement {
      * @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, parentContext, level, observerMap) {
+    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, parentContext, level, observerMap);
+            yield this.resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self, parentContext, level, schema, observerMap);
             strings.raw = strings.map(value => String.raw({ raw: value }));
             return {
                 strings,
@@ -108,15 +109,14 @@ class TemplateElement extends FASTElement {
      * @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, parentContext, level, observerMap) {
-        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 { 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);
+                    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;
                 }
@@ -124,24 +124,12 @@ class TemplateElement extends FASTElement {
                     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);
+                    rootPropertyName = getRootPropertyName(rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name);
+                    const binding = bindingResolver(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");
-                        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]));
-                    }
-                }
             }
         });
     }
@@ -194,16 +182,18 @@ class TemplateElement extends FASTElement {
      * @param behaviorConfig - The binding behavior configuration object.
      * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    resolveDataBinding(innerHTML, strings, values, self = false, behaviorConfig, parentContext, level, observerMap) {
+    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 type = "access";
                     const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                    const binding = bindingResolver(propName, self, parentContext, "access", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level);
+                    rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                    const binding = bindingResolver(rootPropertyName, propName, parentContext, type, schema, parentContext, 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);
+                    yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
                     break;
                 }
                 case "attribute": {
@@ -215,29 +205,33 @@ class TemplateElement extends FASTElement {
                         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(propName, self, parentContext, "event", observerMap !== null && observerMap !== void 0 ? observerMap : null, null, level);
+                        const binding = bindingResolver(rootPropertyName, propName, parentContext, type, schema, parentContext, 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),
+                                bindingResolver(rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
                             ]
                             : []));
                         values.push(attributeBinding);
                     }
                     else {
                         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 type = "access";
+                        rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                        const binding = bindingResolver(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, parentContext, level, observerMap);
+                    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, parentContext, level, observerMap);
+                    yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
                     break;
                 }
             }
@@ -251,7 +245,7 @@ class TemplateElement extends FASTElement {
      * @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, parentContext, level, observerMap) {
+    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) {
@@ -260,32 +254,19 @@ class TemplateElement extends FASTElement {
             else {
                 switch (behaviorConfig.type) {
                     case "dataBinding": {
-                        yield this.resolveDataBinding(innerHTML, strings, values, self, behaviorConfig, parentContext, level, observerMap);
+                        yield this.resolveDataBinding(rootPropertyName, innerHTML, strings, values, self, behaviorConfig, parentContext, level, schema, observerMap);
                         break;
                     }
                     case "templateDirective": {
                         strings.push(innerHTML.slice(0, behaviorConfig.openingTagStartIndex));
-                        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);
+                        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, undefined, null, 0, this.observerMap);
-                this.partials[allPartials[i][0]] = this.resolveTemplateOrBehavior(strings, values);
-            }
-        });
-    }
 }
 /**
  * A dictionary of custom element options