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

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)

packages/electron/src/user-app.ts

@@ -1,46 +1,4 @@
-import io from 'socket.io-client/dist/socket.io.js'
-import { target } from '@vue/devtools-shared'
-import { Bridge } from '../../core/src/bridge'
-import { prepareInjection } from '../../core/src/injection'
-import { devtools } from '../../devtools-kit/src/index'
+import io from 'socket.io-client'
+import { init } from './user-app.core'
 
-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()
-})
-
-window.addEventListener('beforeunload', () => {
-  socket.emit('vue-devtools:disconnect')
-})
+init(io)

packages/vue-termui-playground/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "vue-termui-playground",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "bin": {
+    "vtui-app": "./dist/main.mjs"
+  },
+  "scripts": {
+    "dev:vtui": "vtui dev"
+  },
+  "dependencies": {
+    "@vue/devtools": "workspace:^",
+    "@vue/runtime-core": "^3.2.41",
+    "vue": "^3.2.41",
+    "vue-termui": "*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue-termui/cli": "*",
+    "@vue/compiler-sfc": "^3.2.41",
+    "typescript": "^4.8.4",
+    "unplugin-auto-import": "^0.11.4",
+    "unplugin-vue-components": "^0.22.9",
+    "vite": "^3.2.2",
+    "vite-plugin-vue-termui": "*"
+  }
+}

packages/vue-termui-playground/src/App.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+// All imports are automatic but if you want to import anything,
+// remember to import from 'vue-termui':
+// import { ref } from 'vue-termui'
+
+const n = ref(0)
+
+const counter = ref(0)
+onKeyData(['+', 'ArrowRight', 'ArrowUp'], () => {
+  counter.value++
+})
+onKeyData(['-', 'ArrowLeft', 'ArrowDown'], () => {
+  counter.value--
+})
+
+useInterval(() => {
+  n.value++
+}, 600)
+</script>
+
+<template>
+  <Box
+    :padding="2"
+    :margin="2"
+    width="100%"
+    :max-width="50"
+    justify-content="center"
+    align-items="center"
+    flex-direction="column"
+    border-color="yellowBright"
+    border-style="round"
+  >
+    <Box :margin-y="1">
+      <Text color="cyanBright">
+        Hello World
+      </Text>
+      <Text>{{ n % 2 ? '👋 ' : ' ✋' }}</Text>
+    </Box>
+    <Box>
+      <Text>
+        Counter:
+        <Text :color="counter < 0 ? 'red' : 'green'" bold>
+          {{ counter }}
+        </Text>
+        <Text dimmed>
+          (<Text color="red" bold>
+            -
+          </Text>/<Text bold color="green">
+            +
+          </Text> to
+          change it)
+        </Text>
+      </Text>
+    </Box>
+  </Box>
+</template>

packages/vue-termui-playground/src/main.ts

@@ -0,0 +1,14 @@
+import { devtools } from '@vue/devtools'
+import '@vue/devtools/hook'
+import { createApp } from 'vue-termui'
+import App from './App.vue'
+
+globalThis.document = {
+  createElement: () => {},
+  getElementById: () => {},
+} as any
+
+devtools.connect('http://localhost', 8098)
+
+const app = createApp(App)
+app.mount()

packages/vue-termui-playground/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import VueTermui from 'vite-plugin-vue-termui'
+
+export default defineConfig({
+  plugins: [VueTermui()],
+})