Create a minimal electron shell for vue-devtools.

rigor789 · michalsnik · commit bbc99999b39e · 2018-01-22T19:31:04.000+01:00
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "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
@@ -0,0 +1,24 @@
+<!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>
+</head>
+<body>
+<div id="app"></div>
+<script src="build/devtools.js"></script>
+</body>
+</html>
diff --git a/shells/electron/app.js b/shells/electron/app.js
@@ -0,0 +1,12 @@
+const { app, BrowserWindow } = require('electron')
+
+let mainWindow = null
+
+app.on('window-all-closed', () => app.quit())
+app.on('ready', () => {
+  mainWindow = new BrowserWindow({ width: 800, height: 600 })
+
+  mainWindow.loadURL('file://' + __dirname + '/app.html')
+
+  mainWindow.on('closed', () => mainWindow = null)
+})
diff --git a/shells/electron/bin.js b/shells/electron/bin.js
@@ -0,0 +1,9 @@
+const electron = require('electron')
+const spawn = require('cross-spawn')
+
+const result = spawn.sync(
+  electron,
+  [require.resolve('./app')],
+)
+
+process.exit(result.status)
diff --git a/shells/electron/package.json b/shells/electron/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "vue-devtools",
+  "version": "0.0.1",
+  "description": "StandAlone vue-devtools",
+  "bin": {
+    "vue-devtools": "./bin.js"
+  },
+  "scripts": {
+    "start": "node bin.js"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "cross-spawn": "^5.1.0",
+    "electron": "^1.8.1"
+  }
+}
diff --git a/shells/electron/src/backend.js b/shells/electron/src/backend.js
@@ -0,0 +1,14 @@
+import { initBackend } from 'src/backend'
+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, '*')
+  }
+})
+
+initBackend(bridge)
diff --git a/shells/electron/src/devtools.js b/shells/electron/src/devtools.js
@@ -0,0 +1,23 @@
+import { initDevTools } from 'src/devtools'
+import Bridge from 'src/bridge'
+
+initDevTools({
+  connect(callback) {
+    console.log('connect has been called')
+
+    const wall = {
+      listen(fn) {
+        console.log('wall.listen has been called')
+      },
+      send(data) {
+        console.log('wall.send has been called', data)
+      }
+    }
+    const bridge = new Bridge(wall)
+
+    callback(bridge)
+  },
+  onReload(fn) {
+    console.log('onReload has been called')
+  }
+})
diff --git a/shells/electron/webpack.config.js b/shells/electron/webpack.config.js
@@ -0,0 +1,54 @@
+var path = require('path')
+var webpack = require('webpack')
+var alias = require('../alias')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+var bubleOptions = {
+  target: { chrome: 52, firefox: 48 },
+  objectAssign: 'Object.assign'
+}
+
+module.exports = {
+  entry: {
+    devtools: './src/devtools.js',
+    backend: './src/backend.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    publicPath: '/build/',
+    filename: '[name].js',
+  },
+  resolve: {
+    alias
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader:  'buble-loader',
+        exclude: /node_modules|vue\/dist|vuex\/dist/,
+        options: bubleOptions
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false,
+          buble: bubleOptions
+        }
+      },
+      {
+        test: /\.(png|woff2)$/,
+        loader: 'url-loader?limit=0'
+      }
+    ]
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#cheap-module-source-map',
+  devServer: {
+    quiet: true
+  },
+  plugins: process.env.VUE_DEVTOOL_TEST ? [] :[new FriendlyErrorsPlugin()]
+}
