feat(plugin): 添加客户端支持并优化版本信息传输

packages/client/src/pages/overview.vue

@@ -3,6 +3,7 @@ import { version } from './../../package.json'
 import UniIcon from '/icon/uni_icon.png'
 
 const { initState } = useInitState()
+
 const pages = await trpc.getPages.query()
 const modules = await trpc.getComponent.query()
 

packages/client/src/stores/init.ts

@@ -1,16 +1,23 @@
-import { decompressURLQuery } from '@uni-helper/devtools-shared'
+// import { decompressURLQuery } from '@uni-helper/devtools-shared'
 import type { InitState } from '~/types'
 
 export const useInitState = createGlobalState(
   () => {
-    const initState = ref<InitState>()
+    const initState = ref<InitState | object>({})
     function init() {
-      const params = new URLSearchParams(window.location.search)
-      const data = params.get('data')
-      if (!data)
-        return
-      initState.value = decompressURLQuery(data)
-      console.log('initState', initState.value)
+      // const params = new URLSearchParams(window.location.search)
+      // const data = params.get('data')
+      // if (!data)
+      //   return
+      // initState.value = decompressURLQuery(data)
+      // console.log('initState', initState.value)
+      trpc.onVersion.subscribe(undefined, {
+        onData: (data) => {
+          initState.value!.vueVersion = data.vueVersion
+          initState.value!.uniCompileVersion = data.uniVersion
+          console.log('initState', initState.value)
+        },
+      })
     }
 
     return {

packages/plugin/inspect/UniDevTools.vue

@@ -1,7 +1,13 @@
 <script setup>
-import { ref, version } from 'vue'
+import { getCurrentInstance, onMounted, ref } from 'vue'
 import { basename } from '@uni-helper/devtools-shared'
-import { getActivePinia } from 'pinia'
+import { getCurrentPage } from './initMPClient'
+
+onMounted(() => {
+  getCurrentPage()
+})
+
+console.log('====================================================')
 
 const x = ref(0)
 const y = ref(0)
@@ -26,9 +32,9 @@ function handleTouchEnd() {
 }
 
 function getPiniaState() {
-  const state = JSON.parse(JSON.stringify(getActivePinia().state.value))
+  // const state = JSON.parse(JSON.stringify(getActivePinia().state.value))
   // 获取所有 stores 的信息
-  return state
+  // return state
 }
 
 /** 递归获取组件名称和地址 */
@@ -55,6 +61,7 @@ function extractComponentInfo(component) {
 }
 
 function handleTap() {
+  console.log(getCurrentInstance())
   const pages = getCurrentPages()
   const piniaState = getPiniaState()
   const currentPage = pages[pages.length - 1]
@@ -63,7 +70,6 @@ function handleTap() {
 
   const data = {
     currentPage: currentPage.route,
-    vueVersion: version,
     uniPlatform,
     uniCompileVersion,
     uniRuntimeVersion,

packages/plugin/inspect/initMPClient.js

@@ -0,0 +1,32 @@
+import { onMounted, version } from 'vue'
+import { trpc } from './trpc'
+
+export function initMPClient() {
+  sendVersion()
+  getCurrentPage()
+}
+
+function sendVersion() {
+  const { uniRuntimeVersion } = uni.getSystemInfoSync()
+
+  const vueVersion = version
+  const uniVersion = uniRuntimeVersion
+
+  trpc.sendVersion.subscribe({
+    vueVersion,
+    uniVersion,
+  }, {
+    onComplete: () => {},
+  })
+}
+
+export function getCurrentPage() {
+  onMounted(() => {
+    // const i = getCurrentInstance()
+
+    // const pages = getCurrentPages()
+    // const i = pages[pages.length - 1]
+
+    // console.log('instance', i)
+  })
+}

packages/plugin/package.json

@@ -59,6 +59,7 @@
     "@uni-helper/trpc-client": "workspace:*",
     "@uni-helper/uni-env": "^0.1.1",
     "@vue/compiler-sfc": "^3.4.27",
+    "@webviewjs/webview": "^0.1.3",
     "body-parser": "^1.20.2",
     "detect-port": "^1.6.1",
     "error-stack-parser-es": "^0.1.4",

packages/plugin/src/devtoolServer/rpc/assets.ts

@@ -84,7 +84,9 @@ export async function getImageMeta(filepath: string) {
   if (_imageMetaCache.has(filepath))
     return _imageMetaCache.get(filepath)
   try {
-    const meta = imageMeta(await fs.readFile(filepath)) as ImageMeta
+    const fileBuffer = await fs.readFile(filepath)
+    const uint8Array = new Uint8Array(fileBuffer.buffer, fileBuffer.byteOffset, fileBuffer.byteLength)
+    const meta = imageMeta(uint8Array) as ImageMeta
     _imageMetaCache.set(filepath, meta)
     return meta
   }

packages/plugin/src/devtoolServer/rpc/index.ts

@@ -7,11 +7,12 @@ import { parseStack } from 'error-stack-parser-es/lite'
 import { extractPathByStack, sourceFile } from '../../utils/sourceFile'
 import type { ConsoleInfo, ModuleInfo, Options } from './../../types'
 import { getPagesInfo } from './../../logic'
-import { publicProcedure, router } from './../trpc'
+import { mergeRouters, publicProcedure, router } from './../trpc'
 import { DIR_INSPECT_LIST } from './../../dir'
 import { getImageMeta, getStaticAssets, getTextAssetContent } from './assets'
 import { openInEditor } from './openInEditor'
 import openInBrowser from './openInBrowser'
+import { versionRouter } from './version'
 
 export default function (
   config: ResolvedConfig,
@@ -20,14 +21,14 @@ export default function (
 ) {
   const { query, input, subscription } = publicProcedure
 
-  return router({
+  const routes = router({
     getComponent: query(() => {
       const json = readJsonSync(DIR_INSPECT_LIST)
       return json.modules as ModuleInfo[]
     }),
     getPages: query(() => {
       const [_, pages] = getPagesInfo(options?.pageJsonPath)
-
+      console.log(pages)
       return pages
     }),
     staticAssets: query(() => {
@@ -79,4 +80,9 @@ export default function (
       })
     }),
   })
+
+  return mergeRouters(
+    routes,
+    versionRouter(eventEmitter),
+  )
 }

packages/plugin/src/devtoolServer/rpc/version.ts

@@ -0,0 +1,37 @@
+import type { EventEmitter } from 'node:stream'
+import { z } from 'zod'
+import { observable } from '@trpc/server/observable'
+import { publicProcedure, router } from './../trpc'
+
+interface Version {
+  vueVersion: string
+  uniVersion: string
+}
+
+export function versionRouter(eventEmitter: EventEmitter) {
+  const { input, subscription } = publicProcedure
+
+  return router({
+    sendVersion: input(
+      z.object({
+        vueVersion: z.string(),
+        uniVersion: z.string(),
+      }),
+    ).subscription(({ input }) => {
+      eventEmitter.emit('version', input)
+    }),
+    onVersion: subscription(() => {
+      return observable<Version>((emit) => {
+        const versionHandler = (data: Version) => {
+          emit.next(data)
+        }
+
+        eventEmitter.on('version', versionHandler)
+
+        return () => {
+          eventEmitter.off('version', versionHandler)
+        }
+      })
+    }),
+  })
+}

packages/plugin/src/devtoolServer/trpc.ts

@@ -4,3 +4,4 @@ const t = initTRPC.create()
 
 export const router = t.router
 export const publicProcedure = t.procedure
+export const mergeRouters = t.mergeRouters

packages/plugin/src/index.ts

@@ -10,6 +10,7 @@ import type { Options } from './types'
 import type createRouter from './devtoolServer/rpc/index'
 import { pluginByEnv } from './logic/pluginByEnv'
 import { injectDevtoolInfo } from './inspects/injectDevtoolInfo'
+import { open } from './webview'
 
 export * from './types'
 export type AppRouter = ReturnType<typeof createRouter>
@@ -19,6 +20,9 @@ export default function UniDevToolsPlugin(options?: Partial<Options>): Plugin[]
     return _plugin
   }
   const port = options?.port || 5015
+  if (options?.client) {
+    open(port)
+  }
   const inspect = loadInspectPlugin()
   const [pagesPath, pages] = getPagesInfo(options?.pageJsonPath)
   const rootPath = pagesPath.replace('pages.json', '')

packages/plugin/src/inspects/injectDevtoolInfo.ts

@@ -8,16 +8,19 @@ export function injectDevtoolInfo(code: string, id: string) {
   const script = descriptor.script
   const inspectInfo = /* js */`
     ;const __uni_devtoolInfo = {
-      name: ${basename(id, '.vue')},
-      filename: ${id},
+      name: "${basename(id, '.vue')}",
+      filename: "${id}",
     }
   `
+
   if (script) {
     ms.appendRight(script.loc.end.offset, inspectInfo)
   }
   else {
+    const lang = descriptor.scriptSetup?.lang
+    const langContet = lang === 'ts' ? 'lang="ts"' : ''
     const inspectScript = /* js */`
-      <script>${inspectInfo}</script>
+      <script ${langContet}>${inspectInfo}</script>
     `
     ms.append(inspectScript)
   }

packages/plugin/src/logic/importDevtools.ts

@@ -4,10 +4,12 @@ export async function importDevtools(code: string, id: string) {
   const ms = new MagicString(code)
   const importer = [
     `import UniDevTools from '@uni-helper/devtools/inspect/UniDevTools.vue';`,
-    `import {proxyConsole} from '@uni-helper/devtools/inspect/proxyConsole.js';`,
+    // `import {proxyConsole} from '@uni-helper/devtools/inspect/proxyConsole.js';`,
+    `import {initMPClient} from '@uni-helper/devtools/inspect/initMPClient.js';`,
   ]
   const injectFunc = [
-    `proxyConsole();`,
+    // `proxyConsole();`,
+    `initMPClient();`,
   ]
   const component = `app.component('uni-dev-tools', UniDevTools);`
   ms.prepend(`\n${injectFunc.join('\n')}\n`)

packages/plugin/src/types.ts

@@ -45,6 +45,11 @@ export interface Options {
    * vue-devtools Opthins
    */
   vueDevtoolsOptions: VitePluginVueDevToolsOptions
+  /**
+   * 客户端
+   * @default false
+   */
+  client: boolean
 }
 
 export interface ModuleInfo {

packages/plugin/src/webview/index.ts

@@ -0,0 +1,11 @@
+import { Application } from '@webviewjs/webview'
+
+export function open(port: number) {
+  const app = new Application()
+  const window = app.createBrowserWindow()
+  console.log(`http://localhost:${port}`)
+  window.createWebview({
+    url: `http://localhost:${port}`,
+  })
+  app.run()
+}

playground/src/main.ts

@@ -2,13 +2,7 @@ import { createSSRApp } from 'vue'
 import App from './App.vue'
 import 'uno.css'
 import * as Pinia from 'pinia';
-console.log(1)
-console.log('string')
-console.log(true)
-console.log(1000n)
-console.log(Symbol('123'))
-console.log(undefined)
-console.log(null)
+
 export function createApp() {
   const app = createSSRApp(App)
   app.use(Pinia.createPinia());