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

package/dist/dts/components/observer-map.d.ts

@@ -20,6 +20,7 @@ export declare class ObserverMap {
      * Creates a property change handler function for observable properties
      * This handler is called when an observable property transitions from undefined to a defined value
      * @param propertyName - The name of the property for which to create the change handler
+     * @param existingChangedMethod - Optional existing changed method to call after the instance resolver logic
      * @returns A function that handles property changes and sets up proxies for object values
      */
     private defineChanged;

package/dist/dts/components/utilities.d.ts

@@ -165,4 +165,20 @@ export declare function getRootPropertyName(rootPropertyName: string | null, pat
  * @returns null, or a custom element name and attribute name
  */
 export declare function getChildrenMap(previousString: string | null): ChildrenMap | null;
+/**
+ * Deeply compares two objects for equality.
+ *
+ * @param obj1 - First object to compare
+ * @param obj2 - Second object to compare
+ * @returns True if the objects are deeply equal, false otherwise
+ */
+export declare function deepEqual(obj1: any, obj2: any): boolean;
+/**
+ * Deeply merges the source object into the target object.
+ *
+ * @param target - The target object to merge into
+ * @param source - The source object to merge from
+ * @returns void
+ */
+export declare function deepMerge(target: any, source: any): void;
 export {};

package/dist/esm/components/observer-map.js

@@ -10,20 +10,24 @@ export class ObserverMap {
          * Creates a property change handler function for observable properties
          * This handler is called when an observable property transitions from undefined to a defined value
          * @param propertyName - The name of the property for which to create the change handler
+         * @param existingChangedMethod - Optional existing changed method to call after the instance resolver logic
          * @returns A function that handles property changes and sets up proxies for object values
          */
-        this.defineChanged = (propertyName) => {
+        this.defineChanged = (propertyName, existingChangedMethod) => {
             const getAndAssignObservablesAlias = this.getAndAssignObservables;
             const schema = this.schema;
             function instanceResolverChanged(prev, next) {
-                if (prev === undefined ||
+                if (next === null || typeof next !== "object") {
+                    this[propertyName] = next;
+                }
+                else if (prev === undefined ||
                     ((prev === null || prev === void 0 ? void 0 : prev.$isProxy) && !(next === null || next === void 0 ? void 0 : next.$isProxy)) ||
                     (Array.isArray(prev) &&
                         Array.isArray(next) &&
                         !(next === null || next === void 0 ? void 0 : next.$fastController))) {
-                    const proxy = getAndAssignObservablesAlias(this, propertyName, next, schema);
-                    this[propertyName] = proxy;
+                    this[propertyName] = getAndAssignObservablesAlias(this, propertyName, next, schema);
                 }
+                existingChangedMethod === null || existingChangedMethod === void 0 ? void 0 : existingChangedMethod.call(this, prev, next);
             }
             return instanceResolverChanged;
         };
@@ -32,10 +36,15 @@ export class ObserverMap {
     }
     defineProperties() {
         const propertyNames = this.schema.getRootProperties();
+        const existingAccessors = Observable.getAccessors(this.classPrototype);
         for (const propertyName of propertyNames) {
-            Observable.defineProperty(this.classPrototype, propertyName);
-            this.classPrototype[`${propertyName}Changed`] =
-                this.defineChanged(propertyName);
+            // Skip if property already has an accessor (from `@attr` or `@observable` decorator)
+            if (!existingAccessors.some(accessor => accessor.name === propertyName)) {
+                Observable.defineProperty(this.classPrototype, propertyName);
+            }
+            const changedMethodName = `${propertyName}Changed`;
+            const existingChangedMethod = this.classPrototype[changedMethodName];
+            this.classPrototype[changedMethodName] = this.defineChanged(propertyName, existingChangedMethod);
         }
     }
     /**

package/dist/esm/components/utilities.js

@@ -970,3 +970,104 @@ function getAttributeName(previousString) {
     }
     return attributeName;
 }
+/**
+ * Deeply compares two objects for equality.
+ *
+ * @param obj1 - First object to compare
+ * @param obj2 - Second object to compare
+ * @returns True if the objects are deeply equal, false otherwise
+ */
+export function deepEqual(obj1, obj2) {
+    if (Object.is(obj1, obj2)) {
+        return true;
+    }
+    if (obj1 == null || obj2 == null) {
+        return false;
+    }
+    const type1 = typeof obj1;
+    const type2 = typeof obj2;
+    if (type1 !== type2 || type1 !== "object") {
+        return false;
+    }
+    const isArray1 = Array.isArray(obj1);
+    const isArray2 = Array.isArray(obj2);
+    if (isArray1 !== isArray2) {
+        return false;
+    }
+    if (isArray1) {
+        const len = obj1.length;
+        if (len !== obj2.length) {
+            return false;
+        }
+        for (let i = 0; i < len; i++) {
+            if (!deepEqual(obj1[i], obj2[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    const hasOwn = Object.prototype.hasOwnProperty;
+    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;
+            }
+        }
+    }
+    let obj2KeyCount = 0;
+    for (const key in obj2) {
+        if (hasOwn.call(obj2, key)) {
+            obj2KeyCount++;
+        }
+    }
+    return keyCount === obj2KeyCount;
+}
+/**
+ * Deeply merges the source object into the target object.
+ *
+ * @param target - The target object to merge into
+ * @param source - The source object to merge from
+ * @returns void
+ */
+export function deepMerge(target, source) {
+    const hasOwn = Object.prototype.hasOwnProperty;
+    for (const key in source) {
+        if (!hasOwn.call(source, key)) {
+            continue;
+        }
+        const sourceValue = source[key];
+        if (sourceValue === void 0) {
+            continue;
+        }
+        const targetValue = target[key];
+        if (deepEqual(targetValue, sourceValue)) {
+            continue;
+        }
+        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);
+            if (isTargetArray) {
+                // Use splice to maintain observable array tracking
+                targetValue.splice(0, targetValue.length, ...clonedItems);
+            }
+            else {
+                // Target isn't an array, replace it
+                target[key] = clonedItems;
+            }
+            continue;
+        }
+        if (sourceValue && typeof sourceValue === "object") {
+            if (!targetValue ||
+                typeof targetValue !== "object" ||
+                Array.isArray(targetValue)) {
+                target[key] = {};
+            }
+            deepMerge(target[key], sourceValue);
+            continue;
+        }
+        target[key] = sourceValue;
+    }
+}

package/dist/fast-html.d.ts

@@ -105,6 +105,7 @@ export declare class ObserverMap {
      * Creates a property change handler function for observable properties
      * This handler is called when an observable property transitions from undefined to a defined value
      * @param propertyName - The name of the property for which to create the change handler
+     * @param existingChangedMethod - Optional existing changed method to call after the instance resolver logic
      * @returns A function that handles property changes and sets up proxies for object values
      */
     private defineChanged;

package/dist/fast-html.untrimmed.d.ts

@@ -105,6 +105,7 @@ export declare class ObserverMap {
      * Creates a property change handler function for observable properties
      * This handler is called when an observable property transitions from undefined to a defined value
      * @param propertyName - The name of the property for which to create the change handler
+     * @param existingChangedMethod - Optional existing changed method to call after the instance resolver logic
      * @returns A function that handles property changes and sets up proxies for object values
      */
     private defineChanged;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-html",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.34",
   "type": "module",
   "author": {
     "name": "Microsoft",
@@ -11,7 +11,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Microsoft/fast.git",
-    "directory": "packages/web-components/fast-html"
+    "directory": "packages/fast-html"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
@@ -47,6 +47,10 @@
       "types": "./dist/dts/index.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./utilities.js": {
+      "types": "./dist/dts/components/utilities.d.ts",
+      "default": "./dist/esm/components/utilities.js"
+    },
     "./rules/*.yml": "./rules/*.yml",
     "./package.json": "./package.json"
   },
@@ -54,12 +58,12 @@
     "./dist/esm/index.js"
   ],
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.8.2"
+    "@microsoft/fast-element": "^2.8.3"
   },
   "devDependencies": {
     "@ast-grep/cli": "^0.37.0",
     "@microsoft/api-extractor": "^7.47.0",
-    "@microsoft/fast-element": "^2.8.2",
+    "@microsoft/fast-element": "^2.8.3",
     "@types/express": "^4.17.21",
     "@types/node": "^17.0.17",
     "typescript": "~5.3.0"