feat: introducting rerender trace feature (#153)

---------

Co-authored-by: alexzhang1030 <[email protected]>

Author: webfansplz

.github/workflows/ci.yml

@@ -25,6 +25,8 @@ jobs:
         run: npm i -g @antfu/ni
       - name: Install
         run: nci
+      - name: Test
+        run: nr test
       - name: Build
         run: nr build
       - name: Lint

README.md

@@ -117,6 +117,13 @@ export default defineConfig({
 ### Options
 
 ```ts
+interface AnalyzeOptions {
+  /**
+   * @default true
+  */
+  rerenderTrace: boolean
+}
+
 interface VitePluginVueDevToolsOptions {
   /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
@@ -125,6 +132,14 @@ interface VitePluginVueDevToolsOptions {
   * WARNING: only set this if you know exactly what it does.
   */
   appendTo?: string | RegExp
+  /**
+   * Enable Vue DevTools to analyze the codebase by using Babel
+   * @default
+   * {
+   *   rerenderTrace: true, // enable rerenderTrace feature
+   * }
+  */
+  analyze?: Partial<AnalyzeOptions>
 }
 ```
 

package.json

@@ -54,7 +54,8 @@
     "prepublishOnly": "npm run build",
     "release": "bumpp -r",
     "dep:up": "taze -I major",
-    "prepare": "simple-git-hooks"
+    "prepare": "simple-git-hooks",
+    "test": "vitest"
   },
   "peerDependencies": {
     "vite": "^3.1.0 || ^4.0.0-0"
@@ -76,6 +77,7 @@
     "typescript": "^5.1.6",
     "unbuild": "^1.2.1",
     "vite": "^4.4.4",
+    "vitest": "^0.33.0",
     "vue": "^3.3.4"
   },
   "simple-git-hooks": {

packages/client/App.vue

@@ -17,12 +17,12 @@ hookApi.hook.on('init:vue:app', () => {
   // mark client as loaded
   client.value.markClientLoaded()
   // listen hook
-  hookApi.produce()
+  hookApi.subscribe()
   // perf timeline
   // close perf timeline to avoid performance issue (#9)
   // initPerfTimeline(categorizedHookBuffer.perf)
-  // consume hook buffer
-  hookApi.consume(categorizedHookBuffer.component ?? [])
+  // publish hook buffer
+  hookApi.publish(categorizedHookBuffer.component ?? [])
   // init routes
   initRoutes(categorizedHookBuffer.router ?? [])
   // init pinia

packages/client/logic/components/data.ts

@@ -167,7 +167,7 @@ function processState(instance: any): any {
     }))
 }
 
-function processSetupState(instance: any) {
+export function processSetupState(instance: any) {
   const raw = instance.devtoolsRawSetupState || {}
   return Object.keys(instance.setupState)
     .filter(key => !vueBuiltins.includes(key) && key.split(/(?=[A-Z])/)[0] !== 'use')
@@ -226,14 +226,14 @@ function isReadOnly(raw: any): boolean {
   return !!raw.__v_isReadonly
 }
 
-function toRaw(value: any) {
+export function toRaw(value: any) {
   if (value?.__v_raw)
     return value.__v_raw
 
   return value
 }
 
-function getSetupStateInfo(raw: any) {
+export function getSetupStateInfo(raw: any) {
   return {
     ref: isRef(raw),
     computed: isComputed(raw),

packages/client/logic/components/index.ts

@@ -1,4 +1,4 @@
 export { ComponentWalker, InstanceMap } from './tree'
-export { getInstanceState, getInstanceDetails } from './data'
+export { getInstanceState, processSetupState, getInstanceDetails, getSetupStateInfo } from './data'
 export { getInstanceOrVnodeRect, getRootElementsFromComponentInstance } from './el'
 export { getInstanceName } from './util'

packages/client/logic/format-state.ts

@@ -27,9 +27,6 @@ export interface StateType {
   rawDisplay?: string
   recursive: boolean
 }
-// function isReactive(raw: any): boolean {
-//   return !!raw.__ob__
-// }
 
 export function formatStateType(value: unknown): StateType {
   // Vue

packages/client/logic/hook.ts

@@ -1,25 +1,18 @@
+import { DevToolsHooks } from '@vite-plugin-vue-devtools/core'
 import { updatePinia } from './pinia'
 import { instance, updateApp, app as vueApp } from './app'
 import { useDevToolsClient } from './client'
 
-enum DevtoolsHooks {
-  APP_INIT = 'app:init',
-  COMPONENT_UPDATED = 'component:updated',
-  COMPONENT_ADDED = 'component:added',
-  COMPONENT_REMOVED = 'component:removed',
-  COMPONENT_EMIT = 'component:emit',
-}
-
 function hideInDevtools(component) {
   return component?.root?.type?.devtools?.hide
 }
 
 const client = useDevToolsClient()
 
-function produceHook() {
+function subscribeHook() {
   const client = useDevToolsClient()
   const hook = client.value.hook
-  hook.on(DevtoolsHooks.APP_INIT, (app) => {
+  hook.on(DevToolsHooks.APP_INIT, (app) => {
     if (app?._vueDevtools_hidden_)
       return
     vueApp.value = app
@@ -30,7 +23,7 @@ function produceHook() {
     return (!app || (typeof uid !== 'number' && !uid) || !component || hideInDevtools(component))
   }
 
-  hook.on(DevtoolsHooks.COMPONENT_UPDATED, (app, uid, parentUid, component) => {
+  hook.on(DevToolsHooks.COMPONENT_UPDATED, (app, uid, parentUid, component) => {
     updatePinia(component)
 
     if (skipCollect(app, uid, component))
@@ -39,7 +32,7 @@ function produceHook() {
     updateApp(app, component)
   })
 
-  hook.on(DevtoolsHooks.COMPONENT_ADDED, (app, uid, parentUid, component) => {
+  hook.on(DevToolsHooks.COMPONENT_ADDED, (app, uid, parentUid, component) => {
     updatePinia(component)
 
     if (skipCollect(app, uid, component))
@@ -49,7 +42,7 @@ function produceHook() {
     updateApp(app, component)
   })
 
-  hook.on(DevtoolsHooks.COMPONENT_REMOVED, (app, uid, parentUid, component) => {
+  hook.on(DevToolsHooks.COMPONENT_REMOVED, (app, uid, parentUid, component) => {
     updatePinia(component)
 
     if (skipCollect(app, uid, component))
@@ -60,7 +53,7 @@ function produceHook() {
     updateApp(app, component)
   })
 
-  hook.on(DevtoolsHooks.COMPONENT_EMIT, (app, uid, parentUid, component) => {
+  hook.on(DevToolsHooks.COMPONENT_EMIT, (app, uid, parentUid, component) => {
     updatePinia(component)
 
     if (skipCollect(app, uid, component))
@@ -72,7 +65,7 @@ function produceHook() {
   })
 }
 
-function ConsumeHook(buffer: [string, Record<string, any>][]) {
+function publishHook(buffer: [string, Record<string, any>][]) {
   buffer.forEach(([_, { app, component }]) => {
     updatePinia(component)
     updateApp(app, component)
@@ -81,6 +74,6 @@ function ConsumeHook(buffer: [string, Record<string, any>][]) {
 
 export const hookApi = {
   hook: client.value.hook,
-  produce: produceHook,
-  consume: ConsumeHook,
+  subscribe: subscribeHook,
+  publish: publishHook,
 }