Merge pull request cerebral#7 from cerebral/devtools-state

Devtools state

Author: christianalfoni

package.json

@@ -65,7 +65,7 @@
     "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",

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

@@ -26,7 +26,7 @@ export function actionBaseFactory<
   Context,
   InitialValue,
   Value = InitialValue,
-  ReturnAction = InitialValue extends undefined
+  ReturnAction = InitialValue extends void
     ? NoValueActionBase<Context, InitialValue, Value>
     : ActionBase<Context, InitialValue, Value>
 >(

packages/node_modules/overmind-devtools/package.json

@@ -40,6 +40,7 @@
 		"ts-loader": "^4.4.2",
 		"tslib": "^1.9.3",
 		"typescript": "^2.9.2",
+		"url-loader": "^1.0.1",
 		"webpack": "^4.15.1",
 		"webpack-cli": "^3.0.8"
 	}

packages/node_modules/overmind-devtools/src/client/BackendConnector.ts

@@ -1,5 +1,4 @@
 import { ipcRenderer } from 'electron'
-import { resolve } from 'url'
 
 type Message = {
   type: string
@@ -26,7 +25,6 @@ class Port {
     ipcRenderer.on('port:exists', this.onPortExists)
   }
   connect() {
-    console.log('connecting', this.port)
     return new Promise((resolve, reject) => {
       this.connectionResolver = resolve
       this.connectionRejecter = reject
@@ -38,7 +36,6 @@ class Port {
   }
   onPortAdded = (_, addedPort) => {
     if (addedPort === this.port) {
-      console.log('lisetning for messages')
       ipcRenderer.on('message', this.onMessage)
       this.connector.sendMessage(this.port, 'ping')
     }
@@ -51,7 +48,6 @@ class Port {
     }
   }
   onMessage = (_, message) => {
-    console.log('got message', message)
     if (message.port !== this.port) {
       return
     }

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

@@ -1,88 +1,53 @@
-import { Action, Context } from './'
-import { State, Apps, Message } from './state'
+import { Action } from './'
+import * as mutations from './mutations'
+import * as helpers from './helpers'
+import { Message } from './state'
 
-/*
-  TASKS
-*/
-
-const getAppsFromStorage = (_, { storage }: Context) => storage.get('apps')
-
-const getCurrentPortFromStorage = (_, { storage }: Context) =>
-  storage.get('currentPort')
-
-const getNewPortFromState = (_, { state }: Context) => state.newPortValue
-
-const storeApps = (_, { storage, state }: Context) =>
-  storage.set('apps', state.apps)
-
-const toNumber = (value: string) => String(Number(value))
-
-const connectCurrentPort = (action: (message: any) => void) => (
-  _,
-  { state, connector }: Context
-) => connector.addPort(state.currentPort, action)
-
-/*
-  MUTATIONS
-*/
+export default (action: Action) => {
+  const onMessage = action<Message>()
+    .mutation(mutations.addMessagesFromClient)
+    .mutation(mutations.performMutationsByMessageType)
 
-const setApps = (apps: Apps, state: State) => (state.apps = apps || {})
+  const loadDevtools = action()
+    // .do((_, { storage }) => storage.clear())
+    .map(helpers.getAppsFromStorage)
+    .mutation(mutations.setApps)
+    .map(helpers.getCurrentPortFromStorage)
+    .mutation(mutations.setCurrentPort)
+    .mutation(mutations.setAppLoaded)
+    .map(helpers.connectCurrentPort(onMessage))
 
-const setCurrentPort = (currentPort: string, state: State) => {
-  if (currentPort) {
-    state.currentPort = currentPort
-  } else if (Object.keys(state.apps).length) {
-    state.currentPort = Object.keys(state.apps)[0]
-  }
-}
+  const setError = action<string>().mutation(mutations.setError)
 
-const setError = (error: string, state: State) => (state.error = error)
+  const changeNewPortValue = action<string>()
+    .map(helpers.toNumber)
+    .mutation(mutations.setNewPortValue)
 
-const setAppLoaded = (_, state: State) => (state.isLoading = false)
+  const addPort = action()
+    .map(helpers.getNewPortFromState)
+    .mutation(mutations.setCurrentPort)
+    .mutation(mutations.addNewApp)
+    .mutation(mutations.resetNewPortValue)
+    .do(helpers.storeApps)
 
-const setNewPortValue = (value: string, state: State) =>
-  (state.newPortValue = value)
+  const openState = action().mutation(mutations.openState)
 
-const addNewApp = (_, state: State) =>
-  (state.apps[state.newPortValue] = {
-    name: null,
-    port: state.newPortValue,
-    messages: [],
-  })
+  const openConsole = action().mutation(mutations.openConsole)
 
-const resetNewPortValue = (_, state: State) => (state.newPortValue = '')
+  const openApp = action<string>()
 
-const addMessageFromClient = (message: Message, state: State) => {
-  state.apps[message.port].messages = state.apps[message.port].messages.concat(
-    message.message
+  const toggleExpandState = action<string[]>().mutation(
+    mutations.toggleExpandStatePath
   )
-}
-
-/*
-  ACTIONS
-*/
-
-export default (action: Action) => {
-  const onMessage = action<any>().mutation(addMessageFromClient)
 
   return {
-    loadDevtools: action()
-      .map(getAppsFromStorage)
-      .mutation(setApps)
-      .map(getCurrentPortFromStorage)
-      .mutation(setCurrentPort)
-      .mutation(setAppLoaded)
-      .map(connectCurrentPort(onMessage)),
-    setError: action<string>().mutation(setError),
-    changeNewPortValue: action<string>()
-      .map(toNumber)
-      .mutation(setNewPortValue),
-    addPort: action()
-      .map(getNewPortFromState)
-      .mutation(setCurrentPort)
-      .mutation(addNewApp)
-      .mutation(resetNewPortValue)
-      .do(storeApps),
-    openApp: action<string>(),
+    loadDevtools,
+    setError,
+    changeNewPortValue,
+    addPort,
+    openState,
+    openConsole,
+    openApp,
+    toggleExpandState,
   }
 }

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

@@ -0,0 +1,19 @@
+import { Context } from './'
+
+export const getAppsFromStorage = (_, { storage }: Context) =>
+  storage.get('apps')
+
+export const getCurrentPortFromStorage = (_, { storage }: Context) =>
+  storage.get('currentPort')
+
+export const getNewPortFromState = (_, { state }: Context) => state.newPortValue
+
+export const storeApps = (_, { storage, state }: Context) =>
+  storage.set('apps', state.apps)
+
+export const toNumber = (value: string) => String(Number(value))
+
+export const connectCurrentPort = (action: (message: any) => void) => (
+  _,
+  { state, connector }: Context
+) => connector.addPort(state.currentPort, action)

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

@@ -0,0 +1,70 @@
+import { Apps, State, Message, Tab } from './state'
+import { runMutation } from './utils'
+
+export const setApps = (apps: Apps, state: State) => (state.apps = apps || {})
+
+export const setCurrentPort = (currentPort: string, state: State) => {
+  if (currentPort) {
+    state.currentPort = currentPort
+  } else if (Object.keys(state.apps).length) {
+    state.currentPort = Object.keys(state.apps)[0]
+  }
+}
+
+export const setError = (error: string, state: State) => (state.error = error)
+
+export const setAppLoaded = (_, state: State) => (state.isLoading = false)
+
+export const setNewPortValue = (value: string, state: State) =>
+  (state.newPortValue = value)
+
+export const addNewApp = (_, state: State) =>
+  (state.apps[state.newPortValue] = {
+    name: null,
+    port: state.newPortValue,
+    messages: [],
+    state: {},
+  })
+
+export const resetNewPortValue = (_, state: State) => (state.newPortValue = '')
+
+export const addMessagesFromClient = (message: Message, state: State) => {
+  state.apps[message.port].messages = state.apps[message.port].messages.concat(
+    message.message
+  )
+}
+
+export const openState = (_, state: State) => (state.currentTab = Tab.State)
+
+export const openConsole = (_, state: State) => (state.currentTab = Tab.Console)
+
+export const toggleExpandStatePath = (path: string[], state: State) => {
+  const pathString = path.join('.')
+
+  if (state.expandedStatePaths.indexOf(pathString) >= 0) {
+    state.expandedStatePaths.splice(
+      state.expandedStatePaths.indexOf(pathString),
+      1
+    )
+  } else {
+    state.expandedStatePaths.push(pathString)
+  }
+}
+
+export const performMutationsByMessageType = (
+  message: Message,
+  state: State
+) => {
+  message.message.forEach((clientMessage) => {
+    switch (clientMessage.type) {
+      case 'init':
+        state.apps[message.port].state = clientMessage.data.state
+        break
+      case 'flush':
+        clientMessage.data.mutations.forEach(
+          runMutation(state.apps[message.port].state)
+        )
+        break
+    }
+  })
+}

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

@@ -2,6 +2,7 @@ export type App = {
   name: string
   port: string
   messages: AppMessage[]
+  state: object
 }
 
 export type Apps = {
@@ -10,21 +11,28 @@ export type Apps = {
 
 export type AppMessage = {
   type: string
-  data: object
+  data: any
 }
 
 export type Message = {
   port: string
   message: AppMessage[]
 }
 
+export enum Tab {
+  State = 'State',
+  Console = 'Console',
+}
+
 export type State = {
   isConnecting: boolean
   isLoading: boolean
   error: string
   currentPort: string
   apps: Apps
   newPortValue: string
+  currentTab: Tab
+  expandedStatePaths: string[]
 }
 
 const state: State = {
@@ -34,6 +42,8 @@ const state: State = {
   currentPort: null,
   apps: {},
   newPortValue: '',
+  currentTab: Tab.State,
+  expandedStatePaths: [''],
 }
 
 export default state

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

@@ -0,0 +1,16 @@
+export const runMutation = (state) => (mutation) => {
+  const pathArray = mutation.path.split('.')
+  const key = pathArray.pop()
+  const target = pathArray.reduce((current, pathKey) => current[pathKey], state)
+
+  switch (mutation.method) {
+    case 'set':
+      target[key] = mutation.args[0]
+      break
+    case 'unset':
+      delete target[key]
+      break
+    default:
+      target[key][mutation.method](...mutation.args)
+  }
+}

packages/node_modules/overmind-devtools/src/client/components/Devtools/elements.tsx

@@ -13,8 +13,3 @@ export const Wrapper = styled.div`
 export const Container = styled.div`
   max-width: 500px;
 `
-
-export const Workspace = styled.div`
-  display: flex;
-  flex-direction: column;
-`