feat(overmind-devtools): handle mutiple client sockets and convert runtime to connection indicator

BREAKING CHANGE:
no more direct app connection

Author: christianalfoni

packages/node_modules/overmind-devtools-client/DevtoolBackend.js

@@ -3,6 +3,7 @@ const WebSocket = require('ws')
 class DevtoolBackend {
   constructor(options) {
     this.options = options
+    this.clientSockets = {}
     this.onClientConnection = this.onClientConnection.bind(this)
     this.onDevtoolConnection = this.onDevtoolConnection.bind(this)
     this.onConnection = this.onConnection.bind(this)
@@ -23,12 +24,26 @@ class DevtoolBackend {
   close() {
     this.devtoolServer.close()
   }
+  getQuery(url) {
+    return url
+      .split('?')[1]
+      .split(',')
+      .reduce((aggr, part) => {
+        const parts = part.split('=')
+
+        return Object.assign(aggr, {
+          [parts[0]]: decodeURIComponent(parts[1]),
+        })
+      }, {})
+  }
   onConnection(ws, req) {
+    const query = this.getQuery(req.url)
+
     // devtools connects with ?devtools=1 in url
-    if (req.url.indexOf('devtools') !== -1) {
+    if (query.devtools) {
       this.onDevtoolConnection(ws, req)
     } else {
-      this.onClientConnection(ws, req)
+      this.onClientConnection(query.name, ws)
     }
   }
 
@@ -62,12 +77,32 @@ class DevtoolBackend {
         this.options.onRelaunch()
         break
       default:
-        this.clientSocket.send(JSON.stringify(parsedMessage.data))
+        this.clientSockets[parsedMessage.appName].send(
+          JSON.stringify(parsedMessage.data)
+        )
     }
   }
-  onClientConnection(ws) {
-    this.clientSocket = ws
-    this.clientSocket.on('message', this.onClientMessage)
+  onClientConnection(name, ws) {
+    if (this.clientSockets[name]) {
+      this.clientSockets[name].terminate()
+    }
+
+    this.clientSockets[name] = ws
+
+    ws.on('message', this.onClientMessage)
+
+    const self = this
+    ws.on('close', function onClose() {
+      ws.removeEventListener('message', self.onClientMessage)
+      ws.removeEventListener('close', onClose)
+
+      self.devtoolSocket.send(
+        JSON.stringify({
+          type: 'disconnect',
+          data: name,
+        })
+      )
+    })
   }
   onClientMessage(message) {
     this.devtoolSocket.send(`

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

@@ -85,15 +85,12 @@ class WebsocketConnector {
 }
 
 export class BackendConnector extends WebsocketConnector {
-  port: string
-  messageCallback: MessageCallback
-  constructor() {
-    super()
-  }
   onMessage = (onMessage: MessageCallback) => {
-    this.messageCallback = onMessage
     this.on('message', (message) => onMessage(message))
   }
+  onDisconnect = (onDisconnect: (name: string) => void) => {
+    this.on('disconnect', (name) => onDisconnect(name))
+  }
   sendMessage(appName: string, eventName: string, payload: object = null) {
     this.send('message', {
       appName,

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

@@ -6,8 +6,6 @@ import Input from '../common/Input'
 import Button from '../common/Button'
 import Workspace from '../Workspace'
 import { css } from 'emotion'
-import Runtime from '../Runtime'
-import { colors } from '../../theme'
 
 const Devtools: FunctionComponent = () => {
   const { state, actions } = useOvermind()
@@ -64,35 +62,12 @@ const Devtools: FunctionComponent = () => {
     )
   }
 
-  return (
-    <Fragment>
-      {state.isConnecting ? (
-        <div className={styles.wrapper}>
-          <h1>Waiting for an app to connect...</h1>
-          <h2>or</h2>
-          <input
-            autoFocus
-            disabled={state.runtimeHost && state.runtimeLoading}
-            className={styles.input}
-            defaultValue={
-              state.runtimeHost ? state.runtimeHost.split('?')[0] : ''
-            }
-            placeholder="Connect to app..."
-            style={{
-              borderColor: state.runtimeError ? colors.red : 'transparent',
-            }}
-            onKeyDown={(event) => {
-              if (event.keyCode === 13) {
-                actions.setRuntimeHost(event.currentTarget.value)
-              }
-            }}
-          />
-        </div>
-      ) : (
-        <Workspace />
-      )}
-      <Runtime />
-    </Fragment>
+  return state.isConnecting ? (
+    <div className={styles.wrapper}>
+      <h1>Waiting for an app to connect...</h1>
+    </div>
+  ) : (
+    <Workspace />
   )
 }
 

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

@@ -5,46 +5,18 @@ import { colors } from '../../theme'
 
 const RuntimeConfig: FunctionComponent = () => {
   const { state, actions } = useOvermind()
-  const currentHost = state.runtimeHost.split('?')[0]
-  const [host, setHost] = useState(currentHost)
 
   return (
     <div className={styles.wrapper}>
       <div
         className={styles.overlay}
         onClick={() => actions.toggleRuntimeConfig()}
       />
-      <form
-        className={styles.contentWrapper}
-        onSubmit={(event) => {
-          event.preventDefault()
-          host === currentHost
-            ? actions.disconnectRuntime()
-            : actions.setRuntimeHost(host)
-        }}
-      >
-        <input
-          autoFocus
-          value={host}
-          onChange={(event) => setHost(event.currentTarget.value)}
-          className={styles.input}
-        />
-        <button
-          type="submit"
-          className={styles.button}
-          disabled={!host.length}
-          style={{
-            color: host && host === currentHost ? colors.white : colors.dark,
-            backgroundColor: host
-              ? host === currentHost
-                ? colors.red
-                : colors.green
-              : colors.gray,
-          }}
-        >
-          {host && host === currentHost ? 'disconnect' : 'connect'}
-        </button>
-      </form>
+      <div className={styles.contentWrapper}>
+        <strong>{state.currentApp.connectionState}</strong>
+        <span style={{ margin: '0 5px' }}>on port</span>
+        <strong>{state.port}</strong>
+      </div>
     </div>
   )
 }

packages/node_modules/overmind-devtools-client/src/components/Runtime/styles.ts

@@ -24,25 +24,11 @@ export const contentWrapper = css({
   height: '100%',
   padding: '0.5rem',
   boxSizing: 'border-box',
+  whiteSpace: 'nowrap',
   display: 'flex',
+  alignItems: 'center',
   backgroundColor: colors.dark,
   borderRadiusTopRight: 3,
   borderRadiusBottomRight: 3,
   boxShadow: '5px 5px 20px 5px rgba(0,0,0,0.10)',
 })
-
-export const input = css({
-  border: 0,
-  outline: 'none',
-  padding: '0.5rem',
-  fontSize: 18,
-  borderRadius: 3,
-})
-
-export const button = css({
-  border: 0,
-  borderRadius: 3,
-  outline: 'none',
-  cursor: 'pointer',
-  marginLeft: '0.5rem',
-})

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

@@ -21,9 +21,8 @@ const Tabs: FunctionComponent = () => {
   const { state, actions } = useOvermind()
 
   function getRuntimeColor() {
-    if (!state.runtimeHost) return colors.white
-    if (state.runtimeError) return colors.red
-    if (state.runtimeLoading) return colors.yellow
+    if (state.currentApp.connectionState === 'disconnected') return colors.red
+    if (state.currentApp.connectionState === 'pending') return colors.yellow
 
     return colors.green
   }
@@ -34,10 +33,7 @@ const Tabs: FunctionComponent = () => {
       <div className={styles.divider} />
       <div className={styles.runtimeWrapper}>
         <button
-          className={css(
-            styles.button,
-            Boolean(state.runtimeHost) && styles.activeButton
-          )}
+          className={css(styles.button, styles.activeButton)}
           onClick={() => actions.toggleRuntimeConfig()}
         >
           <FaChrome
@@ -46,18 +42,20 @@ const Tabs: FunctionComponent = () => {
             }}
           />
         </button>
-        {state.isShowingRuntimeConfig ? <RuntimeConfig /> : null}
+        {state.isShowingRuntime ? <RuntimeConfig /> : null}
       </div>
       <div className={styles.divider} />
-      <button
-        className={css(
-          styles.button,
-          state.currentTab === Tab.State && styles.activeButton
-        )}
-        onClick={() => actions.changeTab(Tab.State)}
-      >
-        <FaDatabase />
-      </button>
+      <Tooltip text="State">
+        <button
+          className={css(
+            styles.button,
+            state.currentTab === Tab.State && styles.activeButton
+          )}
+          onClick={() => actions.changeTab(Tab.State)}
+        >
+          <FaDatabase />
+        </button>
+      </Tooltip>
       <Tooltip text="Actions">
         <button
           className={css(