feat(overmind): composition fixed and changed to modules and mutate

Author: christianalfoni

packages/demos/todomvc/src/app/actions.ts

@@ -9,15 +9,15 @@ type ChangeEvent = React.ChangeEvent<HTMLInputElement>
 export const changeNewTodoTitle: Action<ChangeEvent> = (action) =>
   action()
     .map(operations.getEventValue)
-    .mutation(mutations.setNewTodoTitle)
+    .mutate(mutations.setNewTodoTitle)
 
 export const addTodo: Action<React.FormEvent> = (action) =>
   action()
     .do(operations.preventEventDefault)
-    .mutation(mutations.addTodo)
-    .mutation(mutations.clearNewTodoTitle)
+    .mutate(mutations.addTodo)
+    .mutate(mutations.clearNewTodoTitle)
     .map(() => Promise.resolve())
     .map(() => Promise.resolve())
 
 export const toggleCompleted: Action<Todo> = (action) =>
-  action().mutation(mutations.toggleCompleted)
+  action().mutate(mutations.toggleCompleted)

packages/demos/todomvc/src/app/mutations.ts

@@ -1,19 +1,19 @@
-import { Mutation } from 'overmind'
+import { Mutate } from 'overmind'
 import { Todo } from './state'
 
 let nextTodoId = 0
 
-export const setNewTodoTitle: Mutation<string> = (state, value) =>
+export const setNewTodoTitle: Mutate<string> = (state, value) =>
   (state.newTodoTitle = value)
 
-export const addTodo: Mutation = (state) =>
+export const addTodo: Mutate = (state) =>
   state.todos.unshift({
     id: String(nextTodoId++),
     title: state.newTodoTitle,
     completed: false,
   })
 
-export const clearNewTodoTitle: Mutation = (state) => (state.newTodoTitle = '')
+export const clearNewTodoTitle: Mutate = (state) => (state.newTodoTitle = '')
 
-export const toggleCompleted: Mutation<Todo> = (_, todo) =>
+export const toggleCompleted: Mutate<Todo> = (_, todo) =>
   (todo.completed = !todo.completed)

packages/node_modules/overmind-devtools/src/app/actions.ts

@@ -5,70 +5,70 @@ import { Message, Tab } from './state'
 
 const onMessage: Action<Message> = (action) =>
   action()
-    .mutation(mutations.performMutationsByMessageType)
-    .mutation(mutations.addMessagesFromClient)
+    .mutate(mutations.performMutationsByMessageType)
+    .mutate(mutations.addMessagesFromClient)
 
 export const loadDevtools: Action = (action) =>
   action()
     // .do(({ storage }) => storage.clear())
     // Do a check if the current app matches the keys of the ???
     .map(operations.getAppsFromStorage)
-    .mutation(mutations.setApps)
+    .mutate(mutations.setApps)
     .map(operations.getCurrentPortFromStorage)
-    .mutation(mutations.setCurrentPort)
-    .mutation(mutations.setAppLoaded)
-    .do(operations.connectCurrentPort(onMessage(action)))
+    .mutate(mutations.setCurrentPort)
+    .mutate(mutations.setAppLoaded)
+    .do(operations.connectCurrentPort(onMessage(action as any)))
 
 export const setError: Action<string> = (action) =>
-  action().mutation(mutations.setError)
+  action().mutate(mutations.setError)
 
 export const changeNewPortValue: Action<string> = (action) =>
   action()
     .map(operations.toNumber)
-    .mutation(mutations.setNewPortValue)
+    .mutate(mutations.setNewPortValue)
 
 export const addPort: Action = (action) =>
   action()
     .map(operations.getNewPortFromState)
-    .mutation(mutations.setCurrentPort)
-    .mutation(mutations.addNewApp)
-    .mutation(mutations.resetNewPortValue)
+    .mutate(mutations.setCurrentPort)
+    .mutate(mutations.addNewApp)
+    .mutate(mutations.resetNewPortValue)
     .do(operations.storeApps)
     .do(operations.connectCurrentPort(onMessage))
 
 export const changeTab: Action<Tab> = (action) =>
