refactor(overmind): change how statecharts transition for better devtools

Author: christianalfoni

packages/node_modules/overmind/src/config/statechart.ts

@@ -193,99 +193,98 @@ export function statechart<C extends IConfiguration, S extends string>(
         filter(function canTransition(_, { transition }) {
           return Boolean(transition)
         }),
-        parallel(
-          mutate(function runAction(context: any, { transition, payload }) {
-            if (transition === 'entry' || transition === 'exit') {
-              return actions[key](context, payload)
-            }
-
+        mutate(function runAction(context: any, { transition, payload }) {
+          if (transition === 'entry' || transition === 'exit') {
             return actions[key](context, payload)
-          }),
-          mutate(function performTransition(context: any) {
-            const stateTarget = getTarget(
-              context.state,
-              context.execution.namespacePath
-            )
-            const resolvedActions = getTarget(
-              context.actions,
-              context.execution.namespacePath
-            )
-            const oldStatePath = stateTarget.state.slice()
-            const currentStatePath = stateTarget.state.slice()
-            const stateTransitions = currentStatePath.map(() => null)
-
-            // Build new transition path
-            while (currentStatePath.length) {
-              const target = getStateTarget(chart, currentStatePath)
-
-              // Collect the new transition state
-              if (target.on && target.on[key]) {
-                stateTransitions[currentStatePath.length - 1] =
-                  target.on[key].target || target.on[key]
-              }
-
-              currentStatePath.pop()
-            }
+          }
 
-            const newStatePath = createNewStatePath(
-              stateTarget.state,
-              stateTransitions,
-              chart
-            )
-
-            // Go down old path and trigger exits where the state has changed
-            const traverseOldPath = oldStatePath.slice()
-            while (traverseOldPath.length) {
-              const target = getStateTarget(chart, traverseOldPath)
-
-              if (
-                target.exit &&
-                newStatePath[traverseOldPath.length - 1] !==
-                  oldStatePath[traverseOldPath.length - 1]
-              ) {
-                resolvedActions[target.exit]()
-              }
-
-              traverseOldPath.pop()
+          const result = actions[key](context, payload)
+
+          const stateTarget = getTarget(
+            context.state,
+            context.execution.namespacePath
+          )
+          const resolvedActions = getTarget(
+            context.actions,
+            context.execution.namespacePath
+          )
+          const oldStatePath = stateTarget.state.slice()
+          const currentStatePath = stateTarget.state.slice()
+          const stateTransitions = currentStatePath.map(() => null)
+
+          // Build new transition path
+          while (currentStatePath.length) {
+            const target = getStateTarget(chart, currentStatePath)
+
+            // Collect the new transition state
+            if (target.on && target.on[key]) {
+              stateTransitions[currentStatePath.length - 1] =
+                target.on[key].target || target.on[key]
             }
 
-            if (newStatePath.join() !== oldStatePath.join()) {
-              stateTarget.state = newStatePath.slice()
+            currentStatePath.pop()
+          }
+
+          const newStatePath = createNewStatePath(
+            stateTarget.state,
+            stateTransitions,
+            chart
+          )
+
+          // Go down old path and trigger exits where the state has changed
+          const traverseOldPath = oldStatePath.slice()
+          while (traverseOldPath.length) {
+            const target = getStateTarget(chart, traverseOldPath)
+
+            if (
+              target.exit &&
+              newStatePath[traverseOldPath.length - 1] !==
+                oldStatePath[traverseOldPath.length - 1]
+            ) {
+              resolvedActions[target.exit]()
             }
 
-            // Go down new path and trigger any entry on new states
-            const traverseNewPath = newStatePath.slice()
-            while (traverseNewPath.length) {
-              const target = getStateTarget(chart, traverseNewPath)
+            traverseOldPath.pop()
+          }
 
-              if (
-                target.entry &&
-                newStatePath[traverseNewPath.length - 1] !==
-                  oldStatePath[traverseNewPath.length - 1]
-              ) {
-                resolvedActions[target.entry]()
-              }
+          if (newStatePath.join() !== oldStatePath.join()) {
+            stateTarget.state = newStatePath.slice()
+          }
 
-              traverseNewPath.pop()
+          // Go down new path and trigger any entry on new states
+          const traverseNewPath = newStatePath.slice()
+          while (traverseNewPath.length) {
+            const target = getStateTarget(chart, traverseNewPath)
+
+            if (
+              target.entry &&
+              newStatePath[traverseNewPath.length - 1] !==
+                oldStatePath[traverseNewPath.length - 1]
+            ) {
+              resolvedActions[target.entry]()
             }
 
-            if (process.env.NODE_ENV === 'development') {
-              currentInstance.devtools.send({
-                type: 'chart',
-                data: {
-                  path: context.execution.namespacePath,
-                  state: stateTarget.state,
-                  chart: chart,
-                  actions: getCanTransitionActions(
-                    config.actions,
-                    chart,
-                    stateTarget
-                  ),
-                },
-              })
-            }
-          })
-        )
+            traverseNewPath.pop()
+          }
+
+          if (process.env.NODE_ENV === 'development') {
+            currentInstance.devtools.send({
+              type: 'chart',
+              data: {
+                path: context.execution.namespacePath,
+                state: stateTarget.state,
+                chart: chart,
+                actions: getCanTransitionActions(
+                  config.actions,
+                  chart,
+                  stateTarget
+                ),
+              },
+            })
+          }
+
+          return result
+        })
       )
 
       return aggr