feat(proxy-state-tree): allow class instances

Author: christianalfoni

packages/node_modules/proxy-state-tree/src/Proxyfier.ts

@@ -295,14 +295,16 @@ export class Proxifier {
         const nestedPath = proxifier.concat(path, prop)
         const currentTree = trackingTree || proxifier.tree
 
-        if (typeof targetValue === 'function') {
+        if (typeof targetValue === 'function' && target.constructor.name === 'Object') {
           return proxifier.tree.master.options.dynamicWrapper
             ? proxifier.tree.master.options.dynamicWrapper(
                 trackingTree || proxifier.tree,
                 nestedPath,
                 targetValue
               )
-            : targetValue(proxifier.tree, nestedPath)
+            : targetValue.call(target, proxifier.tree, nestedPath)
+        } else if (targetValue === 'function') {
+          return (...args) => targetValue.call(target, ...args)
         } else {
           currentTree.trackPathListeners.forEach((cb) => cb(nestedPath))
           trackingTree && trackingTree.proxifier.trackPath(nestedPath)
@@ -404,11 +406,11 @@ export class Proxifier {
         return this.proxify(value[VALUE], path)
       } else if (value[IS_PROXY]) {
         return value
-      } else if (isPlainObject(value)) {
-        return this.createObjectProxy(value, path)
       } else if (Array.isArray(value)) {
         return this.createArrayProxy(value, path)
-      }
+      } else if (typeof value === 'object' && value !== null) {
+        return this.createObjectProxy(value, path)
+      } 
     }
 
     return value

packages/node_modules/proxy-state-tree/src/index.test.ts

@@ -123,6 +123,153 @@ describe('TrackStateAccessTree', () => {
 })
 describe('TrackMutationTree', () => {})
 
+describe('CLASSES', () => {
+  describe('ACCESS', () => {
+    test('should create proxy when accessed', () => {
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      const trackStateTree = tree.getTrackStateTree().track(() => {})
+
+      expect(trackStateTree.state.user[IS_PROXY]).toBeTruthy()
+    })
+
+    test('should access properties', () => {
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      expect(tree.getTrackStateTree().track(() => {}).state.user.name).toBe('Bob')
+    })
+
+    test('should track access properties', () => {
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      const trackStateTree = tree.getTrackStateTree().track(() => {})
+
+      expect(trackStateTree.state.user.name).toBe('Bob')
+
+      expect(Object.keys((tree as any).pathDependencies)).toEqual([
+        'user',
+        'user.name',
+      ])
+    })
+  })
+  describe('MUTATIONS', () => {
+    test('should throw when mutating without tracking', () => {
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      expect(() => {
+        tree.getTrackStateTree().track(() => {}).state.user.name = 'bar2'
+      }).toThrow()
+    })
+
+    test('should throw if parts of state are nested', () => {
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      expect(() => {
+        const mutationTree = tree.getMutationTree()
+        mutationTree.state.user = mutationTree.state.user // eslint-disable-line
+      }).toThrowError(/exists in the state tree on path "user"/i)
+    })
+    test('should not notify changes to same value', () => {
+      let renderCount = 0
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      const mutationTree = tree.getMutationTree()
+      const accessTree = tree.getTrackStateTree().track(() => {
+        renderCount++
+      })
+      accessTree.addTrackingPath('user.name')
+      mutationTree.state.user.name = 'bar'
+      expect(mutationTree.mutations).toEqual([
+        {
+          method: 'set',
+          path: 'user.name',
+          args: ['bar'],
+          hasChangedValue: true,
+          revert: mutationTree.mutations[0].revert,
+        },
+      ])
+      expect(renderCount).toBe(0)
+    })
+    test('should track SET mutations', () => {
+      class User {
+        name = 'Bob'
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      const mutationTree = tree.getMutationTree()
+      mutationTree.state.user.name = 'bar2'
+      expect(mutationTree.mutations).toEqual([
+        {
+          method: 'set',
+          path: 'user.name',
+          args: ['bar2'],
+          hasChangedValue: true,
+          revert: mutationTree.mutations[0].revert,
+        },
+      ])
+      expect(mutationTree.state.user.name).toBe('bar2')
+    })
+    test('should track mutations through methods', () => {
+      class User {
+        name = 'Bob'
+        changeName() {
+          this.name = 'Bob2'
+        }
+      }
+      const state = {
+        user: new User()
+      }
+      const tree = new ProxyStateTree(state)
+      const mutationTree = tree.getMutationTree()
+
+      mutationTree.state.user.changeName()
+
+      expect(mutationTree.mutations).toEqual([
+        {
+          method: 'set',
+          path: 'user.name',
+          args: ['Bob2'],
+          hasChangedValue: true,
+          revert: mutationTree.mutations[0].revert,
+        },
+      ])
+      expect(mutationTree.state.user.name).toBe('Bob2')
+    })
+  })
+})
+
 describe('OBJECTS', () => {
   describe('ACCESS', () => {
     test('should create proxy when accessed', () => {