refactor: devtools kit

package.json

@@ -57,7 +57,7 @@
     "release:beta": "bumpp -r && nr build && pnpm -r publish --access public --tag beta",
     "dep:up": "taze -I major -r",
     "prepare": "simple-git-hooks",
-    "test": "vitest",
+    "test": "vitest --environment jsdom",
     "play": "nr -C packages/playground dev",
     "play:webpack": "nr -C packages/webpack-playground dev",
     "docs": "pnpm -C docs run docs:dev",
@@ -75,7 +75,8 @@
     "@types/node": "^20.11.10",
     "@unocss/eslint-plugin": "^0.58.4",
     "@vue/devtools-core": "workspace:^",
-    "@vue/devtools-schema": "workspace:^",
+    "@vue/devtools-kit": "workspace:^",
+    "@vue/test-utils": "^2.4.4",
     "archiver": "^6.0.1",
     "bumpp": "^9.3.0",
     "cross-env": "^7.0.3",
@@ -85,6 +86,7 @@
     "eslint-ts-patch": "8.55.0-1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
+    "jsdom": "^24.0.0",
     "lint-staged": "^15.2.0",
     "npm-run-all2": "^5.0.2",
     "pnpm": "^8.15.0",

packages/client/package.json

@@ -28,7 +28,6 @@
     "@unocss/runtime": "^0.58.4",
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
-    "@vue/devtools-schema": "workspace:*",
     "@vue/devtools-shared": "workspace:^",
     "@vue/devtools-ui": "workspace:*",
     "@vueuse/core": "^10.7.2",

packages/core/package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@vue/devtools-kit": "workspace:^",
-    "@vue/devtools-schema": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
     "birpc": "^0.2.15",
     "fast-glob": "^3.3.2",

packages/core/src/bridge/core.ts

@@ -2,7 +2,7 @@ import { NOOP } from '@vue/devtools-shared'
 import type { Emitter, EventType, Handler } from 'mitt'
 import mitt from 'mitt'
 import { parse } from '@vue/devtools-kit'
