feat: console root key

README.md

@@ -9,12 +9,12 @@
 - [x] 重构pages.json读取逻辑
 - [x] 重构插入组件逻辑
 - [x] 使用tRPC
-  - [x] 适配uni-app trpc
+  - [x] 适配uni-app trpc(仅适配支持websocket)
 - [x] tab重构
 - [ ] ~~封装小程序JS-SDK~~ 使用websocket传递数据
 - [x] build时不执行plugin
 - [x] 支持在浏览器打开页面
-- [ ] 浏览器窗口数据传递
+- [ ] ~~浏览器窗口数据传递~~ 使用websocket传递数据
 - [x] 欢迎页面
 - [x] overview页面
 - [ ] pages页面
@@ -54,4 +54,18 @@
     - [x] 解决打印数据为循环引用和复杂结构，无法序列化
   - [x] 获取console调用栈信息
   - [ ] 渲染log信息
-  - [ ] 在vscode里打开输入log信息的本地文件
+    - [x] 基本类型渲染
+    - [ ] 对象tree组件
+      - [ ] 根节点key解析
+        - [ ] 基本类型
+          - [x] string
+          - [x] number
+          - [x] bigint
+          - [x] boolean
+          - [x] undefined
+          - [x] null
+          - [ ] Symbol
+        - [ ] 复杂类型
+          - [ ] object
+          - [ ] array
+  - [x] 在vscode里打开输入log信息的本地文件

nodemon.json

@@ -1,7 +1,7 @@
 {
   "watch": ["packages/plugin/src/**/*", "packages/plugin/inspect/**/*"],
-  "ext": "flag,ts,vue,js",
-  "exec": "pnpm rimraf packages/plugin/client/end.flag && npm -C playground run dev:mp-weixin",
+  "ext": "ts,vue,js",
+  "exec": "npm -C playground run dev:mp-weixin",
   "events": {
     "restart": "kill-port 5015"
   }

package.json

@@ -34,11 +34,15 @@
     "preinstall": "npx only-allow pnpm",
     "postinstall": "npx simple-git-hooks"
   },
