feat(overmind-devtools): single port connection

BREAKING CHANGE:
remove devtools option to connect to default port

Author: christianalfoni

packages/demos/react-todomvc/src/app/actions.js

@@ -2,7 +2,13 @@ import * as operations from './operations'
 import * as mutations from './mutations'
 
 export const changeNewTodoTitle = (action) =>
-  action.map(operations.getEventValue).mutate(mutations.setNewTodoTitle)
+  action
+    .map(operations.getEventValue)
+    .mutate(mutations.setNewTodoTitle)
+    .when(() => true, {
+      true: (action) => action.run(() => {}).map(() => null),
+      false: (action) => action.run(() => {}),
+    })
 
 export const addTodo = (action) =>
   action

packages/demos/react-todomvc/src/app/index.js

@@ -4,16 +4,11 @@ import * as effects from './effects'
 import * as actions from './actions'
 import * as state from './state'
 
-const app = new App(
-  {
-    state,
-    actions,
-    effects,
-  },
-  {
-    devtools: 'localhost:1234',
-  }
-)
+const app = new App({
+  state,
+  actions,
+  effects,
+})
 
 export const connect = createConnect(app)
 

packages/demos/react-todomvc/src/app/state.js

@@ -1,7 +1,5 @@
-import { derive } from 'overmind'
-
 export const todos = []
 
-export const count = derive((state) => state.todos.length)
+export const count = (state) => state.todos.length
 
 export let newTodoTitle = ''

packages/demos/react-typescript-todomvc/src/app/index.ts

@@ -15,9 +15,7 @@ declare module 'overmind' {
   interface IEffects extends TEffects<typeof config> {}
 }
 
-const app = new App(config, {
-  devtools: 'localhost:1234',
-})
+const app = new App(config)
 
 export type Connect = TConnect<typeof app>
 

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

