feat(overmind-devtools): add and remove ports

Author: christianalfoni

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

@@ -1,4 +1,4 @@
-import { derived, computed } from 'overmind'
+import { derive, compute } from 'overmind'
 
 export type Todo = {
   id: string
@@ -15,9 +15,9 @@ export type State = {
 
 const state: State = {
   todos: [],
-  count: derived((state: State) => state.todos.length),
+  count: derive((state: State) => state.todos.length),
   newTodoTitle: '',
-  testCount: computed((foo: number) => (state: State) => state.count + foo),
+  testCount: compute((foo: number) => (state: State) => state.count + foo),
 }
 
 export default state

packages/node_modules/overmind-devtools/backend/ConnectionManager.js

@@ -10,12 +10,20 @@ class ConnectionManager {
     this.onRemovePort = this.onRemovePort.bind(this)
   }
   addClient(port, client) {
+    const onConnection = this.onConnection.bind(this, port)
+    const onError = this.onError.bind(this, port)
+
     this.clients[port] = {
       wss: client,
+      dispose() {
+        client.removeListener('connection', onConnection)
+        client.removeListener('error', onError)
+        client.close()
+      },
     }
 
-    this.clients[port].wss.on('connection', this.onConnection.bind(this, port))
-    this.clients[port].wss.on('error', this.onError.bind(this, port))
+    this.clients[port].wss.on('connection', onConnection)
+    this.clients[port].wss.on('error', onError)
     this.mainWindow.webContents.send('port:added', port)
   }
   onError(port) {
@@ -48,7 +56,7 @@ class ConnectionManager {
     this.addClient(port, new WebSocketServer({ port: Number(port) }))
   }
   onRemovePort(_, port) {
-    this.clients[port].wss.close()
+    this.clients[port].dispose()
 
     delete this.clients[port]
   }

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

@@ -59,10 +59,18 @@ class Port {
 
     this.messageCallback(message)
   }
+  destroy() {
+    ipcRenderer.removeListener('port:added', this.onPortAdded)
+    ipcRenderer.removeListener('port:exists', this.onPortExists)
+    ipcRenderer.removeListener('message', this.onMessage)
+  }
 }
 
 class BackendConnector {
   addedPorts: Port[] = []
+  getPort(port: string) {
+    return this.addedPorts.find((portInstance) => portInstance.port === port)
+  }
   sendMessage(port: string, eventName: string, payload: object = null) {
     ipcRenderer.send('message', {
       port,
@@ -71,18 +79,20 @@ class BackendConnector {
     })
   }
   addPort(port: string, messageCallback: MessageCallback) {
-    if (
-      this.addedPorts.filter((portInstance) => portInstance.equals(port)).length
-    ) {
-      throw new Error('This port already exists')
+    if (this.addedPorts.find((portInstance) => portInstance.port === port)) {
+      return
     }
+
     const portInstance = new Port(this, port, messageCallback)
 
     portInstance.connect()
     this.addedPorts.push(portInstance)
   }
-  removePort(port: string) {
-    ipcRenderer.send('port:remove', port)
+  removePort(portToRemove: string) {
+    const port = this.getPort(portToRemove)
+    port.destroy()
+    this.addedPorts.splice(this.addedPorts.indexOf(port), 1)
+    ipcRenderer.send('port:remove', portToRemove)
   }
   relaunch() {
     ipcRenderer.send('relaunch')

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

@@ -8,54 +8,58 @@ export default (action: Action) => {
     .mutation(mutations.performMutationsByMessageType)
     .mutation(mutations.addMessagesFromClient)
 
-  const loadDevtools = action()
-    // .do(({ storage }) => storage.clear())
-    // Do a check if the current app matches the keys of the ???
-    .map(helpers.getAppsFromStorage)
-    .mutation(mutations.setApps)
-    .map(helpers.getCurrentPortFromStorage)
-    .mutation(mutations.setCurrentPort)
-    .mutation(mutations.setAppLoaded)
-    .map(helpers.connectCurrentPort(onMessage))
+  return {
+    loadDevtools: action()
+      // .do(({ storage }) => storage.clear())
+      // Do a check if the current app matches the keys of the ???
+      .map(helpers.getAppsFromStorage)
+      .mutation(mutations.setApps)
+      .map(helpers.getCurrentPortFromStorage)
+      .mutation(mutations.setCurrentPort)
+      .mutation(mutations.setAppLoaded)
+      .do(helpers.connectCurrentPort(onMessage)),
 
-  const setError = action<string>().mutation(mutations.setError)
+    setError: action<string>().mutation(mutations.setError),
 
-  const changeNewPortValue = action<string>()
-    .map(helpers.toNumber)
-    .mutation(mutations.setNewPortValue)
+    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)
+    addPort: action()
+      .map(helpers.getNewPortFromState)
+      .mutation(mutations.setCurrentPort)
+      .mutation(mutations.addNewApp)
+      .mutation(mutations.resetNewPortValue)
+      .do(helpers.storeApps)
+      .do(helpers.connectCurrentPort(onMessage)),
 
-  const changeTab = action<Tab>().mutation(mutations.changeTab)
+    changeTab: action<Tab>().mutation(mutations.changeTab),
 
-  const openApp = action<string>()
+    toggleExpandState: action<string[]>().mutation(
+      mutations.toggleExpandStatePath
+    ),
 
-  const toggleExpandState = action<string[]>().mutation(
-    mutations.toggleExpandStatePath
-  )
+    selectAction: action<string>()
+      .mutation(mutations.toggleActionItemCollapse)
+      .mutation(mutations.selectAction),
 
-  const selectAction = action<string>()
-    .mutation(mutations.toggleActionItemCollapse)
-    .mutation(mutations.selectAction)
+    toggleCollapsed: action<{ isCollapsed: boolean }>().mutation(
+      mutations.toggleCollapsed
+    ),
 
-  const toggleCollapsed = action<{ isCollapsed: boolean }>().mutation(
-    mutations.toggleCollapsed
-  )
+    configurePort: action().mutation(mutations.configurePort),
 
-  return {
-    loadDevtools,
-    setError,
-    changeNewPortValue,
-    addPort,
-    changeTab,
-    openApp,
-    toggleExpandState,
-    selectAction,
-    toggleCollapsed,
+    cancelConfigurePort: action().mutation(mutations.cancelConfigurePort),
+
+    removeApp: action()
+      .filter(helpers.confirm('Are you sure you want to remove the app?'))
+      .do(helpers.removeCurrentPort)
+      .mutation(mutations.removeApp)
+      .do(helpers.storeApps)
+      .do(helpers.connectCurrentPort(onMessage)),
+
+    selectPort: action<string>()
+      .mutation(mutations.selectPort)
+      .do(helpers.connectCurrentPort(onMessage)),
   }
 }

packages/node_modules/overmind-devtools/src/app/derived.ts

@@ -1,11 +1,8 @@
-import { derived } from 'overmind'
 import { State, Component } from './state'
 
-export const currentApp = derived(
-  (state: State) => state.apps[state.currentPort]
-)
+export const currentApp = (state: State) => state.apps[state.currentPort]
 
-export const componentsMounted = derived((state: State) =>
+export const componentsMounted = (state: State) =>
   Object.keys(state.currentApp.components).reduce(
     (aggr, key) => {
       if (state.currentApp.components[key].isMounted) {
@@ -16,47 +13,39 @@ export const componentsMounted = derived((state: State) =>
     },
     [] as Component[]
   )
-)
 
-export const componentsUpdateCount = derived((state: State) =>
+export const componentsUpdateCount = (state: State) =>
   state.componentsMounted.reduce(
     (aggr, component) => aggr + component.updateCount,
     0
   )
-)
 
-export const componentsStatePathCount = derived((state: State) =>
+export const componentsStatePathCount = (state: State) =>
   state.componentsMounted.reduce(
     (aggr, component) => aggr + component.paths.length,
     0
   )
-)
 
-export const flushes = derived((state: State) =>
+export const flushes = (state: State) =>
   Object.keys(state.currentApp.flushes)
     .sort(
       (idA, idB) =>
         state.currentApp.flushes[idB].flushId -
         state.currentApp.flushes[idA].flushId
     )
     .map((id) => state.currentApp.flushes[id])
-)
 
-export const flushesMutationsCount = derived((state: State) =>
+export const flushesMutationsCount = (state: State) =>
   state.flushes.reduce((aggr, flush) => aggr + flush.mutations.length, 0)
-)
-
-export const flushesStatePathCount = derived(
-  (state: State) =>
-    state.flushes.reduce((aggr, flush) => {
-      return flush.mutations.reduce(
-        (aggr, mutation) =>
-          aggr.includes(mutation.path) ? aggr : aggr.concat(mutation.path),
-        aggr
-      )
-    }, []).length
-)
-
-export const currentAction = derived(
-  (state: State) => state.currentApp.actions[state.currentApp.currentActionId]
-)
+
+export const flushesStatePathCount = (state: State) =>
+  state.flushes.reduce((aggr, flush) => {
+    return flush.mutations.reduce(
+      (aggr, mutation) =>
+        aggr.includes(mutation.path) ? aggr : aggr.concat(mutation.path),
+      aggr
+    )
+  }, []).length
+
+export const currentAction = (state: State) =>
+  state.currentApp.actions[state.currentApp.currentActionId]

packages/node_modules/overmind-devtools/src/app/effects.ts

@@ -1,18 +1,12 @@
 import * as jsonStorage from 'electron-json-storage'
 import BackendConnector from '../BackendConnector'
 
-const backendConnector = new BackendConnector()
+export const connector = new BackendConnector()
 
-export const connector: {
-  addPort: typeof backendConnector.addPort
-  removePort: typeof backendConnector.removePort
-  sendMessage: typeof backendConnector.sendMessage
-  relaunch: typeof backendConnector.relaunch
-} = {
-  addPort: backendConnector.addPort.bind(backendConnector),
-  removePort: backendConnector.removePort.bind(backendConnector),
-  sendMessage: backendConnector.sendMessage.bind(backendConnector),
-  relaunch: backendConnector.relaunch.bind(backendConnector),
+export const utils = {
+  confirmDialog(text) {
+    return window.confirm(text)
+  },
 }
 
 export const storage = {

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

@@ -1,18 +1,24 @@
-import { Context } from './'
+import { Effects } from './'
 
-export function getAppsFromStorage({ storage }: Context) {
+export function getAppsFromStorage({ storage }: Effects) {
   return storage.get('apps')
 }
 
-export function getCurrentPortFromStorage({ storage }: Context) {
+export function confirm(text) {
+  return function confirm({ utils }: Effects) {
+    return utils.confirmDialog(text)
+  }
+}
+
+export function getCurrentPortFromStorage({ storage }: Effects) {
   return storage.get('currentPort')
 }
 
-export function getNewPortFromState({ state }: Context) {
+export function getNewPortFromState({ state }: Effects) {
   return state.newPortValue
 }
 
-export function storeApps({ storage, state }: Context) {
+export function storeApps({ storage, state }: Effects) {
   storage.set('apps', state.apps)
 }
 
@@ -21,7 +27,15 @@ export function toNumber(_, value: string) {
 }
 
 export function connectCurrentPort(action: (message: any) => void) {
-  return function connectCurrentPort({ state, connector }: Context) {
+  return function connectCurrentPort({ state, connector }: Effects) {
+    if (!state.currentPort) {
+      return
+    }
+
     connector.addPort(state.currentPort, action)
   }
 }
+
+export function removeCurrentPort({ state, connector }: Effects) {
+  connector.removePort(state.currentPort)
+}

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

@@ -3,9 +3,9 @@ import * as effects from './effects'
 import actions from './actions'
 import state from './state'
 
-export type Context = TEffects<typeof state, typeof effects>
+export type Effects = TEffects<typeof state, typeof effects>
 
-export type Action = TAction<typeof state, Context>
+export type Action = TAction<typeof state, Effects>
 
 const app = new App({
   state,