Merge pull request cerebral#35 from cerebral/devtoolsImprovements

Devtools improvements

Author: christianalfoni

package-lock.json

@@ -31,7 +31,8 @@
     "styled-components": "3.3.3",
     "ws": "5.2.1",
     "color": "3.0.0",
-    "tslib": "1.9.3"
+    "tslib": "1.9.3",
+    "color-hash": "1.0.3"
   },
   "devDependencies": {
     "@types/jest": "23.1.4",

package.json

@@ -4,6 +4,12 @@ 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/actions.ts

@@ -1,5 +1,7 @@
-export const getEventValue = (_, event: React.ChangeEvent<HTMLInputElement>) =>
-  event.currentTarget.value
+export function getEventValue(_, event: React.ChangeEvent<HTMLInputElement>) {
+  return Promise.resolve(event.currentTarget.value)
+}
 
-export const preventEventDefault = (_, event: React.FormEvent) =>
+export function preventEventDefault(_, event: React.FormEvent) {
   event.preventDefault()
+}

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

@@ -2,17 +2,22 @@ import { State, Todo } from './state'
 
 let nextTodoId = 0
 
-export const setNewTodoTitle = (state: State, value: string) =>
-  (state.newTodoTitle = value)
+export function setNewTodoTitle(state: State, value: string) {
+  state.newTodoTitle = value
+}
 
-export const addTodo = (state: State) =>
+export function addTodo(state: State) {
   state.todos.unshift({
     id: String(nextTodoId++),
     title: state.newTodoTitle,
     completed: false,
   })
+}
 
-export const clearNewTodoTitle = (state: State) => (state.newTodoTitle = '')
+export function clearNewTodoTitle(state: State) {
+  state.newTodoTitle = ''
+}
 
-export const toggleCompleted = (_, todo: Todo) =>
-  (todo.completed = !todo.completed)
+export function toggleCompleted(_, todo: Todo) {
+  todo.completed = !todo.completed
+}

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

@@ -35,7 +35,7 @@ export class ActionBase<Context, InitialValue, Value = InitialValue> {
     this.initialActionId = initialActionId
 
     let currentExecutionId = 0
-    return Object.assign(function(value) {
+    const func = Object.assign(function(value) {
       const initialOperator = typeof arguments[1] === 'undefined'
       const newPath = typeof arguments[2] === 'undefined' ? null : arguments[2]
       const executionContext: ExecutionContext = initialOperator
@@ -52,6 +52,8 @@ export class ActionBase<Context, InitialValue, Value = InitialValue> {
         actionChain.emit('action:start', {
           actionId: executionContext.__execution.actionId,
           executionId: executionContext.__execution.executionId,
+          actionName: func.displayName,
+          value,
         })
       }
       const returnValue = runOperators
@@ -63,17 +65,21 @@ export class ActionBase<Context, InitialValue, Value = InitialValue> {
           actionChain.emit('action:end', {
             actionId: executionContext.__execution.actionId,
             executionId: executionContext.__execution.executionId,
+            actionName: func.displayName,
           })
         })
       } else if (initialOperator) {
         actionChain.emit('action:end', {
           actionId: executionContext.__execution.actionId,
           executionId: executionContext.__execution.executionId,
+          actionName: func.displayName,
         })
       }
 
       return returnValue
     }, this) as any
+
+    return func
   }
   getActionChain = () => {
     return this.actionChain
@@ -93,26 +99,34 @@ export class ActionBase<Context, InitialValue, Value = InitialValue> {
             ? executionContext.__path.concat(newPath)
             : executionContext.__path.slice(),
         }
-        const path = executionContextWithPath.__path
         const prevResult = this.runOperators
           ? this.runOperators(props, executionContextWithPath)
           : props
 
-        const operatorId = ++executionContextWithPath.__execution.operatorId
-
         const produceResult = (currentValue) => {
           if (currentValue instanceof StopExecution) {
             return currentValue
           }
 
-          const context = this.actionChain.getContext(executionContextWithPath)
+          const thisExecution = {
+            ...executionContextWithPath.__execution,
+            operatorId: executionContextWithPath.__execution.operatorId + 1,
+          }
+
+          executionContextWithPath.__execution.operatorId++
+
+          const path = executionContextWithPath.__path
+
+          const context = this.actionChain.getContext(
+            thisExecution,
+            executionContextWithPath
+          )
 
           this.actionChain.emit('operator:start', {
             type,
             name,
             path,
-            ...context.__execution,
-            operatorId,
+            ...thisExecution,
           })
           const result = cb(context, currentValue)
 
@@ -122,18 +136,16 @@ export class ActionBase<Context, InitialValue, Value = InitialValue> {
               name,
               path,
               isAsync: true,
-              ...context.__execution,
-              operatorId,
+              ...thisExecution,
             })
             return result.then((promiseResult) => {
               this.actionChain.emit('operator:end', {
                 type,
                 name,
                 path,
-                ...context.__execution,
+                ...thisExecution,
                 isAsync: true,
                 result: promiseResult,
-                operatorId,
               })
               return promiseResult
             })
@@ -143,10 +155,9 @@ export class ActionBase<Context, InitialValue, Value = InitialValue> {
             type,
             name,
             path,
-            ...context.__execution,
+            ...thisExecution,
             isAsync: false,
             result: result,
-            operatorId,
           })
 
           return result

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

@@ -22,9 +22,13 @@ export type Execution = {
 export type ActionExecution = {
   actionId: number
   executionId: number
+  actionName: string
+  value?: any
 }
 
-export type OperatorExecution = ActionExecution & {
+export type OperatorExecution = {
+  actionId: number
+  executionId: number
   operatorId: number
   type: string
   name: string
@@ -61,7 +65,7 @@ export class ActionChain<Context> extends EventEmitter<ActionChainEvents> {
     this.options.providerExceptions = options.providerExceptions || []
   }
 
-  getContext(executionContext: ExecutionContext) {
+  getContext(thisExecution: Execution, executionContext: ExecutionContext) {
     const instance = this
     const providers = Object.keys(this.context).reduce(
       (currentContext, key) => {
@@ -77,15 +81,15 @@ export class ActionChain<Context> extends EventEmitter<ActionChainEvents> {
                   if (result instanceof Promise) {
                     result.then((promisedResult) => {
                       instance.emit('provider', {
-                        ...executionContext.__execution,
+                        ...thisExecution,
                         name: key,
                         method: prop,
                         result: promisedResult,
                       })
                     })
                   } else {
                     instance.emit('provider', {
-                      ...executionContext.__execution,
+                      ...thisExecution,
                       name: key,
                       method: prop,
                       result,

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

@@ -80,6 +80,18 @@ beforeEach(() => {
   ActionBase.nextActionId = 0
 })
 
+describe('ACTION', () => {
+  test('should be able to give the action a name', () => {
+    expect.assertions(1)
+    const test = action() as any
+    test.displayName = 'My Name'
+    actionChain.once('action:start', (execution) => {
+      expect(execution.actionName).toEqual('My Name')
+    })
+    test()
+  })
+})
+
 describe('VALUE', () => {
   test('should run and return result', () => {
     const test = action<string>()
@@ -91,8 +103,6 @@ describe('VALUE', () => {
 describe('CONTEXT', () => {
   test('should pass default context', () => {
     expect.assertions(2)
-    const wut = action()
-    console.log(wut.test)
     const test = action().test(({ __execution, __path }: any) => {
       expect(__execution).toBeTruthy()
       expect(__path).toBeTruthy()
@@ -130,7 +140,7 @@ describe('PROVIDER', () => {
     })
     fn()
   })
-  test('should track execution of clas instance providers', () => {
+  test('should track execution of class instance providers', () => {
     expect.assertions(2)
     const fn = action().test(({ test }) => {
       expect(test.foo()).toBe('bar')

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

@@ -33,5 +33,7 @@
 		"@types/node": "^10.5.1",
 		"tslib": "^1.9.3"
 	},
-	"devDependencies": {}
+	"devDependencies": {
+		"typescript": "^2.9.2"
+	}
 }

packages/node_modules/betsy/package.json

@@ -9,8 +9,8 @@
 		"overmind-devtools": "bin.js"
 	},
 	"scripts": {
-    "start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3000\"",
-    "build": "webpack",
+		"start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3000\"",
+		"build": "webpack",
 		"typecheck": "tsc --noEmit",
 		"test": "jest",
 		"test:watch": "jest --watch --updateSnapshot --coverage false",
@@ -23,10 +23,11 @@
 	],
 	"dependencies": {
 		"@types/node": "^10.5.1",
-		"overmind": "next",
 		"color": "^3.0.0",
+		"color-hash": "^1.0.3",
 		"electron": "^2.0.4",
 		"electron-json-storage": "^4.1.0",
+		"overmind": "next",
 		"react": "^16.4.1",
 		"react-dom": "^16.4.1",
 		"styled-components": "^3.3.3",