Merge pull request cerebral#42 from cerebral/devtoolsPortsManagement

Devtools ports management

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/action-chain/src/ActionChain.ts

@@ -36,7 +36,7 @@ export type OperatorExecution = {
 }
 
 export interface ActionChainEvents {
-  provider: Execution & {
+  effect: Execution & {
     name: string
     method: string | number | symbol
     result: any
@@ -77,7 +77,7 @@ export class ActionChain<Effects> extends EventEmitter<ActionChainEvents> {
           const result = target[prop](...args)
           if (result instanceof Promise) {
             result.then((promisedResult) => {
-              instance.emitAsync('provider', {
+              instance.emitAsync('effect', {
                 ...execution,
                 name: path,
                 method: prop,
@@ -86,7 +86,7 @@ export class ActionChain<Effects> extends EventEmitter<ActionChainEvents> {
               })
             })
           } else {
-            instance.emitAsync('provider', {
+            instance.emitAsync('effect', {
               ...execution,
               name: path,
               method: prop,

packages/node_modules/action-chain/src/index.test.ts

@@ -73,6 +73,9 @@ type Context = typeof context
 
 const actionChain = new ActionChain<Context>(context)
 
+// FORCE SYNC EVENTS
+actionChain.emitAsync = actionChain.emit.bind(actionChain)
+
 const action: <InitialValue = void>() => InitialValue extends void
   ? INoValueAction<Context, InitialValue>
   : IAction<Context, InitialValue> = () => {
@@ -124,14 +127,14 @@ describe('CONTEXT', () => {
   })
 })
 
-describe('PROVIDER', () => {
+describe('EFFECTS', () => {
   test('should track execution of effects', () => {
     expect.assertions(2)
     const fn = action().test(({ foo }) => {
       expect(foo.bar()).toBe('baz')
     })
 
-    actionChain.once('provider', (task) => {
+    actionChain.once('effect', (task) => {
       expect(task).toEqual({
         operatorId: 0,
         actionId: 0,
@@ -150,7 +153,7 @@ describe('PROVIDER', () => {
       expect(foo.nestedProvider.bar()).toBe('baz')
     })
 
-    actionChain.once('provider', (task) => {
+    actionChain.once('effect', (task) => {
       expect(task).toEqual({
         operatorId: 0,
         actionId: 0,
@@ -169,7 +172,7 @@ describe('PROVIDER', () => {
       expect(test.foo()).toBe('bar')
     })
 
-    actionChain.once('provider', (task) => {
+    actionChain.once('effect', (task) => {
       expect(task).toEqual({
         operatorId: 0,
         actionId: 0,

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 = {