refactor(proxy-state-tree): refactor to single proxifier for tracking state, fix production

Author: christianalfoni

packages/node_modules/overmind-react/src/index.ts

@@ -66,7 +66,7 @@ export const createHook = <A extends Overmind<Configuration>>(
     const [debugging] = useState<any>(() => ({
       isFirstRender: true,
       currentFlushId: 0,
-      currentComponentsInstaceId: currentComponentInstanceId++,
+      componentInstanceId: currentComponentInstanceId++,
     }))
 
     tree.track((mutations, paths, flushId) => {

packages/node_modules/overmind/src/index.ts

@@ -228,7 +228,11 @@ export class Overmind<Config extends Configuration> implements Configuration {
                 }
               )
             : action(
-                this.createContext(value, execution, this.proxyStateTree.state)
+                this.createContext(
+                  value,
+                  execution,
+                  this.proxyStateTree.getMutationTree()
+                )
               )
         })
       } else {
@@ -240,7 +244,7 @@ export class Overmind<Config extends Configuration> implements Configuration {
         this.eventHub.emit(EventType.ACTION_START, execution)
         this.eventHub.emit(EventType.OPERATOR_START, execution)
 
-        const mutationTree = this.proxyStateTree.getMutationTree().track()
+        const mutationTree = this.proxyStateTree.getMutationTree()
 
         mutationTree.onMutation((mutation) => {
           this.eventHub.emit(EventType.MUTATIONS, {
@@ -741,7 +745,7 @@ export function mutate<Input, Config extends Configuration = TheConfig>(
     if (err) next(err)
     else {
       startDebugOperator('mutate', operation, context)
-      const mutationsTree = context.proxyStateTree.getMutationTree().track()
+      const mutationsTree = context.proxyStateTree.getMutationTree()
       operation({ ...context, state: mutationsTree.state })
       const newContext = createContext(context, context.value)
       context.execution.emit(EventType.MUTATIONS, {

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

@@ -1,6 +1,4 @@
-import { TTree } from './'
-import { ITrackStateTree } from './TrackStateTree'
-import { ITrackMutationTree } from './TrackMutationTree'
+import { TTree, ITrackStateTree, ITrackMutationTree, IMutation } from './types'
 
 const isPlainObject = require('is-plain-object')
 
@@ -19,28 +17,50 @@ const arrayMutations = new Set([
   'copyWithin',
 ])
 
+const removeProxyMutations = ['set', 'splice', 'shift', 'unshift']
+
 export class Proxifier {
-  constructor(private tree: TTree) {}
+  private proxyCache = {}
+  constructor(private tree: TTree) {
+    tree.master.onMutation(this.removeProxies)
+  }
   private concat(path, prop) {
     return path ? path + '.' + prop : prop
   }
 
-  private shouldTrackMutations(path) {
+  addProxyToCache(path: string, proxy: any) {
+    return (this.proxyCache[path] = proxy)
+  }
+  getProxyFromCache(path: string) {
+    return this.proxyCache[path]
+  }
+
+  shouldTrackMutations(path) {
     return (
       this.tree.master.options.devmode ||
       (path && this.tree.master.pathDependencies[path])
     )
   }
 
-  private ensureMutationTrackingIsEnabled(path) {
+  removeProxies = (mutation: IMutation) => {
+    if (removeProxyMutations.includes(mutation.method)) {
+      for (let path in this.proxyCache) {
+        if (path.indexOf(mutation.path) === 0) {
+          delete this.proxyCache[path]
+        }
+      }
+    }
+  }
+
+  ensureMutationTrackingIsEnabled(path) {
     if (this.tree.master.options.devmode && !this.tree.canMutate()) {
       throw new Error(
         `proxy-state-tree - You are mutating the path "${path}", but it is not allowed`
       )
     }
   }
 
-  private ensureValueDosntExistInStateTreeElsewhere(value) {
+  ensureValueDosntExistInStateTreeElsewhere(value) {
     if (value && value[IS_PROXY] === true) {
       throw new Error(
         `proxy-state-tree - You are trying to insert a value that already exists in the state tree on path "${
@@ -50,17 +70,24 @@ export class Proxifier {
     }
   }
 
-  private trackPath(path: string) {
+  trackPath(path: string) {
     if (this.tree.canTrack()) {
-      const trackStateAccessTree = this.tree as ITrackStateTree<any>
-      trackStateAccessTree.addTrackingPath(path)
+      const trackStateTree = this.tree.master.currentTree as ITrackStateTree<
+        any
+      >
+
+      if (!trackStateTree) {
+        return
+      }
+
+      trackStateTree.addTrackingPath(path)
     }
   }
   // With tracking trees we want to ensure that we are always
   // on the currently tracked tree. This ensures when we access
   // a tracking proxy that is not part of the current tracking tree (pass as prop)
   // we move the ownership to the current tracker
-  private getTrackingTree() {
+  getTrackingTree() {
     const currentTree = this.tree.master.currentTree
 
     if (currentTree) {
@@ -81,10 +108,9 @@ export class Proxifier {
     var proxifier = this
 
     return (
-      proxifier.tree.master.getProxy(path, proxifier.tree) ||
-      proxifier.tree.master.addProxy(
+      this.getProxyFromCache(path) ||
+      this.addProxyToCache(
         path,
-        proxifier.tree,
         new Proxy(value, {
           get(target, prop) {
             if (prop === IS_PROXY) return true
@@ -102,6 +128,7 @@ export class Proxifier {
 
             const trackingTree = proxifier.getTrackingTree()
             const nestedPath = proxifier.concat(path, prop)
+
             trackingTree && trackingTree.proxifier.trackPath(nestedPath)
 
             if (
@@ -152,10 +179,9 @@ export class Proxifier {
     const proxifier = this
 
     return (
-      proxifier.tree.master.getProxy(path, proxifier.tree) ||
-      proxifier.tree.master.addProxy(
+      this.getProxyFromCache(path) ||
+      this.addProxyToCache(
         path,
-        proxifier.tree,
         new Proxy(value, {
           get(target, prop) {
             if (prop === IS_PROXY) return true
@@ -168,6 +194,7 @@ export class Proxifier {
             const trackingTree = proxifier.getTrackingTree()
             const targetValue = target[prop]
             const nestedPath = proxifier.concat(path, prop)
+
             trackingTree && trackingTree.proxifier.trackPath(nestedPath)
 
             if (typeof targetValue === 'function') {

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

@@ -1,39 +1,24 @@
-import { IProxyStateTree, VALUE } from './'
+import {
+  IProxyStateTree,
+  ITrackMutationTree,
+  IMutationCallback,
+  IMutation,
+  IProxifier,
+} from './types'
 import { Proxifier } from './Proxyfier'
 
-export interface IMutation {
-  method: string
-  path: string
-  args: any[]
-}
-
-export interface IMutationCallback {
-  (mutation: IMutation, paths: Set<string>, flushId: number): void
-}
-
-export interface ITrackMutationTree<T extends object> {
-  addMutation(mutation: IMutation, objectChangePath?: string): void
-  onMutation(callback: IMutationCallback): void
-  canTrack(): boolean
-  canMutate(): boolean
-  dispose(): ITrackMutationTree<T>
-  track(): ITrackMutationTree<T>
-  master: IProxyStateTree<T>
-  proxifier: Proxifier
-  state: T
-}
-
 export class TrackMutationTree<T extends object>
   implements ITrackMutationTree<T> {
   private mutationCallbacks: IMutationCallback[] = []
   master: IProxyStateTree<T>
   state: T
-  proxifier: Proxifier
+  proxifier: IProxifier<T>
   isTracking: boolean = false
   constructor(master: IProxyStateTree<T>) {
+    this.isTracking = true
     this.master = master
     this.proxifier = new Proxifier(this)
-    this.state = this.proxifier.proxify(master.state[VALUE], '')
+    this.state = this.proxifier.proxify(master.sourceState, '')
   }
   addMutation(mutation: IMutation, objectChangePath: string) {
     this.master.addMutation(mutation, objectChangePath)
@@ -48,10 +33,6 @@ export class TrackMutationTree<T extends object>
       )
     }
   }
-  track() {
-    this.isTracking = true
-    return this
-  }
   onMutation(callback: IMutationCallback) {
     this.mutationCallbacks.push(callback)
   }

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

@@ -1,62 +1,37 @@
-import { IProxyStateTree, VALUE, IMutation } from './'
-import { Proxifier } from './Proxyfier'
-
-export interface ITrackCallback {
-  (
-    mutations: IMutation[],
-    paths: Set<string>,
-    flushId: number,
-    isAsync: boolean
-  ): void
-}
-
-export interface ITrackScopedCallback<T extends object> {
-  (tree: TrackStateTree<T>): any
-}
-
-export interface ITrackStateTree<T extends object> {
-  addTrackingPath(path: string): void
-  track(cb?: ITrackCallback)
-  trackScope(scope: ITrackScopedCallback<T>, callback?: ITrackCallback): any
-  canTrack(): boolean
-  canMutate(): boolean
-  dispose(): ITrackStateTree<T>
-  master: IProxyStateTree<T>
-  proxifier: Proxifier
-  state: T
-  pathDependencies: Set<string>
-}
+import {
+  IProxyStateTree,
+  ITrackStateTree,
+  ITrackCallback,
+  IProxifier,
+  ITrackScopedCallback,
+} from './types'
 
 export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
   master: IProxyStateTree<T>
   pathDependencies: Set<string> = new Set()
-  isTracking: boolean = false
-  callback: ITrackCallback | null
+  callback: ITrackCallback
   state: T
-  proxifier: Proxifier
+  proxifier: IProxifier<T>
   constructor(master: IProxyStateTree<T>) {
     this.master = master
-    this.proxifier = new Proxifier(this)
-    this.state = this.proxifier.proxify(master.state[VALUE], '')
+    this.proxifier = master.proxifier
+    this.state = master.state
   }
   canMutate() {
     return false
   }
   canTrack() {
-    return this.isTracking
+    return true
   }
   addTrackingPath(path: string) {
     this.pathDependencies.add(path)
 
-    if (!this.callback) {
-      return
+    if (this.callback) {
+      this.master.addPathDependency(path, this.callback)
     }
-
-    this.master.addPathDependency(path, this.callback)
   }
   track(cb?: ITrackCallback) {
-    this.isTracking = true
-    this.master.currentTree = this
+    this.master.changeTrackStateTree(this)
 
     if (this.callback) {
       for (let path of this.pathDependencies) {
@@ -78,12 +53,13 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
     return this
   }
   trackScope(scope: ITrackScopedCallback<T>, cb?: ITrackCallback) {
-    const previousTree = this.master.currentTree
+    const previousPreviousTree = this.master.previousTree
+    const previousCurrentTree = this.master.currentTree
     this.master.currentTree = this
     this.track(cb)
     const result = scope(this)
-    this.isTracking = false
-    this.master.currentTree = previousTree
+    this.master.currentTree = previousCurrentTree
+    this.master.previousTree = previousPreviousTree
 
     return result
   }