chore: update

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/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,49 +1,4 @@
-// import io from 'socket.io-client/dist/socket.io.js'
 import io from 'socket.io-client'
-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'
+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()
-})
-
-if (isBrowser) {
-  window.addEventListener('beforeunload', () => {
-    socket.emit('vue-devtools:disconnect')
-  })
-}
+init(io)

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

@@ -1,4 +1,7 @@
 import { devtools } from '@vue/devtools'
+import '@vue/devtools/hook'
+import { createApp } from 'vue-termui'
+import App from './App.vue'
 
 globalThis.document = {
   createElement: () => {},
@@ -7,11 +10,5 @@ globalThis.document = {
 
 devtools.connect('http://localhost', 8098)
 
-// eslint-disable-next-line import/first
-import { createApp } from 'vue-termui'
-
-// eslint-disable-next-line import/first
-import App from './App.vue'
-
 const app = createApp(App)
 app.mount()