@microsoft/fast-html 1.0.0-alpha.22 → 1.0.0-alpha.23

package/dist/esm/components/utilities.js

@@ -1,5 +1,5 @@
 import { Observable } from "@microsoft/fast-element/observable.js";
-import { defsPropertyName, refPropertyName, } from "./schema.js";
+import { defsPropertyName, refPropertyName, Schema, } from "./schema.js";
 const openClientSideBinding = "{";
 const closeClientSideBinding = "}";
 const openContentBinding = "{{";
@@ -14,6 +14,10 @@ const startInnerHTMLDiv = `<div :innerHTML="{{`;
 const startInnerHTMLDivLength = startInnerHTMLDiv.length;
 const endInnerHTMLDiv = `}}"></div>`;
 const endInnerHTMLDivLength = endInnerHTMLDiv.length;
+/**
+ * A map of proxied objects
+ */
+const objectTargetsMap = new WeakMap();
 /**
  * Get the index of the next matching tag
  * @param openingTagStartSlice - The slice starting from the opening tag
@@ -281,9 +285,10 @@ function pathWithContextResolver(splitPath, self) {
         }, accessibleObject);
     };
 }
-export function bindingResolver(rootPropertyName, path, parentContext, type, schema, currentContext, level) {
+export function bindingResolver(previousString, rootPropertyName, path, parentContext, type, schema, currentContext, level) {
     rootPropertyName = getRootPropertyName(rootPropertyName, path, currentContext, type);
     if (type !== "event" && rootPropertyName !== null) {
+        const childrenMap = getChildrenMap(previousString);
         schema.addPath({
             pathConfig: {
                 type,
@@ -292,6 +297,7 @@ export function bindingResolver(rootPropertyName, path, parentContext, type, sch
                 path,
             },
             rootPropertyName,
+            childrenMap,
         });
     }
     return pathResolver(path, currentContext, level, schema.getSchema(rootPropertyName));
@@ -574,6 +580,40 @@ function getDataType(data) {
         return "object";
     return "primitive";
 }
+/**
+ * Get properties from an anyOf array
+ * @param anyOf - The anyOf array in a JSON schema
+ * @returns The array item matching a ref if it exists
+ */
+function getSchemaPropertiesFromAnyOf(anyOf) {
+    let propertiesFromAnyOf = null;
+    for (const anyOfItem of anyOf) {
+        if (anyOfItem[refPropertyName]) {
+            const splitRef = anyOfItem[refPropertyName].split("/");
+            const customElement = splitRef.slice(-2)[0];
+            const attributeName = splitRef.slice(-1)[0].slice(0, -5);
+            if (Schema.jsonSchemaMap.has(customElement)) {
+                const customElementSchemaMap = Schema.jsonSchemaMap.get(customElement);
+                propertiesFromAnyOf = customElementSchemaMap.get(attributeName);
+            }
+        }
+    }
+    return propertiesFromAnyOf;
+}
+/**
+ * Gets a properties definition if one exists
+ * @param schema - The JSON schema to get properties from
+ * @returns A JSON schema with properties or null
+ */
+function getSchemaProperties(schema) {
+    if (schema === null || schema === void 0 ? void 0 : schema.properties) {
+        return schema.properties;
+    }
+    else if (schema === null || schema === void 0 ? void 0 : schema.anyOf) {
+        return getSchemaPropertiesFromAnyOf(schema.anyOf);
+    }
+    return null;
+}
 /**
  * Assigns Observable properties to items in an array and sets up change notifications
  * @param proxiedData - The array data to make observable
@@ -666,16 +706,19 @@ function assignProxyToItemsInArray(item, originalItem, schema, rootSchema) {
 function assignProxyToItemsInObject(target, rootProperty, data, schema, rootSchema) {
     var _a;
     const type = getDataType(data);
+    const schemaProperties = getSchemaProperties(schema);
     let proxiedData = data;
-    if (type === "object" && (schema === null || schema === void 0 ? void 0 : schema.properties)) {
+    if (type === "object" && schemaProperties) {
         // navigate through all items in the object
-        Object.keys(schema.properties).forEach(property => {
-            if (proxiedData[property] && schema && schema.properties) {
-                proxiedData[property] = assignProxyToItemsInObject(target, rootProperty, proxiedData[property], schema.properties[property], rootSchema);
+        Object.keys(schemaProperties).forEach(property => {
+            if (proxiedData[property] && schema && schemaProperties) {
+                proxiedData[property] = assignProxyToItemsInObject(target, rootProperty, proxiedData[property], schemaProperties[property], rootSchema);
             }
         });
         // assign a Proxy to the object
         proxiedData = assignProxy(schema, rootSchema, target, rootProperty, data);
+        // Add this target to the object's target list
+        addTargetToObject(proxiedData, target, rootProperty);
     }
     else if (type === "array") {
         const context = getDefFromRef(schema.items[refPropertyName]);
@@ -686,6 +729,37 @@ function assignProxyToItemsInObject(target, rootProperty, data, schema, rootSche
     }
     return proxiedData;
 }
+/**
+ * Add a target to an object's target list
+ * @param object - The object to associate with the target
+ * @param target - The target custom element
+ * @param rootProperty - The root property name
+ */
+function addTargetToObject(object, target, rootProperty) {
+    if (!objectTargetsMap.has(object)) {
+        objectTargetsMap.set(object, []);
+    }
+    const targets = objectTargetsMap.get(object);
+    targets.push({ target, rootProperty });
+}
+/**
+ * Get all targets for an object
+ * @param object - The object to get targets for
+ * @returns Array of target info objects
+ */
+function getTargetsForObject(object) {
+    return objectTargetsMap.get(object) || [];
+}
+/**
+ * Notify any observables mapped to the object
+ * @param targetObject The object that is mapped to a target and rootProperty
+ */
+function notifyObservables(targetObject) {
+    getTargetsForObject(targetObject).forEach((targetItem) => {
+        // Trigger notification for property changes
+        Observable.notify(targetItem.target, targetItem.rootProperty);
+    });
+}
 /**
  * Assign a proxy to an object
  * @param schema - The current schema
@@ -698,11 +772,10 @@ function assignProxyToItemsInObject(target, rootProperty, data, schema, rootSche
 export function assignProxy(schema, rootSchema, target, rootProperty, object) {
     if (object.$isProxy === undefined) {
         // Create a proxy for the object that triggers Observable.notify on mutations
-        return new Proxy(object, {
+        const proxy = new Proxy(object, {
             set: (obj, prop, value) => {
                 obj[prop] = assignObservables(schema, rootSchema, value, target, rootProperty);
-                // Trigger notification for property changes
-                Observable.notify(target, rootProperty);
+                notifyObservables(proxy);
                 return true;
             },
             get: (target, key) => {
@@ -714,13 +787,13 @@ export function assignProxy(schema, rootSchema, target, rootProperty, object) {
             deleteProperty: (obj, prop) => {
                 if (prop in obj) {
                     delete obj[prop];
-                    // Trigger notification for property deletion
-                    Observable.notify(target, rootProperty);
+                    notifyObservables(proxy);
                     return true;
                 }
                 return false;
             },
         });
+        return proxy;
     }
     return object;
 }
@@ -737,3 +810,51 @@ export function getRootPropertyName(rootPropertyName, path, context, type) {
         ? path.split(".")[0]
         : rootPropertyName;
 }
+/**
+ * Get details of bindings to the attributes of child custom elements
+ * @param previousString - The previous string before the binding
+ * @returns null, or a custom element name and attribute name
+ */
+export function getChildrenMap(previousString) {
+    if (typeof previousString === "string" &&
+        isAttribute(previousString, previousString.length)) {
+        const customElementName = getAttributesCustomElementName(previousString);
+        if (customElementName) {
+            return {
+                customElementName,
+                attributeName: getAttributeName(previousString),
+            };
+        }
+    }
+    return null;
+}
+/**
+ * Get the HTML element that is passing the attribute binding
+ * @param previousString - The previous string before the binding
+ * @returns null if this is not a custom element, or the custom element that is passing the binding as an attribute
+ */
+function getAttributesCustomElementName(previousString) {
+    const indexOfElementTagStart = previousString.lastIndexOf("<") + 1;
+    const indexOfElementTagEnd = previousString.slice(indexOfElementTagStart).indexOf(" ") +
+        indexOfElementTagStart;
+    const elementName = previousString.slice(indexOfElementTagStart, indexOfElementTagEnd);
+    if (elementName.includes("-")) {
+        return elementName;
+    }
+    return null;
+}
+/**
+ * Gets a non-aspected attribute name
+ * @param previousString - The previous string before the binding
+ * @returns The attribute name with any aspects (:, ?, @) removed
+ */
+function getAttributeName(previousString) {
+    const indexOfAttributeStart = previousString.lastIndexOf(" ") + 1;
+    const indexOfAttributeEnd = previousString.slice(indexOfAttributeStart).indexOf("=") + indexOfAttributeStart;
+    const attributeName = previousString.slice(indexOfAttributeStart, indexOfAttributeEnd);
+    const potentialAspect = attributeName.charAt(0);
+    if (potentialAspect === ":" || potentialAspect === "@" || potentialAspect === "?") {
+        return attributeName.slice(1);
+    }
+    return attributeName;
+}

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

