Remote devtools MVP: added middleware server with websockets communication and express serving file for client (backend)

michalsnik · michalsnik · commit 6ddea611ccd1 · 2018-01-22T19:31:04.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "cd shells/dev && webpack-dev-server --inline --hot --no-info",
     "dev:chrome": "cd shells/chrome && webpack --watch --hide-modules",
-    "dev:electron": "cd shells/electron && webpack --watch --hide-modules",
     "dev:safari": "cd shells/safari && webpack --watch --hide-modules",
     "lint": "eslint src --ext=js,vue && eslint shells/chrome/src && eslint shells/dev/src && eslint shells/safari/src",
     "build": "cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules",
diff --git a/shells/electron/app.html b/shells/electron/app.html
@@ -1,24 +1,26 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Vue Developer Tools</title>
-    <style>
-        body {
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            margin: 0;
-            padding: 0;
-        }
-    </style>
+  <meta charset="UTF-8">
+  <title>Vue Developer Tools</title>
+  <style>
+    body {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
 </head>
 <body>
-<div id="app"></div>
-<script src="build/devtools.js"></script>
+  <div id="app">
+    Loading...
+  </div>
+  <script src="build/devtools.js"></script>
 </body>
-</html>
+</html>
diff --git a/shells/electron/app.js b/shells/electron/app.js
@@ -1,12 +1,40 @@
+// Start middleware server
+require('./server')
+
 const { app, BrowserWindow } = require('electron')
+const path = require('path')
+const url = require('url')
 
 let mainWindow = null
 
-app.on('window-all-closed', () => app.quit())
-app.on('ready', () => {
-  mainWindow = new BrowserWindow({ width: 800, height: 600 })
+function createWindow () {
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    icon: path.join(__dirname, 'icons/128.png')
+  })
+
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'app.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
 
-  mainWindow.loadURL('file://' + __dirname + '/app.html')
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
 
-  mainWindow.on('closed', () => mainWindow = null)
-})
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
diff --git a/shells/electron/bin.js b/shells/electron/bin.js
@@ -3,7 +3,10 @@ const spawn = require('cross-spawn')
 
 const result = spawn.sync(
   electron,
-  [require.resolve('./app')],
+  [
+    require.resolve('./app')
+  ],
+  { stdio: 'ignore' }
 )
 
-process.exit(result.status)
+process.exit(result.status)
diff --git a/shells/electron/icons/128.png b/shells/electron/icons/128.png
diff --git a/shells/electron/package.json b/shells/electron/package.json
@@ -2,16 +2,26 @@
   "name": "vue-devtools",
   "version": "0.0.1",
   "description": "StandAlone vue-devtools",
+  "repository": {
+    "url": "https://github.com/vuejs/vue-devtools.git",
+    "type": "git"
+  },
   "bin": {
     "vue-devtools": "./bin.js"
   },
   "scripts": {
-    "start": "node bin.js"
+    "start": "node bin.js",
+    "dev": "webpack --watch --hide-modules"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "cross-spawn": "^5.1.0",
-    "electron": "^1.8.1"
+    "electron": "^1.8.1",
+    "express": "^4.16.2",
+    "socket.io": "^2.0.4"
+  },
+  "devDependencies": {
+    "webpack": "^3.10.0"
   }
 }
diff --git a/shells/electron/server.js b/shells/electron/server.js
@@ -0,0 +1,19 @@
+const app = require('express')()
+const http = require('http').Server(app)
+const io = require('socket.io')(http)
+const path = require('path')
+
+app.get('/', function (req, res) {
+  res.sendFile(path.join(__dirname, '/build/backend.js'))
+})
+
+// Middleman
+io.on('connection', function (socket) {
+  socket.on('vue-message', data => {
+    socket.broadcast.emit('vue-message', data)
+  })
+})
+
+http.listen(8098, () => {
+  console.log('listening on *:8098')
+})
diff --git a/shells/electron/src/backend.js b/shells/electron/src/backend.js
@@ -1,14 +1,24 @@
+import io from 'socket.io-client'
 import { initBackend } from 'src/backend'
+import { installHook } from 'src/backend/hook'
 import Bridge from 'src/bridge'
 
-const bridge = new Bridge({
-  listen (fn) {
-    window.addEventListener('message', evt => fn(evt.data))
-  },
-  send (data) {
-    console.log('backend -> devtools', data)
-    window.parent.postMessage(data, '*')
+(function () {
+  const socket = io('http://localhost:8098')
+
+  const bridge = new Bridge({
+    listen (fn) {
+      socket.on('vue-message', data => fn(data))
+    },
+    send (data) {
+      console.log('backend -> devtools', data)
+      socket.emit('vue-message', data)
+    }
+  })
+
+  if (!window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    installHook(window)
   }
-})
 
-initBackend(bridge)
+  initBackend(bridge)
+}())
diff --git a/shells/electron/src/devtools.js b/shells/electron/src/devtools.js
@@ -1,23 +1,25 @@
 import { initDevTools } from 'src/devtools'
 import Bridge from 'src/bridge'
+import io from 'socket.io-client'
 
-initDevTools({
-  connect(callback) {
-    console.log('connect has been called')
+const socket = io('http://localhost:8098')
 
+initDevTools({
+  connect (callback) {
     const wall = {
-      listen(fn) {
-        console.log('wall.listen has been called')
+      listen (fn) {
+        socket.on('vue-message', data => fn(data))
       },
-      send(data) {
-        console.log('wall.send has been called', data)
+      send (data) {
+        console.log('devtools -> backend', data)
+        socket.emit('vue-message', data)
       }
     }
     const bridge = new Bridge(wall)
 
     callback(bridge)
   },
-  onReload(fn) {
+  onReload (fn) {
     console.log('onReload has been called')
   }
-})
+})