-  action().mutation(mutations.changeTab)
+  action().mutate(mutations.changeTab)
 
 export const toggleExpandState: Action<string[]> = (action) =>
-  action().mutation(mutations.toggleExpandStatePath)
+  action().mutate(mutations.toggleExpandStatePath)
 
 export const selectAction: Action<string> = (action) =>
   action()
-    .mutation(mutations.toggleActionItemCollapse)
-    .mutation(mutations.selectAction)
+    .mutate(mutations.toggleActionItemCollapse)
+    .mutate(mutations.selectAction)
 
 type Collapsed = {
   isCollapsed: boolean
 }
 
 export const toggleCollapsed: Action<Collapsed> = (action) =>
-  action().mutation(mutations.toggleCollapsed)
+  action().mutate(mutations.toggleCollapsed)
 
 export const configurePort: Action = (action) =>
-  action().mutation(mutations.configurePort)
+  action().mutate(mutations.configurePort)
 
 export const cancelConfigurePort: Action = (action) =>
-  action().mutation(mutations.cancelConfigurePort)
+  action().mutate(mutations.cancelConfigurePort)
 
 export const removeApp: Action = (action) =>
   action()
     .filter(operations.confirm('Are you sure you want to remove the app?'))
     .do(operations.removeCurrentPort)
-    .mutation(mutations.removeApp)
+    .mutate(mutations.removeApp)
     .do(operations.storeApps)
-    .do(operations.connectCurrentPort(onMessage(action)))
+    .do(operations.connectCurrentPort(onMessage(action as any)))
 
 export const selectPort: Action<string> = (action) =>
   action()
-    .mutation(mutations.selectPort)
-    .do(operations.connectCurrentPort(onMessage(action)))
+    .mutate(mutations.selectPort)
+    .do(operations.connectCurrentPort(onMessage(action as any)))

packages/node_modules/overmind-devtools/src/app/mutations.ts

