@microsoft/fast-html 1.0.0-alpha.34 → 1.0.0-alpha.35

package/dist/esm/components/template.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate, __metadata } from "tslib";
+import { __decorate, __metadata } from "tslib";
 import { attr, children, elements, FAST, FASTElement, FASTElementDefinition, fastElementRegistry, HydratableElementController, ref, repeat, slotted, ViewTemplate, when, } from "@microsoft/fast-element";
 import "@microsoft/fast-element/install-hydratable-view-templates.js";
 import { ObserverMap } from "./observer-map.js";
@@ -23,7 +23,7 @@ class TemplateElement extends FASTElement {
     static config(callbacks) {
         TemplateElement.lifecycleCallbacks = callbacks;
         // Pass the hydration-specific callbacks to HydratableElementController
-        HydratableElementController.config(Object.assign({}, callbacks));
+        HydratableElementController.config({ ...callbacks });
         return this;
     }
     /**
@@ -68,7 +68,7 @@ class TemplateElement extends FASTElement {
             return;
         }
         this.schema = new Schema(name);
-        FASTElementDefinition.registerAsync(name).then((value) => __awaiter(this, void 0, void 0, function* () {
+        FASTElementDefinition.registerAsync(name).then(async (value) => {
             var _a, _b, _c, _d, _e, _f, _g;
             (_b = (_a = TemplateElement.lifecycleCallbacks).elementDidRegister) === null || _b === void 0 ? void 0 : _b.call(_a, name);
             if (!((_c = TemplateElement.elementOptions) === null || _c === void 0 ? void 0 : _c[name])) {
@@ -84,7 +84,7 @@ class TemplateElement extends FASTElement {
                 (_f = (_e = TemplateElement.lifecycleCallbacks).templateWillUpdate) === null || _f === void 0 ? void 0 : _f.call(_e, name);
                 const innerHTML = transformInnerHTML(this.innerHTML);
                 // Cache paths during template processing (pass undefined if observerMap is not available)
-                const { strings, values } = yield this.resolveStringsAndValues(null, innerHTML, false, null, 0, this.schema, this.observerMap);
+                const { strings, values } = await this.resolveStringsAndValues(null, innerHTML, false, null, 0, this.schema, this.observerMap);
                 // Define the root properties cached in the observer map as observable (only if observerMap exists)
                 (_g = this.observerMap) === null || _g === void 0 ? void 0 : _g.defineProperties();
                 if (registeredFastElement) {
@@ -102,7 +102,7 @@ class TemplateElement extends FASTElement {
             else {
                 throw FAST.error(2000 /* Message.noTemplateProvided */, { name: this.name });
             }
