@microsoft/fast-html 1.0.0-alpha.33 → 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/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/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.33",
+  "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"