feat(overmind-components): refactor devtools client and fix issues

Author: christianalfoni

package-lock.json

@@ -27,10 +27,11 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
+    "@fortawesome/fontawesome-free": "5.11.2",
     "axios": "0.19.0",
     "color": "3.0.0",
     "color-hash": "1.0.3",
-    "electron": "2.0.8",
+    "electron": "7.0.1",
     "electron-json-storage": "4.1.0",
     "electron-prompt": "1.3.1",
     "emotion": "9.2.12",
@@ -50,15 +51,15 @@
     "react-dom": "16.9.0",
     "react-hot-loader": "^4.3.4",
     "react-icons": "^3.5.0",
+    "react-split-pane": "0.1.87",
+    "snabbdom": "0.7.3",
     "styled-components": "3.3.3",
     "tslib": "1.10.0",
     "vscode": "^1.1.36",
     "vue": "2.6.10",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "7.0.0",
-    "react-split-pane": "0.1.87",
-    "snabbdom": "0.7.3"
+    "ws": "7.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",
@@ -104,6 +105,8 @@
     "repo-cooker": "^6.3.0",
     "rimraf": "2.6.2",
     "source-map-loader": "0.2.4",
+    "svg-snabbdom-loader": "^1.0.0",
+    "svg-url-loader": "3.0.2",
     "terser-webpack-plugin": "1.3.0",
     "ts-jest": "23.10.4",
     "ts-loader": "4.4.2",
@@ -117,7 +120,7 @@
     "vue-template-compiler": "2.6.10",
     "webpack": "4.35.0",
     "webpack-cli": "3.1.2",
-    "webpack-dev-server": "3.1.11",
+    "webpack-dev-server": "3.9.0",
     "webpack-merge": "4.2.1"
   },
   "lint-staged": {

package.json

@@ -36,7 +36,7 @@
     "snabbdom": "^0.7.3"
   },
   "devDependencies": {
-    "@types/node": "^10.12.21",
-    "tslib": "^1.9.3"
+    "@types/node": "^12.11.6",
+    "tslib": "^1.10.0"
   }
 }

packages/node_modules/overmind-components/package.json

