feat(proxy-state-tree): allow tracking with unique proxifier

Author: christianalfoni

packages/node_modules/proxy-state-tree/README.md

@@ -46,9 +46,36 @@ trackStateTree.track(() => {
 })
 ```
 
-You only need to start tracking state, there is no need to stop tracking. The reason is that only one forked tree can track at any time. That means one tree stops tracking when an other starts tracking. Since all component libraries produces their UI description synchronously, this gives a predictable behaviour. It is also makes the implementation simple. The tracking of each fork stops on the next event loop.
+Only one forked tree can track at any time. That means one tree stops tracking when an other starts tracking. Since all component libraries produces their UI description synchronously, this gives a predictable behaviour. You still have to stop tracking when the component is done rendering though, to avoid any asynchronous additions to the rendering of the last component (which would just keep tracking until a new component renders).
 
-## trackScope
+```js
+const trackStateTree = tree.getTrackStateTree()
+
+trackStateTree.stopTracking()
+```
+
+### track with unique proxifier
+
+```js
+const trackStateTree = tree.getTrackStateTreeWithProxifier()
+
+trackStateTree.track(() => {
+  // Called when any tracked state mutates
+})
+```
+
+This version of the tree also has its own **Proxifier** instance. That means the state provided to the component is owned by the component. The benefit of this approach is that you do not depend on synchronous rendering. The component can start to render, then render something else and then continue rendering the component and still track correctly. You will typically call **track** again whenever there is an update, to refresh the tracked paths. You can stop the tracking also if you know when the rendering is done. This avoid any asynchronous tracking inside the component to happen.
+
+To support passing a proxy from one component to an other, the **rescope** method can be used:
+
+```js
+const trackStateTreeA = tree.getTrackStateTreeWithProxifier()
+const trackStateTreeB = tree.getTrackStateTreeWithProxifier()
+
+const movedProxy = tree.rescope(trackStateTreeA.state.someObjectOrArray, trackStateTreeB)
+```
+
+## track scope
 
 ```js
 const trackStateTree = tree.getTrackStateTree()

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

