@microsoft/fast-html 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/esm/components/utilities.js

@@ -1,9 +1,47 @@
-const openBinding = "{{";
-const closeBinding = "}}";
+import { Observable } from "@microsoft/fast-element/observable.js";
+import { defsPropertyName, fastContextMetaData, refPropertyName, Schema, } from "./schema.js";
+const openClientSideBinding = "{";
+const closeClientSideBinding = "}";
+const openContentBinding = "{{";
+const closeContentBinding = "}}";
+const openUnescapedBinding = "{{{";
+const closeUnescapedBinding = "}}}";
 const openTagStart = "<f-";
 const tagEnd = ">";
 const closeTagStart = "</f-";
 const attributeDirectivePrefix = "f-";
+export const contextPrefix = "$c";
+export const contextPrefixDot = `${contextPrefix}.`;
+const startInnerHTMLDiv = `<div :innerHTML="{{`;
+const startInnerHTMLDivLength = startInnerHTMLDiv.length;
+const endInnerHTMLDiv = `}}"></div>`;
+const endInnerHTMLDivLength = endInnerHTMLDiv.length;
+const LogicalOperator = {
+    AND: "&&",
+    OR: "||",
+};
+const ComparisonOperator = {
+    ACCESS: "access",
+    EQUALS: "==",
+    GREATER_THAN: ">",
+    GREATER_THAN_OR_EQUALS: ">=",
+    LESS_THAN: "<",
+    LESS_THAN_OR_EQUALS: "<=",
+    NOT: "!",
+    NOT_EQUALS: "!=",
+};
+const Operator = {
+    ...LogicalOperator,
+    ...ComparisonOperator,
+};
+/**
+ * A map of proxied objects
+ */
+const objectTargetsMap = new WeakMap();
+/**
+ * A map of arrays being observered
+ */
+const observedArraysMap = new WeakMap();
 /**
  * Get the index of the next matching tag
  * @param openingTagStartSlice - The slice starting from the opening tag
@@ -108,7 +146,11 @@ function getAttributeDataBindingConfig(innerHTML, config) {
         firstCharOfAttribute === ":"
         ? firstCharOfAttribute
         : null;
-    return Object.assign(Object.assign({}, config), { subtype: "attribute", aspect });
+    return {
+        ...config,
+        subtype: "attribute",
+        aspect,
+    };
 }
 /**
  * Get the attribute directive binding config
@@ -121,7 +163,11 @@ function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
     const lastItem = splitInnerHTML[splitInnerHTML.length - 1];
     const equals = lastItem.indexOf("=");
     const name = lastItem.slice(2, equals);
-    return Object.assign(Object.assign({}, config), { subtype: "attributeDirective", name: name });
+    return {
+        ...config,
+        subtype: "attributeDirective",
+        name: name,
+    };
 }
 /**
  * Get the content data binding config
@@ -129,7 +175,51 @@ function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
  * @returns ContentDataBindingBehaviorConfig
  */
 function getContentDataBindingConfig(config) {
-    return Object.assign(Object.assign({}, config), { subtype: "content" });
+    return {
+        ...config,
+        subtype: "content",
+    };
+}
+/**
+ * Finds the next data binding in innerHTML and determines its type and indices
+ * @param innerHTML - The innerHTML string to search for data bindings
+ * @returns NextDataBindingBehaviorConfig containing the binding type and start indices
+ */
+function getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML) {
+    // {{{}}} binding
+    const openingUnescapedStartIndex = innerHTML.indexOf(openUnescapedBinding);
+    const closingUnescapedStartIndex = innerHTML.indexOf(closeUnescapedBinding);
+    // {{}} binding
+    const openingContentStartIndex = innerHTML.indexOf(openContentBinding);
+    const closingContentStartIndex = innerHTML.indexOf(closeContentBinding);
+    // {} binding
+    const openingClientStartIndex = innerHTML.indexOf(openClientSideBinding);
+    const closingClientStartIndex = innerHTML.indexOf(closeClientSideBinding);
+    if (openingUnescapedStartIndex !== -1 &&
+        openingUnescapedStartIndex <= openingContentStartIndex &&
+        openingUnescapedStartIndex <= openingClientStartIndex) {
+        // is unescaped {{{}}}
+        return {
+            openingStartIndex: openingUnescapedStartIndex,
+            closingStartIndex: closingUnescapedStartIndex,
+            bindingType: "unescaped",
+        };
+    }
+    else if (openingContentStartIndex !== -1 &&
+        openingContentStartIndex <= openingClientStartIndex) {
+        // is default {{}}
+        return {
+            openingStartIndex: openingContentStartIndex,
+            closingStartIndex: closingContentStartIndex,
+            bindingType: "default",
+        };
+    }
+    // is client {}
+    return {
+        openingStartIndex: openingClientStartIndex,
+        closingStartIndex: closingClientStartIndex,
+        bindingType: "client",
+    };
 }
 /**
  * Get the next data binding
@@ -137,14 +227,15 @@ function getContentDataBindingConfig(config) {
  * @returns DataBindingBehaviorConfig - A configuration object
  */
 function getNextDataBindingBehavior(innerHTML) {
-    const openingStartIndex = innerHTML.indexOf(openBinding);
-    const closingStartIndex = innerHTML.indexOf(closeBinding);
+    const { openingStartIndex, closingStartIndex, bindingType } = getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML);
+    const bindingLength = bindingType === "client" ? 1 : bindingType === "default" ? 2 : 3;
     const partialConfig = {
         type: "dataBinding",
+        bindingType,
         openingStartIndex,
-        openingEndIndex: openingStartIndex + 2,
+        openingEndIndex: openingStartIndex + bindingLength,
         closingStartIndex,
-        closingEndIndex: closingStartIndex + 2,
+        closingEndIndex: closingStartIndex + bindingLength,
     };
     return isAttributeDirective(innerHTML, openingStartIndex)
         ? getAttributeDirectiveDataBindingConfig(innerHTML, partialConfig)