-import type { InspectorStateEditorPayload, ScrollToComponentOptions, ToggleComponentInspectorOptions } from '@vue/devtools-kit'
+import type { ComponentHighLighterOptions, InspectorStateEditorPayload, ScrollToComponentOptions } from '@vue/devtools-kit'
 
 export interface BridgeAdapterOptions {
   tracker: (fn: Function) => void
@@ -91,7 +91,7 @@ export const bridgeRpcEvents = {
 export type BridgeRpcEvents = typeof bridgeRpcEvents
 export type BridgeRpcEventName = BridgeRpcEvents[keyof BridgeRpcEvents]
 export interface BridgeRpcEventPayload {
-  [bridgeRpcEvents.toggleComponentInspector]: ToggleComponentInspectorOptions
+  [bridgeRpcEvents.toggleComponentInspector]: ComponentHighLighterOptions
   [bridgeRpcEvents.scrollToComponent]: ScrollToComponentOptions
   [bridgeRpcEvents.inspectComponentInspector]: string
   [bridgeRpcEvents.componentBoundingRect]: {

packages/core/src/vue-plugin.ts

@@ -1,7 +1,6 @@
 import type { App, InjectionKey, Plugin, Ref } from 'vue'
 import { inject, ref } from 'vue'
-import type { CustomCommand, CustomTab } from '@vue/devtools-kit'
-import type { AppRecord } from '@vue/devtools-schema'
+import type { AppRecord, CustomCommand, CustomTab } from '@vue/devtools-kit'
 import type { BridgeInstanceType } from './bridge/core'
 import { DevToolsRpc } from './bridge'
 

packages/devtools-kit/src/core/component/state/__tests__/format.spec.ts → packages/devtools-kit/__tests__/component/format.test.ts

@@ -1,6 +1,7 @@
-import * as format from '../format'
-import { customTypeEnums } from '../../types'
-import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED } from '../constants'
+import * as format from '../../src/core/component/state/format'
+import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED } from '../../src/core/component/state/constants'
+
+import { customTypeEnums } from '../../src/core/component/types'
 
 describe('format: displayText and rawValue can be calculated by formatInspectorStateValue, getRaw', () => {
   describe('type: literals', () => {

packages/devtools-kit/__tests__/fixtures/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Name from './components/Name.vue'
+
+const count = ref(0)
+const visible = ref(true)
+</script>
+
+<template>
+  <div>
+    Hi {{ count }}
+
+    <Name v-if="visible" />
+  </div>
+</template>

packages/devtools-kit/__tests__/fixtures/components/Name.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const name = ref('devtools')
+</script>
+
+<template>
+  <div>
+    {{ name }}
+  </div>
+</template>

packages/devtools-kit/__tests__/hook.test.ts

@@ -0,0 +1,39 @@
+import { devtools } from '@vue/devtools-kit'
+import { mount } from '@vue/test-utils'
+import { resetDevToolsState } from '../src/state'
+import App from './fixtures/App.vue'
+
+describe('hook', () => {
+  beforeAll(() => {
+    devtools.init()
+  })
+  afterEach(() => {
+    resetDevToolsState()
+  })
+  it('should work w/ app init hook', async () => {
+    await new Promise<void>((resolve) => {
+      devtools.hook.on.vueAppInit((app, version) => {
+        expect(app).toBeTypeOf('object')
+        expect(version).toBeTypeOf('string')
+        resolve()
+      })
+      mount(App, {
+        attachTo: document.body,
+      })
+    })
+  })
+
+  it('should work w/ component updated hook', async () => {
+    await new Promise<void>((resolve) => {
+      devtools.hook.on.componentUpdated((_, __, ___, component) => {
+        expect(component.setupState.count).toBe(10)
+        resolve()
+      })
+
+      const app = mount<{}, { }, { count: number, visible: boolean }>(App, {
+        attachTo: document.body,
+      })
+      app.vm.count = 10
+    })
+  })
+})

packages/devtools-kit/__tests__/state.test.ts

@@ -0,0 +1,26 @@
+import { devtools } from '@vue/devtools-kit'
+import { mount } from '@vue/test-utils'
+import { resetDevToolsState } from '../src/state'
+import App from './fixtures/App.vue'
+
+describe('app record', () => {
+  beforeAll(() => {
+    devtools.init()
+  })
+  afterEach(() => {
+    resetDevToolsState()
+  })
+  it('should work', async () => {
+    await new Promise<void>((resolve) => {
+      devtools.hook.on.vueAppInit(() => {
+        const records = devtools.state.appRecords
+        expect(records.length).toBe(1)
+        expect(devtools.state.connected).toBe(true)
+        resolve()
+      })
+      mount(App, {
+        attachTo: document.body,
+      })
+    })
+  })
+})

packages/devtools-kit/global.d.ts

@@ -0,0 +1,21 @@
+import type { DevToolsContext, DevToolsEnv, DevToolsHook, DevToolsState, Router, RouterInfo } from './src/types'
+
+/* eslint-disable vars-on-top, no-var */
+declare global {
+  var __VUE_DEVTOOLS_GLOBAL_HOOK__: DevToolsHook
+  var __VUE_DEVTOOLS_GLOBAL_STATE__: DevToolsState
+  var __VUE_DEVTOOLS_CONTEXT__: DevToolsContext
+  var __VUE_DEVTOOLS_APP_RECROD_INFO__: {
+    id: number
+    appIds: Set<string>
+  }
+  var __VUE_DEVTOOLS_ROUTER__: Router | null
+  var __VUE_DEVTOOLS_ROUTER_INFO__: RouterInfo
+  var __VUE_DEVTOOLS_ENV__: DevToolsEnv
+  var __VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__: boolean
+  var __VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__: boolean
+  var __VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__: string
+  var __VUE_DEVTOOLS_BROWSER_EXTENSION_DETECTED__: boolean
+}
+
+export { }

packages/devtools-kit/package.json

@@ -12,7 +12,9 @@
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
+  "types": "./types.d.ts",
   "files": [
+    "**.d.ts",
     "dist"
   ],
   "scripts": {
@@ -24,15 +26,15 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@vue/devtools-schema": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
     "hookable": "^5.5.3",
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1"
   },
   "devDependencies": {
-    "vue": "^3.4.15",
+    "@types/speakingurl": "^13.0.6",
+    "vue": "^3.4.14",
     "vue-router": "^4.2.5"
   }
 }