@@ -3,62 +3,37 @@ const WebSocketServer = require('ws').Server
 class ConnectionManager {
   constructor(mainWindow) {
     this.mainWindow = mainWindow
-    this.clients = {}
-
+    this.connect = this.connect.bind(this)
     this.onDevtoolsMessage = this.onDevtoolsMessage.bind(this)
-    this.onAddPort = this.onAddPort.bind(this)
-    this.onRemovePort = this.onRemovePort.bind(this)
+    this.onConnection = this.onConnection.bind(this)
+    this.onError = this.onError.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', onConnection)
-    this.clients[port].wss.on('error', onError)
-    this.mainWindow.webContents.send('port:added', port)
+  onError() {
+    this.mainWindow.webContents.send('port:exists')
   }
-  onError(port) {
-    this.mainWindow.webContents.send('port:exists', port)
+  onConnection(ws) {
+    this.ws = ws
+    this.ws.on('message', this.onAppMessage.bind(this))
   }
-  onConnection(port, ws) {
-    this.clients[port].ws = ws
-    ws.on('message', this.onAppMessage.bind(this, port))
-  }
-  onAppMessage(port, message) {
+  onAppMessage(message) {
     const parsedMessage = JSON.parse(message)
-    this.mainWindow.webContents.send('message', {
-      port,
-      message: parsedMessage,
-    })
+    this.mainWindow.webContents.send('message', parsedMessage)
   }
   onDevtoolsMessage(_, payload) {
     if (!this.clients[payload.port] || !this.clients[payload.port].ws) {
       return
     }
 
-    this.clients[payload.port].ws.send(JSON.stringify(payload))
+    this.ws.send(JSON.stringify(payload))
   }
-  onAddPort(_, port) {
-    if (this.clients[port]) {
-      this.mainWindow.webContents.send('port:added', port)
+  connect(_, port) {
+    if (this.wss) {
       return
     }
 
-    this.addClient(port, new WebSocketServer({ port: Number(port) }))
-  }
-  onRemovePort(_, port) {
-    this.clients[port].dispose()
-
-    delete this.clients[port]
+    this.wss = new WebSocketServer({ port: Number(port) })
+    this.wss.on('connection', this.onConnection)
+    this.wss.on('error', this.onError)
   }
 }
 

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

@@ -83,8 +83,7 @@ function createWindow() {
   })
 
   electron.ipcMain.on('message', connectionManager.onDevtoolsMessage)
-  electron.ipcMain.on('port:add', connectionManager.onAddPort)
-  electron.ipcMain.on('port:remove', connectionManager.onRemovePort)
+  electron.ipcMain.on('connect', connectionManager.connect)
 }
 
 // This method will be called when Electron has finished

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

@@ -1,99 +1,45 @@
 import { ipcRenderer } from 'electron'
+import { AppMessage } from './app/types'
 
 type Message = {
-  type: string
-  port: string
+  appName: string
+  messages: AppMessage[]
 }
 
-type MessageCallback = (error: Error, message?: Message) => void
+type MessageCallback = (message: Message) => void
 
-class Port {
+class BackendConnector {
   port: string
   messageCallback: MessageCallback
-  connector: BackendConnector
-  connectionResolver: Function
-  connectionRejecter: Function
-  constructor(
-    connector: BackendConnector,
-    port: string,
-    messageCallback: MessageCallback
-  ) {
-    this.port = port
-    this.messageCallback = messageCallback
-    this.connector = connector
-    ipcRenderer.on('port:added', this.onPortAdded)
+  constructor() {
     ipcRenderer.on('port:exists', this.onPortExists)
   }
-  connect() {
-    return new Promise((resolve, reject) => {
-      this.connectionResolver = resolve
-      this.connectionRejecter = reject
-      ipcRenderer.send('port:add', this.port)
-    })
-  }
-  equals(port: string) {
-    return this.port === port
-  }
-  onPortAdded = (_, addedPort) => {
-    if (addedPort === this.port) {
-      ipcRenderer.on('message', this.onMessage)
-      this.connector.sendMessage(this.port, 'ping')
-    }
-  }
-  onPortExists = (_, port) => {
-    if (port === this.port) {
-      this.connectionRejecter(
-        new Error('Something running on this port already')
-      )
-    }
+  connect(port: string, messageCallback: MessageCallback) {
+    this.messageCallback = messageCallback
+    ipcRenderer.send('connect', port)
+    ipcRenderer.on('message', this.onMessage)
   }
   onMessage = (_, message) => {
-    if (message.port !== this.port) {
-      return
-    }
-
-    if (message.type === 'ping') {
-      this.connector.sendMessage(this.port, 'pong')
-      return this.connectionResolver()
-    }
-
     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)
+  onPortExists = (_) => {
+    this.messageCallback({
+      appName: null,
+      messages: [
+        {
+          type: 'PORT_EXISTS',
+          data: null,
+        },
+      ],
+    })
   }
-  sendMessage(port: string, eventName: string, payload: object = null) {
+  sendMessage(appName: string, eventName: string, payload: object = null) {
     ipcRenderer.send('message', {
-      port,
+      appName,
       type: eventName,
       data: payload,
     })
   }
-  addPort(port: string, messageCallback: MessageCallback) {
-    if (this.addedPorts.find((portInstance) => portInstance.port === port)) {
-      return
-    }
-
-    const portInstance = new Port(this, port, messageCallback)
-
-    portInstance.connect()
-    this.addedPorts.push(portInstance)
-  }
-  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

@@ -3,20 +3,26 @@ import * as mutations from './mutations'
 import * as operations from './operations'
 import { Message, Tab } from './types'
 
-const onMessage: Action<Message> = (action) =>
+const handleClientMessages: Action<Message> = (action) =>
   action
+    .mutate(mutations.ensureCurrentApp)
     .mutate(mutations.performMutationsByMessageType)
     .mutate(mutations.addMessagesFromClient)
 
+const setPortExists: Action<Message> = (action) =>
+  action.mutate(mutations.setPortExists)
+
+const onMessage: Action<Message> = (action) =>
+  action.when(operations.isPortExistsMessage, {
+    true: setPortExists,
+    false: handleClientMessages,
+  })
+
 export const loadDevtools: Action = (action) =>
-  // .do(({ storage }) => storage.clear())
-  // Do a check if the current app matches the keys of the ???
   action
-    .map(operations.getAppsFromStorage)
-    .mutate(mutations.setApps)
+    // .run(({ storage }) => storage.clear())
     .map(operations.getCurrentPortFromStorage)
-    .mutate(mutations.setCurrentPort)
-    .mutate(mutations.setAppLoaded)
+    .mutate(mutations.setPort)
     .run(operations.connectCurrentPort(onMessage(action as any)))
 
 export const setError: Action<string> = ({ mutate }) =>
@@ -25,13 +31,12 @@ export const setError: Action<string> = ({ mutate }) =>
 export const changeNewPortValue: Action<string> = (action) =>
   action.map(operations.toNumber).mutate(mutations.setNewPortValue)
 
-export const addPort: Action = (action) =>
+export const addConnection: Action = (action) =>
   action
+    .mutate(mutations.setConnecting)
     .map(operations.getNewPortFromState)
-    .mutate(mutations.setCurrentPort)
-    .mutate(mutations.addNewApp)
+    .mutate(mutations.setPort)
     .mutate(mutations.resetNewPortValue)
-    .run(operations.storeApps)
     .run(operations.connectCurrentPort(onMessage))
 
 export const changeTab: Action<Tab> = ({ mutate }) =>
@@ -52,24 +57,8 @@ export const toggleCollapsed: Action<Collapsed> = (action) =>
     .filter(operations.isNotExpandingAllActions)
     .mutate(mutations.toggleCollapsed)
 
-export const configurePort: Action = ({ mutate }) =>
-  mutate(mutations.configurePort)
-
-export const cancelConfigurePort: Action = ({ mutate }) =>
-  mutate(mutations.cancelConfigurePort)
-
-export const removeApp: Action = (action) =>
-  action
-    .filter(operations.confirm('Are you sure you want to remove the app?'))
-    .run(operations.removeCurrentPort)
-    .mutate(mutations.removeApp)
-    .run(operations.storeApps)
-    .run(operations.connectCurrentPort(onMessage(action as any)))
-
-export const selectPort: Action<string> = (action) =>
-  action
-    .mutate(mutations.selectPort)
-    .run(operations.connectCurrentPort(onMessage(action as any)))
+export const selectApp: Action<string> = (action) =>
+  action.mutate(mutations.selectApp)
 
 export const toggleExpandAllActions: Action = ({ mutate }) =>
   mutate(mutations.toggleExpandAllActions)

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

@@ -15,7 +15,9 @@ declare module 'overmind' {
   interface IEffects extends TEffects<typeof config> {}
 }
 
-const app = new App(config)
+const app = new App(config, {
+  devtools: false,
+})
 
 export type Connect = TConnect<typeof app>