feat(overmind-devtools): show webpack loader and automatic refresh in dev mode

christianalfoni · christianalfoni · commit 8284dae98cd1 · 2018-07-31T16:44:18.000+02:00
diff --git a/packages/node_modules/overmind-devtools/backend/dev.html b/packages/node_modules/overmind-devtools/backend/dev.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+      height: 100%;
+    }
+
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 30px;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="loading">
+    <h1>Waiting for webpack to load up...</h1>
+  </div>
+  <script>
+    async function checkDev() {
+      try {
+        const response = await fetch('http://localhost:3000')
+
+        if (response.status >= 200 && response.status < 300) {
+          location.href = 'http://localhost:3000'
+        } else {
+          setTimeout(checkDev, 250)
+        }
+      } catch (_) {
+        setTimeout(checkDev, 250)
+      }
+    }
+
+    setTimeout(checkDev, 1000)
+  </script>
+</body>
+
+</html>
diff --git a/packages/node_modules/overmind-devtools/backend/main.js b/packages/node_modules/overmind-devtools/backend/main.js
@@ -22,8 +22,8 @@ function createWindow() {
   if (process.env.NODE_ENV === 'production') {
     mainWindow.loadFile(path.join(__dirname, '..', 'dist', 'index.html'))
   } else {
-    mainWindow.loadURL('http://localhost:3000')
     mainWindow.webContents.openDevTools()
+    mainWindow.loadFile(path.join(__dirname, 'dev.html'))
   }
 
   electron.Menu.setApplicationMenu(
diff --git a/packages/node_modules/overmind-devtools/package.json b/packages/node_modules/overmind-devtools/package.json
@@ -27,7 +27,7 @@
 		"color-hash": "^1.0.3",
 		"electron": "^2.0.4",
 		"electron-json-storage": "^4.1.0",
-		"overmind": "next",
+		"react-overmind": "next",
 		"react": "^16.4.1",
 		"react-dom": "^16.4.1",
 		"styled-components": "^3.3.3",
diff --git a/packages/node_modules/overmind-devtools/src/app/index.ts b/packages/node_modules/overmind-devtools/src/app/index.ts
@@ -1,4 +1,4 @@
-import App, { TConnect, TEffects, TAction } from 'overmind/react'
+import App, { TConnect, TEffects, TAction } from 'react-overmind'
 import * as effects from './effects'
 import actions from './actions'
 import state from './state'
diff --git a/packages/node_modules/overmind-devtools/src/app/mutations.ts b/packages/node_modules/overmind-devtools/src/app/mutations.ts
@@ -281,7 +281,7 @@ export function performMutationsByMessageType(state: State, message: Message) {
           isRunning: true,
           isCollapsed: true,
           mutations: [],
-          providers: [],
+          effects: [],
         }
         break
       }
@@ -312,13 +312,13 @@ export function performMutationsByMessageType(state: State, message: Message) {
         operator.mutations = mutations.mutations
         break
       }
-      case 'provider': {
-        const provider = clientMessage.data
-        const id = getActionId(provider)
+      case 'effect': {
+        const effect = clientMessage.data
+        const id = getActionId(effect)
         const operator =
-          state.apps[message.port].actions[id].operators[provider.operatorId]
+          state.apps[message.port].actions[id].operators[effect.operatorId]
 
-        operator.providers.push(provider)
+        operator.effects.push(effect)
         break
       }
     }
diff --git a/packages/node_modules/overmind-devtools/src/app/state.ts b/packages/node_modules/overmind-devtools/src/app/state.ts
@@ -7,7 +7,7 @@ export type Mutation = {
   path: string
 }
 
-export type Provider = {
+export type Effect = {
   args: any[]
   method: string
   name: string
@@ -44,7 +44,7 @@ export type Operator = {
   isCollapsed: boolean
   operatorId: number
   mutations: Mutation[]
-  providers: Provider[]
+  effects: Effect[]
   path: string[]
   type: string
   result: any
diff --git a/packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx b/packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx
@@ -32,7 +32,7 @@ const ActionOperator: React.SFC<Props> = ({ operator, value, app }) => (
       <Operator
         borderColor={operator.type === 'mutation' ? 'primary' : 'secondary'}
         onClick={
-          operator.mutations.length || operator.providers.length
+          operator.mutations.length || operator.effects.length
             ? () => app.actions.toggleCollapsed(operator)
             : null
         }
@@ -48,7 +48,7 @@ const ActionOperator: React.SFC<Props> = ({ operator, value, app }) => (
           <Text variant="text" dense>
             {operator.name}
           </Text>
-          {operator.mutations.length || operator.providers.length ? (
+          {operator.mutations.length || operator.effects.length ? (
             <Text variant="hint">
               {operator.isCollapsed ? (
                 <Icon>chevron-up</Icon>
@@ -60,21 +60,19 @@ const ActionOperator: React.SFC<Props> = ({ operator, value, app }) => (
         </OperatorHeader>
         {operator.isCollapsed ? null : (
           <div onClick={(event) => event.stopPropagation()}>
-            {operator.providers.map((provider, index) => (
+            {operator.effects.map((effect, index) => (
               <OperatorItem key={index}>
                 <Text variant="description" color="secondary" mono>
-                  {provider.name + '.' + provider.method}
+                  {effect.name + '.' + effect.method}
                 </Text>
                 <ValueInspector
                   small
-                  value={
-                    provider.args.length > 1 ? provider.args : provider.args[0]
-                  }
+                  value={effect.args.length > 1 ? effect.args : effect.args[0]}
                 />
                 <Text variant="description" mono>
                   =>
                 </Text>
-                <ValueInspector small value={provider.result} />
+                <ValueInspector small value={effect.result} />
               </OperatorItem>
             ))}
             {operator.mutations.map((mutation, index) => (

Original file line number	Diff line number	Diff line change
`@@ -22,8 +22,8 @@ function createWindow() {`
`22`	`22`	`if (process.env.NODE_ENV === 'production') {`
`23`	`23`	`mainWindow.loadFile(path.join(__dirname, '..', 'dist', 'index.html'))`
`24`	`24`	`} else {`
`25`		`- mainWindow.loadURL('http://localhost:3000')`
`26`	`25`	`mainWindow.webContents.openDevTools()`
	`26`	`+ mainWindow.loadFile(path.join(__dirname, 'dev.html'))`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`electron.Menu.setApplicationMenu(`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import App, { TConnect, TEffects, TAction } from 'overmind/react'`
	`1`	`+import App, { TConnect, TEffects, TAction } from 'react-overmind'`
`2`	`2`	`import * as effects from './effects'`
`3`	`3`	`import actions from './actions'`
`4`	`4`	`import state from './state'`
Original file line number	Diff line number	Diff line change
`@@ -281,7 +281,7 @@ export function performMutationsByMessageType(state: State, message: Message) {`
`281`	`281`	`isRunning: true,`
`282`	`282`	`isCollapsed: true,`
`283`	`283`	`mutations: [],`
`284`		`- providers: [],`
	`284`	`+ effects: [],`
`285`	`285`	`}`
`286`	`286`	`break`
`287`	`287`	`}`
`@@ -312,13 +312,13 @@ export function performMutationsByMessageType(state: State, message: Message) {`
`312`	`312`	`operator.mutations = mutations.mutations`
`313`	`313`	`break`
`314`	`314`	`}`
`315`		`- case 'provider': {`
`316`		`- const provider = clientMessage.data`
`317`		`- const id = getActionId(provider)`
	`315`	`+ case 'effect': {`
	`316`	`+ const effect = clientMessage.data`
	`317`	`+ const id = getActionId(effect)`
`318`	`318`	`const operator =`
`319`		`- state.apps[message.port].actions[id].operators[provider.operatorId]`
	`319`	`+ state.apps[message.port].actions[id].operators[effect.operatorId]`
`320`	`320`
`321`		`- operator.providers.push(provider)`
	`321`	`+ operator.effects.push(effect)`
`322`	`322`	`break`
`323`	`323`	`}`
`324`	`324`	`}`