fix(observable): use MobX helpers to bind custom action when needed

demo/package.json

@@ -4,12 +4,12 @@
     "icon": "../logo.png"
   },
   "dependencies": {
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
     "exmpl": "^2.2.1",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
-    "papua": "^0.1.22",
+    "papua": "^0.1.28",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

index.ts

@@ -1,4 +1,10 @@
-import { observable, IObservableArray, runInAction } from 'mobx'
+import {
+  observable,
+  IObservableArray,
+  runInAction,
+  makeObservable,
+  action,
+} from 'mobx'
 
 type Class = { new (...args: any[]): any }
 
@@ -14,6 +20,13 @@ export interface NestableItem {
 // Used to ensure remove bound to instance as autoBind won't work with transpilation.
 const createInstance = (Base: Class, values: any) => {
   const instance = new Base(values)
+
+  // When using makeAutoObservable remove will already be observable.
+  if (!instance.remove.isMobxAction) {
+    makeObservable(instance, {
+      remove: action.bound,
+    })
+  }
   return instance
 }
 

test/basic.test.ts

@@ -191,3 +191,29 @@ test('Instantiation only takes place when there is data.', () => {
 
   expect(constructorMock.mock.calls.length).toBe(2)
 })
+
+test('Remove still works even if makeAutoObservable missing.', () => {
+  class NestedNotBound {
+    value: number
+
+    constructor(value: number) {
+      this.value = value
+    }
+  }
+
+  class StoreNotBound {
+    list = nestable([1, 2, 3], NestedNotBound)
+
+    constructor() {
+      makeAutoObservable(this, {}, { autoBind: true })
+    }
+  }
+
+  const Data = new StoreNotBound()
+
+  expect(Data.list.length).toEqual(3)
+
+  Data.list[1].remove()
+
+  expect(Data.list.length).toEqual(2)
+})