@@ -157,46 +248,67 @@ function getNextDataBindingBehavior(innerHTML) {
  * @param innerHTML - The innerHTML string to evaluate
  * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
  */
-export function getNextBehavior(innerHTML) {
-    const dataBindingOpen = innerHTML.indexOf(openBinding);
-    const directiveBindingOpen = innerHTML.indexOf(openTagStart);
-    if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
-        return null;
-    }
-    if (directiveBindingOpen !== -1 && dataBindingOpen > directiveBindingOpen) {
-        return getNextDirectiveBehavior(innerHTML);
+export function getNextBehavior(innerHTML, offset = 0) {
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const currentSlice = innerHTML.slice(offset);
+        // client side binding will capture all bindings starting with "{"
+        const dataBindingOpen = currentSlice.indexOf(openClientSideBinding);
+        const directiveBindingOpen = currentSlice.indexOf(openTagStart);
+        const nextDataBindingBehavior = getNextDataBindingBehavior(currentSlice);
+        if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
+            return null;
+        }
+        if (dataBindingOpen !== -1 &&
+            nextDataBindingBehavior.bindingType === "client" &&
+            !isLegitimateClientSideBinding(nextDataBindingBehavior)) {
+            offset = nextDataBindingBehavior.closingEndIndex + offset;
+            continue;
+        }
+        if (directiveBindingOpen !== -1 &&
+            (dataBindingOpen === -1 || dataBindingOpen > directiveBindingOpen)) {
+            return offsetDirective(getNextDirectiveBehavior(currentSlice), offset);
+        }
+        return offsetDataBinding(nextDataBindingBehavior, offset);
     }
-    return getNextDataBindingBehavior(innerHTML);
 }
 /**
- * Gets all the partials with their IDs
- * @param innerHTML - The innerHTML string to evaluate
- * @param offset - The index offset from the innerHTML
- * @param partials - The partials found
- * @returns {[key: string]: PartialTemplateConfig}
- */
-export function getAllPartials(innerHTML, offset = 0, partials = {}) {
-    const openingTag = `${openTagStart}partial`;
-    const openingTagStartIndex = innerHTML.indexOf(openingTag);
-    if (openingTagStartIndex >= 0) {
-        const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
-        const closingTag = `${closeTagStart}partial${tagEnd}`;
-        const closingTagLength = closingTag.length;
-        const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex) + closingTagLength;
-        const startId = openingTagStartIndex + ' id="'.length + openingTag.length;
-        const endId = innerHTML.slice(startId).indexOf('"') + startId;
-        const id = innerHTML.slice(startId, endId);
-        const openingTagEndIndex = openingTagStartSlice.indexOf(tagEnd) + 1 + openingTagStartIndex;
-        const closingTagStartIndex = matchingCloseTagIndex - closingTagLength;
-        partials[id] = {
-            innerHTML: innerHTML.slice(openingTagEndIndex, closingTagStartIndex),
-            startIndex: openingTagEndIndex + offset,
-            endIndex: closingTagStartIndex + offset,
-        };
-        offset += matchingCloseTagIndex;
-        return getAllPartials(innerHTML.slice(matchingCloseTagIndex), offset, partials);
-    }
-    return partials;
+ * Apply an offset to a data binding
+ * @param config DataBindingBehaviorConfig
+ * @param offset number
+ * @returns DataBindingBehaviorConfig
+ */
+function offsetDataBinding(config, offset) {
+    config.openingStartIndex = config.openingStartIndex + offset;
+    config.openingEndIndex = config.openingEndIndex + offset;
+    config.closingStartIndex = config.closingStartIndex + offset;
+    config.closingEndIndex = config.closingEndIndex + offset;
+    return config;
+}
+/**
+ * Apply an offset to a directive
+ * @param config TemplateDirectiveBehaviorConfig
+ * @param offset number
+ * @returns TemplateDirectiveBehaviorConfig
+ */
+function offsetDirective(config, offset) {
+    config.openingTagStartIndex = config.openingTagStartIndex + offset;
+    config.openingTagEndIndex = config.openingTagEndIndex + offset;
+    config.closingTagStartIndex = config.closingTagStartIndex + offset;
+    config.closingTagEndIndex = config.closingTagEndIndex + offset;
+    return config;
+}
+/**
+ * Determine if this client side binding is legitimate.
+ * Single-brace (client) bindings are only valid for events, properties, and attribute directives.
+ * Checking for this prevents CSS/JS curly braces from being misinterpreted as bindings.
+ * @param result
+ * @returns
+ */
+function isLegitimateClientSideBinding(result) {
+    return ((result.subtype === "attribute" &&
+        (result.aspect === "@" || result.aspect === ":")) ||
+        result.subtype === "attributeDirective");
 }
 /**
  * Create a function to resolve a value from an object using a path with dot syntax.
@@ -205,9 +317,45 @@ export function getAllPartials(innerHTML, offset = 0, partials = {}) {
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
  * @returns A function to access the value from a given path.
  */
