@xh/hoist 73.0.0-SNAPSHOT.1747323994993 → 73.0.0-SNAPSHOT.1747334203807

package/CHANGELOG.md

@@ -12,6 +12,8 @@
   initialize a new `ViewManagerModel`.
   * For clarity, [here is where Toolbox makes that call](https://github.com/xh/toolbox/blob/f15a8018ce36c2ae998b45724b48a16320b88e49/client-app/src/admin/AppModel.ts#L12).
 * Requires call to `makeObservable(this)` in model constructors with `@bindable` (see below).
+  Note that there is a new runtime check on all instances of `HoistBase` to warn if this call has not
+  been made.
 * Requires @xh/hoist-dev-utils >= 11.0
 * Apps must also rename their .eslintrc file to eslint.client.cjs and copy the configuration found in Toolbox.
 

package/build/types/core/HoistBase.d.ts

@@ -19,6 +19,7 @@ export interface HoistBaseClass {
 export declare abstract class HoistBase {
     static get isHoistBase(): boolean;
     get isHoistBase(): boolean;
+    constructor();
     /**
      * For XH internal use only - marks this instance as created by and for Hoist as part of its
      * own implementation. Used as a filter within Hoist Inspector to distinguish services and

package/build/types/mobx/overrides.d.ts

@@ -6,4 +6,9 @@ export declare function makeObservable(target: any, annotations?: AnnotationsMap
 /**
  * An enhanced version of the native mobx isObservableProp
  */
-export declare function isObservableProp(target: any, propertyKey: PropertyKey): boolean;
+export declare function isObservableProp(target: any, propertyKey: string): boolean;
+/**
+ * Check that if a class property was annotated with @bindable or @observable that
+ * makeObservable was actually called on the instance.  Log error on fail.
+ */
+export declare function checkMakeObservable(target: any): void;

package/core/HoistBase.ts

@@ -7,6 +7,7 @@
 import {
     action,
     autorun as mobxAutorun,
+    checkMakeObservable,
     comparer,
     reaction as mobxReaction,
     runInAction,
@@ -34,6 +35,7 @@ import {
 import {IAutorunOptions, IReactionOptions} from 'mobx/dist/api/autorun';
 import {IEqualsComparer, IReactionDisposer} from 'mobx/dist/internal';
 import {DebounceSpec, PersistableState, PersistenceProvider, PersistOptions, Some, XH} from './';
+import {wait} from '@xh/hoist/promise';
 
 export interface HoistBaseClass {
     new (...args: any[]): HoistBase;
@@ -58,6 +60,12 @@ export abstract class HoistBase {
         return true;
     }
 
+    constructor() {
+        if (XH.isDevelopmentMode) {
+            wait().then(() => checkMakeObservable(this));
+        }
+    }
+
     /**
      * For XH internal use only - marks this instance as created by and for Hoist as part of its
      * own implementation. Used as a filter within Hoist Inspector to distinguish services and

package/mobx/overrides.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {forEach} from 'lodash';
+import {forEach, isEmpty} from 'lodash';
 import {
     AnnotationsMap,
     CreateObservableOptions,
@@ -13,6 +13,7 @@ import {
     observable,
     runInAction
 } from 'mobx';
+import {logError} from '@xh/hoist/utils/js';
 
 /**
  * An enhanced version of the native mobx makeObservable.
@@ -24,15 +25,14 @@ export function makeObservable(
 ) {
     // Finish creating 'bindable' properties for this instance.
     forEach(target._xhBindableProperties, ({isRef}, name) => {
-        const propName = `_${name}_bindable`;
-
         // makeObservable is called by each constructor in the class hierarchy.
         // Don't process the property before initialized...or if its already processed
-        if (!target.hasOwnProperty(name) || target.hasOwnProperty(propName)) {
+        if (!target.hasOwnProperty(name) || isBindableCreated(target, name)) {
             return;
         }
 
-        const initVal = target[name];
+        const initVal = target[name],
+            propName = `_${name}_bindable`;
         target[propName] = isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
         Object.defineProperty(target, name, {
             get() {
@@ -52,8 +52,44 @@ export function makeObservable(
 /**
  * An enhanced version of the native mobx isObservableProp
  */
-export function isObservableProp(target: any, propertyKey: PropertyKey): boolean {
-    return (
-        baseIsObservableProp(target, propertyKey) || !!target?._xhBindableProperties?.[propertyKey]
+export function isObservableProp(target: any, propertyKey: string): boolean {
+    return baseIsObservableProp(target, propertyKey) || isBindableCreated(target, propertyKey);
+}
+
+/**
+ * Check that if a class property was annotated with @bindable or @observable that
+ * makeObservable was actually called on the instance.  Log error on fail.
+ */
+export function checkMakeObservable(target: any) {
+    const missing = [];
+
+    // Check @bindable props
+    forEach(target._xhBindableProperties, (v, k) => {
+        if (!isBindableCreated(target, k)) missing.push(k);
+    });
+
+    // Check @observable props -- use internal mobx collection containing unprocessed annotations.
+    const sym = Object.getOwnPropertySymbols(target).find(
+        it => it.toString() == 'Symbol(mobx-stored-annotations)'
     );
+    if (sym) {
+        forEach(target[sym], (v, k) => {
+            if (v.annotationType_?.startsWith('observable')) missing.push(k);
+        });
+    }
+
+    if (!isEmpty(missing)) {
+        logError(
+            `Observable properties [${missing.join(', ')}] not initialized properly. ` +
+                'Ensure you call makeObservable() in your constructor',
+            target
+        );
+    }
+}
+
+//--------------------
+// Implementation
+//--------------------
+function isBindableCreated(target: any, name: string): boolean {
+    return target.hasOwnProperty(`_${name}_bindable`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1747323994993",
+  "version": "73.0.0-SNAPSHOT.1747334203807",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -96,7 +96,7 @@
     "@ag-grid-community/react": "31.x",
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
-    "@xh/hoist-dev-utils": "11.0.0-SNAPSHOT.1747323244863",
+    "@xh/hoist-dev-utils": "11.0.0-SNAPSHOT.1747333512169",
     "csstype": "3.x",
     "eslint": "9.x",
     "eslint-config-prettier": "10.x",