Merge pull request cerebral#36 from cerebral/devtoolsImprovements

fix(overmind-devtools): fix provider tracking and some styling

Author: christianalfoni

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

@@ -4,12 +4,6 @@ import { Todo } from './state'
 import * as helpers from './helpers'
 import * as mutations from './mutations'
 
-function hasLength(_, value: string) {
-  return Boolean(value.length)
-}
-
-function noop() {}
-
 export default (action: Action) => ({
   changeNewTodoTitle: action<React.ChangeEvent<HTMLInputElement>>()
     .map(helpers.getEventValue)

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

@@ -1 +1,10 @@
-export const foo = {}
+export const say = {
+  hello: (name: string) => ({ hello: `Hello ${name}` }),
+}
+
+export const api = {
+  getPosts: () =>
+    fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+      response.json()
+    ),
+}

packages/node_modules/action-chain/src/ActionChain.ts

@@ -40,6 +40,7 @@ export interface ActionChainEvents {
     name: string
     method: string | number | symbol
     result: any
+    args: any[]
   }
   'action:start': ActionExecution
   'action:end': ActionExecution
@@ -56,6 +57,10 @@ export interface ActionChainEvents {
   }
 }
 
+function isObject(value) {
+  return typeof value === 'object' && !Array.isArray(value) && value !== null
+}
+
 export class ActionChain<Context> extends EventEmitter<ActionChainEvents> {
   constructor(
     private context: Context,
@@ -64,53 +69,64 @@ export class ActionChain<Context> extends EventEmitter<ActionChainEvents> {
     super()
     this.options.providerExceptions = options.providerExceptions || []
   }
+  private createGetHandler(execution, path) {
+    const instance = this
+    return (target, prop) => {
+      if (typeof target[prop] === 'function') {
+        return (...args) => {
+          const result = target[prop](...args)
+          if (result instanceof Promise) {
+            result.then((promisedResult) => {
+              instance.emit('provider', {
+                ...execution,
+                name: path,
+                method: prop,
+                args,
+                result: promisedResult,
+              })
+            })
+          } else {
+            instance.emit('provider', {
+              ...execution,
+              name: path,
+              method: prop,
+              args,
+              result,
+            })
+          }
+
+          return result
+        }
+      } else if (isObject(target[prop])) {
+        return new Proxy(target[prop], {
+          get: instance.createGetHandler(execution, path + '.' + prop),
+        })
+      }
+
+      return target[prop]
+    }
+  }
 
   getContext(thisExecution: Execution, executionContext: ExecutionContext) {
-    const instance = this
-    const providers = Object.keys(this.context).reduce(
-      (currentContext, key) => {
+    let context = this.context
+
+    if (IS_DEVELOPMENT) {
+      context = Object.keys(this.context).reduce((currentContext, key) => {
         if (
-          IS_DEVELOPMENT &&
-          this.options.providerExceptions.indexOf(key) === -1
+          this.options.providerExceptions.indexOf(key) === -1 &&
+          isObject(this.context[key])
         ) {
           currentContext[key] = new Proxy(this.context[key], {
-            get(target, prop) {
-              if (typeof target[prop] === 'function') {
-                return (...args) => {
-                  const result = target[prop](...args)
-                  if (result instanceof Promise) {
-                    result.then((promisedResult) => {
-                      instance.emit('provider', {
-                        ...thisExecution,
-                        name: key,
-                        method: prop,
-                        result: promisedResult,
-                      })
-                    })
-                  } else {
-                    instance.emit('provider', {
-                      ...thisExecution,
-                      name: key,
-                      method: prop,
-                      result,
-                    })
-                  }
-
-                  return result
-                }
-              }
-
-              return target[prop]
-            },
+            get: this.createGetHandler(thisExecution, key),
           })
         } else {
           currentContext[key] = this.context[key]
         }
 
         return currentContext
-      },
-      {}
-    )
-    return { ...providers, ...executionContext }
+      }, {}) as Context
+    }
+
+    return Object.assign({}, context, executionContext)
   }
 }

packages/node_modules/action-chain/src/index.test.ts

@@ -62,6 +62,11 @@ const context = {
     bar() {
       return 'baz'
     },
+    nestedProvider: {
+      bar() {
+        return 'baz'
+      },
+    },
   },
   test: new TestProvider(),
 }
