Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
403f3e4
feat(shell-electron): add cli usage without electron
wangjunjia Jun 18, 2023
7311077
fix(shell-electron): add cli.js with npm files
wangjunjia Jun 18, 2023
80d0464
feat(shell-electron): server.js log add new line
wangjunjia Jun 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@ TODOs.md
.idea
.web-extension-id
yarn-error.log
.yarn/*

/packages/*/lib
.amo.env.json
Expand Down
1 change: 1 addition & 0 deletions .yarnrc.yml
View file
Open in desktop
@@ -0,0 +1 @@
nodeLinker: node-modules
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -80,4 +80,4 @@
"engines": {
"node": ">=8.10"
}
}
}
2 changes: 1 addition & 1 deletion packages/api/package.json
View file
Open in desktop
Expand Up @@ -34,4 +34,4 @@
"@types/webpack-env": "^1.15.1",
"typescript": "^4.5.2"
}
}
}
4 changes: 2 additions & 2 deletions packages/app-backend-api/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/app-backend-core/package.json
View file
Open in desktop
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/app-backend-vue3/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/build-tools/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/guide/installation.md
View file
Open in desktop
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion packages/shell-electron/README.md
View file
Open in desktop
Expand Up @@ -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:
Expand Down
30 changes: 24 additions & 6 deletions packages/shell-electron/app.html
View file
Open in desktop
Expand Up @@ -2,7 +2,12 @@
<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>
<!-- get env port and local ip -->
<script src="/local_ip"></script>
<style>
#app,
#intro {
Expand Down Expand Up @@ -41,7 +46,7 @@
}

#intro .content {
width: 395px;
width: 500px;
font-size: 18px;
line-height: 45px;
text-align: center;
Expand All @@ -64,9 +69,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>
Expand All @@ -82,23 +96,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
Expand Down
7 changes: 1 addition & 6 deletions packages/shell-electron/app.js
View file
Open in desktop
Expand Up @@ -3,7 +3,6 @@ require('./server')

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

let mainWindow = null

Expand All @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/shell-electron/cli.js
View file
Open in desktop
@@ -0,0 +1,3 @@
#!/usr/bin/env node

require('./server.js')
7 changes: 5 additions & 2 deletions packages/shell-electron/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down Expand Up @@ -52,8 +54,9 @@
"app.html",
"app.js",
"bin.js",
"cli.js",
"index.js",
"README.md",
"server.js"
]
}
}
21 changes: 19 additions & 2 deletions packages/shell-electron/server.js
View file
Open in desktop
@@ -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, {
Expand All @@ -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')
Expand Down Expand Up @@ -41,5 +53,10 @@ 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(`

vue-devtools listening on 0.0.0.0:${port}
open this link http://${localIp}:${port}/app.html when you need remote vue-devtools.

`)
})
3 changes: 2 additions & 1 deletion packages/shell-electron/src/devtools.js
View file
Open in desktop
Expand Up @@ -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')

Expand Down
2 changes: 1 addition & 1 deletion packages/shell-host/package.json
View file
Open in desktop
Expand Up @@ -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": {
Expand Down