feat(overmind): dynamic derived

Author: christianalfoni

package-lock.json

@@ -30,9 +30,9 @@
     "axios": "0.19.0",
     "color": "3.0.0",
     "color-hash": "1.0.3",
-    "electron": "^8.0.0",
-    "electron-json-storage": "^4.1.8",
-    "electron-prompt": "^1.5.1",
+    "electron": "8.0.0",
+    "electron-json-storage": "4.1.8",
+    "electron-prompt": "1.5.1",
     "emotion": "9.2.12",
     "express": "4.16.3",
     "graphql": "14.5.8",
@@ -111,7 +111,7 @@
     "ts-loader": "4.4.2",
     "tslib": "1.10.0",
     "tslint": "5.12.1",
-    "typescript": "^3.7.2",
+    "typescript": "^3.7.5",
     "typescript-eslint-parser": "^21.0.1",
     "url-loader": "1.0.1",
     "vscode": "1.1.36",

package.json

@@ -1,6 +1,6 @@
 import { PROXY_TREE } from 'proxy-state-tree'
 
-import { IAction, IDerive, IState, Overmind } from './'
+import { EventType, IAction, IDerive, IState, Overmind, derived } from './'
 
 type State = {
   foo: string
@@ -31,6 +31,114 @@ describe('Derived', () => {
     expect(app.state.upperFoo).toEqual('BAR')
   })
 
+  test('should dynamically remove derived', async () => {
+    let dirtyCount = 0
+    const removeDerived: Action = ({ state }) => {
+      state.upperFoo = null as any
+    }
+    const changeFoo: Action<number> = ({ state }, count) => {
+      state.foo = 'bar' + count
+    }
+    type State = {
+      foo: string
+      upperFoo: Derive<State, string | null>
+    }
+    const state: State = {
+      foo: 'bar',
+      upperFoo: (state) => state.foo.toUpperCase()
+    }
+
+    const config = {
+      state,
+      actions: {
+        changeFoo,
+        removeDerived
+      },
+    }
+    type Config = {
+      state: {
+        foo: string
+        upperFoo: string
+      }
+      actions: typeof config.actions
+    }
+    interface Action<Input = void> extends IAction<Config, Input> {}
+    interface Derive<Parent extends IState, Value>
+      extends IDerive<Config, Parent, Value> {}
+
+    const app = new Overmind(config)
+    const trackStateTree = app.getTrackStateTree()
+    const onTrack = () => {
+  
+    }
+    function render() {
+      trackStateTree.track(onTrack)
+      app.state.upperFoo
+    }
+    app.eventHub.on(EventType.DERIVED_DIRTY, () => {
+      dirtyCount++
+    })
+    render()
+    expect(app.state.upperFoo).toBe('BAR')
+    app.actions.changeFoo(2)
+    expect(app.state.upperFoo).toBe('BAR2')
+    app.actions.removeDerived()
+    app.actions.changeFoo(3)
+    // The dirty event is async
+    await new Promise(resolve => setTimeout(resolve, 0))
+    expect(dirtyCount).toBe(1)
+  })
+
+  test('should dynamically add derived', () => {
+    const addDerived: Action = ({ state }) => {
+      state.upperFoo = derived<Derive<typeof state, string>>((state) => state.foo.toUpperCase())
+    }
+    const changeFoo: Action = ({ state }) => {
+      state.foo = 'bar2'
+    }
+    type State = {
+      foo: string
+      upperFoo: Derive<State, string> | null
+    }
+    const state: State = {
+      foo: 'bar',
+      upperFoo: null
+    }
+
+    const config = {
+      state,
+      actions: {
+        changeFoo,
+        addDerived
+      },
+    }
+    type Config = {
+      state: {
+        foo: string
+        upperFoo: string
+      }
+      actions: typeof config.actions
+    }
+    interface Action<Input = void> extends IAction<Config, Input> {}
+    interface Derive<Parent extends IState, Value>
+      extends IDerive<Config, Parent, Value> {}
+
+    const app = new Overmind(config)
+    const trackStateTree = app.getTrackStateTree()
+    const onTrack = () => {
+  
+    }
+    function render() {
+      trackStateTree.track(onTrack)
+      app.state.upperFoo
+    }
+    render()
+    app.actions.addDerived()
+    expect(app.state.upperFoo).toBe('BAR')
+    app.actions.changeFoo()
+    expect(app.state.upperFoo).toBe('BAR2')
+  })
+
   test('should allow access to proxy state tree to continue tracking with derived function', () => {
     let renderCount = 0
     const changeFoo: Action = ({ state }) => {

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

@@ -1,16 +1,16 @@
 import { EventEmitter } from 'betsy'
 import {
-  ProxyStateTree,
-  VALUE,
+  IMutationTree,
   IS_PROXY,
   ITrackStateTree,
+  ProxyStateTree,
   TrackStateTree,
-  IMutationTree,
-  MutationTree,
 } from 'proxy-state-tree'
 
 import { EventType, Events } from './internalTypes'
 
+export const IS_DERIVED = Symbol('IS_DERIVED')
+
 export class Derived {
   private isDirty: boolean = true
   private trackStateTree: ITrackStateTree<any>
@@ -28,12 +28,12 @@ export class Derived {
       }
     }
 
+    boundEvaluate[IS_DERIVED] = true
+
     return boundEvaluate
   }
   private runScope(tree, path) {
-    const pathAsArray = path.split('.')
-    pathAsArray.pop()
-    const parent = pathAsArray.reduce((curr, key) => curr[key], tree.state)
+    const parent = path.slice(0, path.length - 1).reduce((curr, key) => curr[key], tree.state)
 
     return this.cb(parent, tree.state)
   }
@@ -46,6 +46,12 @@ export class Derived {
     if (!this.disposeOnMutation) {
       this.disposeOnMutation = proxyStateTree.onMutation(
         (_, paths, flushId) => {
+          // It has been removed from the tree
+          if (typeof path.reduce((aggr, key) => aggr && aggr[key], proxyStateTree.sourceState) !== 'function') {
+            this.disposeOnMutation()
+            return
+          }
+          
           if (this.isDirty) {
             return
           }

packages/node_modules/overmind/src/derived.ts

@@ -13,6 +13,7 @@ import {
   VALUE,
 } from 'proxy-state-tree'
 
+import { Derived, IS_DERIVED } from './derived'
 import { Devtools, DevtoolsMessage } from './Devtools'
 import {
   DefaultMode,
@@ -72,11 +73,13 @@ export { SERIALIZE, rehydrate } from './rehydrate'
 
 export { Statemachine, statemachine } from './statemachine'
 
+export const derived = <D extends IDerive<any, any, any>>(cb: D): D extends IDerive<any, any, infer U> ? U : never => cb as any
+
 /** This type can be overwriten by app developers if they want to avoid
  * typing and then they can import `Action`,  `Operation` etc. directly from
  * overmind.
  */
-export interface Config {}
+export interface Config extends IConfiguration {}
 
 export interface Context extends IContext<Config> {}
 
@@ -187,7 +190,6 @@ export class Overmind<ThisConfig extends IConfiguration>
   private nextExecutionId: number = 0
   private mode: DefaultMode | TestMode | SSRMode
   private originalConfiguration
-  private derivedReferences: any[] = []
   initialized: Promise<any>
   eventHub: EventEmitter<Events>
   devtools: Devtools
@@ -371,8 +373,19 @@ export class Overmind<ThisConfig extends IConfiguration>
       this.getState(configuration) as any,
       {
         devmode,
-        dynamicWrapper: (tree, path, func) =>
-          func(eventHub, tree, proxyStateTree, path),
+        onFunction: (tree, path, func) => {
+          if (func[IS_DERIVED]) {
+            return { func, value: func(eventHub, tree, proxyStateTree, path.split('.')) }
+          }
+
+          const derived = new Derived(func) as any
+
+          return {
+            func: derived,
+            value: derived(eventHub, tree, proxyStateTree, path.split('.'))
+          }
+        },
+          
         onGetter: devmode
           ? (path, value) => {
               this.eventHub.emitAsync(EventType.GETTER, {
@@ -817,9 +830,6 @@ export class Overmind<ThisConfig extends IConfiguration>
     if (configuration.state) {
       state = processState(
         configuration.state,
-        process.env.NODE_ENV === 'development'
-          ? this.derivedReferences
-          : undefined
       )
     }
 
@@ -911,10 +921,6 @@ export class Overmind<ThisConfig extends IConfiguration>
     return this.proxyStateTree.onFlush(cb)
   }
   reconfigure(configuration: IConfiguration) {
-    this.derivedReferences.forEach((derived) => {
-      derived.dispose()
-    })
-    this.derivedReferences.length = 0
     const mergedConfiguration = {
       ...configuration,
       state: mergeState(

packages/node_modules/overmind/src/index.ts

@@ -35,7 +35,7 @@ export function isPromise(maybePromise: any) {
   )
 }
 
-export function processState(state: {}, derivedReferences?: any[]) {
+export function processState(state: {}) {
   return Object.keys(state).reduce((aggr, key) => {
     if (key === '__esModule') {
       return aggr
@@ -51,13 +51,7 @@ export function processState(state: {}, derivedReferences?: any[]) {
     const value = state[key]
 
     if (isPlainObject(value)) {
-      aggr[key] = processState(value, derivedReferences)
-    } else if (typeof value === 'function') {
-      aggr[key] = new Derived(value)
-
-      if (derivedReferences) {
-        derivedReferences.push(aggr[key])
-      }
+      aggr[key] = processState(value)
     } else {
       Object.defineProperty(aggr, key, originalDescriptor as any)
     }

packages/node_modules/overmind/src/utils.ts

@@ -301,13 +301,18 @@ export class Proxifier {
         if (typeof targetValue === 'function' && isClass(target)) {
           return (...args) => targetValue.call(proxy, ...args)
         } else if (typeof targetValue === 'function') {
-          return proxifier.tree.master.options.dynamicWrapper
-            ? proxifier.tree.master.options.dynamicWrapper(
-                trackingTree || proxifier.tree,
-                nestedPath,
-                targetValue
-              )
-            : targetValue.call(target, proxifier.tree, nestedPath)
+          if (proxifier.tree.master.options.onFunction) {
+            const { func, value } = proxifier.tree.master.options.onFunction(
+              trackingTree || proxifier.tree,
+              nestedPath,
+              targetValue
+            )
+            
+            target[prop] = func
+
+            return value
+          }
+          return targetValue.call(target, proxifier.tree, nestedPath)
         } else {
           currentTree.trackPathListeners.forEach((cb) => cb(nestedPath))
           trackingTree && trackingTree.proxifier.trackPath(nestedPath)
@@ -353,10 +358,6 @@ export class Proxifier {
           objectChangePath
         )
 
-        if (typeof value === 'function') {
-          return Reflect.set(target, prop, () => value)
-        }
-
         return Reflect.set(target, prop, value)
       },
       deleteProperty(target, prop) {

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

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