fix(electron): compatible with vue custom renderer (#164)

Author: webfansplz

packages/core/src/bridge/user-app.ts

@@ -91,12 +91,12 @@ export function registerBridgeRpc(bridge: BridgeInstanceType) {
 
   // get vue inspector
   bridgeRpcCore.on(bridgeRpcEvents.isVueInspectorDetected, async () => {
-    return !!await devtools.api.getVueInspector()
+    return !!await devtools?.api?.getVueInspector?.()
   })
 
   // enable vue inspector
   bridgeRpcCore.on(bridgeRpcEvents.enableVueInspector, async () => {
-    const inspector = await devtools.api.getVueInspector()
+    const inspector = await devtools?.api?.getVueInspector?.()
     if (inspector)
       await inspector.enable()
   })

packages/devtools-kit/src/core/plugins/components.ts

@@ -28,6 +28,9 @@ export function registerComponentsDevTools(app: VueAppInstance) {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         const instance = getComponentInstance(devtoolsContext.appRecord!, payload.instanceId)
         if (instance) {
+          if (typeof DOMRect === 'undefined')
+            return
+
           payload.rect = getComponentBoundingRect(instance)
           if (payload.rect instanceof DOMRect) {
             payload.rect = {

packages/devtools/package.json

@@ -13,6 +13,11 @@
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./hook": {
+      "types": "./dist/hook.d.ts",
+      "import": "./dist/hook.mjs",
+      "require": "./dist/hook.cjs"
     }
   },
   "main": "./dist/index.cjs",

packages/devtools/src/hook.ts

@@ -0,0 +1,3 @@
+import { devtools } from '@vue/devtools-kit'
+
+devtools.init()

packages/devtools/tsup.config.ts

@@ -3,6 +3,7 @@ import type { Options } from 'tsup'
 export default <Options>{
   entryPoints: [
     'src/index.ts',
+    'src/hook.ts',
   ],
   esbuildOptions(options) {
     if (options.format === 'esm')

packages/electron/scripts/build.ts

@@ -46,7 +46,14 @@ async function buildBundle() {
   build({
     entry: [resolve('./src/user-app.ts')],
     ...baseOptions,
-    format: ['cjs', 'esm', 'iife'],
+    format: ['cjs', 'esm'],
+    clean: false,
+  })
+
+  build({
+    entry: [resolve('./src/user-app.iife.ts')],
+    ...baseOptions,
+    format: ['iife'],
     clean: false,
   })
 

packages/electron/src/devtools.ts

@@ -43,12 +43,15 @@ function init() {
     })
   })
 
-  socket.on('vue-devtools:disconnect', () => {
+  function shutdown() {
     app.unmount()
     reload = null
     socket.close()
     init()
-  })
+  }
+
+  socket.on('vue-devtools:disconnect', shutdown)
+  socket.on('vue-devtools-disconnect-devtools', shutdown)
 }
 
 init()

packages/electron/src/server.ts

@@ -10,7 +10,7 @@ export function init() {
   app.use(
     '/',
     eventHandler(() => {
-      const userAppContent = fs.readFileSync(path.join(__dirname, './user-app.js'), 'utf-8')
+      const userAppContent = fs.readFileSync(path.join(__dirname, './user-app.iife.js'), 'utf-8')
       const processSyntaxPolyfill = `if(!window.process){window.process={env:{}}};`
       return processSyntaxPolyfill + userAppContent
     }),

packages/electron/src/user-app.core.ts

@@ -0,0 +1,49 @@
+import { isBrowser, target } from '@vue/devtools-shared'
+import { Bridge } from '../../core/src/bridge'
+import { prepareInjection } from '../../core/src/injection'
+import { devtools } from '../../devtools-kit/src/index'
+
+export function init(io) {
+  const createSocket = io
+  const host = target.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
+  const port = target.__VUE_DEVTOOLS_PORT__ !== undefined ? target.__VUE_DEVTOOLS_PORT__ : 8098
+  const fullHost = port ? `${host}:${port}` : host
+  const socket = createSocket(fullHost)
+
+  // @TODO: de-duplicate
+  devtools.init()
+
+  const bridge = new Bridge({
+    tracker(fn) {
+      socket.on('vue-devtools:message', (data) => {
+        fn(data)
+      })
+    },
+    trigger(data) {
+      socket.emit('vue-devtools:message', data)
+    },
+  })
+
+  socket.on('connect', () => {
+    prepareInjection(bridge)
+    socket.emit('vue-devtools:init')
+  })
+
+  // Global disconnect handler. Fires in two cases:
+  // - after calling above socket.disconnect()
+  // - once devtools is closed (that's why we need socket.disconnect() here too, to prevent further polling)
+  socket.on('disconnect', () => {
+    socket.disconnect()
+  })
+
+  // Disconnect socket once other client is connected
+  socket.on('vue-devtools:disconnect-user-app', () => {
+    socket.disconnect()
+  })
+
+  if (isBrowser) {
+    window.addEventListener('beforeunload', () => {
+      socket.emit('vue-devtools:disconnect')
+    })
+  }
+}

packages/electron/src/user-app.iife.ts

@@ -0,0 +1,4 @@
+import io from 'socket.io-client/dist/socket.io.js'
+import { init } from './user-app.core'
+
+init(io)