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

package/CHANGELOG.md

@@ -36,9 +36,6 @@
 * 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.
-* 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

@@ -4,8 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {wait} from '@xh/hoist/promise';
-import {observable} from 'mobx';
 import {logError, throwIf} from '../utils/js';
 import {HoistBaseClass, PersistableState, PersistenceProvider, PersistOptions} from './';
 
@@ -73,38 +71,38 @@ function createPersistDescriptor(
         );
         return descriptor;
     }
-    const codeValue = descriptor.initializer,
-        initializer = function () {
-            // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
-            let ret = codeValue?.call(this);
+    const codeValue = descriptor.initializer;
+    let hasInitialized = false,
+        ret;
+    const initializer = function () {
+        // Initializer can be called multiple times when stacking decorators.
+        if (hasInitialized) return ret;
 
-            // 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;
-                        }
+        // 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(hasInitialized ? this[property] : ret),
+                setPersistableState: state => {
+                    if (!hasInitialized) {
+                        ret = state.value;
+                    } else {
+                        this[property] = state.value;
                     }
                 }
-            });
-
-            // Wait for next tick to ensure construction has completed and property has been made
-            // observable via makeObservable.
-            wait().thenAction(() => propertyAvailable.set(true));
+            }
+        });
 
-            return ret;
-        };
+        hasInitialized = true;
+        return ret;
+    };
     return {...descriptor, initializer};
 }

package/mobx/decorators.ts

@@ -5,6 +5,8 @@
  * 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
@@ -38,14 +40,40 @@ function createBindable(target, name, descriptor, isRef) {
         Object.defineProperty(target, setterName, {value});
     }
 
-    // 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)
+    // 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.)
     const key = '_xhBindableProperties';
     if (!target.hasOwnProperty(key)) {
         target[key] = {...target[key]};
     }
-    target[key][name] = isRef;
+    target[key][name] = descriptor;
 
-    // 3) Return original descriptor.
+    // 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.)
     return descriptor;
 }

package/mobx/overrides.ts

@@ -9,9 +9,7 @@ import {
     AnnotationsMap,
     CreateObservableOptions,
     makeObservable as baseMakeObservable,
-    isObservableProp as baseIsObservableProp,
-    observable,
-    runInAction
+    isObservableProp as baseIsObservableProp
 } from 'mobx';
 
 /**
@@ -23,21 +21,10 @@ 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, (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
-        });
+    forEach(bindables, (descriptor, name) => {
+        Object.defineProperty(target, name, descriptor);
     });
 
     return baseMakeObservable(target, annotations, options);

package/package.json

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