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()],
+})