@@ -1,4 +1,4 @@
-import { Mutation } from 'overmind'
+import { Mutate } from 'overmind'
 import {
   Apps,
   Message,
@@ -15,20 +15,20 @@ import {
   getOperatorId,
 } from './utils'
 
-export const setApps: Mutation<Apps> = (state, apps) => {
+export const setApps: Mutate<Apps> = (state, apps) => {
   if (!apps) {
     state.isAddingPort = true
   }
 
   state.apps = apps || {}
 }
 
-export const configurePort: Mutation = (state) => (state.isAddingPort = true)
+export const configurePort: Mutate = (state) => (state.isAddingPort = true)
 
-export const selectPort: Mutation<string> = (state, port) =>
+export const selectPort: Mutate<string> = (state, port) =>
   (state.currentPort = port)
 
-export const removeApp: Mutation = (state) => {
+export const removeApp: Mutate = (state) => {
   delete state.apps[state.currentPort]
 
   const appPorts = Object.keys(state.apps)
@@ -40,42 +40,41 @@ export const removeApp: Mutation = (state) => {
   }
 }
 
-export const cancelConfigurePort: Mutation = (state) =>
+export const cancelConfigurePort: Mutate = (state) =>
   (state.isAddingPort = false)
 
-export const setCurrentPort: Mutation<string> = (state, currentPort) => {
+export const setCurrentPort: Mutate<string> = (state, currentPort) => {
   if (currentPort) {
     state.currentPort = currentPort
   } else if (Object.keys(state.apps).length) {
     state.currentPort = Object.keys(state.apps)[0]
   }
 }
 
-export const setError: Mutation<string> = (state, error) =>
-  (state.error = error)
+export const setError: Mutate<string> = (state, error) => (state.error = error)
 
-export const setAppLoaded: Mutation = (state) => (state.isLoading = false)
+export const setAppLoaded: Mutate = (state) => (state.isLoading = false)
 
-export const setNewPortValue: Mutation<string> = (state, value) =>
+export const setNewPortValue: Mutate<string> = (state, value) =>
   (state.newPortValue = value)
 
-export const addNewApp: Mutation = (state) => {
+export const addNewApp: Mutate = (state) => {
   state.apps[state.newPortValue] = createApp({
     port: state.newPortValue,
   })
   state.isAddingPort = false
 }
 
-export const resetNewPortValue: Mutation = (state) => (state.newPortValue = '')
+export const resetNewPortValue: Mutate = (state) => (state.newPortValue = '')
 
-export const addMessagesFromClient: Mutation<Message> = (state, message) =>
+export const addMessagesFromClient: Mutate<Message> = (state, message) =>
   (state.apps[message.port].messages = message.message
     .reverse()
     .concat(state.apps[message.port].messages))
 
-export const changeTab: Mutation<Tab> = (state, tab) => (state.currentTab = tab)
+export const changeTab: Mutate<Tab> = (state, tab) => (state.currentTab = tab)
 
-export const toggleExpandStatePath: Mutation<string[]> = (state, path) => {
+export const toggleExpandStatePath: Mutate<string[]> = (state, path) => {
   const pathString = path.join('.')
 
   if (state.expandedStatePaths.indexOf(pathString) >= 0) {
@@ -88,12 +87,11 @@ export const toggleExpandStatePath: Mutation<string[]> = (state, path) => {
   }
 }
 
-export const performMutationsByMessageType: Mutation<Message> = (
+export const performMutationsByMessageType: Mutate<Message> = (
   state,
   message
 ) => {
   message.message.forEach((clientMessage) => {
-    console.log(clientMessage)
     switch (clientMessage.type) {
       case 'init': {
         state.apps[message.port] = createApp({
@@ -316,7 +314,7 @@ export const performMutationsByMessageType: Mutation<Message> = (
   })
 }
 
-export const toggleActionItemCollapse: Mutation<string> = (state, actionId) => {
+export const toggleActionItemCollapse: Mutate<string> = (state, actionId) => {
   for (let index in state.currentApp.actionsList) {
     const item = state.currentApp.actionsList[index]
     if (
@@ -330,12 +328,12 @@ export const toggleActionItemCollapse: Mutation<string> = (state, actionId) => {
   }
 }
 
-export const selectAction: Mutation<string> = (state, actionId) =>
+export const selectAction: Mutate<string> = (state, actionId) =>
   (state.currentApp.currentActionId = actionId)
 
 type Collapse = {
   isCollapsed: boolean
 }
 
-export const toggleCollapsed: Mutation<Collapse> = (_, item) =>
+export const toggleCollapsed: Mutate<Collapse> = (_, item) =>
   (item.isCollapsed = !item.isCollapsed)

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

@@ -5,6 +5,8 @@ import Operator from '../ActionOperator'
 import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../app/utils'
 
+const ignoreOperatorValues = ['when', 'try', 'fork', 'compose']
+
 const Action: React.SFC<Connect> = ({ app }) => {
   const flushReference =
     app.state.currentApp.flushByActionId[getActionId(app.state.currentAction)]
@@ -17,10 +19,14 @@ const Action: React.SFC<Connect> = ({ app }) => {
         {Object.keys(app.state.currentAction.operators).map(
           (key, index, array) => {
             const operator = app.state.currentAction.operators[key]
+            const prevOperator =
+              app.state.currentAction.operators[array[index - 1]]
             const value =
               index === 0
                 ? app.state.currentAction.value
-                : app.state.currentAction.operators[array[index - 1]].result
+                : ignoreOperatorValues.includes(prevOperator.type)
+                  ? undefined
+                  : prevOperator.result
             const flushReference =
               app.state.currentApp.flushByOperatorId[getOperatorId(operator)]
             const flush =

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

@@ -15,10 +15,12 @@ type Props = {
 
 const ActionOperator: React.SFC<Props> = ({ operator, value, app }) => (
   <React.Fragment key={operator.operatorId}>
-    <Pipe>
-      <Path />
-      <ValueInspector value={value} small />
-    </Pipe>
+    {value === undefined ? null : (
+      <Pipe>
+        <Path />
+        <ValueInspector value={value} small />
+      </Pipe>
+    )}
     <Pipe>
       <Path borderColor={operator.type === 'mutation' ? 'red' : 'primary'}>
         {operator.path.length ? (