feat(electron): connection page

vuejs · Dec 18, 2023 · a1073a5 · a1073a5
1 parent ca8f8c0
commit a1073a5
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 43 deletions.
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
@@ -2,6 +2,8 @@ import { VIEW_MODE_STORAGE_KEY, isBrowser, isInChromePanel, target } from '@vue-
 
 import { initDevTools as _initDevTools } from './main'
 
+export { createConnectionApp } from './main'
+
 export function initDevTools(shell) {
  if (!isBrowser)
  return

diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
@@ -2,7 +2,7 @@ import '@unocss/reset/tailwind.css'
 import 'floating-vue/dist/style.css'
 
 import type { BridgeInstanceType } from '@vue-devtools-next/core'
-import { BROADCAST_CHANNEL_NAME, isInIframe } from '@vue-devtools-next/shared'
+import { BROADCAST_CHANNEL_NAME, isInChromePanel, isInElectron, isInIframe } from '@vue-devtools-next/shared'
 import { Bridge, BridgeEvents, HandShakeServer, createDevToolsVuePlugin, registerBridgeRpc } from '@vue-devtools-next/core'
 
 import type { App as AppType } from 'vue'
@@ -105,6 +105,12 @@ export async function initDevTools(shell, options: { viewMode?: 'overlay' | 'pan
  })
 }
 
+export function createConnectionApp(container: string = '#app') {
+ const app = createApp(WaitForConnection)
+ app.mount(container)
+ return app
+}
+
 window.addEventListener('message', (event) => {
  if (event.data === '__VUE_DEVTOOLS_CREATE_CLIENT__') {
  initDevTools({
@@ -133,7 +139,7 @@ window.addEventListener('message', (event) => {
 })
 
 // @TODO: refactor separate window channel
-if (!isInIframe) {
+if (!isInIframe && !isInChromePanel && !isInElectron) {
  function initSeparateWindowChannel() {
  const connectionInfo: {
  connected: boolean
@@ -147,12 +153,6 @@ if (!isInIframe) {
 
  const channel = new BroadcastChannel(BROADCAST_CHANNEL_NAME)
 
- function createConnectionApp() {
- const app = createApp(WaitForConnection)
- app.mount('#app')
- return app
- }
-
  function connect() {
  connectionInfo.timer = setInterval(() => {
  channel.postMessage({

diff --git a/packages/electron/app.html b/packages/electron/app.html
@@ -19,10 +19,7 @@
  </head>
  <body>
  <div id="container">
- <div id="app">
- <!-- @TODO: connection style and host/port input -->
- Waiting for connection...
- </div>
+ <div id="app"></div>
  </div>
  <script src="./dist/devtools.js"></script>
  </body>

diff --git a/packages/electron/src/devtools.ts b/packages/electron/src/devtools.ts
@@ -1,34 +1,49 @@
-import io from 'socket.io-client'
-import { initDevTools } from '../client/devtools-panel'
+import io from 'socket.io-client/dist/socket.io.js'
+import { createConnectionApp, initDevTools } from '../client/devtools-panel'
 import { Bridge } from '../../core/src/bridge'
 
 const port = window.process.env.PORT || 8098
-const socket = io(`http://localhost:${port}`)
-
-let reload: Function | null = null
-
-socket.on('vue-devtools:init', () => {
- // If new page is opened reload devtools
- if (reload)
- return reload()
-
- initDevTools({
- connect(cb) {
- const bridge = new Bridge({
- tracker(fn) {
- socket.on('vue-devtools:message', (data) => {
- fn(data)
- })
- },
- trigger(data) {
- socket.emit('vue-devtools:message', data)
- },
- })
-
- cb(bridge)
- },
- reload(fn) {
- reload = fn
- },
+
+function init() {
+ const socket = io(`http://localhost:${port}`)
+ let reload: Function | null = null
+ const app = createConnectionApp()
+
+ socket.on('vue-devtools:init', () => {
+ app.unmount()
+
+ // If new page is opened reload devtools
+ if (reload)
+ return reload()
+
+ console.log()
+ initDevTools({
+ connect(cb) {
+ const bridge = new Bridge({
+ tracker(fn) {
+ socket.on('vue-devtools:message', (data) => {
+ fn(data)
+ })
+ },
+ trigger(data) {
+ socket.emit('vue-devtools:message', data)
+ },
+ })
+
+ cb(bridge)
+ },
+ reload(fn) {
+ reload = fn
+ },
+ })
+ })
+
+ socket.on('vue-devtools:disconnect', () => {
+ app.unmount()
+ reload = null
+ socket.close()
+ init()
  })
-})
+}
+
+init()
diff --git a/packages/electron/src/server.ts b/packages/electron/src/server.ts
@@ -30,6 +30,10 @@ export function init() {
  socket.broadcast.emit('vue-devtools:init')
  })
 
+ socket.on('vue-devtools:disconnect', () => {
+ socket.broadcast.emit('vue-devtools:disconnect')
+ })
+
  socket.on('disconnect', (reason) => {
  if (reason.indexOf('client'))
  socket.broadcast.emit('vue-devtools-disconnect-devtools')

diff --git a/packages/electron/src/user-app.ts b/packages/electron/src/user-app.ts
@@ -4,6 +4,13 @@ import { Bridge } from '../../core/src/bridge'
 import { prepareInjection } from '../../core/src/injection'
 import { devtools } from '../../devtools-kit/src/index'
 
+if (!window.process) {
+// @ts-expect-error expected type
+ window.process = {
+ env: {},
+ }
+}
+
 const createSocket = io
 const host = target.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
 const port = target.__VUE_DEVTOOLS_PORT__ !== undefined ? target.__VUE_DEVTOOLS_PORT__ : 8098
@@ -41,4 +48,6 @@ socket.on('vue-devtools:disconnect-user-app', () => {
  socket.disconnect()
 })
 
-// @TODO: disconnect logic
+window.addEventListener('beforeunload', () => {
+ socket.emit('vue-devtools:disconnect')
+})
diff --git a/packages/shared/src/env.ts b/packages/shared/src/env.ts
@@ -11,3 +11,4 @@ export const target = (typeof globalThis !== 'undefined'
 
 export const isInChromePanel = typeof target.chrome !== 'undefined' && !!target.chrome.devtools
 export const isInIframe = isBrowser && target.self !== target.top
+export const isInElectron = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('electron')