-        }));
+        });
     }
     /**
      * Resolve strings and values from an innerHTML string
@@ -110,17 +110,15 @@ class TemplateElement extends FASTElement {
      * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
      * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    resolveStringsAndValues(rootPropertyName, innerHTML, self = false, parentContext, level, schema, observerMap) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const strings = [];
-            const values = []; // these can be bindings, directives, etc.
-            yield this.resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self, parentContext, level, schema, observerMap);
-            strings.raw = strings.map(value => String.raw({ raw: value }));
-            return {
-                strings,
-                values,
-            };
-        });
+    async resolveStringsAndValues(rootPropertyName, innerHTML, self = false, parentContext, level, schema, observerMap) {
+        const strings = [];
+        const values = []; // these can be bindings, directives, etc.
+        await this.resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self, parentContext, level, schema, observerMap);
+        strings.raw = strings.map(value => String.raw({ raw: value }));
+        return {
+            strings,
+            values,
+        };
     }
     /**
      * Resolve a template or behavior
@@ -138,27 +136,25 @@ class TemplateElement extends FASTElement {
      * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
      * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    resolveTemplateDirective(rootPropertyName, behaviorConfig, externalValues, innerHTML, self = false, parentContext, level, schema, observerMap) {
-        return __awaiter(this, void 0, void 0, function* () {
-            switch (behaviorConfig.name) {
-                case "when": {
-                    const expressionChain = getExpressionChain(behaviorConfig.value);
-                    const whenLogic = resolveWhen(rootPropertyName, expressionChain, parentContext, level, schema);
-                    const { strings, values } = yield this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), self, parentContext, level, schema, observerMap);
-                    externalValues.push(when(whenLogic, this.resolveTemplateOrBehavior(strings, values)));
-                    break;
-                }
-                case "repeat": {
-                    const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
-                    const updatedLevel = level + 1;
-                    rootPropertyName = getRootPropertyName(rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name);
-                    const binding = bindingResolver(null, rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name, schema, valueAttr[0], level);
-                    const { strings, values } = yield this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true, valueAttr[0], updatedLevel, schema, observerMap);
-                    externalValues.push(repeat((x, c) => binding(x, c), this.resolveTemplateOrBehavior(strings, values)));
-                    break;
-                }
+    async resolveTemplateDirective(rootPropertyName, behaviorConfig, externalValues, innerHTML, self = false, parentContext, level, schema, observerMap) {
+        switch (behaviorConfig.name) {
+            case "when": {
+                const expressionChain = getExpressionChain(behaviorConfig.value);
+                const whenLogic = resolveWhen(rootPropertyName, expressionChain, parentContext, level, schema);
+                const { strings, values } = await this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), self, parentContext, level, schema, observerMap);
+                externalValues.push(when(whenLogic, this.resolveTemplateOrBehavior(strings, values)));
+                break;
             }
-        });
+            case "repeat": {
+                const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
+                const updatedLevel = level + 1;
+                rootPropertyName = getRootPropertyName(rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name);
+                const binding = bindingResolver(null, rootPropertyName, valueAttr[2], parentContext, behaviorConfig.name, schema, valueAttr[0], level);
+                const { strings, values } = await this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true, valueAttr[0], updatedLevel, schema, observerMap);
+                externalValues.push(repeat((x, c) => binding(x, c), this.resolveTemplateOrBehavior(strings, values)));
+                break;
+            }
+        }
     }
     /**
      * Resolve a template directive
@@ -166,36 +162,34 @@ class TemplateElement extends FASTElement {
      * @param propName - The property name to pass to the directive.
      * @param externalValues - The interpreted values from the parent.
      */
