@xh/hoist 73.0.0-SNAPSHOT.1746798376611 → 73.0.0-SNAPSHOT.1746826299049

package/CHANGELOG.md

@@ -36,7 +36,9 @@
 * Fixed drag-and-drop usability issues with the mobile `ColChooser`.
 * Made `GridModel.defaultGroupSortFn` null-safe and improved type signature.
 * Disable `dashCanvasAddViewButton` if there are no `menuItems` to show.
-* Fixed `@persist` decorator.
+* Improvements to `@bindable` and `@persist` to handle lifecycle-related bugs. Note that previously
+  `@bindable` would work even if `makeObservable()` was not called, but this is no longer the case.
+  Please ensure that `makeObservable()` is called in your model's constructor when using `@bindable`.
 
 ### ⚙️ Typescript API Adjustments
 

package/core/HoistBaseDecorators.ts

@@ -74,42 +74,37 @@ function createPersistDescriptor(
         return descriptor;
     }
     const codeValue = descriptor.initializer,
-        // True once the property is available on the instance (after other decorators have run).
-        propertyAvailable = observable.box(false);
-    let hasInitialized = false,
-        ret;
-    const initializer = function () {
-        // Initializer can be called multiple times when stacking decorators.
-        if (hasInitialized) return ret;
+        initializer = function () {
+            // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
+            let ret = codeValue?.call(this);
 
-        // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
-        ret = codeValue?.call(this);
-
-        const persistOptions = {
-            path: property,
-            ...PersistenceProvider.mergePersistOptions(this.persistWith, options)
-        };
-        PersistenceProvider.create({
-            persistOptions,
-            owner: this,
-            target: {
-                getPersistableState: () =>
-                    new PersistableState(propertyAvailable.get() ? this[property] : ret),
-                setPersistableState: state => {
-                    if (!hasInitialized) {
-                        ret = state.value;
-                    } else {
-                        this[property] = state.value;
+            // Property is not available on the instance until after the next tick.
+            const propertyAvailable = observable.box(false),
+                persistOptions = {
+                    path: property,
+                    ...PersistenceProvider.mergePersistOptions(this.persistWith, options)
+                };
+            PersistenceProvider.create({
+                persistOptions,
+                owner: this,
+                target: {
+                    getPersistableState: () =>
+                        new PersistableState(propertyAvailable.get() ? this[property] : ret),
+                    setPersistableState: state => {
+                        if (!propertyAvailable.get()) {
+                            ret = state.value;
+                        } else {
+                            this[property] = state.value;
+                        }
                     }
                 }
-            }
-        });
+            });
 
-        // Wait for next tick to ensure property is available on the instance before observing.
-        wait().then(() => propertyAvailable.set(true));
+            // Wait for next tick to ensure construction has completed and property has been made
+            // observable via makeObservable.
+            wait().thenAction(() => propertyAvailable.set(true));
 
-        hasInitialized = true;
-        return ret;
-    };
+            return ret;
+        };
     return {...descriptor, initializer};
 }

package/mobx/decorators.ts

@@ -5,8 +5,6 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {upperFirst} from 'lodash';
-import {observable, runInAction} from 'mobx';
-import {getOrCreate} from '../utils/js';
 
 /**
  * Decorator to mark a property as observable and also provide a simple MobX action of the
@@ -40,40 +38,14 @@ function createBindable(target, name, descriptor, isRef) {
         Object.defineProperty(target, setterName, {value});
     }
 
-    // 2) Place a hidden getter on prototype that wraps the backing observable.
-    const {initializer} = descriptor,
-        propName = `_${name}_bindable`,
-        valName = `_${name}_bindable_value`;
-    Object.defineProperty(target, propName, {
-        get() {
-            return getOrCreate(this, valName, () => {
-                const initVal = initializer?.call(this);
-                return isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
-            });
-        }
-    });
-
-    // 3) Create the descriptor for a getter/setter pair..
-    descriptor = {
-        get() {
-            return this[propName].get();
-        },
-        set(v) {
-            runInAction(() => this[propName].set(v));
-        },
-        enumerable: true,
-        configurable: true
-    };
-
-    // 4) Record on class, so we can later create on *instance* in makeObservable.
-    // (Be sure to create cloned list for *this* particular class.)
+    // 2) Record on class, so we can later create on *instance* in makeObservable.
+    // (Be sure to create cloned list since this will exist on prototype superclasses of this class)
     const key = '_xhBindableProperties';
     if (!target.hasOwnProperty(key)) {
         target[key] = {...target[key]};
     }
-    target[key][name] = descriptor;
+    target[key][name] = isRef;
 
-    // 5) Return the get/set to be placed on prototype.  (If makeObservable() never called, or called
-    // late, the non-enumerable property will still be available.)
+    // 3) Return original descriptor.
     return descriptor;
 }

package/mobx/overrides.ts

@@ -9,7 +9,9 @@ import {
     AnnotationsMap,
     CreateObservableOptions,
     makeObservable as baseMakeObservable,
-    isObservableProp as baseIsObservableProp
+    isObservableProp as baseIsObservableProp,
+    observable,
+    runInAction
 } from 'mobx';
 
 /**
@@ -21,10 +23,21 @@ export function makeObservable(
     options?: CreateObservableOptions
 ) {
     // Finish creating 'bindable' properties for this instance.
-    // Do here to ensure it's enumerable on *instance*
     const bindables = target._xhBindableProperties;
-    forEach(bindables, (descriptor, name) => {
-        Object.defineProperty(target, name, descriptor);
+    forEach(bindables, (isRef, name) => {
+        const propName = `_${name}_bindable`,
+            initVal = target[name];
+        target[propName] = isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
+        Object.defineProperty(target, name, {
+            get() {
+                return this[propName].get();
+            },
+            set(v) {
+                runInAction(() => this[propName].set(v));
+            },
+            enumerable: true,
+            configurable: true
+        });
     });
 
     return baseMakeObservable(target, annotations, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746798376611",
+  "version": "73.0.0-SNAPSHOT.1746826299049",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",