-export function pathResolver(path, self = false) {
+export function pathResolver(path, contextPath, level, rootSchema) {
+    var _a, _b;
     let splitPath = path.split(".");
-    if (self) {
+    // Explicit context access via contextPrefix — resolve directly from ExecutionContext
+    if (splitPath[0] === contextPrefix) {
+        const contextAccessPath = splitPath.slice(1);
+        return (_accessibleObject, context) => {
+            return contextAccessPath.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], context);
+        };
+    }
+    let levelCount = level;
+    let self = splitPath[0] === contextPath;
+    const parentContexts = [];
+    if (level > 0 &&
+        ((_b = (_a = rootSchema === null || rootSchema === void 0 ? void 0 : rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[contextPath]) === null || _b === void 0 ? void 0 : _b[fastContextMetaData]) ===
+            splitPath.at(-1)) {
+        self = true;
+    }
+    while (levelCount > 0 && !self) {
+        if (levelCount !== 1) {
+            parentContexts.push("parentContext");
+        }
+        else {
+            parentContexts.push("parent");
+        }
+        levelCount--;
+    }
+    splitPath = [...parentContexts, ...splitPath];
+    return pathWithContextResolver(splitPath, self);
+}
+/**
+ * Creates a resolver function that can access properties from an object using a split path array
+ * @param splitPath - The dot syntax path split into an array of property names
+ * @param self - Whether the first item in the path refers to the item itself
+ * @returns A function that resolves the value from the given path on an accessible object
+ */
+function pathWithContextResolver(splitPath, self) {
+    const isInPreviousContext = splitPath[0] === "parent" || splitPath[0] === "parentContext";
+    if (self && !isInPreviousContext) {
         if (splitPath.length > 1) {
             splitPath = splitPath.slice(1);
         }
@@ -217,9 +365,11 @@ export function pathResolver(path, self = false) {
             };
         }
     }
-    if (splitPath.length === 1) {
-        return (accessibleObject) => {
-            return accessibleObject === null || accessibleObject === void 0 ? void 0 : accessibleObject[splitPath[0]];
+    if (isInPreviousContext) {
+        return (accessibleObject, context) => {
+            return splitPath.reduce((previousAccessors, pathItem) => {
+                return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
+            }, context);
         };
     }
     return (accessibleObject) => {
@@ -228,12 +378,83 @@ export function pathResolver(path, self = false) {
         }, accessibleObject);
     };
 }
+export function bindingResolver(previousString, rootPropertyName, path, parentContext, type, schema, currentContext, level) {
+    // Explicit context access — resolve from ExecutionContext, skip schema tracking
+    if (path.startsWith(contextPrefixDot)) {
+        const segments = path.split(".").slice(1);
+        return (_x, context) => {
+            return segments.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], context);
+        };
+    }
+    rootPropertyName = getRootPropertyName(rootPropertyName, path, currentContext, type);
+    if (type !== "event" && rootPropertyName !== null) {
+        const childrenMap = getChildrenMap(previousString);
+        schema.addPath({
+            pathConfig: {
+                type,
+                currentContext,
+                parentContext,
+                path,
+            },
+            rootPropertyName,
+            childrenMap,
+        });
+    }
+    return pathResolver(path, currentContext, level, schema.getSchema(rootPropertyName));
+}
+export function expressionResolver(rootPropertyName, expression, parentContext, level, schema) {
+    // Extract all paths from the expression and add them to the schema
+    if (rootPropertyName !== null) {
+        const paths = extractPathsFromChainedExpression(expression);
+        paths.forEach(path => {
+            if (path.startsWith(contextPrefixDot))
+                return;
+            schema.addPath({
+                pathConfig: {
+                    type: "access",
+                    currentContext: parentContext,
+                    parentContext: null,
+                    path,
+                },
+                rootPropertyName,
+                childrenMap: null,
+            });
+        });
+    }
+    return (x, c) => resolveChainedExpression(x, c, level, parentContext || null, expression, schema.getSchema(rootPropertyName));
+}
+/**
+ * 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
+ * @param operand - The string to evaluate as either a literal value or property accessor
+ * @returns An object containing the parsed value and whether it represents a literal value
  */
 function isOperandValue(operand) {
     try {
+        operand = operand.replaceAll("'", '"');
         const value = JSON.parse(operand);
         return {
             value,
@@ -248,34 +469,757 @@ function isOperandValue(operand) {
     }
 }
 /**
- * Get the operator used.
- * @param value the binded value
- * @returns Operator
+ * Evaluates parts of an expression chain and chains them with the specified operator
+ * @param parts - Each part of an expression chain to be evaluated
+ * @param operator - The logical operator used to chain the expression parts
+ * @returns A ChainedExpression object representing the linked expressions, or void if no valid expressions found
  */
-export function getOperator(value) {
-    if (value[0] === "!") {
+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 = {
+                    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) {
+    // Decode HTML entities in the expression value first
+    const decodedValue = decodeExpressionOperators(value);
+    // Handle operator precedence: || has lower precedence than &&
+    // First, split by || (lowest precedence)
+    const orParts = decodedValue.split(/\s*\|\|\s*/);
+    if (orParts.length > 1) {
+        const firstPart = evaluatePartsInExpressionChain(orParts, Operator.OR);
+        if (firstPart) {
+            return firstPart;
+        }
+    }
+    // If no ||, check for && (higher precedence)
+    const andParts = decodedValue.split(/\s*&&\s*/);
+    if (andParts.length > 1) {
+        // Process each part recursively and chain them with &&
+        const firstPart = evaluatePartsInExpressionChain(andParts, "&&");
+        if (firstPart) {
+            return firstPart;
+        }
+    }
+    // No chaining operators found, create a single expression
+    if (decodedValue.trim()) {
         return {
-            operator: "!",
-            left: value.slice(1),
+            expression: getExpression(decodedValue.trim()),
+        };
+    }
+    return void 0;
+}
+/**
+ * Parses a binding value string into an Expression object
+ * @param value - The binding string value to parse (e.g., "!condition", "foo == bar", "property")
+ * @returns An Expression object containing the operator, operands, and whether operands are literal values
+ */
+function getExpression(value) {
+    if (value[0] === Operator.NOT) {
+        const left = value.slice(1);
+        const operandValue = isOperandValue(left);
+        return {
+            operator: Operator.NOT,
+            left,
+            leftIsValue: operandValue.isValue,
             right: null,
             rightIsValue: null,
         };
     }
-    const split = value.split(" ");
+    const split = value.split(/\s*([=!]=|[><]=?)\s*/);
     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",
+        operator: Operator.ACCESS,
         left: value,
+        leftIsValue: false,
         right: null,
         rightIsValue: null,
     };
 }
+/**
+ * Decodes HTML entities within expression strings only (for operators like &&, <, >)
+ * This is safer than decoding the entire template as it preserves HTML-encoded content
+ * and only decodes operators needed for expression evaluation
+ * @param expression - The expression string to decode
+ * @returns The expression with operators decoded
+ */
+function decodeExpressionOperators(expression) {
+    return expression
+        .replace(/&amp;&amp;/g, Operator.AND)
+        .replace(/&lt;/g, Operator.LESS_THAN)
+        .replace(/&gt;/g, Operator.GREATER_THAN);
+}
+/**
+ * Resolve a single expression by evaluating its operator and operands
+ * @param x - The current data context
+ * @param c - The parent context for accessing parent scope data
+ * @param level - The nesting level for context resolution
+ * @param contextPath - The current context path for property resolution
+ * @param expression - The expression object to evaluate
+ * @param rootSchema - The root JSON schema for data validation and navigation
+ * @returns The resolved value of the expression
+ */
+function resolveExpression(x, c, level, contextPath, expression, rootSchema) {
+    const { operator, left, right, rightIsValue } = expression;
+    const resolvedLeft = pathResolver(left, contextPath, level, rootSchema)(x, c);
+    let resolvedRight = right;
+    if (!rightIsValue && typeof right === "string") {
+        resolvedRight = pathResolver(right, contextPath, level, rootSchema)(x, c);
+    }
+    switch (operator) {
+        case Operator.NOT: {
+            return !resolvedLeft;
+        }
+        case Operator.EQUALS: {
+            return resolvedLeft == resolvedRight;
+        }
+        case Operator.NOT_EQUALS: {
+            return resolvedLeft != resolvedRight;
+        }
+        case Operator.GREATER_THAN_OR_EQUALS: {
+            return resolvedLeft >= resolvedRight;
+        }
+        case Operator.GREATER_THAN: {
+            return resolvedLeft > resolvedRight;
+        }
+        case Operator.LESS_THAN_OR_EQUALS: {
+            return resolvedLeft <= resolvedRight;
+        }
+        case Operator.LESS_THAN: {
+            return resolvedLeft < resolvedRight;
+        }
+        default: {
+            if (typeof resolvedLeft === "boolean") {
+                return resolvedLeft;
+            }
+            if (typeof resolvedLeft === "number") {
+                return resolvedLeft !== 0;
+            }
+            if (typeof resolvedLeft === "string") {
+                return resolvedLeft.length > 0;
+            }
+            return !!resolvedLeft;
+        }
+    }
+}
+/**
+ * Resolve a chained expression by evaluating expressions linked with logical operators
+ * @param x - The current data context
+ * @param c - The parent context for accessing parent scope data
+ * @param level - The nesting level for context resolution
+ * @param contextPath - The current context path for property resolution
+ * @param expression - The chained expression object containing linked expressions
+ * @param rootSchema - The root JSON schema for data validation and navigation
+ * @returns The resolved boolean result of the chained expression
+ */
+function resolveChainedExpression(x, c, level, contextPath, expression, rootSchema) {
+    const { expression: expr, next } = expression;
+    const resolvedLeft = resolveExpression(x, c, level, contextPath, expr, rootSchema);
+    if (next) {
+        const resolvedRight = resolveChainedExpression(x, c, level, contextPath, next, rootSchema);
+        switch (next.operator) {
+            case Operator.AND: {
+                return resolvedLeft && resolvedRight;
+            }
+            case Operator.OR: {
+                return resolvedLeft || resolvedRight;
+            }
+        }
+    }
+    return resolvedLeft;
+}
+/**
+ * This is the transform utility for rationalizing declarative HTML syntax
+ * with bindings in the ViewTemplate
+ * @param innerHTML The innerHTML to transform
+ * @param index The index to start the current slice of HTML to evaluate
+ */
+export function transformInnerHTML(innerHTML, index = 0) {
+    const sliceToEvaluate = innerHTML.slice(index);
+    const nextBinding = getNextBehavior(sliceToEvaluate);
+    let transformedInnerHTML = innerHTML;
+    if (nextBinding && nextBinding.type === "dataBinding") {
+        if (nextBinding.bindingType === "unescaped") {
+            transformedInnerHTML = `${innerHTML.slice(0, index)}${sliceToEvaluate.slice(0, nextBinding.openingStartIndex)}${startInnerHTMLDiv}${sliceToEvaluate.slice(nextBinding.openingStartIndex + 3, nextBinding.closingStartIndex)}${endInnerHTMLDiv}${sliceToEvaluate.slice(nextBinding.closingStartIndex + 3)}`;
+            return transformInnerHTML(transformedInnerHTML, index +
+                startInnerHTMLDivLength +
+                endInnerHTMLDivLength +
+                nextBinding.closingStartIndex -
+                3);
+        }
+        else if (nextBinding.bindingType === "client") {
+            return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingEndIndex);
+        }
+        return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingEndIndex);
+    }
+    else if (nextBinding) {
+        return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingTagEndIndex);
+    }
+    return transformedInnerHTML;
+}
+/**
+ * Resolves f-when
+ * @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
+ * @returns - A binding that resolves the chained expression logic
+ */
+export function resolveWhen(rootPropertyName, expression, parentContext, level, schema) {
+    const binding = expressionResolver(rootPropertyName, expression, parentContext, level, schema);
+    return (x, c) => binding(x, c);
+}
+/**
+ * Determines the data type of the provided data
+ * @param data - The data to analyze
+ * @returns "array" for arrays, "object" for non-null objects, "primitive" for other types
+ */
+function getDataType(data) {
+    if (Array.isArray(data))
+        return "array";
+    if (typeof data === "object" && data !== null)
+        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
+ * @param schema - The schema defining the structure of array items
+ * @param rootSchema - The root schema for the entire data structure
+ * @returns The array with observable properties and change notifications
+ */
+function assignObservablesToArray(proxiedData, schema, rootSchema, target, rootProperty) {
+    const data = proxiedData.map((item) => {
+        const originalItem = Object.assign({}, item);
+        assignProxyToItemsInArray(item, originalItem, schema, rootSchema);
+        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, schema, rootSchema);
+                        Object.assign(item, originalItem);
+                    }
+                    // Notify observers of the target object's root property
+                    Observable.notify(target, rootProperty);
+                }
+            });
+        },
+    });
+    return data;
+}
+/**
+ * Extracts the definition name from a JSON Schema $ref property
+ * @param defName - The $ref string (e.g., "#/$defs/MyType")
+ * @returns The definition name (e.g., "MyType")
+ */
+function getDefFromRef(defName) {
+    const splitName = defName.split("/");
+    return splitName.at(-1);
+}
+/**
+ * Find a definition
+ * This may exist as a $ref at the root or as a $ref in any anyOf or not at all
+ * if the Observer Map has not been enabled on a child component
+ * @param schema - The JSON schema to find the ref in
+ * @returns The definition or null
+ */
+export function findDef(schema) {
+    const defStartingString = "#/$defs";
+    if (schema[refPropertyName] &&
+        schema[refPropertyName].startsWith(defStartingString)) {
+        return getDefFromRef(schema[refPropertyName]);
+    }
+    if (schema.anyOf) {
+        const index = schema.anyOf.findIndex((anyOfItem) => {
+            return (!!anyOfItem[refPropertyName] &&
+                anyOfItem[refPropertyName].startsWith(defStartingString));
+        });
+        if (index > -1) {
+            const ref = schema.anyOf[index][refPropertyName];
+            if (ref.startsWith(defStartingString)) {
+                return getDefFromRef(ref);
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Subscribe to a notifier on data that is an observed array
+ * @param data - The array being observed
+ * @param updateArrayObservables - The function to call to update the array item
+ */
+function assignSubscribeToObservableArray(data, updateArrayObservables) {
+    Observable.getNotifier(data).subscribe({
+        handleChange(subject, args) {
+            args.forEach((arg) => {
+                updateArrayObservables();
+            });
+        },
+    });
+}
+/**
+ * Assign observables to data
+ * @param schema - The schema
+ * @param rootSchema - The root schema mapping to the root property
+ * @param data - The data
+ * @param target - The target custom element
+ * @param rootProperty - The root property
+ * @returns
+ */
+export function assignObservables(schema, rootSchema, data, target, rootProperty) {
+    var _a;
+    const dataType = getDataType(data);
+    let proxiedData = data;
+    switch (dataType) {
+        case "array": {
+            const context = findDef(schema);
+            if (context) {
+                proxiedData = assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema, target, rootProperty);
+                if (!observedArraysMap.has(proxiedData)) {
+                    observedArraysMap.set(proxiedData, assignSubscribeToObservableArray(proxiedData, () => {
+                        var _a;
+                        return assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema, target, rootProperty);
+                    }));
+                }
+            }
+            break;
+        }
+        case "object": {
+            proxiedData = assignProxyToItemsInObject(target, rootProperty, proxiedData, schema, rootSchema);
+            break;
+        }
+    }
+    return proxiedData;
+}
+/**
+ * Assign a proxy to items in an array
+ * @param proxiableItem - The array item to proxy
+ * @param originalItem - The original array item
+ * @param schema - The schema mapping to the items in the array
+ * @param rootSchema - The root schema assigned to the root property
+ */
+function assignProxyToItemsInArray(proxiableItem, originalItem, schema, rootSchema) {
+    const schemaProperties = getSchemaProperties(schema);
+    getObjectProperties(proxiableItem, schemaProperties).forEach(key => {
+        // Initialize the property as undefined if it doesn't exist
+        if (!(key in originalItem)) {
+            originalItem[key] = undefined;
+        }
+        // Assign the proxy first
+        originalItem[key] = assignProxyToItemsInObject(proxiableItem, key, originalItem[key], schemaProperties[key], rootSchema);
+        // Then make the property observable
+        Observable.defineProperty(proxiableItem, key);
+    });
+}
+/**
+ * Get an objects properties as agreed upon between the schema and data
+ * @param data - The data
+ * @param schemaProperties - The schema properties
+ * @returns A list of strings the schema properties enumerate (includes properties not present in data)
+ */
+function getObjectProperties(data, schemaProperties) {
+    const dataKeys = Object.keys(data);
+    const schemaPropertyKeys = Object.keys(schemaProperties !== null && schemaProperties !== void 0 ? schemaProperties : {});
+    // Return all schema properties that are either in the data or in the schema
+    // This ensures properties defined in schema but missing from data get initialized
+    const allKeys = new Set([...dataKeys, ...schemaPropertyKeys]);
+    return Array.from(allKeys).filter(function (key) {
+        return schemaPropertyKeys.indexOf(key) !== -1;
+    });
+}
+/**
+ * Assign a proxy to items in an object
+ * @param target - The target custom element
+ * @param rootProperty - The root property
+ * @param data - The data to proxy
+ * @param schema - The schema for the data
+ * @param rootSchema - The root schema for the root property
+ * @returns a Proxy
+ */
+function assignProxyToItemsInObject(target, rootProperty, data, schema, rootSchema) {
+    var _a;
+    const type = getDataType(data);
+    const schemaProperties = getSchemaProperties(schema);
+    let proxiedData = data;
+    if (type === "object" && schemaProperties) {
+        // navigate through all items in the object
+        getObjectProperties(proxiedData, schemaProperties).forEach(property => {
+            proxiedData[property] = assignProxyToItemsInObject(target, rootProperty, proxiedData[property], schemaProperties[property], rootSchema);
+        });
+        // assign a Proxy to the object
+        proxiedData = assignProxy(schema, rootSchema, target, rootProperty, proxiedData);
+        // Add this target to the object's target list
+        addTargetToObject(proxiedData, target, rootProperty);
+    }
+    else if (type === "array") {
+        const context = findDef(schema.items);
+        if (context) {
+            const definition = (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context];
+            if ((definition === null || definition === void 0 ? void 0 : definition.type) === "object") {
+                proxiedData = assignObservablesToArray(proxiedData, definition, rootSchema, target, rootProperty);
+                if (!observedArraysMap.has(proxiedData)) {
+                    observedArraysMap.set(proxiedData, assignObservablesToArray(proxiedData, definition, rootSchema, target, rootProperty));
+                }
+            }
+        }
+    }
+    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
+ * @param rootSchema - The root schema for the root property
+ * @param target - The target custom element
+ * @param rootProperty - The root property
+ * @param object - The object to assign the proxy to
+ * @returns Proxy object
+ */
+export function assignProxy(schema, rootSchema, target, rootProperty, object) {
+    if (!object.$isProxy) {
+        // Create a proxy for the object that triggers Observable.notify on mutations
+        const proxy = new Proxy(object, {
+            set: (obj, prop, value) => {
+                const currentValue = obj[prop];
+                if (deepEqual(currentValue, value)) {
+                    return true;
+                }
+                obj[prop] = assignObservables(schema, rootSchema, value, target, rootProperty);
+                notifyObservables(proxy);
+                return true;
+            },
+            get: (target, key) => {
+                if (key !== "$isProxy") {
+                    return target[key];
+                }
+                return true;
+            },
+            deleteProperty: (obj, prop) => {
+                if (prop in obj) {
+                    delete obj[prop];
+                    notifyObservables(proxy);
+                    return true;
+                }
+                return false;
+            },
+        });
+        return proxy;
+    }
+    return object;
+}
+/**
+ * Get the root property name
+ * @param rootPropertyName - The root property
+ * @param path - The dot syntax path
+ * @param context - The context created by a repeat
+ * @param type - The type of path binding
+ * @returns
+ */
+export function getRootPropertyName(rootPropertyName, path, context, type) {
+    return (rootPropertyName === null || context === null) && type !== "event"
+        ? 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;
+}
+/**
+ * Determine if an object has an observable accessor for a backing field
+ * @param object - The object to check
+ * @param backingField - The backing field name
+ * @returns True if the object has an observable accessor for the backing field, false otherwise
+ */
+function hasObservableAccessor(object, backingField) {
+    const accessors = Observable.getAccessors(object);
+    if (!accessors) {
+        return false;
+    }
+    return accessors.some((accessor) => accessor.name === backingField);
+}
+/**
+ * Determine if a key should be skipped during deep comparison
+ *
+ * @param object - The object to check
+ * @param key - The key to evaluate
+ * @returns True if the key should be skipped during comparison, false otherwise
+ */
+function shouldSkipKey(object, key) {
+    if (key[0] !== "_" || key === "_") {
+        return false;
+    }
+    return hasObservableAccessor(object, key.slice(1));
+}
+/**
+ * Get comparable keys from an object, excluding those that should be skipped
+ *
+ * @param object - The object to extract keys from
+ * @returns An array of keys that should be compared
+ */
+function getComparableKeys(object) {
+    const hasOwn = Object.prototype.hasOwnProperty;
+    const keys = [];
+    for (const key in object) {
+        if (!hasOwn.call(object, key) || shouldSkipKey(object, key)) {
+            continue;
+        }
+        keys.push(key);
+    }
+    return keys;
+}
+/**
+ * Deeply compares two objects for equality.
+ *
+ * @param obj1 - First object to compare
+ * @param obj2 - Second object to compare
+ * @returns True if the objects are deeply equal, false otherwise
+ */
+export function deepEqual(obj1, obj2) {
+    if (Object.is(obj1, obj2)) {
+        return true;
+    }
+    if (obj1 == null || obj2 == null) {
+        return false;
+    }
+    const type1 = typeof obj1;
+    const type2 = typeof obj2;
+    if (type1 !== type2 || type1 !== "object") {
+        return false;
+    }
+    const isArray1 = Array.isArray(obj1);
+    const isArray2 = Array.isArray(obj2);
+    if (isArray1 !== isArray2) {
+        return false;
+    }
+    if (isArray1) {
+        const len = obj1.length;
+        if (len !== obj2.length) {
+            return false;
+        }
+        for (let i = 0; i < len; i++) {
+            if (!deepEqual(obj1[i], obj2[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    const hasOwn = Object.prototype.hasOwnProperty;
+    const obj1Keys = getComparableKeys(obj1);
+    const obj2Keys = getComparableKeys(obj2);
+    if (obj1Keys.length !== obj2Keys.length) {
+        return false;
+    }
+    for (const key of obj1Keys) {
+        if (!hasOwn.call(obj2, key) || !deepEqual(obj1[key], obj2[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Checks if a value is a plain object (not an array, null, or other type).
+ *
+ * @param value - The value to check
+ * @returns True if the value is a plain object, false otherwise
+ */
+export function isPlainObject(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+}
+/**
+ * Deeply merges the source object into the target object.
+ *
+ * @param target - The target object to merge into
+ * @param source - The source object to merge from
+ * @returns boolean indicating whether changes were made
+ */
+export function deepMerge(target, source) {
+    const hasOwn = Object.prototype.hasOwnProperty;
+    let hasChanges = false;
+    for (const key in source) {
+        if (!hasOwn.call(source, key)) {
+            continue;
+        }
+        const sourceValue = source[key];
+        if (sourceValue === void 0) {
+            continue;
+        }
+        const targetValue = target[key];
+        if (deepEqual(targetValue, sourceValue)) {
+            continue;
+        }
+        hasChanges = true;
+        if (Array.isArray(sourceValue)) {
+            const isTargetArray = Array.isArray(targetValue);
+            const clonedItems = sourceValue.map((item) => isPlainObject(item) ? { ...item } : item);
+            if (isTargetArray) {
+                // Use splice to maintain observable array tracking
+                targetValue.splice(0, targetValue.length, ...clonedItems);
+            }
+            else {
+                // Target isn't an array, replace it
+                target[key] = clonedItems;
+            }
+            continue;
+        }
+        if (isPlainObject(sourceValue)) {
+            const targetIsObject = isPlainObject(targetValue);
+            const nextTarget = targetIsObject ? { ...targetValue } : {};
+            const nestedChanged = deepMerge(nextTarget, sourceValue);
+            if (!targetIsObject) {
+                target[key] = nextTarget;
+                continue;
+            }
+            if (nestedChanged) {
+                target[key] = nextTarget;
+            }
+            continue;
+        }
+        target[key] = sourceValue;
+    }
+    return hasChanges;
+}