feat(overmind-devtools): implement state tree and track updates

Author: christianalfoni

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,30 +1,53 @@
 import { Action } from './'
-import { Tab } from './state'
 import * as mutations from './mutations'
 import * as helpers from './helpers'
+import { Message } from './state'
 
 export default (action: Action) => {
-  const onMessage = action<any>().mutation(mutations.addMessageFromClient)
+  const onMessage = action<Message>()
+    .mutation(mutations.addMessagesFromClient)
+    .mutation(mutations.performMutationsByMessageType)
+
+  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 setError = action<string>().mutation(mutations.setError)
+
+  const changeNewPortValue = action<string>()
+    .map(helpers.toNumber)
+    .mutation(mutations.setNewPortValue)
+
+  const addPort = action()
+    .map(helpers.getNewPortFromState)
+    .mutation(mutations.setCurrentPort)
+    .mutation(mutations.addNewApp)
+    .mutation(mutations.resetNewPortValue)
+    .do(helpers.storeApps)
+
+  const openState = action().mutation(mutations.openState)
+
+  const openConsole = action().mutation(mutations.openConsole)
+
+  const openApp = action<string>()
+
+  const toggleExpandState = action<string[]>().mutation(
+    mutations.toggleExpandStatePath
+  )
 
   return {
-    loadDevtools: action()
-      .map(helpers.getAppsFromStorage)
-      .mutation(mutations.setApps)
-      .map(helpers.getCurrentPortFromStorage)
-      .mutation(mutations.setCurrentPort)
-      .mutation(mutations.setAppLoaded)
-      .map(helpers.connectCurrentPort(onMessage)),
-    setError: action<string>().mutation(mutations.setError),
-    changeNewPortValue: action<string>()
-      .map(helpers.toNumber)
-      .mutation(mutations.setNewPortValue),
-    addPort: action()
-      .map(helpers.getNewPortFromState)
-      .mutation(mutations.setCurrentPort)
-      .mutation(mutations.addNewApp)
-      .mutation(mutations.resetNewPortValue)
-      .do(helpers.storeApps),
-    changeTab: action<Tab>().mutation(mutations.changeTab),
-    openApp: action<string>(),
+    loadDevtools,
+    setError,
+    changeNewPortValue,
+    addPort,
+    openState,
+    openConsole,
+    openApp,
+    toggleExpandState,
   }
 }

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

@@ -1,4 +1,5 @@
 import { Apps, State, Message, Tab } from './state'
+import { runMutation } from './utils'
 
 export const setApps = (apps: Apps, state: State) => (state.apps = apps || {})
 
@@ -22,14 +23,48 @@ export const addNewApp = (_, state: State) =>
     name: null,
     port: state.newPortValue,
     messages: [],
+    state: {},
   })
 
 export const resetNewPortValue = (_, state: State) => (state.newPortValue = '')
 
-export const addMessageFromClient = (message: Message, state: State) => {
+export const addMessagesFromClient = (message: Message, state: State) => {
   state.apps[message.port].messages = state.apps[message.port].messages.concat(
     message.message
   )
 }
 
-export const changeTab = (tab: Tab, state: State) => (state.currentTab = tab)
+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,7 +11,7 @@ export type Apps = {
 
 export type AppMessage = {
   type: string
-  data: object
+  data: any
 }
 
 export type Message = {
@@ -31,6 +32,7 @@ export type State = {
   apps: Apps
   newPortValue: string
   currentTab: Tab
+  expandedStatePaths: string[]
 }
 
 const state: State = {
@@ -41,6 +43,7 @@ const state: State = {
   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/Inspector/index.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { isObject, isArray } from './utils'
+import { connect } from '../../app'
+
 import {
   Wrapper,
   Key,
@@ -21,7 +23,7 @@ type NestedProps = {
   onToggleExpand: (path: string[]) => void
 }
 
-class Nested extends React.PureComponent<NestedProps> {
+class Nested extends React.Component<NestedProps> {
   hasMounted: boolean = false
   componentDidMount() {
     this.hasMounted = true
@@ -68,12 +70,14 @@ class Nested extends React.PureComponent<NestedProps> {
   }
 }
 
+const ConnectedNested = connect(Nested)
+
 type ValueComponentProps = {
   value: string | number | boolean
   path: string[]
 }
 
-class ValueComponent extends React.PureComponent<ValueComponentProps> {
+class ValueComponent extends React.Component<ValueComponentProps> {
   render() {
     if (typeof this.props.value === 'string') {
       return (
@@ -99,11 +103,11 @@ type InspectorProps = {
   onToggleExpand: (path: string[]) => void
 }
 
-class Inspector extends React.PureComponent<InspectorProps> {
+class Inspector extends React.Component<InspectorProps> {
   renderValue(path: string[], value: any) {
     if (isObject(value)) {
       return (
-        <Nested
+        <ConnectedNested
           key={path.join('.')}
           startBracket="{"
           endBracket="}"
@@ -118,11 +122,11 @@ class Inspector extends React.PureComponent<InspectorProps> {
               this.renderValue(path.concat(key), value[key])
             )
           }
-        </Nested>
+        </ConnectedNested>
       )
     } else if (isArray(value)) {
       return (
-        <Nested
+        <ConnectedNested
           key={path.join('.')}
           startBracket="["
           endBracket="]"
@@ -133,11 +137,11 @@ class Inspector extends React.PureComponent<InspectorProps> {
           isArray
         >
           {() =>
-            value.map((key, index) =>
+            value.map((_, index) =>
               this.renderValue(path.concat(index), value[index])
             )
           }
-        </Nested>
+        </ConnectedNested>
       )
     }
 

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

@@ -0,0 +1,5 @@
+import styled from '../../styled-components'
+
+export const Wrapper = styled.div`
+  padding: ${({ theme }) => theme.padding.normal};
+`

packages/node_modules/overmind-devtools/src/client/components/State/index.tsx

@@ -1,6 +1,16 @@
 import * as React from 'react'
 import { connect, Connect } from '../../app'
+import { Wrapper } from './elements'
+import Inspector from '../Inspector'
 
-const State: React.SFC<Connect> = () => <h1>state</h1>
+const State: React.SFC<Connect> = ({ appState, actions }) => (
+  <Wrapper>
+    <Inspector
+      value={appState.apps[appState.currentPort].state}
+      expandedPaths={appState.expandedStatePaths}
+      onToggleExpand={actions.toggleExpandState}
+    />
+  </Wrapper>
+)
 
 export default connect(State)

packages/node_modules/overmind-devtools/src/client/components/Tabs/index.tsx

@@ -4,12 +4,18 @@ import { connect, Connect } from '../../app'
 import Icon from '../common/Icon'
 import { Tab } from '../../app/state'
 
-const Tabs: React.SFC<Connect> = ({ actions }) => (
+const Tabs: React.SFC<Connect> = ({ appState, actions }) => (
   <Wrapper>
-    <Button active>
+    <Button
+      active={appState.currentTab === Tab.State}
+      onClick={actions.openState}
+    >
       <Icon>database</Icon>
     </Button>
-    <Button active={false}>
+    <Button
+      active={appState.currentTab === Tab.Console}
+      onClick={actions.openConsole}
+    >
       <Icon>terminal</Icon>
     </Button>
   </Wrapper>

packages/node_modules/overmind-devtools/webpack.config.js

@@ -31,7 +31,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['.js', '.tsx', '.ts'],
   },
   plugins: [new HtmlWebpackPlugin()],
 }