fix(overmind): properly fix statechart transition and devtools root indication

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Charts/index.tsx

@@ -42,7 +42,9 @@ const Charts: FunctionComponent = () => {
                         backgroundColor: nameToColor(path),
                       }}
                     />
-                    <span className={textStyles.denseNormal}>{path}</span>
+                    <span className={textStyles.denseNormal}>
+                      {path || '[ROOT]'}
+                    </span>
                   </div>
                 )
               })}

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

@@ -5,6 +5,7 @@ import {
   filter,
   map,
   mutate,
+  parallel,
   pipe,
 } from '../'
 
@@ -192,98 +193,99 @@ export function statechart<C extends IConfiguration, S extends string>(
         filter(function canTransition(_, { transition }) {
           return Boolean(transition)
         }),
-        mutate(function runAction(context: any, { transition, payload }) {
-          if (transition === 'entry' || transition === 'exit') {
-            actions[key](context, payload)
-            return
-          }
+        parallel(
+          mutate(function runAction(context: any, { transition, payload }) {
+            if (transition === 'entry' || transition === 'exit') {
+              return actions[key](context, payload)
+            }
 
-          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]
+            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()
             }
 
-            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 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]()
+            if (newStatePath.join() !== oldStatePath.join()) {
+              stateTarget.state = newStatePath.slice()
             }
 
-            traverseOldPath.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 (newStatePath.join() !== oldStatePath.join()) {
-            stateTarget.state = newStatePath.slice()
-          }
+              if (
+                target.entry &&
+                newStatePath[traverseNewPath.length - 1] !==
+                  oldStatePath[traverseNewPath.length - 1]
+              ) {
+                resolvedActions[target.entry]()
+              }
 
-          // 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]()
+              traverseNewPath.pop()
             }
 
-            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
-                ),
-              },
-            })
-          }
-        })
+            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 aggr