-    resolveAttributeDirective(name, propName, externalValues) {
-        return __awaiter(this, void 0, void 0, function* () {
-            switch (name) {
-                case "children": {
-                    externalValues.push(children(propName));
-                    break;
-                }
-                case "slotted": {
-                    const parts = propName.trim().split(" filter ");
-                    const slottedOption = {
-                        property: parts[0],
-                    };
-                    if (parts[1]) {
-                        if (parts[1].startsWith("elements(")) {
-                            let params = parts[1].replace("elements(", "");
-                            params = params.substring(0, params.lastIndexOf(")"));
-                            Object.assign(slottedOption, {
-                                filter: elements(params || undefined),
-                            });
-                        }
+    async resolveAttributeDirective(name, propName, externalValues) {
+        switch (name) {
+            case "children": {
+                externalValues.push(children(propName));
+                break;
+            }
+            case "slotted": {
+                const parts = propName.trim().split(" filter ");
+                const slottedOption = {
+                    property: parts[0],
+                };
+                if (parts[1]) {
+                    if (parts[1].startsWith("elements(")) {
+                        let params = parts[1].replace("elements(", "");
+                        params = params.substring(0, params.lastIndexOf(")"));
+                        Object.assign(slottedOption, {
+                            filter: elements(params || undefined),
+                        });
                     }
-                    externalValues.push(slotted(slottedOption));
-                    break;
-                }
-                case "ref": {
-                    externalValues.push(ref(propName));
-                    break;
                 }
+                externalValues.push(slotted(slottedOption));
+                break;
             }
-        });
+            case "ref": {
+                externalValues.push(ref(propName));
+                break;
+            }
+        }
     }
     /**
      * Resolver of a data binding
@@ -206,60 +200,58 @@ class TemplateElement extends FASTElement {
      * @param behaviorConfig - The binding behavior configuration object.
      * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    resolveDataBinding(rootPropertyName, innerHTML, strings, values, self = false, behaviorConfig, parentContext, level, schema, observerMap) {
-        return __awaiter(this, void 0, void 0, function* () {
-            switch (behaviorConfig.subtype) {
-                case "content": {
-                    strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
-                    const type = "access";
-                    const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+    async resolveDataBinding(rootPropertyName, innerHTML, strings, values, self = false, behaviorConfig, parentContext, level, schema, observerMap) {
+        switch (behaviorConfig.subtype) {
+            case "content": {
+                strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                const type = "access";
+                const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                const contentBinding = (x, c) => binding(x, c);
+                values.push(contentBinding);
+                await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                break;
+            }
+            case "attribute": {
+                strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                if (behaviorConfig.aspect === "@") {
+                    const bindingHTML = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                    const openingParenthesis = bindingHTML.indexOf("(");
+                    const closingParenthesis = bindingHTML.indexOf(")");
+                    const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex -
+                        (closingParenthesis - openingParenthesis) -
+                        1);
+                    const type = "event";
                     rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                    const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
                     const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
-                    const contentBinding = (x, c) => binding(x, c);
-                    values.push(contentBinding);
-                    yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
-                    break;
-                }
-                case "attribute": {
-                    strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
-                    if (behaviorConfig.aspect === "@") {
-                        const bindingHTML = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                        const openingParenthesis = bindingHTML.indexOf("(");
-                        const closingParenthesis = bindingHTML.indexOf(")");
-                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex -
-                            (closingParenthesis - openingParenthesis) -
-                            1);
-                        const type = "event";
-                        rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
-                        const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
-                        const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
-                        const attributeBinding = (x, c) => binding(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
-                            ? [
-                                bindingResolver(strings.join(""), rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
-                            ]
-                            : []));
-                        values.push(attributeBinding);
-                    }
-                    else {
-                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                        const type = "access";
-                        rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
-                        const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
-                        const attributeBinding = (x, c) => binding(x, c);
-                        values.push(attributeBinding);
-                    }
-                    yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
-                    break;
+                    const attributeBinding = (x, c) => binding(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
+                        ? [
+                            bindingResolver(strings.join(""), rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
+                        ]
+                        : []));
+                    values.push(attributeBinding);
                 }
-                case "attributeDirective": {
-                    strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex - behaviorConfig.name.length - 4));
+                else {
                     const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                    yield this.resolveAttributeDirective(behaviorConfig.name, propName, values);
-                    yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
-                    break;
+                    const type = "access";
+                    rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                    const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                    const attributeBinding = (x, c) => binding(x, c);
+                    values.push(attributeBinding);
                 }
+                await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                break;
             }
-        });
+            case "attributeDirective": {
+                strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex - behaviorConfig.name.length - 4));
+                const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                await this.resolveAttributeDirective(behaviorConfig.name, propName, values);
+                await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                break;
+            }
+        }
     }
     /**
      * Resolver of the innerHTML string
@@ -269,27 +261,25 @@ class TemplateElement extends FASTElement {
      * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
      * @param observerMap - ObserverMap instance for caching binding paths (optional).
      */
-    resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self = false, parentContext, level, schema, observerMap) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const behaviorConfig = getNextBehavior(innerHTML);
-            if (behaviorConfig === null) {
-                strings.push(innerHTML);
-            }
-            else {
-                switch (behaviorConfig.type) {
-                    case "dataBinding": {
-                        yield this.resolveDataBinding(rootPropertyName, innerHTML, strings, values, self, behaviorConfig, parentContext, level, schema, observerMap);
-                        break;
-                    }
-                    case "templateDirective": {
-                        strings.push(innerHTML.slice(0, behaviorConfig.openingTagStartIndex));
-                        yield this.resolveTemplateDirective(rootPropertyName, behaviorConfig, values, innerHTML, self, parentContext, level, schema, observerMap);
-                        yield this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingTagEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
-                        break;
-                    }
+    async resolveInnerHTML(rootPropertyName, innerHTML, strings, values, self = false, parentContext, level, schema, observerMap) {
+        const behaviorConfig = getNextBehavior(innerHTML);
+        if (behaviorConfig === null) {
+            strings.push(innerHTML);
+        }
+        else {
+            switch (behaviorConfig.type) {
+                case "dataBinding": {
+                    await this.resolveDataBinding(rootPropertyName, innerHTML, strings, values, self, behaviorConfig, parentContext, level, schema, observerMap);
+                    break;
+                }
+                case "templateDirective": {
+                    strings.push(innerHTML.slice(0, behaviorConfig.openingTagStartIndex));
+                    await this.resolveTemplateDirective(rootPropertyName, behaviorConfig, values, innerHTML, self, parentContext, level, schema, observerMap);
+                    await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingTagEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
+                    break;
                 }
             }
-        });
+        }
     }
 }
 /**

package/dist/esm/components/utilities.js

@@ -28,7 +28,10 @@ const ComparisonOperator = {
     NOT: "!",
     NOT_EQUALS: "!=",
 };
-const Operator = Object.assign(Object.assign({}, LogicalOperator), ComparisonOperator);
+const Operator = {
+    ...LogicalOperator,
+    ...ComparisonOperator,
+};
 /**
  * A map of proxied objects
  */
@@ -141,7 +144,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
@@ -154,7 +161,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
@@ -162,7 +173,10 @@ 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
@@ -403,7 +417,10 @@ function evaluatePartsInExpressionChain(parts, operator) {
                 while (current.next) {
                     current = current.next;
                 }
-                current.next = Object.assign({ operator }, nextPart);
+                current.next = {
+                    operator,
+                    ...nextPart,
+                };
             }
         }
         return firstPart;
@@ -536,7 +553,16 @@ function resolveExpression(x, c, level, contextPath, expression, rootSchema) {
             return resolvedLeft < resolvedRight;
         }
         default: {
-            return resolvedLeft;
+            if (typeof resolvedLeft === "boolean") {
+                return resolvedLeft;
+            }
+            if (typeof resolvedLeft === "number") {
+                return resolvedLeft !== 0;
+            }
+            if (typeof resolvedLeft === "string") {
+                return resolvedLeft.length > 0;
+            }
+            return !!resolvedLeft;
         }
     }
 }
