Merge pull request cerebral#89 from cerebral/trackingFix

Tracking fix

Author: christianalfoni

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

@@ -49,7 +49,7 @@ const paths = tree.clearPathsTracking(trackId)
 console.log(paths) // Set { 'foo', 'bar' }
 ```
 
-You would typically use this mechanism to track usage of state. For example rendering a component, calculating a a computed value etc. The returned paths array is stored for later usage. The paths structure is used internally by proxy-state-tree, but you can also consume it as a library author to for example showing components and what paths they depend on in a devtool. Nested paths uses dot notation, for example `['foo.bar']`. Path tracking can be nested, but they can not run at the same time. Meaning the nested tracking must finish before the outer tracker.
+You would typically use this mechanism to track usage of state. For example rendering a component, calculating a a computed value etc. The returned paths set is stored for later usage. The paths structure is used internally by proxy-state-tree, but you can also consume it as a library author to for example showing components and what paths they depend on in a devtool. Nested paths uses dot notation, for example `['foo.bar']`. Path tracking needs to be synchronous from the beginning of the tracking, but the clearing of tracking can be asynchronous.
 
 ## Track mutations
 
@@ -102,7 +102,7 @@ function render () {
   return tree.clearPathsTracking(trackId)
 }
 
-const listener = tree.addMutationListener(render(), () => {
+const listener = tree.addMutationListener(render(), (flushId) => {
   // Runs when mutations matches paths passed in
 
   // Whenever mutations affecting these paths occurs
@@ -137,7 +137,7 @@ const tree = new ProxyStateTree({
 })
 const state = tree.get()
 
-const listener = tree.addMutationListener((mutations) => {
+const listener = tree.addMutationListener((mutations, flushId) => {
   /*
     [{
       method: "set",

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

@@ -12,14 +12,16 @@ export type Mutation = {
   args: any[]
 }
 
+let hasWarnedFlushWhileTracking = false
+
 class ProxyStateTree {
   pathDependencies: object = {}
   private globalDependencies = new Set<Function>()
   private objectChanges = new Set<string>()
   private mutations: Mutation[] = []
   private currentMutations: Mutation[] = []
   private paths: Set<string>[] = []
-  private status: STATUS = STATUS.IDLE
+  private status: Set<STATUS> = new Set()
   private currentFlushId: number = 0
   private completedTrackingCallbacks = []
   private proxy: any
@@ -40,7 +42,7 @@ class ProxyStateTree {
     return this.proxy
   }
   addTrackingPath(path) {
-    if (this.status === STATUS.TRACKING_PATHS) {
+    if (this.status.has(STATUS.TRACKING_PATHS)) {
       this.paths[this.paths.length - 1].add(path)
     }
   }
@@ -50,6 +52,16 @@ class ProxyStateTree {
     const mutations = this.mutations.slice()
     const flushId = this.currentFlushId++
 
+    if (
+      this.status.has(STATUS.TRACKING_PATHS) &&
+      !hasWarnedFlushWhileTracking
+    ) {
+      console.warn(
+        'PROXY-STATE-TREE has detected that it is flushing out mutations while tracking state changes. Please report this warning with information about any unexpected behaviour'
+      )
+      hasWarnedFlushWhileTracking = true
+    }
+
     for (let objectChange of this.objectChanges) {
       if (this.pathDependencies[objectChange]) {
         paths.add(objectChange)
@@ -90,32 +102,19 @@ class ProxyStateTree {
     }
   }
   startMutationTracking() {
-    if (this.status !== STATUS.IDLE) {
-      throw new Error(
-        `You can not start tracking mutations unless idle. The status is: ${
-          this.status
-        }`
-      )
-    }
-    this.status = STATUS.TRACKING_MUTATIONS
+    this.status.add(STATUS.TRACKING_MUTATIONS)
   }
   clearMutationTracking() {
     const currentMutations = this.currentMutations.slice()
 
-    this.status = STATUS.IDLE
+    this.status.delete(STATUS.TRACKING_MUTATIONS)
     this.currentMutations.length = 0
     this.mutations = this.mutations.concat(currentMutations)
 
     return currentMutations
   }
   startPathsTracking() {
-    if (this.status === STATUS.TRACKING_MUTATIONS) {
-      throw new Error(
-        `You can not start tracking paths when tracking mutations.`
-      )
-    }
-
-    this.status = STATUS.TRACKING_PATHS
+    this.status.add(STATUS.TRACKING_PATHS)
 
     return this.paths.push(new Set()) - 1
   }
@@ -131,7 +130,7 @@ class ProxyStateTree {
     }
 
     if (!this.paths.length) {
-      this.status = STATUS.IDLE
+      this.status.delete(STATUS.TRACKING_PATHS)
       while (this.completedTrackingCallbacks.length) {
         this.completedTrackingCallbacks.shift()()
       }

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

@@ -5,7 +5,6 @@ export const PATH = Symbol('PATH')
 export const VALUE = Symbol('VALUE')
 
 export enum STATUS {
-  IDLE = 'IDLE',
   TRACKING_PATHS = 'TRACKING_PATHS',
   TRACKING_MUTATIONS = 'TRACKING_MUTATIONS',
 }
@@ -46,15 +45,15 @@ function createArrayProxy(tree, value, path) {
       }
 
       const nestedPath = concat(path, prop)
-      if (tree.status === STATUS.TRACKING_PATHS) {
+      if (tree.status.has(STATUS.TRACKING_PATHS)) {
         tree.paths[tree.paths.length - 1].add(nestedPath)
       }
 
       if (
         arrayMutations.has(String(prop)) &&
         shouldTrackMutations(tree, nestedPath)
       ) {
-        if (tree.status !== STATUS.TRACKING_MUTATIONS) {
+        if (!tree.status.has(STATUS.TRACKING_MUTATIONS)) {
           throw new Error(
             `proxy-state-tree - You are mutating the path "${nestedPath}", but it is not allowed`
           )
@@ -79,7 +78,7 @@ function createArrayProxy(tree, value, path) {
     set(target, prop, value) {
       const nestedPath = concat(path, prop)
 
-      if (tree.status !== STATUS.TRACKING_MUTATIONS) {
+      if (!tree.status.has(STATUS.TRACKING_MUTATIONS)) {
         throw new Error(
           `proxy-state-tree - You are mutating the path "${nestedPath}", but it is not allowed`
         )
@@ -113,7 +112,7 @@ function createObjectProxy(tree, value, path) {
 
       const targetValue = target[prop]
       const nestedPath = concat(path, prop)
-      if (tree.status === STATUS.TRACKING_PATHS) {
+      if (tree.status.has(STATUS.TRACKING_PATHS)) {
         tree.paths[tree.paths.length - 1].add(nestedPath)
       }
 
@@ -132,7 +131,7 @@ function createObjectProxy(tree, value, path) {
     set(target, prop, value) {
       const nestedPath = concat(path, prop)
 
-      if (tree.status !== STATUS.TRACKING_MUTATIONS) {
+      if (!tree.status.has(STATUS.TRACKING_MUTATIONS)) {
         throw new Error(
           `proxy-state-tree - You are mutating the path "${nestedPath}", but it is not allowed`
         )
@@ -161,7 +160,7 @@ function createObjectProxy(tree, value, path) {
     deleteProperty(target, prop) {
       const nestedPath = concat(path, prop)
 
-      if (tree.status !== STATUS.TRACKING_MUTATIONS) {
+      if (!tree.status.has(STATUS.TRACKING_MUTATIONS)) {
         throw new Error(
           `proxy-state-tree - You are mutating the path "${nestedPath}", but it is not allowed`
         )