@@ -1,6 +1,6 @@
 import { __awaiter } from "tslib";
 import { expect, test } from "@playwright/test";
-import { getNextBehavior, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML, getExpressionChain, extractPathsFromChainedExpression, } from "./utilities.js";
+import { getNextBehavior, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML, getExpressionChain, extractPathsFromChainedExpression, getChildrenMap, } from "./utilities.js";
 test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* () {
     test.describe("content", () => __awaiter(void 0, void 0, void 0, function* () {
         test("get the next content binding", () => __awaiter(void 0, void 0, void 0, function* () {
@@ -359,4 +359,32 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
             expect(paths.has("app.user.profile.settings.theme")).toBe(true);
         }));
     }));
+    test.describe("getChildrenMap", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should get a ChildrenMap if an attribute is part of a custom element", () => __awaiter(void 0, void 0, void 0, function* () {
+            const childrenMap = getChildrenMap(`<template><my-element foo="`);
+            expect(childrenMap).not.toBeNull();
+            expect(childrenMap === null || childrenMap === void 0 ? void 0 : childrenMap.attributeName).toEqual("foo");
+            expect(childrenMap === null || childrenMap === void 0 ? void 0 : childrenMap.customElementName).toEqual("my-element");
+        }));
+        test("should not get a ChildrenMap if an attribute is part of a non-custom element", () => __awaiter(void 0, void 0, void 0, function* () {
+            const childrenMap = getChildrenMap(`<template><button foo="`);
+            expect(childrenMap).toBeNull();
+        }));
+        test("should remove any aspected attributes from an attribute name", () => __awaiter(void 0, void 0, void 0, function* () {
+            const childrenMap = getChildrenMap(`<template><my-element :foo="`);
+            expect(childrenMap).not.toBeNull();
+            expect(childrenMap === null || childrenMap === void 0 ? void 0 : childrenMap.attributeName).toEqual("foo");
+            expect(childrenMap === null || childrenMap === void 0 ? void 0 : childrenMap.customElementName).toEqual("my-element");
+        }));
+        test("should not get a ChildreMap if the previous string indicates the binding was not an attribute", () => __awaiter(void 0, void 0, void 0, function* () {
+            const childrenMap = getChildrenMap(`<template><my-element>`);
+            expect(childrenMap).toBeNull();
+        }));
+        test("should get a ChildrenMap if there are multiple attributes are listed before this attribute", () => __awaiter(void 0, void 0, void 0, function* () {
+            const childrenMap = getChildrenMap(`<template><my-element foo="" bar="" bat="`);
+            expect(childrenMap).not.toBeNull();
+            expect(childrenMap === null || childrenMap === void 0 ? void 0 : childrenMap.attributeName).toEqual("bat");
+            expect(childrenMap === null || childrenMap === void 0 ? void 0 : childrenMap.customElementName).toEqual("my-element");
+        }));
+    }));
 }));