fix(overmind): make derived track with current tree

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Inspector/index.tsx

@@ -242,7 +242,7 @@ const Nested: FunctionComponent<NestedProps> = memo(
           {Array.isArray(value)
             ? value.map((_, index) =>
                 renderValue({
-                  path: path.concat('.' + String(index)),
+                  path: path.concat((path ? '.' : '') + String(index)),
                   value: value[index],
                   renderPaths,
                   expandedPaths,
@@ -254,7 +254,7 @@ const Nested: FunctionComponent<NestedProps> = memo(
               )
             : Object.keys(value).map((key) =>
                 renderValue({
-                  path: path.concat('.' + key),
+                  path: path.concat((path ? '.' : '') + key),
                   value: value[key],
                   renderPaths,
                   expandedPaths,

packages/node_modules/overmind-devtools-client/src/overmind/state.ts

@@ -29,7 +29,7 @@ type State = {
   currentTab: Tab
   showApps: boolean
   currentAction: Derive<State, Action>
-  currentApp: App
+  currentApp: Derive<State, App>
   componentsMounted: Derive<State, Component[]>
   componentsUpdateCount: Derive<State, number>
   componentsStatePathCount: Derive<State, number>
@@ -52,9 +52,7 @@ const state: State = {
   apps: {},
   newPortValue: '',
   currentTab: Tab.State,
-  get currentApp() {
-    const state: State = this
-
+  currentApp: (state) => {
     return state.apps[state.currentAppName]
   },
   componentsMounted: (state) =>

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

@@ -29,7 +29,7 @@ describe('Derived', () => {
     expect(app.state.upperFoo).toEqual('BAR')
   })
 
-  test('should track derived state', () => {
+  test.only('should track derived state', () => {
     let renderCount = 0
     const changeFoo: Action = ({ state }) => {
       state.foo = 'bar2'

packages/node_modules/overmind/src/derived.ts

@@ -5,93 +5,115 @@ import {
   IS_PROXY,
   ITrackStateTree,
   TrackStateTree,
+  IMutationTree,
+  MutationTree,
 } from 'proxy-state-tree'
 
 import { EventType, Events } from './internalTypes'
 
 export class Derived {
   private isDirty: boolean = true
   private trackStateTree: ITrackStateTree<any>
-  private scope: any
+  private previousTreeAccess: any
   private value: any
   private paths: Set<string>
   private updateCount: number = 0
   private disposeOnMutation: () => void
   constructor(private cb: (state: object, parent: object) => void) {
     const boundEvaluate: any = this.evaluate.bind(this)
 
-    boundEvaluate.dispose = () => {
-      this.disposeOnMutation()
-      this.trackStateTree.dispose()
+    if (process.env.NODE_ENV === 'development') {
+      boundEvaluate.dispose = () => {
+        this.disposeOnMutation()
+        this.trackStateTree.dispose()
+      }
     }
 
     return boundEvaluate
   }
+  private createScope(tree, path) {
+    const pathAsArray = path.split('.')
+    pathAsArray.pop()
+    const parent = pathAsArray.reduce((curr, key) => curr[key], tree.state)
+
+    return () => this.cb(parent, tree.state)
+  }
   evaluate(
     eventHub: EventEmitter<Events>,
+    tree: ITrackStateTree<any> | IMutationTree<any>,
     proxyStateTree: ProxyStateTree<any>,
     path
   ) {
     if (!this.trackStateTree) {
       this.trackStateTree = proxyStateTree.getTrackStateTree()
+      this.trackStateTree.shouldTrack = true
+      this.trackStateTree.callback = () => {
+        this.isDirty = true
+      }
 
-      const pathAsArray = path.split('.')
-      pathAsArray.pop()
-      const parent = pathAsArray.reduce(
-        (curr, key) => curr[key],
-        this.trackStateTree.state
-      )
-
-      this.scope = () => this.cb(parent, this.trackStateTree.state)
-      this.disposeOnMutation = proxyStateTree.onMutation(
-        (_, paths, flushId) => {
-          if (this.isDirty) {
-            return
-          }
-
-          for (let mutationPath of paths) {
-            if (this.paths.has(mutationPath)) {
-              this.isDirty = true
-              eventHub.emitAsync(EventType.DERIVED_DIRTY, {
-                derivedPath: path,
-                path: mutationPath,
-                flushId,
-              })
+      if (process.env.NODE_ENV === 'development') {
+        this.disposeOnMutation = proxyStateTree.onMutation(
+          (_, paths, flushId) => {
+            if (this.isDirty) {
               return
             }
+
+            for (let mutationPath of paths) {
+              if (this.paths.has(mutationPath)) {
+                this.isDirty = true
+                eventHub.emitAsync(EventType.DERIVED_DIRTY, {
+                  derivedPath: path,
+                  path: mutationPath,
+                  flushId,
+                })
+                return
+              }
+            }
           }
-        }
-      )
+        )
+      }
     }
 
-    if (
-      this.isDirty ||
-      (this.value &&
-        this.value[IS_PROXY] &&
-        this.value[VALUE][(proxyStateTree as any).PROXY] !== this.value)
-    ) {
-      this.value = this.trackStateTree.trackScope(this.scope)
+    let isDirty
 
-      this.isDirty = false
-      this.paths = new Set(this.trackStateTree.pathDependencies)
-      eventHub.emitAsync(EventType.DERIVED, {
-        path,
-        paths: Array.from(this.paths),
-        updateCount: this.updateCount,
-        value: this.value,
-      })
-      this.updateCount++
+    // During development we need to re-evaluate the derived so that
+    // it tracks on the mutation tree passed in, in case of mutations
+    // of the returned derived
+    if (process.env.NODE_ENV === 'development') {
+      isDirty =
+        this.isDirty ||
+        (tree instanceof MutationTree && this.previousTreeAccess !== tree)
+    } else {
+      isDirty = this.isDirty
     }
 
-    // Tracks the paths for the consumer of this derived value
-    for (let path of this.paths) {
-      const currentTree = proxyStateTree.currentTree
+    if (isDirty) {
+      const getPaths = tree.trackPaths()
+
+      this.value = this.createScope(tree, path)()
+      this.isDirty = false
+      this.paths = getPaths()
+
+      // We add the paths to the derived
+      this.trackStateTree.pathDependencies.clear()
+
+      for (let path of this.paths) {
+        this.trackStateTree.addTrackingPath(path)
+      }
 
-      if (currentTree instanceof TrackStateTree) {
-        currentTree.addTrackingPath(path)
+      if (process.env.NODE_ENV === 'development') {
+        eventHub.emitAsync(EventType.DERIVED, {
+          path,
+          paths: Array.from(this.paths),
+          updateCount: this.updateCount,
+          value: this.value,
+        })
+        this.updateCount++
       }
     }
 
+    this.previousTreeAccess = tree
+
     return this.value
   }
 }

packages/node_modules/overmind/src/index.ts

@@ -8,6 +8,8 @@ import {
   ProxyStateTree,
   TTree,
   VALUE,
+  ITrackStateTree,
+  IMutationTree,
 } from 'proxy-state-tree'
 import { Derived } from './derived'
 import { Devtools, safeValue, safeValues, DevtoolsMessage } from './Devtools'
@@ -376,7 +378,8 @@ export class Overmind<ThisConfig extends IConfiguration>
       this.getState(configuration) as any,
       {
         devmode,
-        dynamicWrapper: (_, path, func) => func(eventHub, proxyStateTree, path),
+        dynamicWrapper: (tree, path, func) =>
+          func(eventHub, tree, proxyStateTree, path),
         onGetter: devmode
           ? (path, value) => {
               this.eventHub.emitAsync(EventType.GETTER, {
@@ -808,10 +811,10 @@ export class Overmind<ThisConfig extends IConfiguration>
       })
     }, {}) as any
   }
-  getTrackStateTree() {
+  getTrackStateTree(): ITrackStateTree<any> {
     return this.proxyStateTree.getTrackStateTree()
   }
-  getMutationTree() {
+  getMutationTree(): IMutationTree<any> {
     return this.proxyStateTree.getMutationTree()
   }
   addMutationListener = (cb: IMutationCallback) => {

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

@@ -15,12 +15,23 @@ export class MutationTree<T extends object> implements IMutationTree<T> {
   mutations: IMutation[] = []
   objectChanges = new Set<string>()
   isTracking: boolean = false
+  onPathAccess: (path: string) => void
   constructor(master: IProxyStateTree<T>, proxifier?: IProxifier<T>) {
     this.isTracking = true
     this.master = master
     this.proxifier = proxifier || new Proxifier(this)
     this.state = this.proxifier.proxify(master.sourceState, '')
   }
+  trackPaths() {
+    const paths = new Set<string>()
+    this.onPathAccess = (path) => {
+      paths.add(path)
+    }
+    return () => {
+      this.onPathAccess = null
+      return paths
+    }
+  }
   getMutations() {
     const mutations = this.mutations.slice()
 

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

@@ -113,6 +113,8 @@ export class Proxifier {
 
         trackingTree && trackingTree.proxifier.trackPath(nestedPath)
 
+        proxifier.tree.onPathAccess && proxifier.tree.onPathAccess(nestedPath)
+
         const method = String(prop)
 
         if (arrayMutations.has(method)) {
@@ -204,6 +206,8 @@ export class Proxifier {
 
         trackingTree && trackingTree.proxifier.trackPath(nestedPath)
 
+        proxifier.tree.onPathAccess && proxifier.tree.onPathAccess(nestedPath)
+
         if (typeof targetValue === 'function') {
           const dynamicValue = proxifier.tree.master.options.dynamicWrapper
             ? proxifier.tree.master.options.dynamicWrapper(

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

@@ -13,11 +13,24 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
   shouldTrack: boolean = false
   state: T
   proxifier: IProxifier<T>
+  onPathAccess: (path: string) => void
   constructor(master: IProxyStateTree<T>) {
     this.master = master
     this.proxifier = master.proxifier
     this.state = master.state
   }
+  trackPaths() {
+    const paths = new Set<string>()
+
+    this.onPathAccess = (path) => {
+      paths.add(path)
+    }
+
+    return () => {
+      this.onPathAccess = null
+      return paths
+    }
+  }
   canMutate() {
     return false
   }
@@ -38,6 +51,7 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
   track(cb?: ITrackCallback) {
     this.master.changeTrackStateTree(this)
     this.shouldTrack = true
+
     if (this.callback) {
       for (let path of this.pathDependencies) {
         this.master.removePathDependency(path, this.callback)

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

@@ -21,6 +21,7 @@ export interface IMutationTree<T extends object> {
   canMutate(): boolean
   getMutations(): IMutation[]
   getObjectChanges(): Set<string>
+  trackPaths(): () => Set<string>
   flush(
     async?: boolean
   ): {
@@ -33,6 +34,7 @@ export interface IMutationTree<T extends object> {
   proxifier: IProxifier<T>
   mutations: IMutation[]
   state: T
+  onPathAccess: (path: string) => void
 }
 
 export interface ITrackCallback {
@@ -53,14 +55,17 @@ export interface ITrackStateTree<T extends object> {
   track(cb?: ITrackCallback): ITrackStateTree<T>
   stopTracking(): void
   trackScope(scope: ITrackScopedCallback<T>, callback?: ITrackCallback): any
+  trackPaths(): () => Set<string>
   canTrack(): boolean
   canMutate(): boolean
   dispose(): ITrackStateTree<T>
   master: IProxyStateTree<T>
+  shouldTrack: boolean
   proxifier: IProxifier<T>
   state: T
   pathDependencies: Set<string>
   callback: ITrackCallback
+  onPathAccess: (path: string) => void
 }
 
 export interface IOptions {