@@ -19,8 +19,9 @@ const arrayMutations = new Set([
 
 export class Proxifier {
   private proxyCache = {}
+  private disposeRemoveProxy: () => void
   constructor(private tree: TTree) {
-    tree.master.onRemoveProxy(this.removeProxies)
+    this.disposeRemoveProxy = tree.master.onRemoveProxy(this.removeProxies)
   }
   private concat(path, prop) {
     return path ? path + '.' + prop : prop
@@ -98,6 +99,10 @@ export class Proxifier {
     }
   }
 
+  isDefaultProxifier() {
+    return this.tree.proxifier === this.tree.master.proxifier
+  }
+
   ensureValueDosntExistInStateTreeElsewhere(value) {
     if (value && value[IS_PROXY] === true) {
       throw new Error(
@@ -109,7 +114,11 @@ export class Proxifier {
   }
 
   trackPath(path: string) {
-    if (this.tree.canTrack()) {
+    if (!this.tree.canTrack()) {
+      return
+    }
+
+    if (this.isDefaultProxifier()) {
       const trackStateTree = this.tree.master.currentTree as ITrackStateTree<
         any
       >
@@ -119,17 +128,17 @@ export class Proxifier {
       }
 
       trackStateTree.addTrackingPath(path)
+    } else {
+      ;(this.tree as ITrackStateTree<any>).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
   getTrackingTree() {
-    const currentTree = this.tree.master.currentTree
-
-    if (currentTree) {
-      return currentTree
+    if (this.tree.master.currentTree && this.isDefaultProxifier()) {
+      return this.tree.master.currentTree
     }
 
     if (!this.tree.canTrack()) {
@@ -377,4 +386,7 @@ export class Proxifier {
 
     return value
   }
+  destroy() {
+    this.proxyCache = null
+  }
 }

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

@@ -38,7 +38,6 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
   track(cb?: ITrackCallback) {
     this.master.changeTrackStateTree(this)
     this.shouldTrack = true
-    setTimeout(() => (this.shouldTrack = false))
     if (this.callback) {
       for (let path of this.pathDependencies) {
         this.master.removePathDependency(path, this.callback)
@@ -58,6 +57,9 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
 
     return this
   }
+  stopTracking() {
+    this.shouldTrack = false
+  }
   trackScope(scope: ITrackScopedCallback<T>, cb?: ITrackCallback) {
     const previousPreviousTree = this.master.previousTree
     const previousCurrentTree = this.master.currentTree
@@ -66,10 +68,14 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
     const result = scope(this)
     this.master.currentTree = previousCurrentTree
     this.master.previousTree = previousPreviousTree
-
+    this.stopTracking()
     return result
   }
   dispose() {
+    if (this.proxifier !== this.master.proxifier) {
+      this.proxifier.destroy()
+    }
+
     if (!this.callback) {
       this.pathDependencies.clear()
 

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

@@ -68,6 +68,56 @@ describe('TrackStateAccessTree', () => {
 
     expect(reactionCount).toBe(1)
   })
+  test('should stop tracking on command', () => {
+    let reactionCount = 0
+    const tree = new ProxyStateTree({
+      foo: 'bar',
+      bar: 'baz',
+    })
+
+    const accessTree = tree
+      .getTrackStateTree()
+      .track((mutations, paths, flushId) => {
+        reactionCount++
+        expect(flushId).toBe(0)
+      })
+
+    accessTree.state.foo
+
+    accessTree.stopTracking()
+
+    accessTree.state.bar
+
+    const mutationTree = tree.getMutationTree()
+
+    mutationTree.state.foo = 'bar2'
+    mutationTree.flush()
+    mutationTree.state.bar = 'baz2'
+    mutationTree.flush()
+    expect(reactionCount).toBe(1)
+  })
+  test('should allow tracking trees individually', () => {
+    const tree = new ProxyStateTree({
+      foo: 'bar',
+      bar: 'baz',
+    })
+
+    const accessTreeA = tree.getTrackStateTreeWithProxifier()
+    const accessTreeB = tree.getTrackStateTreeWithProxifier()
+
+    accessTreeA.track(() => {})
+    accessTreeB.track(() => {})
+
+    accessTreeA.state.foo
+    accessTreeB.state.bar
+
+    return Promise.resolve().then(() => {
+      accessTreeB.state.foo
+
+      expect(Array.from(accessTreeA.pathDependencies)).toEqual(['foo'])
+      expect(Array.from(accessTreeB.pathDependencies)).toEqual(['bar', 'foo'])
+    })
+  })
 })
 describe('TrackMutationTree', () => {})
 
@@ -110,6 +160,7 @@ describe('OBJECTS', () => {
       ])
     })
   })
+
   describe('MUTATIONS', () => {
     test('should throw when mutating without tracking', () => {
       const state = {

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

@@ -84,7 +84,11 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
     )
   }
   onRemoveProxy(cb: IRemoveProxyCallback) {
-    this.removeProxyCallbacks.push(cb)
+    const index = this.removeProxyCallbacks.push(cb) - 1
+
+    return () => {
+      this.removeProxyCallbacks.splice(index, 1)
+    }
   }
   removeProxy(path: string) {
     for (let cb of this.removeProxyCallbacks) {
@@ -102,7 +106,13 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
     return tree
   }
   getTrackStateTree(): ITrackStateTree<T> {
-    const tree = this.cache.trackStateTree.pop() || new TrackStateTree(this)
+    return this.cache.trackStateTree.pop() || new TrackStateTree(this)
+  }
+  getTrackStateTreeWithProxifier(): ITrackStateTree<T> {
+    const tree = this.getTrackStateTree()
+
+    tree.proxifier = new Proxifier(tree)
+    tree.state = tree.proxifier.proxify(this.sourceState, '')
 
     return tree
   }

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

@@ -1,6 +1,7 @@
 export interface IProxifier<T extends object> {
   proxify(state: T, path: string): T
   trackPath(path: string): void
+  destroy(): void
 }
 
 export interface IMutation {
@@ -50,6 +51,7 @@ export interface ITrackScopedCallback<T extends object> {
 export interface ITrackStateTree<T extends object> {
   addTrackingPath(path: string): void
   track(cb?: ITrackCallback): ITrackStateTree<T>
+  stopTracking(): void
   trackScope(scope: ITrackScopedCallback<T>, callback?: ITrackCallback): any
   canTrack(): boolean
   canMutate(): boolean
@@ -90,7 +92,7 @@ export interface IProxyStateTree<T extends object> {
   changeTrackStateTree(tree: ITrackStateTree<T>): void
   disposeTree(proxy: TTree): void
   onMutation(cb: IMutationCallback): void
-  onRemoveProxy(cb: IRemoveProxyCallback): void
+  onRemoveProxy(cb: IRemoveProxyCallback): () => void
   removeProxy(path: string): void
   flush(
     tree: IMutationTree<T>,