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

package/dist/esm/components/utilities.js

@@ -1,3 +1,4 @@
+import { Observable } from "@microsoft/fast-element/observable.js";
 const openClientSideBinding = "{";
 const closeClientSideBinding = "}";
 const openContentBinding = "{{";
@@ -251,8 +252,28 @@ export function getAllPartials(innerHTML, offset = 0, partials = {}) {
  * @returns A function to access the value from a given path.
  */
 export function pathResolver(path, self = false) {
-    let splitPath = path.split(".");
-    const usesContext = path.startsWith("../");
+    let splitPath = [];
+    path.split("../").forEach((pathItem, index) => {
+        if (pathItem === "") {
+            splitPath.unshift("../");
+        }
+        else {
+            splitPath.push(...pathItem.split("."));
+        }
+    });
+    splitPath = splitPath.map((pathItem, index) => {
+        if (pathItem === "../") {
+            if (splitPath[index + 1] === "../") {
+                return "parentContext";
+            }
+            return "parent";
+        }
+        return pathItem;
+    });
+    return pathWithContextResolver(splitPath, self);
+}
+function pathWithContextResolver(splitPath, self) {
+    const usesContext = splitPath[0] === "parent" || splitPath[0] === "parentContext";
     if (self && !usesContext) {
         if (splitPath.length > 1) {
             splitPath = splitPath.slice(1);
@@ -263,31 +284,78 @@ export function pathResolver(path, self = false) {
             };
         }
     }
-    if (splitPath.length === 1 && !usesContext) {
-        return (accessibleObject) => {
-            return accessibleObject === null || accessibleObject === void 0 ? void 0 : accessibleObject[splitPath[0]];
-        };
-    }
-    return (accessibleObject, context) => {
-        if (usesContext) {
-            splitPath = [];
-            path.split("../").forEach(pathItem => {
-                if (pathItem === "") {
-                    splitPath.unshift("parent");
-                }
-                else {
-                    splitPath.push(...pathItem.split("."));
-                }
-            });
+    if (usesContext) {
+        return (accessibleObject, context) => {
             return splitPath.reduce((previousAccessors, pathItem) => {
                 return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
             }, context);
-        }
+        };
+    }
+    return (accessibleObject) => {
         return splitPath.reduce((previousAccessors, pathItem) => {
             return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
         }, accessibleObject);
     };
 }
+export function bindingResolver(path, self = false, parentContext, type, observerMap, contextPath, level) {
+    // Cache path during template processing when ObserverMap is provided
+    if (observerMap) {
+        observerMap.cachePathWithContext({
+            path,
+            self,
+            parentContext,
+            contextPath,
+            type,
+            level,
+            rootPath: null,
+            context: null,
+        });
+    }
+    return pathResolver(path, self);
+}
+export function expressionResolver(self, expression, parentContext, level, observerMap) {
+    // Cache paths from expression during template processing when ObserverMap is provided
+    if (observerMap) {
+        const paths = extractPathsFromChainedExpression(expression);
+        paths.forEach(path => {
+            observerMap.cachePathWithContext({
+                path,
+                self,
+                parentContext,
+                contextPath: null,
+                type: "access",
+                level,
+                rootPath: null,
+                context: null,
+            });
+        });
+    }
+    return (x, c) => resolveChainedExpression(x, c, self, expression);
+}
+/**
+ * Extracts all paths from a ChainedExpression, including nested expressions
+ * @param chainedExpression - The chained expression to extract paths from
+ * @returns A Set containing all unique paths found in the expression chain
+ */
+export function extractPathsFromChainedExpression(chainedExpression) {
+    const paths = new Set();
+    function processExpression(expr) {
+        // Check left operand (only add if it's not a literal value)
+        if (typeof expr.left === "string" && !expr.leftIsValue) {
+            paths.add(expr.left);
+        }
+        // Check right operand (only add if it's not a literal value)
+        if (typeof expr.right === "string" && !expr.rightIsValue) {
+            paths.add(expr.right);
+        }
+    }
+    let current = chainedExpression;
+    while (current !== undefined) {
+        processExpression(current.expression);
+        current = current.next;
+    }
+    return paths;
+}
 /**
  * Determine if the operand is a value (boolean, number, string) or an accessor.
  * @param operand
@@ -308,42 +376,79 @@ function isOperandValue(operand) {
         };
     }
 }
+/**
+ * Evaluates parts of an expression chain
+ * @param parts Each part of an expression chain
+ * @param operator The operator between expressions
+ * @returns
+ */
+function evaluatePartsInExpressionChain(parts, operator) {
+    // Process each part recursively and chain them with ||
+    const firstPart = getExpressionChain(parts[0]);
+    if (firstPart) {
+        let current = firstPart;
+        for (let i = 1; i < parts.length; i++) {
+            const nextPart = getExpressionChain(parts[i]);
+            if (nextPart) {
+                // Find the end of the current chain
+                while (current.next) {
+                    current = current.next;
+                }
+                current.next = Object.assign({ operator }, nextPart);
+            }
+        }
+        return firstPart;
+    }
+}
 /**
  * Gets the expression chain as a configuration object
  * @param value - The binding string value
  * @returns - A configuration object containing information about the expression
  */
 export function getExpressionChain(value) {
-    const split = value.split(" ");
-    let expressionString = "";
-    let chainedExpression;
-    // split expressions by chaining operators
-    split.forEach((splitItem, index) => {
-        if (splitItem === "&&" || splitItem === "||" || splitItem === "&amp;&amp;") {
-            chainedExpression = {
-                expression: getExpression(expressionString),
-                next: Object.assign({ operator: splitItem }, getExpressionChain(split.slice(index + 1).join(" "))),
-            };
+    // Handle operator precedence: || has lower precedence than &&
+    // First, split by || (lowest precedence)
+    const orParts = value.split(" || ");
+    if (orParts.length > 1) {
+        const firstPart = evaluatePartsInExpressionChain(orParts, "||");
+        if (firstPart) {
+            return firstPart;
         }
-        else {
-            expressionString = `${expressionString ? `${expressionString} ` : ""}${splitItem}`;
+    }
+    // If no ||, check for && (higher precedence)
+    const andParts = value.split(" && ");
+    if (andParts.length > 1) {
+        // Process each part recursively and chain them with &&
+        const firstPart = evaluatePartsInExpressionChain(andParts, "&&");
+        if (firstPart) {
+            return firstPart;
         }
-    });
-    if (chainedExpression) {
-        return chainedExpression;
     }
-    if (expressionString) {
+    // Handle HTML entity version of &&
+    const ampParts = value.split(" &amp;&amp; ");
+    if (ampParts.length > 1) {
+        // Process each part recursively and chain them with &amp;&amp;
+        const firstPart = evaluatePartsInExpressionChain(ampParts, "&amp;&amp;");
+        if (firstPart) {
+            return firstPart;
+        }
+    }
+    // No chaining operators found, create a single expression
+    if (value.trim()) {
         return {
-            expression: getExpression(expressionString),
+            expression: getExpression(value.trim()),
         };
     }
     return void 0;
 }
 function getExpression(value) {
     if (value[0] === "!") {
+        const left = value.slice(1);
+        const operandValue = isOperandValue(left);
         return {
             operator: "!",
-            left: value.slice(1),
+            left,
+            leftIsValue: operandValue.isValue,
             right: null,
             rightIsValue: null,
         };
@@ -351,17 +456,22 @@ function getExpression(value) {
     const split = value.split(" ");
     if (split.length === 3) {
         const operator = split[1];
-        const { value, isValue } = isOperandValue(split[2]);
+        const right = split[2];
+        const rightOperandValue = isOperandValue(right);
+        const left = split[0];
+        const leftOperandValue = isOperandValue(left);
         return {
             operator,
             left: split[0],
-            right: isValue ? value : split[2],
-            rightIsValue: isValue,
+            leftIsValue: leftOperandValue.isValue,
+            right: rightOperandValue.isValue ? rightOperandValue.value : right,
+            rightIsValue: rightOperandValue.isValue,
         };
     }
     return {
         operator: "access",
         left: value,
+        leftIsValue: false,
         right: null,
         rightIsValue: null,
     };
@@ -410,19 +520,19 @@ function resolveExpression(x, c, self, expression) {
  * @param next - The next expression to be chained
  * @returns - A resolved return value for a binding
  */
-function resolveChainedExpression(x, c, self, expression, next) {
-    if (next) {
-        switch (next.operator) {
+function resolveChainedExpression(x, c, self, expression) {
+    if (expression.next) {
+        switch (expression.next.operator) {
             case "&&":
             case "&amp;&amp;":
-                return (resolveExpression(x, c, self, expression) &&
-                    resolveChainedExpression(x, c, self, next.expression, next.next));
+                return (resolveExpression(x, c, self, expression.expression) &&
+                    resolveChainedExpression(x, c, self, expression.next));
             case "||":
-                return (resolveExpression(x, c, self, expression) ||
-                    resolveChainedExpression(x, c, self, next.expression, next.next));
+                return (resolveExpression(x, c, self, expression.expression) ||
+                    resolveChainedExpression(x, c, self, expression.next));
         }
     }
-    return resolveExpression(x, c, self, expression);
+    return resolveExpression(x, c, self, expression.expression);
 }
 /**
  * This is the transform utility for rationalizing declarative HTML syntax
@@ -458,8 +568,149 @@ export function transformInnerHTML(innerHTML, index = 0) {
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
  * @param chainedExpression - The chained expression which includes the expression and the next expression
  * if there is another in the chain
+ * @param observerMap - Optional ObserverMap instance for caching paths during template processing
  * @returns - A binding that resolves the chained expression logic
  */
-export function resolveWhen(self, { expression, next }) {
-    return (x, c) => resolveChainedExpression(x, c, self, expression, next);
+export function resolveWhen(self, expression, parentContext, level, observerMap) {
+    const binding = expressionResolver(self, expression, parentContext, level, observerMap);
+    return (x, c) => binding(x, c);
+}
+/**
+ * Helper function to determine the data type of an object property
+ */
+function getDataType(object) {
+    if (Array.isArray(object))
+        return "array";
+    if (typeof object === "object" && object !== null)
+        return "object";
+    return "primitive";
+}
+/**
+ * Get the next property
+ * @param path The dot syntax data path
+ * @returns The next property
+ */
+export function getNextProperty(path) {
+    return path.split(".")[0];
+}
+function sortByDeepestNestingItem(first, second) {
+    const firstRelativePathLength = first.length;
+    const secondRelativePathLength = second.length;
+    return firstRelativePathLength > secondRelativePathLength
+        ? -1
+        : secondRelativePathLength > firstRelativePathLength
+            ? 1
+            : 0;
+}
+function assignObservablesToArray(proxiedData, cachePath) {
+    const data = proxiedData.map((item) => {
+        const originalItem = Object.assign({}, item);
+        assignProxyToItemsInArray(item, originalItem, cachePath);
+        return Object.assign(item, originalItem);
+    });
+    Observable.getNotifier(data).subscribe({
+        handleChange(subject, args) {
+            args.forEach((arg) => {
+                if (arg.addedCount > 0) {
+                    for (let i = arg.addedCount - 1; i >= 0; i--) {
+                        const item = subject[arg.index + i];
+                        const originalItem = Object.assign({}, item);
+                        assignProxyToItemsInArray(item, originalItem, cachePath);
+                        return Object.assign(item, originalItem);
+                    }
+                }
+            });
+        },
+    });
+    return data;
+}
+export function assignObservables(cachePath, data, target, rootProperty) {
+    const dataType = getDataType(data);
+    let proxiedData = data;
+    switch (dataType) {
+        case "array": {
+            if (cachePath.type === "repeat") {
+                proxiedData = assignObservablesToArray(proxiedData, cachePath);
+            }
+            break;
+        }
+        case "object": {
+            if (cachePath.type === "default") {
+                const relativePaths = Object.values(cachePath.paths)
+                    .map((value) => {
+                    return value.relativePath.split(".").slice(1); // the first item is the root path
+                })
+                    .sort(sortByDeepestNestingItem);
+                for (const relativePath of relativePaths) {
+                    proxiedData = assignProxyToItemsInObject(relativePath, target, rootProperty, proxiedData, cachePath);
+                }
+            }
+            break;
+        }
+    }
+    return proxiedData;
+}
+function assignProxyToItemsInArray(item, originalItem, cachePath) {
+    const itemProperties = Object.keys(item);
+    itemProperties.forEach(key => {
+        Observable.defineProperty(item, key);
+        const relativePaths = Object.values(cachePath.paths).filter(pathItem => {
+            if (pathItem.type === "access") {
+                return pathItem.relativePath.startsWith(`${cachePath.context}.${key}.`);
+            }
+            return false;
+        })
+            .map(value => {
+            return value.relativePath.split(".").slice(2); // the first item is the context, the next is the property
+        })
+            .sort(sortByDeepestNestingItem);
+        for (const relativePath of relativePaths) {
+            originalItem[key] = assignProxyToItemsInObject(relativePath, item, key, originalItem[key], cachePath);
+        }
+    });
+}
+function assignProxyToItemsInObject(paths, target, rootProperty, data, cachePath) {
+    const type = getDataType(data);
+    let proxiedData = data;
+    if (type === "object") {
+        // navigate through all items in the object
+        proxiedData[paths[0]] = assignProxyToItemsInObject(paths.slice(1), target, rootProperty, proxiedData[paths[0]], cachePath);
+        // assign a Proxy to the object
+        proxiedData = assignProxy(cachePath, target, rootProperty, data);
+    }
+    else if (type === "array") {
+        if (cachePath.type === "repeat") {
+            proxiedData = assignObservablesToArray(proxiedData, cachePath.paths[rootProperty]);
+        }
+    }
+    return proxiedData;
+}
+export function assignProxy(cachePath, target, rootProperty, object) {
+    if (object.$isProxy === undefined) {
+        // Create a proxy for the object that triggers Observable.notify on mutations
+        return new Proxy(object, {
+            set: (obj, prop, value) => {
+                obj[prop] = assignObservables(cachePath, value, target, rootProperty);
+                // Trigger notification for property changes
+                Observable.notify(target, rootProperty);
+                return true;
+            },
+            get: (target, key) => {
+                if (key !== "$isProxy") {
+                    return target[key];
+                }
+                return true;
+            },
+            deleteProperty: (obj, prop) => {
+                if (prop in obj) {
+                    delete obj[prop];
+                    // Trigger notification for property deletion
+                    Observable.notify(target, rootProperty);
+                    return true;
+                }
+                return false;
+            },
+        });
+    }
+    return object;
 }

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

@@ -1,6 +1,6 @@
 import { __awaiter } from "tslib";
 import { expect, test } from "@playwright/test";
-import { getNextBehavior, getAllPartials, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML, getExpressionChain } from "./utilities.js";
+import { getNextBehavior, getAllPartials, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML, getExpressionChain, extractPathsFromChainedExpression, } 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* () {
@@ -192,6 +192,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "access",
                     left: "foo",
+                    leftIsValue: false,
                     right: null,
                     rightIsValue: null,
                 }
@@ -202,6 +203,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "!",
                     left: "foo",
+                    leftIsValue: false,
                     right: null,
                     rightIsValue: null,
                 }
@@ -212,6 +214,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "!=",
                     left: "foo",
+                    leftIsValue: false,
                     right: "test",
                     rightIsValue: true,
                 }
@@ -222,6 +225,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "!=",
                     left: "foo",
+                    leftIsValue: false,
                     right: false,
                     rightIsValue: true,
                 }
@@ -232,6 +236,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "!=",
                     left: "foo",
+                    leftIsValue: false,
                     right: 5,
                     rightIsValue: true,
                 }
@@ -242,6 +247,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "!=",
                     left: "foo",
+                    leftIsValue: false,
                     right: "bat",
                     rightIsValue: true,
                 },
@@ -250,6 +256,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                     expression: {
                         operator: "==",
                         left: "bar",
+                        leftIsValue: false,
                         right: "baz",
                         rightIsValue: true,
                     }
@@ -259,6 +266,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                 expression: {
                     operator: "access",
                     left: "foo",
+                    leftIsValue: false,
                     right: null,
                     rightIsValue: null,
                 },
@@ -267,6 +275,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
                     expression: {
                         operator: "access",
                         left: "bar",
+                        leftIsValue: false,
                         right: null,
                         rightIsValue: null,
                     }
@@ -274,4 +283,103 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
             });
         }));
     }));
+    test.describe("extractPathsFromChainedExpression", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should extract paths from simple access expression", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user")).toBe(true);
+        }));
+        test("should extract paths from dot notation expression", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.name");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.name")).toBe(true);
+        }));
+        test("should extract paths from comparison with literal values", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.age > 18");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.age")).toBe(true);
+        }));
+        test("should extract paths from comparison between two properties", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.age >= admin.minAge");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("user.age")).toBe(true);
+            expect(paths.has("admin.minAge")).toBe(true);
+        }));
+        test("should extract paths from chained AND expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("isActive && user.name");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("isActive")).toBe(true);
+            expect(paths.has("user.name")).toBe(true);
+        }));
+        test("should extract paths from chained OR expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.isAdmin || permissions.canEdit");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("user.isAdmin")).toBe(true);
+            expect(paths.has("permissions.canEdit")).toBe(true);
+        }));
+        test("should extract paths from complex chained expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.age > 18 && user.status == 'active' || admin.override");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(3);
+            expect(paths.has("user.age")).toBe(true);
+            expect(paths.has("user.status")).toBe(true);
+            expect(paths.has("admin.override")).toBe(true);
+        }));
+        test("should extract paths from NOT expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("!user.isDisabled");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.isDisabled")).toBe(true);
+        }));
+        test("should handle expressions with only literal values", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("5 > 3");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(0);
+        }));
+        test("should handle mixed literal and property expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("count > 0 && status == 'ready'");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("count")).toBe(true);
+            expect(paths.has("status")).toBe(true);
+        }));
+        test("should deduplicate identical paths", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.name && user.name != 'anonymous'");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.name")).toBe(true);
+        }));
+        test("should handle HTML entity operators", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("isValid && data.ready");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("isValid")).toBe(true);
+            expect(paths.has("data.ready")).toBe(true);
+        }));
+        test("should handle deeply nested property paths", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("app.user.profile.settings.theme");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("app.user.profile.settings.theme")).toBe(true);
+        }));
+    }));
 }));