@@ -135,6 +140,26 @@ describe('PROVIDER', () => {
         executionId: 0,
         method: 'bar',
         name: 'foo',
+        args: [],
+        result: 'baz',
+      })
+    })
+    fn()
+  })
+  test('should track execution of namespaced providers', () => {
+    expect.assertions(2)
+    const fn = action().test(({ foo }) => {
+      expect(foo.nestedProvider.bar()).toBe('baz')
+    })
+
+    actionChain.once('provider', (task) => {
+      expect(task).toEqual({
+        operatorId: 0,
+        actionId: 0,
+        executionId: 0,
+        method: 'bar',
+        name: 'foo.nestedProvider',
+        args: [],
         result: 'baz',
       })
     })
@@ -152,6 +177,7 @@ describe('PROVIDER', () => {
         actionId: 0,
         executionId: 0,
         method: 'foo',
+        args: [],
         name: 'test',
         result: 'bar',
       })

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

@@ -10,6 +10,7 @@ export default (action: Action) => {
 
   const loadDevtools = action()
     // .do(({ storage }) => storage.clear())
+    // Do a check if the current app matches the keys of the ???
     .map(helpers.getAppsFromStorage)
     .mutation(mutations.setApps)
     .map(helpers.getCurrentPortFromStorage)

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

@@ -36,8 +36,8 @@ export const flushes = derived((state: State) =>
   Object.keys(state.currentApp.flushes)
     .sort(
       (idA, idB) =>
-        state.currentApp.flushes[idA].flushId -
-        state.currentApp.flushes[idB].flushId
+        state.currentApp.flushes[idB].flushId -
+        state.currentApp.flushes[idA].flushId
     )
     .map((id) => state.currentApp.flushes[id])
 )

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

@@ -276,12 +276,12 @@ export function performMutationsByMessageType(state: State, message: Message) {
         break
       }
       case 'provider': {
-        const providers = clientMessage.data
-        const id = `${providers.actionId}_${providers.executionId}`
+        const provider = clientMessage.data
+        const id = getActionId(provider)
         const operator =
-          state.apps[message.port].actions[id].operators[providers.operatorId]
+          state.apps[message.port].actions[id].operators[provider.operatorId]
 
-        operator.providers = providers.providers
+        operator.providers.push(provider)
         break
       }
     }

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

@@ -9,8 +9,8 @@ export type Mutation = {
 export type Provider = {
   args: any[]
   method: string
-  path: string
-  returnValue: any
+  name: string
+  result: any
 }
 
 export enum ActionsListItemType {
@@ -190,7 +190,7 @@ const state: State = {
   currentPort: null,
   apps: {},
   newPortValue: '',
-  currentTab: Tab.Actions,
+  currentTab: Tab.State,
   expandedStatePaths: [''],
   currentApp: derived.currentApp,
   componentsMounted: derived.componentsMounted,

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

@@ -6,13 +6,10 @@ import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../app/utils'
 
 const Action: React.SFC<Connect> = ({ app }) => {
-  if (!app.state.currentAction) {
-    return null
-  }
-
   const flushReference =
     app.state.currentApp.flushByActionId[getActionId(app.state.currentAction)]
-  const flush = app.state.currentApp.flushes[flushReference.flushId]
+  const flush =
+    flushReference && app.state.currentApp.flushes[flushReference.flushId]
 
   return (
     <Wrapper>

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

@@ -4,14 +4,15 @@ import { Colors } from '../../theme'
 export const Operator = styled<
   {
     borderColor: keyof Colors
+    onClick: any
   },
   'div'
 >('div')`
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: ${({ theme }) => `0 ${theme.padding.smaller}`};
-  cursor: pointer;
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
   border: 1px solid ${({ theme, borderColor }) => theme.color[borderColor]};
   background-color: #fff;
   border-radius: ${({ theme }) => theme.borderRadius.normal};
@@ -23,20 +24,17 @@ export const OperatorHeader = styled.div`
   > *:first-child {
     margin-right: 10px;
   }
-  > *:last-child {
+  > *:nth-child(3) {
     margin-left: auto;
     color: ${({ theme }) => theme.color.fade(theme.color.black, 0.75)};
   }
 `
 
-export const Mutation = styled.div`
+export const OperatorItem = styled.div`
   display: flex;
   align-items: center;
-  > *:first-child {
-    flex: 0 0 50px;
-  }
-  > *:last-child {
-    flex: 0 0 200px;
-    margin-left: auto;
+  margin-bottom: ${({ theme }) => theme.padding.smaller};
+  > * {
+    margin-right: 10px;
   }
 `