@@ -882,10 +908,14 @@ function notifyObservables(targetObject) {
  * @returns Proxy object
  */
 export function assignProxy(schema, rootSchema, target, rootProperty, object) {
-    if (object.$isProxy === undefined) {
+    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;
@@ -970,6 +1000,49 @@ function getAttributeName(previousString) {
     }
     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.
  *
@@ -1007,22 +1080,17 @@ export function deepEqual(obj1, obj2) {
         return true;
     }
     const hasOwn = Object.prototype.hasOwnProperty;
-    let keyCount = 0;
-    for (const key in obj1) {
-        if (hasOwn.call(obj1, key)) {
-            keyCount++;
-            if (!hasOwn.call(obj2, key) || !deepEqual(obj1[key], obj2[key])) {
-                return false;
-            }
-        }
+    const obj1Keys = getComparableKeys(obj1);
+    const obj2Keys = getComparableKeys(obj2);
+    if (obj1Keys.length !== obj2Keys.length) {
+        return false;
     }
-    let obj2KeyCount = 0;
-    for (const key in obj2) {
-        if (hasOwn.call(obj2, key)) {
-            obj2KeyCount++;
+    for (const key of obj1Keys) {
+        if (!hasOwn.call(obj2, key) || !deepEqual(obj1[key], obj2[key])) {
+            return false;
         }
     }
-    return keyCount === obj2KeyCount;
+    return true;
 }
 /**
  * Deeply merges the source object into the target object.
@@ -1048,7 +1116,7 @@ export function deepMerge(target, source) {
         const isSourceArray = Array.isArray(sourceValue);
         if (isSourceArray) {
             const isTargetArray = Array.isArray(targetValue);
-            const clonedItems = sourceValue.map((item) => item && typeof item === "object" ? Object.assign({}, item) : item);
+            const clonedItems = sourceValue.map((item) => item && typeof item === "object" ? { ...item } : item);
             if (isTargetArray) {
                 // Use splice to maintain observable array tracking
                 targetValue.splice(0, targetValue.length, ...clonedItems);