Merge pull request cerebral#287 from cerebral/vscode

Vscode

Author: christianalfoni

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

@@ -77,7 +77,7 @@ class DevtoolBackend {
         this.options.onRelaunch()
         break
       default:
-        this.clientSockets[parsedMessage.appName].send(
+        this.clientSockets[parsedMessage.data.appName].send(
           JSON.stringify(parsedMessage.data)
         )
     }

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

@@ -2,6 +2,7 @@ import { createElement, FunctionComponent, Fragment } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
 import * as text from '../../styles/text'
+import { colors } from '../../theme'
 import Input from '../common/Input'
 import Button from '../common/Button'
 import Workspace from '../Workspace'
@@ -62,13 +63,29 @@ const Devtools: FunctionComponent = () => {
     )
   }
 
-  let code = `const overmind = createOvermind(config, {
-    devtools: "localhost:${state.port}",
-  })`
   return state.isConnecting ? (
     <div className={styles.wrapper}>
       <h1>Waiting for an app to connect to {state.port}...</h1>
-      <pre className={styles.code}>{code}</pre>
+      <pre className={styles.code}>
+        <span style={{ color: colors.purple }}>const</span> overmind ={' '}
+        {state.port === 3031 ? (
+          <Fragment>
+            <span style={{ color: colors.green }}>createOvermind</span>(config)
+          </Fragment>
+        ) : (
+          <Fragment>
+            <span style={{ color: colors.green }}>createOvermind</span>(config,{' '}
+            {'{'}
+            {`\n`}
+            {'  '}devtools:{' '}
+            <span style={{ color: colors.yellow }}>
+              "localhost:{state.port}"
+            </span>
+            {`\n`}
+            {'}'})
+          </Fragment>
+        )}
+      </pre>
     </div>
   ) : (
     <Workspace />

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

@@ -27,7 +27,7 @@ export const input = css({
 })
 
 export const code = css({
-  border: '2px dashed var(--colors-white4)',
+  borderRadius: 3,
   padding: '10px',
-  background: 'var(--colors-black2)'
+  background: colors.dark,
 })

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

@@ -51,7 +51,7 @@ export const changeNewPortValue: Action<string> = ({ state }, port) => {
 export const addConnection: Action = ({ state, effects }) => {
   state.error = null
   state.isConnecting = true
-  state.port = state.newPortValue
+  state.port = Number(state.newPortValue)
   state.newPortValue = ''
   effects.connector.connect(state.port)
 }

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

@@ -22,7 +22,7 @@ import {
 type State = {
   isConnecting: boolean
   error: string
-  port: string
+  port: number
   apps: Apps
   currentAppName: string
   newPortValue: string
@@ -48,7 +48,7 @@ const state: State = {
   error: null,
   showApps: false,
   currentAppName: null,
-  port: '3031',
+  port: 3031,
   apps: {},
   newPortValue: '',
   currentTab: Tab.State,

packages/node_modules/overmind-devtools-vscode/package.json

@@ -3,7 +3,7 @@
   "displayName": "Overmind Devtools VSCode",
   "description": "Devtools for Overmind",
   "publisher": "christianalfoni",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "engines": {
     "vscode": "^1.35.0"
   },