feat(overmind-devtools): add devtool tracking to all operators

Author: christianalfoni

packages/demos/react-typescript-todomvc/src/app/actions.ts

@@ -1,17 +1,41 @@
 import * as React from 'react'
-import { Action } from 'overmind'
+import {
+  Action,
+  pipe,
+  Operator,
+  map,
+  mutate,
+  when,
+  run,
+  wait,
+  fork,
+  debounce,
+  filter,
+  forEach,
+} from 'overmind'
 import { Todo } from './state'
 
 type ChangeEvent = React.ChangeEvent<HTMLInputElement>
 
 let nextTodoId = 0
 
+export const changeNewTodoTitle: Operator<ChangeEvent, any> = pipe(
+  map(({ value }) => value.target.value),
+  mutate(({ state, value }) => (state.newTodoTitle = value)),
+  map(() => ['foo', 'bar', 'baz']),
+  forEach(run(() => {})),
+  filter(() => true),
+  debounce(200)
+)
+
+/*
 export const changeNewTodoTitle: Action<ChangeEvent> = ({
   value: event,
   state,
 }) => {
   state.newTodoTitle = event.target.value
 }
+*/
 
 export const addTodo: Action = ({ state }) => {
   state.todos.unshift({

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

@@ -1,4 +1,4 @@
-import { mutate, forEach, fork, Operator, when, map } from 'overmind'
+import { mutate, forEach, fork, Operator, when, map, EventType } from 'overmind'
 import {
   Message,
   AppMessage,
@@ -19,6 +19,7 @@ import {
   EndActionMessage,
   MutationsMessage,
   EffectMessage,
+  ExecutionType,
 } from './types'
 import {
   createApp,
@@ -77,7 +78,10 @@ export const addFlushAndRunMutations = mutate<FlushMessage>(
 )
 
 export const ensureApp = mutate<Message>(({ value: message, state }) => {
-  if (!state.apps[message.appName]) {
+  if (
+    !state.apps[message.appName] ||
+    message.messages[0].type === ExecutionType.INIT
+  ) {
     state.apps[message.appName] = createApp({
       name: message.appName,
     })

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

@@ -6,9 +6,7 @@ export const Wrapper = styled.div`
   overflow-y: scroll;
 `
 
-export const Container = styled.div`
-  border-left: 2px solid ${({ theme }) => theme.color.black};
-`
+export const Container = styled.div``
 
 export const Pipe = styled.div`
   display: flex;

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

@@ -28,7 +28,7 @@ const ActionOperator: React.SFC<Props> = ({
     <React.Fragment key={operator.operatorId}>
       {value === undefined ? null : (
         <Pipe>
-          <Path showPathTag={false}>
+          <Path showPathTag={false} visible={false}>
             {operator.path.length ? (
               <Text variant="hint">
                 <b>{operator.path.join('.')}</b>
@@ -41,7 +41,8 @@ const ActionOperator: React.SFC<Props> = ({
       <Pipe>
         <Path
           visible={
-            prevOperator &&
+            Boolean(prevOperator) &&
+            Boolean(operator.path.length) &&
             prevOperator.path.join('.') !== operator.path.join('.')
           }
           borderColor={operator.type === 'mutate' ? 'red' : 'primary'}

packages/node_modules/overmind-devtools/src/components/ActionPath/elements.tsx

@@ -8,7 +8,7 @@ export const Path = styled<
   'div'
 >('div')`
   position: relative;
-  min-width: 25px;
+  height: ${({ visible }) => (visible ? '100%' : '0')}
   visibility: ${({ visible }) => (visible === false ? 'hidden' : 'visible')};
 `
 
@@ -37,7 +37,7 @@ export const PathText = styled<
 >('div')`
   position: relative;
   z-index: 1;
-  margin: ${({ theme }) => `0 ${theme.padding.smaller} 0 25px`};
+  margin: ${({ theme }) => `0 ${theme.padding.smaller} 0 0`};
   padding: ${({ theme }) =>
     `${theme.padding.smallest} ${theme.padding.smaller}`};
   border: 1px solid ${({ theme, borderColor }) => theme.color[borderColor]};

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

@@ -143,7 +143,7 @@ describe('Overmind', () => {
         actionId: 0,
         actionName: 'doThis',
         executionId: 0,
-        operatorId: 0,
+        operatorId: -1,
         path: [],
       })
     })
@@ -152,7 +152,7 @@ describe('Overmind', () => {
         actionId: 0,
         executionId: 0,
         actionName: 'doThis',
-        operatorId: 0,
+        operatorId: -1,
         path: [],
       })
     })
@@ -179,7 +179,6 @@ describe('Overmind', () => {
       expect(toJSON(data)).toEqual({
         actionId: 0,
         actionName: 'doThis',
-        type: 'action',
         path: [],
         isAsync: false,
         executionId: 0,