refactor(overmind-devtools-client): update to new typing

Author: christianalfoni

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

@@ -1,55 +1,49 @@
-import {
-  Action,
-  AsyncAction,
-  Operator,
-  debounce,
-  mutate,
-  pipe,
-  wait,
-} from 'overmind'
+import { debounce, pipe, wait, fork } from 'overmind'
+import { Context } from './'
 
 import * as o from './operators'
 import {
   ActionsListItemType,
   Component,
   ExecutionType,
-  Message,
+  AppMessageType,
   Tab,
 } from './types'
 import { createApp, getActionId, isValidJson } from './utils'
 
-export const onMessage: Operator<Message> = pipe(
-  o.ensureCurrentApp(),
-  o.ensureApp(),
-  o.addClientMessage(),
-  o.getMessage(),
-  o.forkMessage({
-    [ExecutionType.INIT]: o.addStateAndActions(),
-    [ExecutionType.RE_INIT]: o.addStateAndActions(),
-    [ExecutionType.FLUSH]: o.addFlush(),
-    [ExecutionType.DERIVED]: o.updateDerived(),
-    [ExecutionType.MUTATIONS]: o.addMutations(),
-    [ExecutionType.EFFECT]: o.updateEffect(),
-    [ExecutionType.STATE]: o.updateState(),
-    [ExecutionType.COMPONENT_ADD]: o.addComponent(),
-    [ExecutionType.COMPONENT_UPDATE]: o.updateComponent(),
-    [ExecutionType.COMPONENT_REMOVE]: o.removeComponent(),
-    [ExecutionType.DERIVED_DIRTY]: o.updateFlushWithDerived(),
-    [ExecutionType.ACTION_START]: o.addAction(),
-    [ExecutionType.OPERATOR_START]: o.addOperator(),
-    [ExecutionType.OPERATOR_END]: o.updateOperator(),
-    [ExecutionType.ACTION_END]: o.updateAction(),
-    [ExecutionType.OPERATOR_ASYNC]: o.updateOperatorAsync(),
-    [ExecutionType.GETTER]: o.runGetterMutation(),
-    [ExecutionType.CHART]: o.addChart(),
+export const onMessage = pipe(
+  o.ensureCurrentApp,
+  o.ensureApp,
+  o.addClientMessage,
+  o.getMessage,
+  fork('type', {
+    [ExecutionType.INIT]: o.addStateAndActions,
+    [ExecutionType.RE_INIT]: o.addStateAndActions,
+    [ExecutionType.FLUSH]: o.addFlush,
+    [ExecutionType.DERIVED]: o.updateDerived,
+    [ExecutionType.MUTATIONS]: o.addMutations,
+    [ExecutionType.EFFECT]: o.updateEffect,
+    [ExecutionType.STATE]: o.updateState,
+    [ExecutionType.COMPONENT_ADD]: o.addComponent,
+    [ExecutionType.COMPONENT_UPDATE]: o.updateComponent,
+    [ExecutionType.COMPONENT_REMOVE]: o.removeComponent,
+    [ExecutionType.DERIVED_DIRTY]: o.updateFlushWithDerived,
+    [ExecutionType.ACTION_START]: o.addAction,
+    [ExecutionType.OPERATOR_START]: o.addOperator,
+    [ExecutionType.OPERATOR_END]: o.updateOperator,
+    [ExecutionType.ACTION_END]: o.updateAction,
+    [ExecutionType.OPERATOR_ASYNC]: o.updateOperatorAsync,
+    [ExecutionType.GETTER]: o.runGetterMutation,
+    [ExecutionType.CHART]: o.addChart,
+    [AppMessageType.PORT_EXISTS]: () => {},
   })
 )
 
-export const setError: Action<string> = ({ state }, error) => {
+export const setError = ({ state }: Context, error: string) => {
   state.error = error
 }
 
-export const onDisconnect: Action<string> = ({ state }, appName) => {
+export const onDisconnect = ({ state }: Context, appName: string) => {
   if (appName in state.apps) {
     state.apps[appName] = createApp({
       name: appName,
@@ -58,16 +52,16 @@ export const onDisconnect: Action<string> = ({ state }, appName) => {
   }
 }
 
-export const changeNewPortValue: Action<string> = ({ state }, port) => {
+export const changeNewPortValue = ({ state }: Context, port: string) => {
   state.newPortValue = String(Number(port))
 }
 
-export const changeTab: Action<Tab> = ({ state, effects }, tab) => {
+export const changeTab = ({ state, effects }: Context, tab: Tab) => {
   state.currentTab = tab
   effects.storage.set(`${state.currentApp.name}.currentTab`, tab)
 }
 
-export const toggleExpandState: Action<string[]> = ({ state }, path) => {
+export const toggleExpandState = ({ state }: Context, path: string[]) => {
   const pathString = path.join(state.currentApp.delimiter)
 
   if (state.currentApp.expandedStatePaths.indexOf(pathString) >= 0) {
@@ -82,7 +76,7 @@ export const toggleExpandState: Action<string[]> = ({ state }, path) => {
   }
 }
 
-export const selectAction: Action<string> = ({ state }, actionId) => {
+export const selectAction = ({ state }: Context, actionId: string) => {
   for (let index in state.currentApp.actionsList) {
     const item = state.currentApp.actionsList[index]
     if (
@@ -97,7 +91,7 @@ export const selectAction: Action<string> = ({ state }, actionId) => {
   state.currentApp.currentActionId = actionId
 }
 
-export const toggleGroupedComponent: Action<string> = ({ state }, name) => {
+export const toggleGroupedComponent = ({ state }: Context, name: string) => {
   const index = state.currentApp.expandedComponents.indexOf(name)
 
   if (index === -1) {
@@ -107,24 +101,24 @@ export const toggleGroupedComponent: Action<string> = ({ state }, name) => {
   }
 }
 
-export const selectApp: Action<string> = ({ state }, appName) => {
+export const selectApp = ({ state }: Context, appName: string) => {
   state.currentAppName = appName
   state.showApps = false
 }
 
-export const toggleShowApps: Action = ({ state }) => {
+export const toggleShowApps = ({ state }: Context) => {
   state.showApps = !state.showApps
 }
 
-export const toggleCollapsedComponent: Action<Component> = (_, component) => {
+export const toggleCollapsedComponent = (_: Context, component: Component) => {
   component.isCollapsed = !component.isCollapsed
 }
 
-export const toggleQueryingAction: Action = ({ state }) => {
+export const toggleQueryingAction = ({ state }: Context) => {
   state.currentApp.isQueryingAction = !state.currentApp.isQueryingAction
 }
 
-export const changeActionQuery: Action<string> = ({ state }, query) => {
+export const changeActionQuery = ({ state }: Context, query: string) => {
   state.currentApp.actionQuery = query
 
   const hit = state.currentApp.actionPaths.find((path) =>
@@ -138,9 +132,9 @@ export const changeActionQuery: Action<string> = ({ state }, query) => {
   }
 }
 
-export const selectQueryAction: Action<string> = (
-  { state, effects, actions },
-  path
+export const selectQueryAction = (
+  { state, effects, actions }: Context,
+  path: string
 ) => {
   const existingActionQuery = state.currentApp.selectedActionQuery
 
@@ -154,7 +148,7 @@ export const selectQueryAction: Action<string> = (
   }
 }
 
-export const submitQueryAction: Action = ({ state, effects }) => {
+export const submitQueryAction = ({ state, effects }: Context) => {
   if (!state.currentApp.actionQuerySuggestion) {
     return
   }
@@ -169,8 +163,8 @@ export const submitQueryAction: Action = ({ state, effects }) => {
   )
 }
 
-export const executeAction: Operator = pipe(
-  mutate(({ state, effects }) => {
+export const executeAction = pipe(
+  ({ state, effects }: Context) => {
     state.isExecutingAction = true
 
     const payload = state.currentApp.actionQueryPayload
@@ -181,36 +175,42 @@ export const executeAction: Operator = pipe(
 
     effects.connector.sendMessage(state.currentApp.name, 'executeAction', {
       name: state.currentApp.selectedActionQuery,
-          // eslint-disable-next-line
-      payload: JSON.stringify(eval(`(function () { return ${state.currentApp.actionQueryPayload} })()`)),
+      // eslint-disable-next-line
+      payload: JSON.stringify(
+        eval(
+          `(function () { return ${state.currentApp.actionQueryPayload} })()`
+        )
+      ),
     })
-  }),
+  },
   wait(500),
-  mutate(({ state, effects }) => {
+  ({ state, effects }: Context) => {
     state.currentApp.actionQueryPayload = ''
     effects.storage.set(`${state.currentApp.name}.actionQueryPayload`, '')
     state.isExecutingAction = false
-  })
+  }
 )
 
-export const setActionQueryPayload: Action<string> = (
-  { state, effects },
-  payload
+export const setActionQueryPayload = (
+  { state, effects }: Context,
+  payload: string
 ) => {
   state.currentApp.actionQueryPayload = payload
   effects.storage.set(`${state.currentApp.name}.actionQueryPayload`, payload)
 }
 
-export const setState: Action<string[]> = ({ state }, path) => {
+export const setState = ({ state }: Context, path: string[]) => {
   state.currentApp.selectedStatePath = path.join(state.currentApp.delimiter)
 }
 
-export const undoSettingState: Action = ({ state }) => {
+export const undoSettingState = ({ state }: Context) => {
   state.currentApp.selectedStatePath = null
 }
 
-export const submitState: Action<string> = ({ state, effects }, newState) => {
-  const path = state.currentApp.selectedStatePath.split(state.currentApp.delimiter)
+export const submitState = ({ state, effects }: Context, newState: string) => {
+  const path = state.currentApp.selectedStatePath.split(
+    state.currentApp.delimiter
+  )
 
   effects.connector.sendMessage(state.currentApp.name, 'mutation', {
     path,
@@ -221,61 +221,69 @@ export const submitState: Action<string> = ({ state, effects }, newState) => {
   state.currentApp.selectedStatePath = null
 }
 
-export const toggleRuntimeConfig: Action = ({ state }) => {
+export const toggleRuntimeConfig = ({ state }: Context) => {
   state.isShowingRuntime = !state.isShowingRuntime
 }
 
-export const onAppHostConnected: Action = ({ state, effects }) => {
+export const onAppHostConnected = ({ state, effects }: Context) => {
   effects.connector.openChromeDevtools()
 }
 
-export const refreshApp: Action = ({ state, effects }) => {
+export const refreshApp = ({ state, effects }: Context) => {
   effects.connector.sendMessage(state.currentAppName, 'refresh')
 }
 
-export const setAppDataFromStorage: AsyncAction<{
-  appName: string
-  actions: string[]
-}> = async ({ state, effects }, { appName, actions }) =>
+export const setAppDataFromStorage = async (
+  { state, effects }: Context,
+  {
+    appName,
+    actions,
+  }: {
+    appName: string
+    actions: string[]
+  }
+) =>
   Promise.all([
     effects.storage.get<string>(`${appName}.selectedActionQuery`),
     effects.storage.get<string>(`${appName}.actionQueryPayload`),
     effects.storage.get<Tab>(`${appName}.currentTab`),
-  ]).then(([selectedActionQuery, actionQueryPayload, tab]: [string, string, Tab]) => {
-    const actionQuery =
-      selectedActionQuery && actions.includes(selectedActionQuery)
-        ? selectedActionQuery
+  ]).then(
+    ([selectedActionQuery, actionQueryPayload, tab]: [string, string, Tab]) => {
+      const actionQuery =
+        selectedActionQuery && actions.includes(selectedActionQuery)
+          ? selectedActionQuery
+          : ''
+      state.apps[appName].selectedActionQuery = actionQuery
+      state.apps[appName].actionQueryPayload = actionQuery
+        ? actionQueryPayload
         : ''
-    state.apps[appName].selectedActionQuery = actionQuery
-    state.apps[appName].actionQueryPayload = actionQuery
-      ? actionQueryPayload
-      : ''
-    state.currentTab = tab || state.currentTab
-  })
+      state.currentTab = tab || state.currentTab
+    }
+  )
 
-export const updateActionsSplitSize: Operator<number> = pipe(
+export const updateActionsSplitSize = pipe(
   debounce(200),
-  mutate(async ({ state, effects }, size) => {
+  async ({ state, effects }: Context, size: number) => {
     state.actionsSplitSize = size
 
     await effects.storage.set('devtool.actionsSplitSize', size)
-  })
+  }
 )
 
-export const updateChartsSplitSize: Operator<number> = pipe(
+export const updateChartsSplitSize = pipe(
   debounce(200),
-  mutate(async ({ state, effects }, size) => {
+  async ({ state, effects }: Context, size: number) => {
     state.chartsSplitSize = size
 
     await effects.storage.set('devtool.chartsSplitSize', size)
-  })
+  }
 )
 
-export const clearActions: Action = ({ state }) => {
+export const clearActions = ({ state }: Context) => {
   state.currentApp.actionsList = []
   state.currentApp.currentActionId = null
 }
 
-export const selectChart: Action<string> = ({ state }, id) => {
+export const selectChart = ({ state }: Context, id: string) => {
   state.currentApp.currentChartId = id
 }

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

@@ -1,5 +1,5 @@
-import { IConfig, Overmind } from 'overmind'
-import { createHook } from 'overmind-react'
+import { IContext } from 'overmind'
+import { createStateHook, createActionsHook } from 'overmind-react'
 
 import * as actions from './actions'
 import * as effects from './effects'
@@ -13,8 +13,11 @@ export const config = {
   state,
 }
 
-declare module 'overmind' {
-  interface Config extends IConfig<typeof config> {}
-}
+export type Context = IContext<{
+  state: typeof config.state
+  actions: typeof config.actions
+  effects: typeof config.effects
+}>
 
-export const useOvermind = createHook<typeof config>()
+export const useAppState = createStateHook<Context>()
+export const useActions = createActionsHook<Context>()