@microsoft/fast-element 2.10.3 → 3.0.0-rc.1

package/dist/esm/declarative/utilities.js

@@ -0,0 +1,834 @@
+import { defsPropertyName, fastContextMetaData, } from "../components/schema.js";
+import { attributeDirectivePrefix, clientSideCloseExpression, clientSideOpenExpression, closeExpression, eventArgAccessor, executionContextAccessor, openExpression, repeatDirectiveClose, repeatDirectiveOpen, unescapedCloseExpression, unescapedOpenExpression, whenDirectiveClose, whenDirectiveOpen, } from "./syntax.js";
+export { assignObservables, assignProxy, deepEqual, deepMerge, findDef, isPlainObject, } from "./observer-map-utilities.js";
+/**
+ * Prefix used for execution context paths.
+ * @public
+ */
+export const contextPrefixDot = `${executionContextAccessor}.`;
+export { eventArgAccessor, executionContextAccessor };
+/**
+ * Parses the arguments string of an event handler binding into an array of
+ * typed argument descriptors. Unrecognised tokens are returned as `"binding"`
+ * type with their raw string preserved.
+ *
+ * Special arguments:
+ * - `$e` — resolves to the DOM event object
+ * - `$c` — resolves to the full execution context object
+ *
+ * Any other token is treated as a binding path and resolved against the current
+ * data source.
+ *
+ * @param argsString - The raw arguments string from between the parentheses,
+ *   e.g. `""`, `"$e"`, `"$c"`, or `"$e, $c"`.
+ * @returns An array of {@link ParsedEventArg} descriptors.
+ * @public
+ */
+export function parseEventArgs(argsString) {
+    if (argsString.trim() === "")
+        return [];
+    return argsString
+        .split(",")
+        .map(arg => arg.trim())
+        .filter(arg => arg !== "")
+        .map((arg) => {
+        switch (arg) {
+            case eventArgAccessor:
+                return { type: "event" };
+            case executionContextAccessor:
+                return { type: "context" };
+            default:
+                return { type: "binding", rawArg: arg };
+        }
+    });
+}
+const startInnerHTMLDiv = `<div :innerHTML="{{`;
+const startInnerHTMLDivLength = startInnerHTMLDiv.length;
+const endInnerHTMLDiv = `}}"></div>`;
+const endInnerHTMLDivLength = endInnerHTMLDiv.length;
+/**
+ * Logical operator tokens.
+ * @public
+ */
+export const LogicalOperator = {
+    AND: "&&",
+    OR: "||",
+};
+/**
+ * Comparison operator tokens.
+ * @public
+ */
+export const ComparisonOperator = {
+    ACCESS: "access",
+    EQUALS: "==",
+    GREATER_THAN: ">",
+    GREATER_THAN_OR_EQUALS: ">=",
+    LESS_THAN: "<",
+    LESS_THAN_OR_EQUALS: "<=",
+    NOT: "!",
+    NOT_EQUALS: "!=",
+};
+/**
+ * Declarative expression operator tokens.
+ * @public
+ */
+export const Operator = Object.assign(Object.assign({}, LogicalOperator), ComparisonOperator);
+/**
+ * Get the index of the next matching tag
+ * @param openingTagStartSlice - The slice starting from the opening tag
+ * @param openingTag - The opening tag string
+ * @param closingTag - The closing tag
+ * @param openingTagStartIndex - The opening tag start index derived from the innerHTML
+ * @returns index
+ * @public
+ */
+export function getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex) {
+    let tagCount = 1;
+    let matchingCloseTagIndex = -1;
+    const openingTagLength = openingTag.length;
+    const closingTagLength = closingTag.length;
+    let nextSlice = openingTagStartSlice.slice(openingTagLength);
+    let nextOpenTag = nextSlice.indexOf(openingTag);
+    let nextCloseTag = nextSlice.indexOf(closingTag);
+    let tagOffset = openingTagStartIndex + openingTagLength;
+    do {
+        // if a closing tag has been found for the last open tag, decrement the tag count
+        if (nextOpenTag > nextCloseTag || nextOpenTag === -1) {
+            tagCount--;
+            if (tagCount === 0) {
+                matchingCloseTagIndex = nextCloseTag + tagOffset;
+                break;
+            }
+            tagOffset += nextCloseTag + closingTagLength;
+            nextSlice = nextSlice.slice(nextCloseTag + closingTagLength);
+            nextOpenTag = nextSlice.indexOf(openingTag);
+            nextCloseTag = nextSlice.indexOf(closingTag);
+        }
+        else if (nextOpenTag !== -1) {
+            tagCount++;
+            tagOffset += nextOpenTag + openingTagLength;
+            nextSlice = nextSlice.slice(nextOpenTag + openingTagLength);
+            nextOpenTag = nextSlice.indexOf(openingTag);
+            nextCloseTag = nextSlice.indexOf(closingTag);
+        }
+        if (tagCount === 0) {
+            matchingCloseTagIndex = nextCloseTag + tagOffset;
+            break;
+        }
+    } while (tagCount > 0);
+    return matchingCloseTagIndex;
+}
+/**
+ * Get the next directive
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DirectiveBehaviorConfig - A configuration object
+ */
+function getNextDirectiveBehavior(innerHTML) {
+    const whenIndex = innerHTML.indexOf(whenDirectiveOpen);
+    const repeatIndex = innerHTML.indexOf(repeatDirectiveOpen);
+    const isWhen = whenIndex !== -1 && (repeatIndex === -1 || whenIndex < repeatIndex);
+    let openingTag = repeatDirectiveOpen;
+    let closingTag = repeatDirectiveClose;
+    let directiveTag = "repeat";
+    let openingTagStartIndex = repeatIndex;
+    if (isWhen) {
+        openingTag = whenDirectiveOpen;
+        closingTag = whenDirectiveClose;
+        directiveTag = "when";
+        openingTagStartIndex = whenIndex;
+    }
+    const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
+    const openingTagEndIndex = // account for f-when which may include >= or > as operators, but will always include a condition attr
+     openingTagStartSlice.indexOf(`">`) + openingTagStartIndex + 2;
+    const directiveValue = getNextDataBindingBehavior(innerHTML);
+    const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex);
+    return {
+        type: "templateDirective",
+        name: directiveTag,
+        value: innerHTML.slice(directiveValue.openingEndIndex, directiveValue.closingStartIndex),
+        openingTagStartIndex,
+        openingTagEndIndex,
+        closingTagStartIndex: matchingCloseTagIndex,
+        closingTagEndIndex: matchingCloseTagIndex + closingTag.length,
+    };
+}
+/**
+ * Determine if this binding is an attribute binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param openingStartIndex - The index of the binding opening marker
+ * @returns boolean
+ */
+function isAttribute(innerHTML, openingStartIndex) {
+    return innerHTML.slice(openingStartIndex - 2, openingStartIndex - 1) === "=";
+}
+/**
+ * Determine if this binding is an attribute directive binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param openingStartIndex - The index of the binding opening marker
+ * @returns boolean
+ */
+function isAttributeDirective(innerHTML, openingStartIndex) {
+    const splitHTML = innerHTML.slice(0, openingStartIndex - 2).split(" ");
+    return splitHTML[splitHTML.length - 1].startsWith(attributeDirectivePrefix);
+}
+/**
+ * Get the attribute binding config
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param config - The base configuration of the binding
+ * @returns AttributeDataBindingBehaviorConfig
+ */
+function getAttributeDataBindingConfig(innerHTML, config) {
+    const splitInnerHTML = innerHTML.slice(0, config.openingStartIndex).split(" ");
+    const firstCharOfAttribute = splitInnerHTML[splitInnerHTML.length - 1][0];
+    const aspect = firstCharOfAttribute === "?" ||
+        firstCharOfAttribute === "@" ||
+        firstCharOfAttribute === ":"
+        ? firstCharOfAttribute
+        : null;
+    return Object.assign(Object.assign({}, config), { subtype: "attribute", aspect });
+}
+/**
+ * Get the attribute directive binding config
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param config - The base configuration of the binding
+ * @returns AttributeDirectiveBindingBehaviorConfig
+ */
+function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
+    const splitInnerHTML = innerHTML.slice(0, config.openingStartIndex).split(" ");
+    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 });
+}
+/**
+ * Get the content data binding config
+ * @param config - The base configuration of the binding
+ * @returns ContentDataBindingBehaviorConfig
+ */
+function getContentDataBindingConfig(config) {
+    return Object.assign(Object.assign({}, 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(unescapedOpenExpression);
+    const closingUnescapedStartIndex = innerHTML.indexOf(unescapedCloseExpression);
+    // {{}} binding
+    const openingContentStartIndex = innerHTML.indexOf(openExpression);
+    const closingContentStartIndex = innerHTML.indexOf(closeExpression);
+    // {} binding
+    const openingClientStartIndex = innerHTML.indexOf(clientSideOpenExpression);
+    const closingClientStartIndex = innerHTML.indexOf(clientSideCloseExpression);
+    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
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DataBindingBehaviorConfig - A configuration object
+ */
+function getNextDataBindingBehavior(innerHTML) {
+    const { openingStartIndex, closingStartIndex, bindingType } = getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML);
+    const bindingLength = bindingType === "client" ? 1 : bindingType === "default" ? 2 : 3;
+    const partialConfig = {
+        type: "dataBinding",
+        bindingType,
+        openingStartIndex,
+        openingEndIndex: openingStartIndex + bindingLength,
+        closingStartIndex,
+        closingEndIndex: closingStartIndex + bindingLength,
+    };
+    return isAttributeDirective(innerHTML, openingStartIndex)
+        ? getAttributeDirectiveDataBindingConfig(innerHTML, partialConfig)
+        : isAttribute(innerHTML, openingStartIndex)
+            ? getAttributeDataBindingConfig(innerHTML, partialConfig)
+            : getContentDataBindingConfig(partialConfig);
+}
+/**
+ * Get the next behavior
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param offset - The current offset in the original string.
+ * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
+ * @public
+ */
+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(clientSideOpenExpression);
+        const whenDirectiveIndex = currentSlice.indexOf(whenDirectiveOpen);
+        const repeatDirectiveIndex = currentSlice.indexOf(repeatDirectiveOpen);
+        const directiveBindingOpen = whenDirectiveIndex === -1
+            ? repeatDirectiveIndex
+            : repeatDirectiveIndex === -1
+                ? whenDirectiveIndex
+                : Math.min(whenDirectiveIndex, repeatDirectiveIndex);
+        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);
+    }
+}
+/**
+ * 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.
+ * e.g. "foo.bar"
+ * @param path - The dot syntax path to an objects property.
+ * @param contextPath - The current repeat context path.
+ * @param level - The current repeat nesting level.
+ * @param rootSchema - The root schema for resolving context paths.
+ * @returns A function to access the value from a given path.
+ * @public
+ */
+export function pathResolver(path, contextPath, level, rootSchema) {
+    var _a, _b;
+    let splitPath = path.split(".");
+    // Explicit context access via executionContextAccessor — resolve directly from ExecutionContext
+    if (splitPath[0] === executionContextAccessor) {
+        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[splitPath.length - 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);
+        }
+        else {
+            return (accessibleObject) => {
+                return accessibleObject;
+            };
+        }
+    }
+    if (isInPreviousContext) {
+        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);
+    };
+}
+/**
+ * Creates a binding resolver and records the binding path in the schema.
+ * @param previousString - The previous literal string before the binding.
+ * @param rootPropertyName - The current root property name.
+ * @param path - The binding path to resolve.
+ * @param parentContext - The parent repeat context.
+ * @param type - The schema path type.
+ * @param schema - The schema to record paths in.
+ * @param currentContext - The current repeat context.
+ * @param level - The current repeat nesting level.
+ * @returns A function that resolves the binding path.
+ * @public
+ */
+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));
+}
+/**
+ * Creates a resolver for a chained expression and records its paths in the schema.
+ * @param rootPropertyName - The current root property name.
+ * @param expression - The expression to resolve.
+ * @param parentContext - The parent repeat context.
+ * @param level - The current repeat nesting level.
+ * @param schema - The schema to record paths in.
+ * @returns A function that resolves the expression.
+ * @public
+ */
+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
+ * @public
+ */
+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 - 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.replace(/'/g, '"');
+        const value = JSON.parse(operand);
+        return {
+            value,
+            isValue: true,
+        };
+    }
+    catch (_a) {
+        return {
+            value: operand,
+            isValue: false,
+        };
+    }
+}
+/**
+ * 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
+ */
+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
+ * @public
+ */
+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 {
+            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(/\s*([=!]=|[><]=?)\s*/);
+    if (split.length === 3) {
+        const operator = split[1];
+        const right = split[2];
+        const rightOperandValue = isOperandValue(right);
+        const left = split[0];
+        const leftOperandValue = isOperandValue(left);
+        return {
+            operator,
+            left: split[0],
+            leftIsValue: leftOperandValue.isValue,
+            right: rightOperandValue.isValue ? rightOperandValue.value : right,
+            rightIsValue: rightOperandValue.isValue,
+        };
+    }
+    return {
+        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: {
+            // biome-ignore lint/suspicious/noDoubleEquals: Breaks prior existing functionality - see when fixture
+            return resolvedLeft == resolvedRight;
+        }
+        case Operator.NOT_EQUALS: {
+            // biome-ignore lint/suspicious/noDoubleEquals: Breaks prior existing functionality - see when fixture
+            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.
+ * @public
+ */
+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 boolean logic
+ * used for f-when and boolean attributes
+ * @param rootPropertyName - The current root property name.
+ * @param expression - The chained expression to resolve.
+ * @param parentContext - The parent repeat context.
+ * @param level - The current repeat nesting level.
+ * @param schema - The schema to record paths in.
+ * @returns - A binding that resolves the chained expression logic
+ * @public
+ */
+export function getBooleanBinding(rootPropertyName, expression, parentContext, level, schema) {
+    const binding = expressionResolver(rootPropertyName, expression, parentContext, level, schema);
+    return (x, c) => binding(x, c);
+}
+/**
+ * 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
+ * @public
+ */
+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
+ * @public
+ */
+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;
+}