feat(overmind-devtools-client): allow changing port

christianalfoni · christianalfoni · commit 8310e47686fd · 2019-08-21T19:45:45.000+02:00
diff --git a/packages/node_modules/overmind-devtools-client/DevtoolBackend.js b/packages/node_modules/overmind-devtools-client/DevtoolBackend.js
@@ -11,6 +11,10 @@ class DevtoolBackend {
     this.onDevtoolMessage = this.onDevtoolMessage.bind(this)
   }
   connect(port) {
+    if (this.devtoolServer) {
+      this.devtoolServer.close()
+    }
+
     return new Promise((resolve, reject) => {
       this.devtoolServer = new WebSocket.Server({
         port,
@@ -211,7 +215,7 @@ class DevtoolBackend {
     </html>
     `
   }
-  getMarkup(scriptSource, port) {
+  getMarkup(scriptSource, port, onPortSubmit, onRestart) {
     return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -230,6 +234,18 @@ class DevtoolBackend {
       <script type="text/javascript">
         window['__OVERMIND_DEVTOOLS_BACKEND_PORT__'] = "${port}";
       </script>
+      <script type="text/javascript">
+        ${onPortSubmit.toString()}
+
+        ${onRestart.toString()}
+
+        function handleFormSubmit(event) {
+          event.preventDefault()
+          var input = document.querySelector('#port-input')
+          input.setAttribute('disabled', true)
+          ${onPortSubmit.name}(input.value)
+        }
+      </script>
     </head>
     <body>
       <script type="text/javascript" src="${scriptSource}"></script>
diff --git a/packages/node_modules/overmind-devtools-client/index.html b/packages/node_modules/overmind-devtools-client/index.html
@@ -13,6 +13,46 @@
       href="https://fonts.googleapis.com/css?family=Nunito:400,700"
       rel="stylesheet"
     />
+    <script>
+      /*
+        THIS CODE IS COPIED FOR DEVELOPMENT PURPOSES, A BIT RISKY, BUT HAVE NO OTHER SOLUTION
+      */
+      const vscode =
+        window.vscode || (window.acquireVsCodeApi && window.acquireVsCodeApi())
+
+      function onPortSubmit(newPort) {
+        if (vscode) {
+          vscode.postMessage({
+            command: 'newPort',
+            text: newPort,
+          })
+        } else {
+          const { ipcRenderer } = require('electron')
+
+          ipcRenderer.send('newPort', newPort)
+        }
+      }
+
+      function onRestart() {
+        if (vscode) {
+          vscode.postMessage({
+            command: 'restart',
+          })
+        } else {
+          const { ipcRenderer } = require('electron')
+
+          ipcRenderer.send('restart')
+        }
+      }
+
+      function handleFormSubmit(event) {
+        event.preventDefault()
+        var input = document.querySelector('#port-input')
+        input.setAttribute('disabled', true)
+        console.log(input)
+        onPortSubmit(input.value)
+      }
+    </script>
   </head>
   <body></body>
 </html>
diff --git a/packages/node_modules/overmind-devtools-client/src/components/Devtools/index.tsx b/packages/node_modules/overmind-devtools-client/src/components/Devtools/index.tsx
@@ -58,6 +58,18 @@ const Devtools: FunctionComponent = () => {
           </Fragment>
         )}
       </pre>
+      <h3>Change port</h3>
+      <input
+        id="port-input"
+        className={styles.newPort}
+        placeholder="Port..."
+        onKeyDown={(event) => {
+          if (event.keyCode === 13) {
+            // @ts-ignore
+            handleFormSubmit(event)
+          }
+        }}
+      />
     </div>
   ) : (
     <Workspace />
diff --git a/packages/node_modules/overmind-devtools-client/src/components/Devtools/styles.ts b/packages/node_modules/overmind-devtools-client/src/components/Devtools/styles.ts
@@ -31,3 +31,12 @@ export const code = css({
   padding: '10px',
   background: colors.foreground,
 })
+
+export const newPort = css({
+  border: 0,
+  padding: '1rem',
+  borderRadius: 3,
+  outline: 'none',
+  fontSize: 18,
+  width: 75,
+})
diff --git a/packages/node_modules/overmind-devtools-client/src/overmind/effects.ts b/packages/node_modules/overmind-devtools-client/src/overmind/effects.ts
@@ -7,7 +7,7 @@ export const utils = {
     return window.confirm(text)
   },
   getPort() {
-    return Number(window['__OVERMIND_DEVTOOLS_BACKEND_PORT__'] || 3032)
+    return Number(window['__OVERMIND_DEVTOOLS_BACKEND_PORT__'] || 3031)
   },
 }
 
diff --git a/packages/node_modules/overmind-devtools-vscode/src/extension.ts b/packages/node_modules/overmind-devtools-vscode/src/extension.ts
@@ -5,6 +5,27 @@ import * as path from 'path'
 
 const DevtoolBackend = require('overmind-devtools-client/DevtoolBackend')
 
+function onNewPortSubmit(newPort: string) {
+  // @ts-ignore
+  const vscode = (window.vscode =
+    // @ts-ignore
+    window.vscode || acquireVsCodeApi())
+  vscode.postMessage({
+    command: 'newPort',
+    text: newPort,
+  })
+}
+
+function onRestart() {
+  // @ts-ignore
+  const vscode = (window.vscode =
+    // @ts-ignore
+    window.vscode || acquireVsCodeApi())
+  vscode.postMessage({
+    command: 'restart',
+  })
+}
+
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
@@ -79,9 +100,11 @@ export function activate(context: vscode.ExtensionContext) {
         }
 
         devtoolsPanel.show(
-          devtoolBackend.getMarkup(scriptFile, port).replace(
-            '</head>',
-            `
+          devtoolBackend
+            .getMarkup(scriptFile, port, onNewPortSubmit, onRestart)
+            .replace(
+              '</head>',
+              `
 <style>
   :root {
     --colors-background: var(--vscode-editor-background) !important;
@@ -93,34 +116,13 @@ export function activate(context: vscode.ExtensionContext) {
 </style>
 </head>        
 `
-          ),
+            ),
           panel
         )
       })
       .catch(() => {
         devtoolsPanel.show(
-          devtoolBackend.getChangePortMarkup(
-            port,
-            function onNewPortSubmit(newPort: string) {
-              // @ts-ignore
-              const vscode = (window.vscode =
-                // @ts-ignore
-                window.vscode || acquireVsCodeApi())
-              vscode.postMessage({
-                command: 'newPort',
-                text: newPort,
-              })
-            },
-            function onRestart() {
-              // @ts-ignore
-              const vscode = (window.vscode =
-                // @ts-ignore
-                window.vscode || acquireVsCodeApi())
-              vscode.postMessage({
-                command: 'restart',
-              })
-            }
-          ),
+          devtoolBackend.getChangePortMarkup(port, onNewPortSubmit, onRestart),
           panel
         )
       })
diff --git a/packages/node_modules/overmind-devtools/src/main.js b/packages/node_modules/overmind-devtools/src/main.js
@@ -25,11 +25,25 @@ function createWindow() {
     storage,
   })
 
+  function onPortSubmit(newPort) {
+    const { ipcRenderer } = require('electron')
+
+    ipcRenderer.send('newPort', newPort)
+  }
+
+  function onRestart() {
+    const { ipcRenderer } = require('electron')
+
+    ipcRenderer.send('restart')
+  }
+
   function openDevtools(port) {
     if (process.env.NODE_ENV === 'production') {
       mainWindow.loadURL(
         'data:text/html;charset=UTF-8,' +
-          encodeURIComponent(devtoolBackend.getMarkup('bundle.js', port)),
+          encodeURIComponent(
+            devtoolBackend.getMarkup('bundle.js', port, onPortSubmit, onRestart)
+          ),
         {
           baseURLForDataURL: `file://${path.join(
             __dirname,
@@ -57,16 +71,8 @@ function createWindow() {
                 encodeURIComponent(
                   devtoolBackend.getChangePortMarkup(
                     port,
-                    function onPortSubmit(newPort) {
-                      const { ipcRenderer } = require('electron')
-
-                      ipcRenderer.send('newPort', newPort)
-                    },
-                    function onRestart() {
-                      const { ipcRenderer } = require('electron')
-
-                      ipcRenderer.send('restart')
-                    }
+                    onPortSubmit,
+                    onRestart
                   )
                 ),
               {

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export const utils = {`
`7`	`7`	`return window.confirm(text)`
`8`	`8`	`},`
`9`	`9`	`getPort() {`
`10`		`- return Number(window['__OVERMIND_DEVTOOLS_BACKEND_PORT__'] \|\| 3032)`
	`10`	`+ return Number(window['__OVERMIND_DEVTOOLS_BACKEND_PORT__'] \|\| 3031)`
`11`	`11`	`},`
`12`	`12`	`}`
`13`	`13`