@@ -37,20 +37,17 @@ function init(componentNode: VNode): void {
     const tree = (component.tree = getApp().proxyStateTree.getTrackStateTree())
 
     component.currentNode = componentNode
-
-    const update = (flushId?) => {
+    component.changeState = (newState) => {
+      component.state = newState
       patch(component.currentNode, {
         ...component.currentNode,
-        flushId: flushId,
+        forceUpdate: true,
       })
     }
 
     const createSelfNode = () => {
       const node = (component.fn as any)(component.props, {
-        changeState: (newState) => {
-          component.state = newState
-          update()
-        },
+        changeState: component.changeState,
         state: component.state,
         appState: tree.state,
         actions: getApp().actions,
@@ -67,7 +64,10 @@ function init(componentNode: VNode): void {
     }
     component.onFlush = (_, __, flushId) => {
       component.currentFlushId = flushId
-      update(flushId)
+      patch(component.currentNode, {
+        ...component.currentNode,
+        flushId: flushId,
+      })
     }
     tree.track(component.onFlush)
     const newNode = createSelfNode()
@@ -122,14 +122,14 @@ function prepatch(oldVnode: VNode, vnode: VNode): void {
 
   if (
     (vnode as any).flushId ||
+    (vnode as any).forceUpdate ||
     oldComponent.fn !== newComponent.fn ||
     oldPropsKeys.length !== propsKeys.length
   ) {
     oldComponent.tree.track(oldComponent.onFlush)
     const newNode = (newComponent.fn as any)(props, overmind)
     oldComponent.tree.stopTracking()
     copyToComponent(newNode, vnode, Object.assign(oldComponent, newComponent))
-
     return
   }
 
@@ -141,7 +141,6 @@ function prepatch(oldVnode: VNode, vnode: VNode): void {
       const newNode = (newComponent.fn as any)(props, overmind)
       oldComponent.tree.stopTracking()
       copyToComponent(newNode, vnode, Object.assign(oldComponent, newComponent))
-
       return
     }
   }

packages/node_modules/overmind-components/src/component.ts

@@ -6,7 +6,7 @@ import { patch, setApp } from './utils'
 export interface IComponent<
   Config extends IConfiguration,
   Props = {},
-  State = {}
+  State = undefined
 > {
   (
     props: Props,
@@ -21,15 +21,7 @@ export interface IComponent<
   ): any
 }
 
-export type Child<P = any> =
-  | {
-      [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K]
-        ? K
-        : never
-    }[keyof JSX.IntrinsicElements]
-  | IComponent<any, any, any>
-  | null
-  | string
+export type Child = React.ReactNode
 
 declare global {
   // @ts-ignore

packages/node_modules/overmind-components/src/index.ts

@@ -17,20 +17,22 @@
 		"devtool"
 	],
 	"dependencies": {
+		"@fortawesome/fontawesome-free": "^5.11.2",
 		"emotion": "^9.2.12",
 		"lodash.throttle": "^4.1.1",
+		"overmind-components": "next",
 		"overmind-react": "next",
 		"overmind-themes": "next",
 		"react": "16.9.0",
 		"react-dom": "16.9.0",
 		"react-split-pane": "^0.1.87",
-		"overmind-components": "next",
-		"ws": "^7.0.0"
+		"ws": "^7.2.0"
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-class-properties": "^7.3.4",
 		"@types/node": "^12.11.6",
 		"@types/ws": "6.0.1",
+		"svg-url-loader": "^3.0.2",
 		"terser-webpack-plugin": "^1.3.0",
 		"tslib": "^1.10.0",
 		"webpack-merge": "^4.2.1"

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

@@ -1,10 +1,10 @@
 import { css } from 'emotion'
 import { createElement } from 'overmind-components'
-
+import linkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg'
+import codeSvg from '@fortawesome/fontawesome-free/svgs/solid/code.svg'
 import { Component } from '../../overmind'
 import { Flush as FlushType } from '../../overmind/types'
 import * as textStyles from '../../styles/text'
-import * as actionStyles from '../Action/styles'
 import * as styles from './styles'
 
 type Props = {
@@ -14,23 +14,27 @@ type Props = {
 const ActionFlush: Component<Props> = ({ flush }, { appState }) => (
   <self className={styles.flush}>
     <div className={styles.flushHeader}>
-      <span>{flush.components.length} ?</span>
-      <span>{flush.derived.length} ?</span>
+      <span>
+        {flush.components.length} {codeSvg}
+      </span>
+      <span>
+        {flush.derived.length} {linkSvg}
+      </span>
     </div>
     {flush.components.length || flush.derived.length ? (
       <div className={styles.flushBody}>
         {flush.components.map((componentId) => (
           <div key={componentId}>
             <span className={css(textStyles.description, styles.flushItem)}>
-              <span className={styles.icon}>?</span>{' '}
+              <span className={styles.icon}>{codeSvg}</span>{' '}
               {appState.currentApp.components[componentId].name}
             </span>
           </div>
         ))}
         {flush.derived.map((derivedPath, index) => (
           <div key={derivedPath + '_' + index}>
             <span className={css(textStyles.description, styles.flushItem)}>
-              <span className={styles.icon}>?</span> {derivedPath}
+              <span className={styles.icon}>{linkSvg}</span> {derivedPath}
             </span>
           </div>
         ))}

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

@@ -32,6 +32,7 @@ export const flushHeader = css({
   },
   '> span svg': {
     marginLeft: 3,
+    width: 10,
   },
   '> span:last-child': {
     marginLeft: '0.5rem',
@@ -59,6 +60,10 @@ export const flushItem = css({
   '> :first-child': {
     marginRight: 3,
   },
+  svg: {
+    width: 10,
+    fill: colors.text,
+  },
 })
 
 export const icon = css({

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

@@ -27,7 +27,7 @@ const ActionPayload: Component = (_, { appState, actions, reaction }) => {
         placeholder={
           appState.currentApp.selectedActionQuery
             ? 'Add some JSON payload...'
-            : null
+            : ''
         }
         onKeyDown={(event) => {
           if (event.keyCode === 13) {

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

@@ -30,7 +30,7 @@ const ActionsTools: Component = (_, { appState, actions }) => (
               : colors.highlight,
         }}
       >
-        !
+        execute
       </div>
     </form>
   </self>