feat(proxy-state-tree): refactor to new flushing approach

BREAKING CHANGE:
flush methods have changed

Author: christianalfoni

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

@@ -127,13 +127,32 @@ const tree = new ProxyStateTree({
 
 const mutationTree = tree.getMutationTree()
 
-mutationTree.state.foo = "bar"
+mutationTree.state.foo = "bar2"
 
-tree.flush()
+mutationTree.flush()
 ```
 
 To notify trees tracking state about mutations made run the **flush** method. This allows you to control when the trackers should actually be notified.
 
+You can also flush out multiple mutation trees. This can be useful in development.
+
+```js
+const tree = new ProxyStateTree({
+  foo: 'bar',
+  bar: 'baz'
+})
+
+const mutationTree = tree.getMutationTree()
+const mutationTree2 = tree.getMutationTree()
+
+mutationTree.state.foo = "bar2"
+mutationTree2.state.bar = "baz2"
+
+tree.flush([mutationTree, mutationTree2])
+```
+
+A flush returns what mutations has been flushed out, also with a *flushId*.
+
 ## onMutation
 
 ```js

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

@@ -12,26 +12,61 @@ export class MutationTree<T extends object> implements IMutationTree<T> {
   master: IProxyStateTree<T>
   state: T
   proxifier: IProxifier<T>
+  mutations: IMutation[] = []
+  objectChanges = new Set<string>()
   isTracking: boolean = false
   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, '')
   }
-  addMutation(mutation: IMutation, objectChangePath: string) {
-    this.master.addMutation(mutation, objectChangePath)
+  getMutations() {
+    const mutations = this.mutations.slice()
+
+    this.mutations.length = 0
+
+    return mutations
+  }
+  getObjectChanges() {
+    const objectChanges = new Set([...this.objectChanges])
+
+    this.objectChanges.clear()
+
+    return objectChanges
+  }
+  addMutation(mutation: IMutation, objectChangePath?: string) {
+    const currentFlushId = this.master.currentFlushId
+
+    this.mutations.push(mutation)
+
+    if (objectChangePath) {
+      this.objectChanges.add(objectChangePath)
+    }
+
+    for (let cb of this.master.mutationCallbacks) {
+      cb(
+        mutation,
+        new Set(
+          objectChangePath ? [mutation.path, objectChangePath] : [mutation.path]
+        ),
+        currentFlushId
+      )
+    }
 
     for (let callback of this.mutationCallbacks) {
       callback(
         mutation,
         new Set(
           objectChangePath ? [mutation.path, objectChangePath] : [mutation.path]
         ),
-        this.master.currentFlushId
+        currentFlushId
       )
     }
   }
+  flush(isAsync: boolean = false) {
+    return this.master.flush(this, isAsync)
+  }
   onMutation(callback: IMutationCallback) {
     this.mutationCallbacks.push(callback)
   }

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

@@ -44,7 +44,7 @@ describe('TrackStateAccessTree', () => {
 
     mutationTree.state.foo = 'bar2'
 
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
   test('should allow tracking by mutation', () => {
@@ -141,7 +141,7 @@ describe('OBJECTS', () => {
       const tree = new ProxyStateTree(state)
       const mutationTree = tree.getMutationTree()
       mutationTree.state.foo = 'bar2'
-      expect((tree as any).mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'set',
           path: 'foo',
@@ -159,7 +159,7 @@ describe('OBJECTS', () => {
 
       delete mutationTree.state.foo
 
-      expect((tree as any).mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'unset',
           path: 'foo',
@@ -280,16 +280,16 @@ describe('ARRAYS', () => {
         title: 'foo',
       })
       const currentProxy = mutationTree.state.items[0]
-      tree.flush()
+      mutationTree.flush()
 
       mutationTree.state.items.unshift({
         title: 'bar',
       })
 
-      tree.flush()
+      mutationTree.flush()
       mutationTree.state.items[1].title = 'wapah'
       const newProxy = mutationTree.state.items[1]
-      tree.flush()
+      mutationTree.flush()
       expect(currentProxy).not.toBe(newProxy)
     })
 
@@ -338,7 +338,7 @@ describe('ARRAYS', () => {
       const tree = new ProxyStateTree(state)
       const mutationTree = tree.getMutationTree()
       mutationTree.state.foo.push('bar')
-      expect(tree.mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'push',
           path: 'foo',
@@ -356,7 +356,7 @@ describe('ARRAYS', () => {
       const tree = new ProxyStateTree(state)
       const mutationTree = tree.getMutationTree()
       mutationTree.state.foo.pop()
-      expect(tree.mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'pop',
           path: 'foo',
@@ -375,7 +375,7 @@ describe('ARRAYS', () => {
       const mutationTree = tree.getMutationTree()
       mutationTree.state.foo.shift()
 
-      expect(tree.mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'shift',
           path: 'foo',
@@ -393,7 +393,7 @@ describe('ARRAYS', () => {
       const mutationTree = tree.getMutationTree()
       mutationTree.state.foo.unshift('foo')
 
-      expect(tree.mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'unshift',
           path: 'foo',
@@ -411,7 +411,7 @@ describe('ARRAYS', () => {
       const mutationTree = tree.getMutationTree()
       mutationTree.state.foo.splice(0, 1, 'bar')
 
-      expect(tree.mutations).toEqual([
+      expect(mutationTree.mutations).toEqual([
         {
           method: 'splice',
           path: 'foo',
@@ -431,7 +431,7 @@ describe('ARRAYS', () => {
     const mutationTree = tree.getMutationTree()
     mutationTree.state.foo = mutationTree.state.foo.concat('bar')
 
-    expect(tree.mutations).toEqual([
+    expect(mutationTree.mutations).toEqual([
       {
         method: 'set',
         path: 'foo',
@@ -527,7 +527,7 @@ describe('FUNCTIONS', () => {
     mutationTree.state.items.push({
       title: 'bar',
     })
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
 })
@@ -549,7 +549,7 @@ describe('REACTIONS', () => {
     accessTree.state.foo // eslint-disable-line
 
     mutationTree.state.foo = 'bar2'
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
 
@@ -569,7 +569,7 @@ describe('REACTIONS', () => {
     })
 
     mutationTree.state.foo = 'bar2'
-    tree.flush()
+    mutationTree.flush()
   })
 
   test('should be able to manually add a path to the current tracking', () => {
@@ -586,7 +586,7 @@ describe('REACTIONS', () => {
     const accessTree = tree.getTrackStateTree().track(render)
     accessTree.addTrackingPath('foo')
     mutationTree.state.foo = 'bar2'
-    tree.flush()
+    mutationTree.flush()
     expect(renderCount).toBe(1)
   })
 
@@ -607,7 +607,7 @@ describe('REACTIONS', () => {
     mutationTree.state.foo = 'bar2'
     mutationTree.state.bar = 'baz2'
 
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
 
@@ -617,7 +617,7 @@ describe('REACTIONS', () => {
       bar: 'baz',
     })
     const accessTree = tree.getTrackStateTree().track(render)
-    const mutationtree = tree.getMutationTree()
+    const mutationTree = tree.getMutationTree()
     function render() {
       if (accessTree.state.foo === 'bar') {
         return
@@ -627,8 +627,8 @@ describe('REACTIONS', () => {
     }
 
     render()
-    mutationtree.state.foo = 'bar2'
-    tree.flush()
+    mutationTree.state.foo = 'bar2'
+    mutationTree.flush()
     expect((tree.pathDependencies as any).foo.size).toBe(1)
     expect((tree.pathDependencies as any).bar.size).toBe(1)
   })
@@ -649,11 +649,10 @@ describe('REACTIONS', () => {
 
     render()
     mutationTree.state.foo = 'bar2'
-    tree.flush()
+    mutationTree.flush()
     tree.disposeTree(accessTree)
     expect(tree.pathDependencies).toEqual({})
   })
-
   test('should allow subsequent mutation tracking and return all on flush', () => {
     const tree = new ProxyStateTree({
       foo: 'bar',
@@ -663,7 +662,7 @@ describe('REACTIONS', () => {
     mutationTree.state.foo = 'bar2'
     mutationTree2.state.foo = 'bar3'
 
-    const flushResult = tree.flush()
+    const flushResult = tree.flush([mutationTree, mutationTree2])
     expect(flushResult).toEqual({
       flushId: 0,
       mutations: [
@@ -748,11 +747,11 @@ describe('ITERATIONS', () => {
 
     update()
     mutationTree.state.items.foo = 'bar'
-    tree.flush()
+    mutationTree.flush()
     mutationTree.state.items.bar = 'baz'
-    tree.flush()
+    mutationTree.flush()
     delete mutationTree.state.items.foo
-    tree.flush()
+    mutationTree.flush()
   })
 
   test('should react to array mutation methods', () => {
@@ -780,7 +779,7 @@ describe('ITERATIONS', () => {
     mutationTree.state.items.push({
       title: 'mip',
     })
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
 
@@ -806,7 +805,7 @@ describe('ITERATIONS', () => {
       new Set(['items', 'items.0', 'items.0.title', 'items.1', 'items.1.title'])
     )
     mutationTree.state.items[0].title = 'baz'
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
 
@@ -825,7 +824,7 @@ describe('ITERATIONS', () => {
       new Set(['items', 'items.0', 'items.1'])
     )
     mutationTree.state.items[0] = 99
-    tree.flush()
+    mutationTree.flush()
     expect(reactionCount).toBe(1)
   })
 })
@@ -855,7 +854,7 @@ describe('PRODUCTION', () => {
     mutationTree.state.items[0].title = 'foo1'
     delete mutationTree.state.items[0].title
     mutationTree.state.items[1].title = 'bar2' // this mutation should not be tracked
-    expect(tree.mutations).toEqual([
+    expect(mutationTree.mutations).toEqual([
       {
         method: 'set',
         path: 'items.0.title',
@@ -913,7 +912,7 @@ describe('GETTER', () => {
     render()
 
     mutationTree.state.user.firstName = 'Bob2'
-    tree.flush()
+    mutationTree.flush()
     expect(renderCount).toBe(2)
   })
 })