feat(overmind): deprecate action for mutate and fix devtool bugs

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/Action/index.tsx

@@ -25,28 +25,34 @@ const Action: FunctionComponent = () => {
       const traversePath = operator.path.slice()
       traversePath.unshift('')
       traversePath.reduce((children, key, index) => {
+        const isLastKey = index === traversePath.length - 1
         let child = children.reduce(
           (hit, child) => (child.path === key ? child : hit),
           null
         )
 
-        if (index === traversePath.length - 1) {
+        if (isLastKey) {
           if (child && !child.children.length) {
             child.operators.push(operator)
           } else {
             child = {
               path: key,
+              parent: child,
               operators: [operator],
               children: [],
-              value: child
-                ? child.operators[child.operators.length - 1].result
-                : currentValue,
+              value:
+                child && child.operators.length
+                  ? child.operators[child.operators.length - 1].result
+                  : child
+                  ? child.value
+                  : currentValue,
             }
             children.push(child)
           }
-        } else {
-          currentValue = child.value
         }
+
+        currentValue = child.value
+
         return child.children
       }, aggr)
 
@@ -103,6 +109,7 @@ const Action: FunctionComponent = () => {
   }
 
   console.log(operatorsByPath)
+
   return (
     <div className={styles.wrapper}>
       {renderOperators(operatorsByPath)}

packages/node_modules/overmind/src/index.ts

@@ -394,6 +394,10 @@ export class Overmind<ThisConfig extends IConfiguration>
       emit: this.eventHub.emit.bind(this.eventHub),
       send: this.devtools ? this.devtools.send.bind(this.devtools) : () => {},
       trackEffects: this.trackEffects.bind(this, this.effects),
+      getNextOperatorId: (() => {
+        let currentOperatorId = 0
+        return () => ++currentOperatorId
+      })(),
       flush: () => {
         return this.proxyStateTree.flush(mutationTrees)
       },
@@ -966,7 +970,17 @@ export function forEach<
 
         if (!evaluatingCount) {
           stopDebugOperator(context, context.value)
-          next(null, createContext(context, context.value))
+          next(
+            null,
+            createContext(
+              lastContext,
+              context.value,
+              lastContext.execution.path.slice(
+                0,
+                lastContext.execution.path.length - 1
+              )
+            )
+          )
         }
       }
       startDebugOperator('forEach', '', context)
@@ -1015,7 +1029,17 @@ export function parallel<Input, ThisConfig extends IConfiguration = Config>(
 
         if (!evaluatingCount) {
           stopDebugOperator(context, context.value)
-          next(null, createContext(context, context.value))
+          next(
+            null,
+            createContext(
+              lastContext,
+              context.value,
+              lastContext.execution.path.slice(
+                0,
+                lastContext.execution.path.length - 1
+              )
+            )
+          )
         }
       }
       startDebugOperator('parallel', '', context)
@@ -1067,6 +1091,9 @@ export function filter<Input, ThisConfig extends IConfiguration = Config>(
 export function action<Input, ThisConfig extends IConfiguration = Config>(
   operation: (context: IContext<ThisConfig>, value: Input) => void
 ): IOperator<ThisConfig, Input, Input> {
+  console.warn(
+    'DEPRECATION - The action operator is deprecated in favor of "mutate". The reason is to avoid confusion between actions and operators.'
+  )
   return createMutationOperator<ThisConfig>(
     'action',
     getFunctionName(operation),
@@ -1085,6 +1112,27 @@ export function action<Input, ThisConfig extends IConfiguration = Config>(
   )
 }
 
+export function mutate<Input, ThisConfig extends IConfiguration = Config>(
+  operation: (context: IContext<ThisConfig>, value: Input) => void
+): IOperator<ThisConfig, Input, Input> {
+  return createMutationOperator<ThisConfig>(
+    'mutate',
+    getFunctionName(operation),
+    (err, context, value, next) => {
+      if (err) next(err, value)
+      else {
+        const result = operation(context, value) as any
+
+        if (result instanceof Promise) {
+          next(null, result.then(() => value))
+        } else {
+          next(null, value)
+        }
+      }
+    }
+  )
+}
+
 export function catchError<Input, ThisConfig extends IConfiguration = Config>(
   operation: (context: IContext<ThisConfig>, value: Error) => Input
 ): IOperator<ThisConfig, Input, Input> {

packages/node_modules/overmind/src/operator.ts

@@ -58,7 +58,7 @@ export function createContext(context, value, path?) {
 
   const newExecution = {
     ...context.execution,
-    operatorId: context.execution.operatorId + 1,
+    operatorId: context.execution.getNextOperatorId(),
     path: path || context.execution.path,
   }
 
@@ -125,8 +125,10 @@ export function createOperator<ThisConfig extends IConfiguration>(
               context.execution.path && context.execution.path.concat(path.name)
             )
             const nextWithPath = createNextPath(next)
-            stopDebugOperator(context, value)
-            path.operator(err, newContext, nextWithPath)
+            path.operator(err, newContext, (...args) => {
+              stopDebugOperator(context, args[1].value)
+              nextWithPath(...args)
+            })
           } else {
             stopDebugOperator(context, value)
             next(err, createContext(context, value))

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

@@ -9,6 +9,8 @@ import {
   when,
   fork,
   parallel,
+  catchError,
+  map,
 } from 'overmind'
 import { Page, RouteContext, GuideParams, VideoParams } from './types'
 import { ensureViewAndTypescript } from './operators'
@@ -113,60 +115,48 @@ export const viewHelpGotIt: Action = ({ state }) => {
   state.showViewHelp = false
 }
 
-export const test: Operator = pipe(
+export const test: Operator<string> = pipe(
   when(
     function isTrue() {
       return true
     },
     {
       true: pipe(
-        action(function truePath({ state }) {
-          state.test = 'truePath'
+        map(function truePath({ state }) {
+          return 'truePath'
         }),
-        action(function truePath2({ state }) {
-          state.test = 'truePath2'
+        map(function truePath2({ state }) {
+          return 'truePath2'
         }),
         fork(() => 'foo', {
-          foo: action(function fooPath({ state }) {
-            state.test = 'fooPath'
-          }),
+          foo: pipe(
+            map(function fooPath({ state }) {
+              return 'fooPath'
+            }),
+            map(function fooPath2() {
+              return 'fooPath2'
+            })
+          ),
         })
       ),
       false: action(function falsePath() {}),
     }
   ),
   parallel(
     pipe(
-      action(function pa1({ state }) {
-        state.test = 'endStuff'
-        state.test = 'endStuff'
-        state.test = 'endStuff'
-        state.test = 'endStuff'
+      map(function pa1({ state }, val) {
+        console.log('VAL', val)
+        return 'pa1'
       }),
-      action(function pa2({ state }) {
-        state.test = 'endStuff'
-        state.test = 'endStuff'
-        state.test = 'endStuff'
-        state.test = 'endStuff'
+      map(function pa2({ state }) {
+        return 'pa2'
       })
     ),
-    action(function endStuff({ state }) {
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-    }),
-    action(function endStuff({ state }) {
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-    }),
-    action(function endStuff({ state }) {
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-      state.test = 'endStuff'
-      state.test = 'endStuff'
+    map(function endStuff({ state }) {
+      return 'endStuff'
     })
-  )
+  ),
+  action(function catchError() {
+    console.log('NOW I RUN CATCH!')
+  })
 )