Merge pull request cerebral#8 from cerebral/componentsTab

Components tab

Author: christianalfoni

package-lock.json

@@ -65,11 +65,12 @@
     "ts-jest": "23.0.0",
     "ts-loader": "4.4.2",
     "tslib": "1.9.3",
-    "typescript": "^2.9.2",
+    "typescript": "2.9.2",
     "typescript-eslint-parser": "^16.0.1",
     "webpack": "4.15.1",
     "webpack-cli": "3.0.8",
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "^3.1.4",
+    "url-loader": "1.0.1"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

package.json

@@ -11,6 +11,9 @@ export default (action: Action) => ({
   addTodo: action<React.FormEvent>()
     .do(helpers.preventEventDefault)
     .mutation(mutations.addTodo)
-    .mutation(mutations.clearNewTodoTitle),
+    .mutation(mutations.clearNewTodoTitle)
+    .filter((_, { state }) => state.todos.length > 2)
+    .map(() => Promise.resolve())
+    .mutation((_, state) => (state.todos[2].title = 'mihihihi')),
   toggleCompleted: action<Todo>().mutation(mutations.toggleCompleted),
 })

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

@@ -1,10 +1,13 @@
 import { State, Todo } from './state'
 
+let nextTodoId = 0
+
 export const setNewTodoTitle = (value: string, state: State) =>
   (state.newTodoTitle = value)
 
 export const addTodo = (_, state: State) =>
   state.todos.unshift({
+    id: String(nextTodoId++),
     title: state.newTodoTitle,
     completed: false,
   })

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

@@ -1,4 +1,5 @@
 export type Todo = {
+  id: string
   title: string
   completed: boolean
 }

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

@@ -5,7 +5,10 @@ import Todo from '../Todo'
 
 const Todos: React.SFC<Connect> = ({ appState }) => (
   <List>
-    {appState.todos.map((todo) => <Todo key={todo.title} todo={todo} />)}
+    {appState.todos.map(
+      (todo, index) =>
+        console.log('todo ID', todo.id) || <Todo key={todo.id} todo={todo} />
+    )}
   </List>
 )
 

packages/demos/todomvc/src/components/Todos/index.tsx

@@ -107,7 +107,7 @@ export function actionBaseFactory<
 
             function produceResult(currentValue) {
               if (currentValue instanceof StopExecution) {
-                return currentValue.value
+                return currentValue
               }
 
               const context = actionChain.getContext(executionContextWithPath)

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

@@ -34,6 +34,8 @@ export default (action: Action) => {
 
   const openConsole = action().mutation(mutations.openConsole)
 
+  const openComponents = action().mutation(mutations.openComponents)
+
   const openApp = action<string>()
 
   const toggleExpandState = action<string[]>().mutation(
@@ -47,6 +49,7 @@ export default (action: Action) => {
     addPort,
     openState,
     openConsole,
+    openComponents,
     openApp,
     toggleExpandState,
   }

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

@@ -24,6 +24,13 @@ export const addNewApp = (_, state: State) =>
     port: state.newPortValue,
     messages: [],
     state: {},
+    components: {},
+    flushes: [
+      {
+        mutations: [],
+        components: [],
+      },
+    ],
   })
 
 export const resetNewPortValue = (_, state: State) => (state.newPortValue = '')
@@ -38,6 +45,9 @@ export const openState = (_, state: State) => (state.currentTab = Tab.State)
 
 export const openConsole = (_, state: State) => (state.currentTab = Tab.Console)
 
+export const openComponents = (_, state: State) =>
+  (state.currentTab = Tab.Components)
+
 export const toggleExpandStatePath = (path: string[], state: State) => {
   const pathString = path.join('.')
 
@@ -47,7 +57,7 @@ export const toggleExpandStatePath = (path: string[], state: State) => {
       1
     )
   } else {
-    state.expandedStatePaths.push(pathString)
+    state.expandedStatePaths = state.expandedStatePaths.concat(pathString)
   }
 }
 
@@ -57,14 +67,58 @@ export const performMutationsByMessageType = (
 ) => {
   message.message.forEach((clientMessage) => {
     switch (clientMessage.type) {
-      case 'init':
+      case 'init': {
         state.apps[message.port].state = clientMessage.data.state
         break
-      case 'flush':
+      }
+      case 'flush': {
+        state.apps[message.port].flushes.push({
+          mutations: clientMessage.data.mutations,
+          components: [],
+        })
         clientMessage.data.mutations.forEach(
           runMutation(state.apps[message.port].state)
         )
         break
+      }
+      case 'component:add': {
+        const id = `${clientMessage.data.componentId}_${
+          clientMessage.data.componentInstanceId
+        }`
+
+        state.apps[message.port].components[id] = {
+          id,
+          isMounted: true,
+          updateCount: 0,
+          ...clientMessage.data,
+        }
+        state.apps[message.port].flushes[
+          state.apps[message.port].flushes.length - 1
+        ].components.push(id)
+        break
+      }
+      case 'component:update': {
+        const id = `${clientMessage.data.componentId}_${
+          clientMessage.data.componentInstanceId
+        }`
+
+        state.apps[message.port].components[id].paths = clientMessage.data.paths
+        state.apps[message.port].components[id].updateCount++
+        state.apps[message.port].flushes[
+          state.apps[message.port].flushes.length - 1
+        ].components.push(id)
+        break
+      }
+      case 'component:remove':
+        const id = `${clientMessage.data.componentId}_${
+          clientMessage.data.componentInstanceId
+        }`
+
+        state.apps[message.port].components[id].isMounted = false
+        state.apps[message.port].flushes[
+          state.apps[message.port].flushes.length - 1
+        ].components.push(id)
+        break
     }
   })
 }

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

@@ -1,8 +1,33 @@
+export type Mutation = {
+  args: any[]
+  method: string
+  path: string
+}
+
+export type Flush = {
+  mutations: Mutation[]
+  components: string[]
+}
+
+export type Component = {
+  id: string
+  name: string
+  isMounted: boolean
+  paths: string[]
+  updateCount: number
+}
+
+export type Components = {
+  [id: string]: Component
+}
+
 export type App = {
   name: string
   port: string
   messages: AppMessage[]
   state: object
+  components: Components
+  flushes: Flush[]
 }
 
 export type Apps = {
@@ -22,6 +47,7 @@ export type Message = {
 export enum Tab {
   State = 'State',
   Console = 'Console',
+  Components = 'Components',
 }
 
 export type State = {