feat(shell-electron): add cli usage without electron

wangjunjia · wangjunjia · commit 403f3e42e1ed · 2023-06-18T18:50:04.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ TODOs.md
 .idea
 .web-extension-id
 yarn-error.log
+.yarn/*
 
 /packages/*/lib
 .amo.env.json
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/package.json b/package.json
@@ -80,4 +80,4 @@
   "engines": {
     "node": ">=8.10"
   }
-}
+}
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -34,4 +34,4 @@
     "@types/webpack-env": "^1.15.1",
     "typescript": "^4.5.2"
   }
-}
+}
diff --git a/packages/app-backend-api/package.json b/packages/app-backend-api/package.json
@@ -10,8 +10,8 @@
     "ts": "tsc -d -outDir lib"
   },
   "dependencies": {
-    "@vue/devtools-api": "^6.0.0-beta.1",
-    "@vue-devtools/shared-utils": "^0.0.0"
+    "@vue-devtools/shared-utils": "^0.0.0",
+    "@vue/devtools-api": "^6.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^13.9.1",
diff --git a/packages/app-backend-core/package.json b/packages/app-backend-core/package.json
@@ -10,12 +10,12 @@
     "ts": "tsc -d -outDir lib"
   },
   "dependencies": {
-    "@vue/devtools-api": "^6.0.0-beta.1",
     "@vue-devtools/app-backend-api": "^0.0.0",
     "@vue-devtools/app-backend-vue1": "^0.0.0",
     "@vue-devtools/app-backend-vue2": "^0.0.0",
     "@vue-devtools/app-backend-vue3": "^0.0.0",
     "@vue-devtools/shared-utils": "^0.0.0",
+    "@vue/devtools-api": "^6.0.0-beta.1",
     "lodash": "^4.17.21",
     "speakingurl": "^14.0.1"
   },
diff --git a/packages/app-backend-vue3/package.json b/packages/app-backend-vue3/package.json
@@ -10,9 +10,9 @@
     "ts": "tsc -d -outDir lib"
   },
   "dependencies": {
-    "@vue/devtools-api": "^6.0.0-beta.1",
     "@vue-devtools/app-backend-api": "^0.0.0",
-    "@vue-devtools/shared-utils": "^0.0.0"
+    "@vue-devtools/shared-utils": "^0.0.0",
+    "@vue/devtools-api": "^6.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^13.9.1",
diff --git a/packages/build-tools/package.json b/packages/build-tools/package.json
@@ -16,9 +16,9 @@
     "monaco-editor-webpack-plugin": "^3.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^5.2.0",
+    "style-resources-loader": "^1.2.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^5.0.0",
-    "style-resources-loader": "^1.2.1",
     "terser-webpack-plugin": "^5.1.1",
     "vue-loader": "^15.7.1",
     "vue-template-compiler": "^2.7.10",
diff --git a/packages/docs/src/guide/installation.md b/packages/docs/src/guide/installation.md
@@ -127,7 +127,7 @@ npm install --save-dev @vue/devtools
 
 Once you installed the package globally, run:
 ```bash
-vue-devtools
+vue-devtools # or use vue-devtools-cli without electron
 ```
 
 Then add this code to the `<head>` section of your application HTML file:
diff --git a/packages/shell-electron/README.md b/packages/shell-electron/README.md
@@ -20,7 +20,7 @@ npm install --save-dev @vue/devtools
 
 Once you installed the package globally, run:
 ```bash
-vue-devtools
+vue-devtools # or use vue-devtools-cli without electron
 ```
 
 Then add:
diff --git a/packages/shell-electron/app.html b/packages/shell-electron/app.html
@@ -2,7 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="expires" content="Fri, 18 Jue 2023 17:00:00 GMT" />
   <title>Vue Developer Tools</title>
+  <script src="/local_ip"></script>
   <style>
     #app,
     #intro {
@@ -41,7 +45,7 @@
     }
 
     #intro .content {
-      width: 395px;
+      width: 500px;
       font-size: 18px;
       line-height: 45px;
       text-align: center;
@@ -64,9 +68,18 @@
       margin-left: 10px;
       border: 1px solid #cacaca;
       border-radius: 2px;
-      text-align: center;
       font-size: 14px;
     }
+
+    #intro textarea {
+      flex: 1;
+      padding: 0 10px;
+      margin-left: 10px;
+      border: 1px solid #cacaca;
+      border-radius: 2px;
+      font-size: 14px;
+      width: 100%;
+    }
   </style>
 </head>
 <body>
@@ -82,23 +95,27 @@ <h2 class="title">
       </div>
       <div class="content-row">
         <label for="script-byip">Or</label>
-        <input type="text" id="script-byip">
+        <textarea id="script-byip" rows="5" ></textarea>
       </div>
       to the top of the page you want to debug.
     </div>
   </div>
   <div id="app">
   </div>
   <script>
-    const port = process.env.PORT || 8098
-    const localIp = require('ip').address();
+    const port = process.env.PORT
+    const localIp = process.env.HOST
     const $ = document.querySelector.bind(document)
 
     const $localhost = $('#script-localhost')
     const $byIp = $('#script-byip')
 
     $localhost.value = '<' + 'script src="http://localhost:' + port + '"><' + '/script>'
