feat(overmind): actions return value and runs sync and async

BREAKING CHANGE:
actions now returns value and runs sync async

Author: christianalfoni

package-lock.json

@@ -58,6 +58,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "7.3.4",
     "@babel/plugin-transform-react-jsx": "7.1.6",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.1.0",
@@ -100,15 +101,14 @@
     "ts-jest": "23.10.4",
     "ts-loader": "4.4.2",
     "tslib": "1.9.3",
-    "typescript": "3.3.1",
+    "typescript": "^3.4.5",
     "typescript-eslint-parser": "^21.0.1",
     "url-loader": "1.0.1",
     "vue": "2.5.16",
     "vue-template-compiler": "2.5.16",
     "webpack": "4.28.4",
     "webpack-cli": "3.1.2",
-    "webpack-dev-server": "3.1.11",
-    "@babel/plugin-proposal-class-properties": "7.3.4"
+    "webpack-dev-server": "3.1.11"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

package.json

@@ -4,7 +4,7 @@ import { colors } from '../../theme'
 export const wrapper = css({
   position: 'relative',
   display: 'flex',
-  paddingTop: '0.5rem',
+  marginTop: '0.5rem',
   backgroundColor: colors.dark,
   height: 50,
   justifyContent: 'center',
@@ -17,7 +17,10 @@ export const app = css({
   border: 0,
   width: '100%',
   cursor: 'pointer',
-  backgroundColor: colors.white,
+  backgroundColor: colors.dark,
+  borderRadiusTopRight: 3,
+  borderRadiusBottomRight: 3,
+  boxShadow: '5px 5px 20px 5px rgba(0,0,0,0.10)',
   display: 'flex',
   alignItems: 'center',
   color: colors.black,
@@ -26,7 +29,8 @@ export const app = css({
 })
 
 export const appSelected = css({
-  backgroundColor: colors.white2,
+  fontWeight: 'bold',
+  color: colors.white,
 })
 
 export const currentApp = (color: string) =>
@@ -55,9 +59,9 @@ export const overlay = css({
 
 export const appsList = css({
   position: 'absolute',
-  left: 'calc(100% + 1px)',
+  left: '100%',
   top: 0,
-  backgroundColor: colors.white,
+  color: colors.white,
   borderRight: `1px solid ${colors.dark2}`,
   borderBottom: `1px solid ${colors.dark2}`,
 })

packages/node_modules/overmind-devtools/src/components/Apps/styles.ts

@@ -71,7 +71,8 @@ const Devtools: FunctionComponent = () => {
           <h1>Waiting for an app to connect...</h1>
           <h2>or</h2>
           <input
-            disabled={state.runtimeLoading}
+            autoFocus
+            disabled={state.runtimeHost && state.runtimeLoading}
             className={styles.input}
             defaultValue={
               state.runtimeHost ? state.runtimeHost.split('?')[0] : ''

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

@@ -0,0 +1,52 @@
+import { createElement, FunctionComponent, Fragment, useState } from 'react'
+import { useOvermind } from 'overmind-devtools/src/overmind'
+import * as styles from './styles'
+import { colors } from 'overmind-devtools/src/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>
+  )
+}
+
+export default RuntimeConfig

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

@@ -0,0 +1,48 @@
+import { css } from 'emotion'
+import { colors } from 'overmind-devtools/src/theme'
+
+export const wrapper = css({
+  position: 'absolute',
+  left: '100%',
+  height: '100%',
+  zIndex: 999999,
+  top: 0,
+})
+
+export const overlay = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: '100vh',
+})
+
+export const contentWrapper = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  height: '100%',
+  padding: '0.5rem',
+  boxSizing: 'border-box',
+  display: 'flex',
+  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/src/components/RuntimeConfig/styles.ts

@@ -15,11 +15,13 @@ import {
   FaChrome,
 } from 'react-icons/fa'
 import { colors } from 'overmind-devtools/src/theme'
+import RuntimeConfig from 'overmind-devtools/src/components/RuntimeConfig'
 
 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
 
@@ -30,27 +32,32 @@ const Tabs: FunctionComponent = () => {
     <div className={styles.wrapper}>
       <Apps />
       <div className={styles.divider} />
-      <Tooltip text="Runtime">
-        <button className={css(styles.button, styles.activeButton)}>
+      <div className={styles.runtimeWrapper}>
+        <button
+          className={css(
+            styles.button,
+            Boolean(state.runtimeHost) && styles.activeButton
+          )}
+          onClick={() => actions.toggleRuntimeConfig()}
+        >
           <FaChrome
             style={{
               color: getRuntimeColor(),
             }}
           />
         </button>
-      </Tooltip>
+        {state.isShowingRuntimeConfig ? <RuntimeConfig /> : null}
+      </div>
       <div className={styles.divider} />
-      <Tooltip text="State">
-        <button
-          className={css(
-            styles.button,
-            state.currentTab === Tab.State && styles.activeButton
-          )}
-          onClick={() => actions.changeTab(Tab.State)}
-        >
-          <FaDatabase />
-        </button>
-      </Tooltip>
+      <button
+        className={css(
+          styles.button,
+          state.currentTab === Tab.State && styles.activeButton
+        )}
+        onClick={() => actions.changeTab(Tab.State)}
+      >
+        <FaDatabase />
+      </button>
       <Tooltip text="Actions">
         <button
           className={css(

packages/node_modules/overmind-devtools/src/components/Tabs/index.tsx

@@ -1,10 +1,14 @@
 import { css } from 'emotion'
 import { colors } from '../../theme'
 
+export const runtimeWrapper = css({
+  position: 'relative',
+})
 export const wrapper = css({
   backgroundColor: colors.dark,
   width: 50,
   borderRight: `1px solid ${colors.dark3}`,
+  boxShadow: '5px 0px 20px 5px rgba(0,0,0,0.10)',
 })
 
 export const button = css({

packages/node_modules/overmind-devtools/src/components/Tabs/styles.ts

@@ -10,22 +10,6 @@ import {
 import * as o from './operators'
 import { isValidJson } from './utils'
 
-export const onInitialize: OnInitialize = async ({ state, effects }, app) => {
-  const port = await effects.storage.get<string>('currentPort')
-  const runtimeHost = await effects.storage.get<string>('runtimeHost')
-
-  if (port) {
-    state.port = port
-  }
-
-  if (runtimeHost) {
-    state.runtimeHost = runtimeHost
-  }
-
-  effects.connector.onMessage(app.actions.onMessage)
-  effects.connector.connect(state.port)
-}
-
 export const onMessage: Operator<Message> = pipe(
   o.isPortExistsMessage({
     true: o.setPortExists(),
@@ -58,11 +42,13 @@ export const onMessage: Operator<Message> = pipe(
   })
 )
 
-export const setError: Action<string> = ({ state }, error) =>
-  (state.error = error)
+export const setError: Action<string> = ({ state }, error) => {
+  state.error = error
+}
 
-export const changeNewPortValue: Action<string> = ({ state }, port) =>
-  (state.newPortValue = String(Number(port)))
+export const changeNewPortValue: Action<string> = ({ state }, port) => {
+  state.newPortValue = String(Number(port))
+}
 
 export const addConnection: Action = ({ state, effects }) => {
   state.error = null
@@ -122,11 +108,13 @@ export const selectApp: Action<string> = ({ state }, appName) => {
   state.showApps = false
 }
 
-export const toggleShowApps: Action = ({ state }) =>
-  (state.showApps = !state.showApps)
+export const toggleShowApps: Action = ({ state }) => {
+  state.showApps = !state.showApps
+}
 
-export const toggleCollapsedComponent: Action<Component> = (_, component) =>
-  (component.isCollapsed = !component.isCollapsed)
+export const toggleCollapsedComponent: Action<Component> = (_, component) => {
+  component.isCollapsed = !component.isCollapsed
+}
 
 export const toggleQueryingAction: Action = ({ state }) => {
   state.currentApp.isQueryingAction = !state.currentApp.isQueryingAction
@@ -207,10 +195,14 @@ export const submitState: Action<string> = ({ state, effects }, newState) => {
 }
 
 export const setRuntimeHost: Action<string> = ({ state, effects }, host) => {
+  if (!host.startsWith('http://') && !host.startsWith('https://')) {
+    host = 'http://' + host
+  }
+
   const uniqueHost = `${host}?overmind_runtime=${Date.now()}`
 
   state.runtimeHost = uniqueHost
-
+  state.isShowingRuntimeConfig = false
   effects.storage.set('runtimeHost', uniqueHost)
 }
 
@@ -231,3 +223,13 @@ export const runtimeError: Action<string> = ({ state }, message) => {
   state.runtimeLoading = false
   state.runtimeConnected = false
 }
+
+export const toggleRuntimeConfig: Action = ({ state }) => {
+  state.isShowingRuntimeConfig = !state.isShowingRuntimeConfig
+}
+
+export const disconnectRuntime: Action = ({ state, effects }) => {
+  state.runtimeHost = ''
+  state.isShowingRuntimeConfig = false
+  effects.storage.set('runtimeHost', '')
+}

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

@@ -4,9 +4,10 @@ import { createHook } from 'overmind-react'
 import * as actions from './actions'
 import * as effects from './effects'
 import state from './state'
+import onInitialize from './onInitialize'
 
 const config = {
-  onInitialize: actions.onInitialize,
+  onInitialize,
   effects,
   actions,
   state,