feat: support mobx 7 and mobx-react-lite 5 (#25)

Author: MatthewPattell

.github/workflows/pr-check.yml

@@ -40,9 +40,15 @@ jobs:
       - name: Check eslint
         run: npm run lint:check
 
-      - name: Test
+      - name: Test (MobX 7 / mobx-react-lite 5)
         run: npm run test -- --coverage
 
+      - name: Install MobX 6 / mobx-react-lite 4
+        run: npm install --no-save --ignore-scripts mobx@6.16.1 mobx-react-lite@4.1.1
+
+      - name: Test (MobX 6 / mobx-react-lite 4)
+        run: npm test
+
       - uses: actions/upload-artifact@v4
         with:
           name: coverage-lcov

README.md

@@ -45,6 +45,8 @@ It is built for apps that want explicit store ownership, SSR support, persistenc
 npm i @lomray/react-mobx-manager @lomray/consistent-suspense
 ```
 
+Supports MobX 6 (>=6.9.0) and 7 with mobx-react-lite 3, 4, or 5; consumers must choose compatible peers, as mobx-react-lite 5 requires MobX 7 and React 18+ (React 17 remains supported with mobx-react-lite 3 or 4).
+
 ## Documentation
 
 Full documentation lives in [here](https://lomray-software.github.io/react-mobx-manager/)

__tests__/manager.ts

@@ -71,6 +71,42 @@ describe('Manager', () => {
     expect(manager.getStores().has('GlobalStore')).to.equal(true);
   });
 
+  it('should serialize mutations to auto-observable store classes', () => {
+    class CounterStore {
+      public static id = 'counter';
+      public static isGlobal = true;
+
+      public count = 0;
+      public nested = { values: [1] };
+
+      constructor() {
+        makeAutoObservable(this, {}, { autoBind: true });
+      }
+
+      public increment(): void {
+        this.count += 1;
+        this.nested.values.push(this.count + 1);
+      }
+    }
+
+    const manager = new Manager();
+    const store = manager.getStore(CounterStore)!;
+
+    try {
+      const initialState = manager.toJSON();
+
+      store.increment();
+
+      expect(manager.getStore(CounterStore)).to.equal(store);
+      expect(initialState).to.deep.equal({ counter: { count: 0, nested: { values: [1] } } });
+      expect(manager.toJSON()).to.deep.equal({
+        counter: { count: 1, nested: { values: [1, 2] } },
+      });
+    } finally {
+      manager.destroy();
+    }
+  });
+
   it('should mark creation failure if parent store is not found', () => {
     class RelativeStore {
       public libStoreId?: string;

docs/examples/recipes.md

@@ -17,13 +17,13 @@ class UserStore {
   constructor() {
     makeObservable(this, {
       name: observable,
-      setName: action.bound,
+      setName: action,
     });
   }
 
-  public setName(name: string): void {
+  public setName = (name: string): void => {
     this.name = name;
-  }
+  };
 }
 
 const stores = {
@@ -50,13 +50,13 @@ class SomeOtherStore {
   constructor() {
     makeObservable(this, {
       value: observable,
-      setValue: action.bound,
+      setValue: action,
     });
   }
 
-  public setValue(value: string): void {
+  public setValue = (value: string): void => {
     this.value = value;
-  }
+  };
 }
 
 const stores = {

docs/guide/getting-started.md

@@ -118,13 +118,13 @@ class UserStore {
 
     makeObservable(this, {
       name: observable,
-      setName: action.bound,
+      setName: action,
     });
   }
 
-  public setName(name: string): void {
+  public setName = (name: string): void => {
     this.name = name;
-  }
+  };
 }
 
 const stores = {
@@ -152,13 +152,13 @@ class SomeOtherStore {
   constructor() {
     makeObservable(this, {
       value: observable,
-      setValue: action.bound,
+      setValue: action,
     });
   }
 
-  public setValue(value: string): void {
+  public setValue = (value: string): void => {
     this.value = value;
-  }
+  };
 }
 
 const stores = {

package-lock.json

@@ -58,6 +58,8 @@
     "husky": "^9.1.7",
     "jsdom": "^29.0.0",
     "lint-staged": "^16.4.0",
+    "mobx": "^7.0.3",
+    "mobx-react-lite": "^5.0.3",
     "prettier": "^3.8.1",
     "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
@@ -77,7 +79,7 @@
     "hoist-non-react-statics": ">=3.3.2",
     "lodash": ">=4.17.21",
     "mobx": ">=6.9.0",
-    "mobx-react-lite": "^3 || ^4",
+    "mobx-react-lite": "^3 || ^4 || ^5",
     "react": "^19 || ^18 || ^17"
   },
   "overrides": {