fix(overmind): allow class instances to add derived

Author: christianalfoni

packages/node_modules/overmind/src/derived.test.ts

@@ -338,4 +338,23 @@ describe('Derived', () => {
 
     expect(runCount).toBe(2)
   })
+  test('should be able to add derived to class instances', () => {
+    class SomeClass {
+      foo = derived((state: SomeClass) => state.bar + '!')
+      bar = 'foo'
+    }
+    type State = {
+      class: SomeClass
+    }
+    const state: State = {
+      class: new SomeClass()
+    }
+    const config = {
+      state,
+    }
+
+    const app = new Overmind(config)
+
+    expect(app.state.class.foo).toEqual('foo!')
+  })
 })

packages/node_modules/overmind/src/index.ts

@@ -48,6 +48,7 @@ import {
 import {
   EXECUTION,
   IS_OPERATOR,
+  IS_PROXY_BOUND_FUNCTION,
   IS_TEST,
   MODE_DEFAULT,
   MODE_SSR,
@@ -72,7 +73,7 @@ export { SERIALIZE, rehydrate } from './rehydrate'
 
 export { Statemachine, statemachine } from './statemachine'
 
-export const derived = <S extends IState, R extends IState, O>(cb: (state: S, rootState: R) => O): O => {
+export const derived = <S extends object, R extends object, O>(cb: (state: S, rootState: R) => O): O => {
   cb[IS_DERIVED_CONSTRUCTOR] = true
   return cb as any
 }
@@ -393,24 +394,37 @@ export class Overmind<ThisConfig extends IConfiguration>
       {
         devmode,
         delimiter: this.delimiter,
-        onFunction: (tree, path, func) => {
+        onSetFunction: (proxy, tree, path, target, prop, func) => {
+          if (func[IS_DERIVED_CONSTRUCTOR]) {
+            return new Derived(func) as any
+          }
+
+          func = func.bind(proxy)
+          func[IS_PROXY_BOUND_FUNCTION] = true
+          return func
+        },
+        onGetFunction: (proxy, tree, path, target, prop) => {
+          let func = target[prop]
+
           if (func[IS_DERIVED]) {
-            return { func, value: func(eventHub, tree, proxyStateTree, path.split(this.delimiter)) }
+            return func(eventHub, tree, proxyStateTree, path.split(this.delimiter))
           }
 
           if (func[IS_DERIVED_CONSTRUCTOR]) {
             const derived = new Derived(func) as any
+            target[prop] = derived
 
-            return {
-              func: derived,
-              value: derived(eventHub, tree, proxyStateTree, path.split(this.delimiter))
-            }
+            return derived(eventHub, tree, proxyStateTree, path.split(this.delimiter))
           }
 
-          return {
-            func,
-            value: func
+          if (func[IS_PROXY_BOUND_FUNCTION]) {
+            return func
           }
+
+          func = func.bind(proxy)
+          func[IS_PROXY_BOUND_FUNCTION] = true
+          target[prop] = func
+          return func
         },    
         onGetter: devmode
           ? (path, value) => {

packages/node_modules/overmind/src/utils.ts

@@ -5,6 +5,7 @@ export const IS_TEST = process.env.NODE_ENV === 'test'
 export const IS_OPERATOR = Symbol('operator')
 export const ORIGINAL_ACTIONS = Symbol('origina_actions')
 export const EXECUTION = Symbol('execution')
+export const IS_PROXY_BOUND_FUNCTION = Symbol('is_proxy_bound_function')
 
 export const MODE_DEFAULT = Symbol('MODE_DEFAULT')
 export const MODE_TEST = Symbol('MODE_TEST')

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

@@ -258,21 +258,17 @@ export class Proxifier {
         const nestedPath = proxifier.concat(path, prop)
         const currentTree = trackingTree || proxifier.tree
 
-        if (typeof targetValue === 'function' && isClass(target)) {
-          return (...args) => targetValue.call(proxy, ...args)
-        } else if (typeof targetValue === 'function') {
-          if (proxifier.tree.master.options.onFunction) {
-            const { func, value } = proxifier.tree.master.options.onFunction(
+        if (typeof targetValue === 'function') {
+          if (proxifier.tree.master.options.onGetFunction) {
+            return proxifier.tree.master.options.onGetFunction(
+              proxy,
               trackingTree || proxifier.tree,
               nestedPath,
-              targetValue
+              target,
+              prop
             )
-            
-            target[prop] = func
-
-            return value
           }
-          return targetValue.call(target, proxifier.tree, nestedPath)
+          return isClass(target) ? (...args) => targetValue.call(proxy, ...args) : targetValue.call(target, proxifier.tree, nestedPath)
         } else {
           currentTree.trackPathListeners.forEach((cb) => cb(nestedPath))
           trackingTree && trackingTree.proxifier.trackPath(nestedPath)
@@ -301,17 +297,18 @@ export class Proxifier {
         const mutationTree = proxifier.getMutationTree()
         const existingValue = target[prop]
 
-        if (typeof value === 'function' && proxifier.tree.master.options.onFunction) {
-          const result = proxifier.tree.master.options.onFunction(
+        if (typeof value === 'function' && proxifier.tree.master.options.onSetFunction) {
+          value = proxifier.tree.master.options.onSetFunction(
+            proxy,
             proxifier.getTrackingTree() || proxifier.tree,
             nestedPath,
+            target,
+            prop,
             value
           )
-          
-          value = result.func
         }
 
-        const hasChangedValue = value !== target[prop]
+        const hasChangedValue = existingValue !== value
         const result = Reflect.set(target, prop, value)
 
         mutationTree.addMutation(

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

@@ -755,8 +755,8 @@ describe('FUNCTIONS', () => {
       },
     }
     const tree = new ProxyStateTree(state, {
-      onFunction: (proxyStateTree, path, func) =>
-        ({ func, value: func('foo', proxyStateTree, path)}),
+      onGetFunction: (proxy, proxyStateTree, path, target, prop) =>
+        target[prop]('foo', proxyStateTree, path),
     })
 
     const accessTree = tree.getTrackStateTree().track(() => {})

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

@@ -73,7 +73,8 @@ export interface ITrackStateTree<T extends object> {
 export interface IOptions {
   delimiter?: string
   devmode?: boolean
-  onFunction?: (...args: any[]) => { func: Function, value: any } 
+  onSetFunction?: (...args: any[]) => any
+  onGetFunction?: (...args: any[]) => any
   onGetter?: Function
 }