fix(overmind): ensure reconnect and backwards delimiter compatability

Author: christianalfoni

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

@@ -27,7 +27,6 @@ class WebsocketConnector {
       if (this.socket) {
         reject(new Error('TODO: Socked already open, what now?'))
       }
-
       this.socket = new WebSocket(`ws://localhost:${port}?devtools=1`)
       this.socket.onmessage = (message) => {
         const parsedMessage = JSON.parse(message.data)
@@ -49,12 +48,7 @@ class WebsocketConnector {
       }
       this.socket.onclose = (reason) => {
         console.log("Socket closed", reason)
-        alert("The client lost connection to the backend, we have no idea why. Please report this if it occurs. We will now restart the application")
-        // @ts-ignore
-        if (window.onRestart) {
-          // @ts-ignore
-          window.onRestart()
-        }
+        setTimeout(() => this.connect(port), 1000)
       }
     })
   }

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

@@ -1,9 +1,10 @@
 import { css } from 'emotion'
+
 import { colors } from '../../theme'
 
 export const wrapper = css({
   padding: '2rem',
-  height: '100%',
+  height: '100vh',
   boxSizing: 'border-box',
   overflowY: 'scroll',
   fontSize: 14,

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

@@ -49,6 +49,7 @@ export const runGetterMutation: () => Operator<GetterMessage> = () =>
       method: 'set',
       path: message.data.path,
       args: [message.data.value],
+      delimiter: state.apps[message.appName].delimiter || '.'
     })
   })
 
@@ -155,12 +156,14 @@ export const removeComponent: () => Operator<RemoveComponentMessage> = () =>
 export const updateDerived: () => Operator<DerivedMessage> = () =>
   mutate(({ state }, message) => {
     const appState = state.apps[message.appName].state
-    const path = message.data.path.slice()
+    // For backwards compatability it can still be a string
+    const actualPath = Array.isArray(message.data.path) ? message.data.path : (message.data.path as any).split('.')
+    const path = actualPath.slice()
     const key = path.pop()
     const target = path.reduce((aggr, pathKey) => aggr[pathKey], appState)
     target[key] = message.data.value
 
-    state.apps[message.appName].derived[message.data.path.join(state.apps[message.appName].delimiter)] = message.data
+    state.apps[message.appName].derived[actualPath.join(state.apps[message.appName].delimiter)] = message.data
   })
 
 export const updateFlushWithDerived: () => Operator<DirtyDerivedMessage> = () =>
@@ -301,6 +304,12 @@ export const updateAction: () => Operator<EndActionMessage> = () =>
 export const addMutations: () => Operator<MutationsMessage> = () =>
   mutate(({ state }, message) => {
     const mutations = message.data
+
+    // For backwards compatability, ensure delimiter
+    mutations.mutations.forEach((mutation) => {
+      mutation.delimiter = mutation.delimiter || '.'
+    })
+
     const id = `${mutations.actionId}_${mutations.executionId}`
     const operator =
       state.apps[message.appName].actions[id].operators[mutations.operatorId]

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

@@ -2,6 +2,7 @@ export type Mutation = {
   args: any[]
   method: string
   path: string
+  delimiter: string
 }
 
 export type OperatorsByPath = Array<{

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

@@ -1,8 +1,8 @@
 import * as ColorHash from 'color-hash'
 
-import { Action, App, Flush, OperatorsByPath } from './types'
+import { Action, App, Flush, Mutation, OperatorsByPath } from './types'
 
-export const runMutation = (state) => (mutation) => {
+export const runMutation = (state) => (mutation: Mutation) => {
   const pathArray = mutation.path.split(mutation.delimiter)
   const key = pathArray.pop()
   const target = pathArray.reduce((current, pathKey) => current[pathKey].__CLASS__ ? current[pathKey].value : current[pathKey], state)