+  "dependencies": {
+    "@ungap/structured-clone": "^1.2.0"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.1",
     "@antfu/ni": "^0.21.12",
     "@dcloudio/types": "^3.4.7",
     "@types/node": "^20.14.2",
+    "@types/ungap__structured-clone": "^1.2.0",
     "@unocss/eslint-config": "^0.59.4",
     "@unocss/eslint-plugin": "^0.59.4",
     "@unocss/reset": "^0.59.4",

packages/client/package.json

@@ -27,7 +27,6 @@
     "@uni-helper/devtools-shared": "workspace:*",
     "@vue/devtools-ui": "^7.3.4",
     "@vueuse/core": "^10.9.0",
-    "flatted": "^3.3.1",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "shiki": "^1.7.0",

packages/client/src/components/state/RootStateViewer.vue

@@ -3,9 +3,20 @@ defineProps<{
   data?: unknown
 }>()
 
-// function getDataKeysPreview() {
+function getDataKeysPreview(data: object) {
+  if (isPlainObject(data)) {
+    const rootKeyString = Object.entries(data).map(([key, value]) => {
+      const format = formatStateType(value)
+      return `${key}: ${format?.rawDisplay || format.value}`
+    }).join(',  ')
+    return `{${rootKeyString}}`
+  }
 
-// }
+  if (isArray(data)) {
+    // const rootKeyString =
+    return `(${Array.from(data).length}) [${data}]`
+  }
+}
 function colorByType(data: unknown) {
   const colorMap = {
     string: 'text-#D1977F',
@@ -23,12 +34,26 @@ function colorByType(data: unknown) {
 </script>
 
 <template>
-  <template v-if="typeof data === 'object'">
-    {{ data.tostring() }}
+  <template v-if="typeof data === 'object' && data !== null">
+    <ToggleExpanded
+      :value="false"
+      cursor-pointer
+    />
+    <span font-state-field text-3.5 italic>
+      {{ getDataKeysPreview(data) }}
+    </span>
   </template>
   <template v-else>
     <span :class="colorByType(data)" pl1rem>
-      {{ data }}
+      <template v-if="typeof data === 'bigint'">
+        {{ data }}{{ 'n' }}
+      </template>
+      <template v-else-if="typeof data === 'undefined'">
+        {{ 'undefined' }}
+      </template>
+      <template v-else>
+        {{ data }}
+      </template>
     </span>
   </template>
 </template>

packages/client/src/composables/formatStateType.ts

@@ -29,9 +29,7 @@ function getFunctionDetails(func: Function) {
     matches = String.prototype.match.call(string, /\([\s\S]*?\)/)
   }
   catch (e) {
-    // Func is probably a Proxy, which can break Function.prototype.toString()
   }
-  // Trim any excess whitespace from the argument string
   const match = matches && matches[0]
   const args = typeof match === 'string'
     ? match
@@ -82,7 +80,7 @@ export function formatStateType(value: unknown): StateType {
   if (isArray(value)) {
     return {
       rawType: 'object',
-      rawDisplay: `Array[${value.length}]`,
+      rawDisplay: `Array(${value.length})`,
       recursive: true,
       value,
     }
@@ -216,7 +214,7 @@ export function formatStateType(value: unknown): StateType {
     else if (isPlainObject(value)) {
       return {
         rawType: 'object',
-        rawDisplay: 'Object',
+        rawDisplay: '{...}',
         recursive: true,
         value,
       }

packages/client/src/pages/console.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import type { ConsoleInfo } from '@uni-helper/devtools'
-import { parse } from 'flatted'
 import { VueCheckbox, VueSelect } from '@vue/devtools-ui'
+import { parse } from '@ungap/structured-clone/json'
 
 const consoleList = ref<ConsoleInfo[]>([])
 const uniqConsoleTypes = ref<{ label: string, value: string }[]>([])
 trpc.onConsole.subscribe(undefined, {
   onData: (data) => {
-    data.forEach((item) => {
-      consoleList.value.push({
-        ...item,
-        messages: parse(item.messages),
-      })
-      const hastype = uniqConsoleTypes.value.find(type => type.value === item.type)
-      if (!hastype)
-        uniqConsoleTypes.value.push({ label: item.type, value: item.type })
+    consoleList.value.push({
+      ...data,
+      messages: parse(data.messages),
     })
+    console.log(consoleList.value)
+    const hastype = uniqConsoleTypes.value.find(type => type.value === data.type)
+    if (!hastype)
+      uniqConsoleTypes.value.push({ label: data.type, value: data.type })
   },
 })
 const filteredConsoles = ref(consoleList.value.map(i => i.type))
@@ -24,9 +23,9 @@ function clearConsoleList() {
 }
 function colorByType(data: ConsoleInfo['type']) {
   const colorMap = {
-    log: '',
     warn: 'bg-#413C27',
     error: 'bg-#4F3634',
+    log: 'bg-#2C2C2C',
   }
   return colorMap[data] || ''
 }
@@ -70,12 +69,11 @@ function colorByType(data: ConsoleInfo['type']) {
       <div m-0.83rem>
         <div
           v-for="(consoleInfo, key) in consoleList" :key
-          mb0.5 flex items-center justify-between rounded
-          hover:bg-active
+          mb0.5 flex cursor-default items-center justify-between rounded hover:op85
           :class="colorByType(consoleInfo.type)"
         >
           <div v-for="(data, index) in consoleInfo.messages" :key="index">
-            <RootStateViewer :data />
+            <RootStateViewer :data="data === null ? 'null' : data" />
           </div>
           <span
             mr1rem cursor-pointer text-sm text-gray font-300

packages/client/vite.config.ts

@@ -55,24 +55,6 @@ export default defineConfig({
     }),
 
     UnoCSS(),
-
-    {
-      name: 'create-end-flag-file',
-      apply: 'build',
-      enforce: 'post',
-      configResolved(config) {
-        const { watch, outDir } = config.build
-        _resolvedConfig = { watch, outDir }
-      },
-      closeBundle() {
-        const { watch, outDir } = _resolvedConfig!
-        if (watch) {
-          const flagFile = path.resolve(outDir, 'end.flag')
-          fs.writeFileSync(flagFile, 'done')
-        }
-        consola.success('client build done')
-      },
-    },
   ],
   build: {
     target: 'esnext',

packages/plugin/inspect/proxyConsole.js

@@ -1,7 +1,7 @@
 /* eslint-disable unicorn/error-message */
-import { stringify } from 'flatted'
+import { stringify } from '@ungap/structured-clone/json'
 import { trpc } from './trpc'
-
+// import superjson from 'superjson'
 export function proxyConsole() {
   // @ts-ignore
   if (proxyConsole.proxied)

packages/plugin/package.json

@@ -62,7 +62,6 @@
     "body-parser": "^1.20.2",
     "error-stack-parser-es": "^0.1.4",
     "execa": "^9.3.0",
-    "flatted": "^3.3.1",
     "image-meta": "^0.2.0",
     "json5": "^2.2.3",
     "launch-editor": "^2.8.0",

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

@@ -13,8 +13,6 @@ import { getImageMeta, getStaticAssets, getTextAssetContent } from './assets'
 import { openInEditor } from './openInEditor'
 import openInBrowser from './openInBrowser'
 
-const consoleInfoList: ConsoleInfo[] = []
-
 export default function (
   config: ResolvedConfig,
   eventEmitter: EventEmitter,
@@ -69,13 +67,10 @@ export default function (
       eventEmitter.emit('console', consoleInfo)
     }),
     onConsole: subscription(() => {
-      return observable<ConsoleInfo[]>((emit) => {
+      return observable<ConsoleInfo>((emit) => {
         const consoleHandler = (consoleInfo: ConsoleInfo) => {
-          consoleInfoList.push(consoleInfo)
-          emit.next([consoleInfo])
+          emit.next(consoleInfo)
         }
-
-        emit.next(consoleInfoList)
         eventEmitter.on('console', consoleHandler)
 
         return () => {

packages/plugin/src/logic/importDevtools.ts

@@ -10,8 +10,8 @@ export async function importDevtools(code: string, id: string) {
     `proxyConsole();`,
   ]
   const component = `app.component('uni-dev-tools', UniDevTools);`
+  ms.prepend(`\n${injectFunc.join('\n')}\n`)
   ms.prepend(`${importer.join('\n')}\n`)
-  ms.append(`\n${injectFunc.join('\n')}\n`)
   ms.replace(
     /(createApp[\s\S]*?)(return\s\{\s*app)/,
     `$1${`${component}\n`}$2`,

packages/plugin/src/utils/sourceFile.ts

@@ -18,6 +18,9 @@ export function sourceFile(filePath: string) {
   if (filePath.includes('common/vendor')) {
     return 'node_modules'
   }
+  if (filePath === '//app') {
+    filePath = '/main'
+  }
   const files = globSync(`**${filePath}.*`, {
     ignore: [
       '**/node_modules/**',

playground/src/components/AppLogos.vue

@@ -1,10 +1,26 @@
+<script setup lang="ts">
+function handelClick() {
+  console.log({
+    aa:1,
+    bb:'111',
+    cc: {
+      dd: true
+    },
+    ee: [1,2,3]
+  })
+  console.log([1,2,3,2,2,,2,2,,2,2,2,2,2,2,,2,2,,])
+  console.log([1,2,3,2])
+}
+</script>
+
 <template>
   <view inline-flex cursor-default text-2xl font-300>
     <view
       flex
       flex-col
       items-center
       hover-class="drop-shadow-md drop-shadow-color-green5"
+      @click="handelClick"
     >
       <image inline-block h-18 w-18 src="/static/logo.svg" />
       <text mt--2 text-green5>

playground/src/main.ts

@@ -2,6 +2,13 @@ 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());