@microsoft/fast-html 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/esm/components/utilities.js

@@ -1,9 +1,27 @@
-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-";
+const startInnerHTMLDiv = `<div :innerHTML="{{`;
+const startInnerHTMLDivLength = startInnerHTMLDiv.length;
+const endInnerHTMLDiv = `}}"></div>`;
+const endInnerHTMLDivLength = endInnerHTMLDiv.length;
+/**
+ * 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
@@ -56,7 +74,8 @@ export function getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, clos
 function getNextDirectiveBehavior(innerHTML) {
     const openingTagStartIndex = innerHTML.indexOf(openTagStart);
     const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
-    const openingTagEndIndex = openingTagStartSlice.indexOf(tagEnd) + openingTagStartIndex + 1;
+    const openingTagEndIndex = // account for f-when which may include >= or > as operators, but will always include a condition attr
+     openingTagStartSlice.indexOf(`"${tagEnd}`) + openingTagStartIndex + 2;
     const directiveTag = innerHTML
         .slice(openingTagStartIndex + 3, openingTagEndIndex - 1)
         .split(" ")[0];
@@ -130,20 +149,62 @@ function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
 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(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
  * @param innerHTML - The innerHTML string to evaluate
  * @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,7 +218,7 @@ function getNextDataBindingBehavior(innerHTML) {
  * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
  */
 export function getNextBehavior(innerHTML) {
-    const dataBindingOpen = innerHTML.indexOf(openBinding);
+    const dataBindingOpen = innerHTML.indexOf(openClientSideBinding); // client side binding will capture all bindings starting with "{"
     const directiveBindingOpen = innerHTML.indexOf(openTagStart);
     if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
         return null;
@@ -167,36 +228,6 @@ export function getNextBehavior(innerHTML) {
     }
     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(">") + 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;
-}
 /**
  * Create a function to resolve a value from an object using a path with dot syntax.
  * e.g. "foo.bar"
@@ -204,9 +235,38 @@ 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) {
+    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);
         }
@@ -216,9 +276,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) => {
@@ -227,3 +289,639 @@ export function pathResolver(path, self = false) {
         }, accessibleObject);
     };
 }
+export function bindingResolver(previousString, rootPropertyName, path, parentContext, type, schema, currentContext, level) {
+    rootPropertyName = getRootPropertyName(rootPropertyName, path, currentContext, type);
+    if (type !== "event" && rootPropertyName !== null) {
+        const childrenMap = getChildrenMap(previousString);
+        schema.addPath({
+            pathConfig: {
+                type,
+                currentContext,
+                parentContext,
+                path,
+            },
+            rootPropertyName,
+            childrenMap,
+        });
+    }
+    return pathResolver(path, currentContext, level, schema.getSchema(rootPropertyName));
+}
+export function expressionResolver(rootPropertyName, expression, parentContext, level, schema) {
+    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 - 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,
+            isValue: true,
+        };
+    }
+    catch (e) {
+        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
+ */
+export function getExpressionChain(value) {
+    // 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;
+        }
+    }
+    // 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;
+        }
+    }
+    // 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(value.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] === "!") {
+        const left = value.slice(1);
+        const operandValue = isOperandValue(left);
+        return {
+            operator: "!",
+            left,
+            leftIsValue: operandValue.isValue,
+            right: null,
+            rightIsValue: null,
+        };
+    }
+    const split = value.split(" ");
+    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: "access",
+        left: value,
+        leftIsValue: false,
+        right: null,
+        rightIsValue: null,
+    };
+}
+/**
+ * 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;
+    switch (operator) {
+        case "!":
+            return !pathResolver(left, contextPath, level, rootSchema)(x, c);
+        case "==":
+            return (pathResolver(left, contextPath, level, rootSchema)(x, c) ==
+                (rightIsValue
+                    ? right
+                    : pathResolver(right, contextPath, level, rootSchema)(x, c)));
+        case "!=":
+            return (pathResolver(left, contextPath, level, rootSchema)(x, c) !=
+                (rightIsValue
+                    ? right
+                    : pathResolver(right, contextPath, level, rootSchema)(x, c)));
+        case ">=":
+            return (pathResolver(left, contextPath, level, rootSchema)(x, c) >=
+                (rightIsValue
+                    ? right
+                    : pathResolver(right, contextPath, level, rootSchema)(x, c)));
+        case ">":
+            return (pathResolver(left, contextPath, level, rootSchema)(x, c) >
+                (rightIsValue
+                    ? right
+                    : pathResolver(right, contextPath, level, rootSchema)(x, c)));
+        case "<=":
+            return (pathResolver(left, contextPath, level, rootSchema)(x, c) <=
+                (rightIsValue
+                    ? right
+                    : pathResolver(right, contextPath, level, rootSchema)(x, c)));
+        case "<":
+            return (pathResolver(left, contextPath, level, rootSchema)(x, c) <
+                (rightIsValue
+                    ? right
+                    : pathResolver(right, contextPath, level, rootSchema)(x, c)));
+        default:
+            return pathResolver(left, contextPath, level, rootSchema)(x, c);
+    }
+}
+/**
+ * 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) {
+    if (expression.next) {
+        switch (expression.next.operator) {
+            case "&&":
+            case "&amp;&amp;":
+                return (resolveExpression(x, c, level, contextPath, expression.expression, rootSchema) &&
+                    resolveChainedExpression(x, c, level, contextPath, expression.next, rootSchema));
+            case "||":
+                return (resolveExpression(x, c, level, contextPath, expression.expression, rootSchema) ||
+                    resolveChainedExpression(x, c, level, contextPath, expression.next, rootSchema));
+        }
+    }
+    return resolveExpression(x, c, level, contextPath, expression.expression, rootSchema);
+}
+/**
+ * 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) {
+    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);
+                        return Object.assign(item, originalItem);
+                    }
+                }
+            });
+        },
+    });
+    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);
+                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);
+                    }));
+                }
+            }
+            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 => {
+        Observable.defineProperty(proxiableItem, key);
+        originalItem[key] = assignProxyToItemsInObject(proxiableItem, key, originalItem[key], schemaProperties[key], rootSchema);
+    });
+}
+/**
+ * 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 and is present in the data
+ */
+function getObjectProperties(data, schemaProperties) {
+    const dataKeys = Object.keys(data);
+    const schemaPropertyKeys = Object.keys(schemaProperties !== null && schemaProperties !== void 0 ? schemaProperties : {});
+    return dataKeys.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);
+                if (!observedArraysMap.has(proxiedData)) {
+                    observedArraysMap.set(proxiedData, assignObservablesToArray(proxiedData, definition, rootSchema));
+                }
+            }
+        }
+    }
+    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 === undefined) {
+        // Create a proxy for the object that triggers Observable.notify on mutations
+        const proxy = new Proxy(object, {
+            set: (obj, prop, value) => {
+                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;
+}