-    $byIp.value = '<' + 'script src="http://' + localIp + ':' + port + '"><' + '/script>'
+    $byIp.innerHTML = `&lt;script&gt;
+    window.__VUE_DEVTOOLS_HOST__ = 'http://${localIp}'
+    window.__VUE_DEVTOOLS_PORT__ = ${port}
+&lt;/script&gt;
+&lt;script src="http://${localIp}:${port}" &gt;&lt;/script&gt;`
 
     function selectAll () {
       this.selectionStart = 0
diff --git a/packages/shell-electron/app.js b/packages/shell-electron/app.js
@@ -3,7 +3,6 @@ require('./server')
 
 const { app, BrowserWindow } = require('electron')
 const path = require('path')
-const url = require('url')
 
 let mainWindow = null
 
@@ -18,11 +17,7 @@ function createWindow () {
     },
   })
 
-  mainWindow.loadURL(url.format({
-    pathname: path.join(__dirname, 'app.html'),
-    protocol: 'file:',
-    slashes: true,
-  }))
+  mainWindow.loadURL(`http://localhost:${process.env.PORT || 8098}/app.html`)
 
   mainWindow.on('closed', () => {
     mainWindow = null
diff --git a/packages/shell-electron/cli.js b/packages/shell-electron/cli.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('./server.js')
diff --git a/packages/shell-electron/package.json b/packages/shell-electron/package.json
@@ -8,13 +8,15 @@
     "directory": "packages/shell-electron"
   },
   "bin": {
-    "vue-devtools": "./bin.js"
+    "vue-devtools": "./bin.js",
+    "vue-devtools-cli": "./cli.js"
   },
   "main": "index.js",
   "types": "types/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "start": "node bin.js",
+    "dev": "node cli.js",
     "dev:client": "webpack --watch",
     "dev:node": "webpack --watch --config webpack.node.config.js",
     "build": "npm run build:client && npm run build:node",
@@ -56,4 +58,4 @@
     "README.md",
     "server.js"
   ]
-}
+}
diff --git a/packages/shell-electron/server.js b/packages/shell-electron/server.js
@@ -1,10 +1,12 @@
 const path = require('path')
 const fs = require('fs')
-const app = require('express')()
+const express = require('express')
+const app = express()
 const { createServer } = require('http')
 const { Server } = require('socket.io')
 
 const port = process.env.PORT || 8098
+const localIp = require('ip').address()
 
 const httpServer = createServer(app)
 const io = new Server(httpServer, {
@@ -13,6 +15,16 @@ const io = new Server(httpServer, {
   },
 })
 
+app.use(express.static(path.join(__dirname, './')))
+app.get('/local_ip', function (req, res) {
+  res.header('Content-Type', 'application/javascript')
+  res.send(`window.process = {
+    env: {
+      PORT: ${port},
+      HOST: '${localIp}'
+    }
+  }`)
+})
 app.get('/', function (req, res) {
   const hookContent = fs.readFileSync(path.join(__dirname, '/build/hook.js'), 'utf8')
   const backendContent = fs.readFileSync(path.join(__dirname, '/build/backend.js'), 'utf8')
@@ -41,5 +53,6 @@ io.on('connection', function (socket) {
 
 httpServer.listen(port, '0.0.0.0', () => {
   // eslint-disable-next-line no-console
-  console.log('listening on 0.0.0.0:' + port)
+  console.log(`listening on 0.0.0.0:${port}
+open this link http://${localIp}:${port}/app.html when you need remote vue-devtools.`)
 })
diff --git a/packages/shell-electron/src/devtools.js b/packages/shell-electron/src/devtools.js
@@ -3,7 +3,8 @@ import { initDevTools } from '@front'
 import { Bridge } from '@vue-devtools/shared-utils'
 
 const port = window.process.env.PORT || 8098
-const socket = io('http://localhost:' + port)
+const host = window.process.env.HOST || 'localhost'
+const socket = io(`http://${host}:${port}`)
 const $ = document.querySelector.bind(document)
 const $intro = $('#intro')
 
diff --git a/packages/shell-host/package.json b/packages/shell-host/package.json
@@ -6,10 +6,10 @@
     "dev": "cross-env TAILWIND_MODE=watch webpack serve"
   },
   "dependencies": {
-    "@vue/ui": "^0.12.5",
     "@vue-devtools/app-backend-core": "^0.0.0",
     "@vue-devtools/app-frontend": "^0.0.0",
     "@vue-devtools/shared-utils": "^0.0.0",
+    "@vue/ui": "^0.12.5",
     "vue": "^2.7.10"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -80,4 +80,4 @@`
`80`	`80`	`"engines": {`
`81`	`81`	`"node": ">=8.10"`
`82`	`82`	`}`
`83`		`-}`
	`83`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -34,4 +34,4 @@`
`34`	`34`	`"@types/webpack-env": "^1.15.1",`
`35`	`35`	`"typescript": "^4.5.2"`
`36`	`36`	`}`
`37`		`-}`
	`37`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+#!/usr/bin/env node`
	`2`	`+`
	`3`	`+require('./server.js')`