feat(overmind): statemachines blocks asyn mutations

Author: christianalfoni

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

@@ -1,7 +1,10 @@
+import { PROXY_TREE } from 'proxy-state-tree'
+
 import { IAction, createOvermind, createOvermindMock } from './'
 import { Statemachine, statemachine } from './statemachine'
 
 describe('Statemachine', () => {
+  
   test('should set initial state', () => {
 
     type State = {
@@ -159,4 +162,43 @@ describe('Statemachine', () => {
     })
     overmind.actions.transition()
   })
+  
+  test('should error when mutating async in transitions', async () => {
+    expect.assertions(1)
+
+    type State = {
+      machine: Statemachine<'FOO' | 'BAR'>
+      foo: string
+    }
+
+    const state: State = {
+      machine: statemachine<'FOO' | 'BAR'>({
+        initial: 'FOO',
+        states: {
+          FOO: ['BAR'],
+          BAR: ['FOO']
+        }
+      }),
+      foo: 'bar'
+    }
+    const transition: Action = ({ state }) => {
+      return state.machine.BAR(async () => {
+        await Promise.resolve()
+        expect(state[PROXY_TREE].master.mutationTree.isBlocking).toBe(true)
+      })
+    }
+
+    const config = {
+      state,
+      actions: {
+        transition
+      }
+    } 
+
+    interface Action extends IAction<typeof config, void, Promise<void>> {}
+
+    const overmind = createOvermind(config)
+
+    return overmind.actions.transition()
+  })
 })

packages/node_modules/overmind/src/statemachine.ts

@@ -1,4 +1,4 @@
-import { VALUE } from 'proxy-state-tree'
+import { PROXY_TREE, VALUE } from 'proxy-state-tree'
 
 import { Derive } from './'
 
@@ -30,7 +30,12 @@ class StateMachine<States extends string>  {
           if (this[CURRENT_EXIT]) this._currentExit()
           this[VALUE][CURRENT_EXIT] = exit
           this.current = key as any
-          return entry && entry()
+          const tree = (this[PROXY_TREE].master.mutationTree || this[PROXY_TREE])
+          tree.enableMutations()
+          const result = entry && entry()
+          tree.blockMutations()
+
+          return result
         }
       }
 

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

@@ -1,11 +1,11 @@
+import { Proxifier } from './Proxyfier'
 import {
-  IProxyStateTree,
-  IMutationTree,
-  IMutationCallback,
   IMutation,
+  IMutationCallback,
+  IMutationTree,
   IProxifier,
+  IProxyStateTree,
 } from './types'
-import { Proxifier } from './Proxyfier'
 
 export class MutationTree<T extends object> implements IMutationTree<T> {
   private mutationCallbacks: IMutationCallback[] = []
@@ -15,6 +15,7 @@ export class MutationTree<T extends object> implements IMutationTree<T> {
   mutations: IMutation[] = []
   objectChanges = new Set<string>()
   isTracking: boolean = false
+  isBlocking: boolean = false
   trackPathListeners: Array<(path: string) => void> = []
   constructor(master: IProxyStateTree<T>, proxifier?: IProxifier<T>) {
     this.isTracking = true
@@ -88,11 +89,17 @@ export class MutationTree<T extends object> implements IMutationTree<T> {
     this.mutationCallbacks.push(callback)
   }
   canMutate() {
-    return this.isTracking
+    return this.isTracking && !this.isBlocking
   }
   canTrack() {
     return false
   }
+  blockMutations() {
+    this.isBlocking = true
+  }
+  enableMutations() {
+    this.isBlocking = false
+  }
   dispose() {
     this.isTracking = false
     this.mutationCallbacks.length = 0

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

@@ -81,6 +81,7 @@ export class Proxifier {
       throw new Error(
         `proxy-state-tree - You are mutating the path "${path}", but it is not allowed. The following could have happened:
         
+        - The mutation is explicitly being blocket
         - You are passing state to a 3rd party tool trying to manipulate the state
         - You are running asynchronous code and forgot to "await" its execution
         `

packages/overmind-website/src/overmind/actions.ts

@@ -8,6 +8,7 @@ import {
   pipe,
   rehydrate,
 } from 'overmind'
+import { PROXY_TREE } from 'proxy-state-tree'
 
 import { GuideParams, Page, RouteContext, VideoParams } from './types'
 
@@ -125,6 +126,10 @@ export const viewHelpGotIt: Action = ({ state }) => {
   state.showViewHelp = false
 }
 
-export const login: Action = ({ state }) => {
-  state.mode.authenticating(() => {})
+export const login: AsyncAction = ({ state }) => {
+  return state.mode.authenticating(async () => {
+    await Promise.resolve()
+    console.log('UHM?!??', state[PROXY_TREE].isBlocking)
+    state.query = 'hihihi'
+  })
 }