Skip to content

Commit

Permalink
refactor: devtools kit (#219)
Browse files Browse the repository at this point in the history
  • Loading branch information
webfansplz authored Feb 3, 2024
1 parent 8762db2 commit b622349
Show file tree
Hide file tree
Showing 76 changed files with 1,796 additions and 1,299 deletions.
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
1 change: 0 additions & 1 deletion packages/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/bridge/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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]: {
Expand Down
3 changes: 1 addition & 2 deletions packages/core/src/vue-plugin.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand Down
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down
15 changes: 15 additions & 0 deletions packages/devtools-kit/__tests__/fixtures/App.vue
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions packages/devtools-kit/__tests__/fixtures/components/Name.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('devtools')
</script>

<template>
<div>
{{ name }}
</div>
</template>
39 changes: 39 additions & 0 deletions packages/devtools-kit/__tests__/hook.test.ts
Original file line number Diff line number Diff line change
@@ -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
})
})
})
26 changes: 26 additions & 0 deletions packages/devtools-kit/__tests__/state.test.ts
Original file line number Diff line number Diff line change
@@ -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,
})
})
})
})
21 changes: 21 additions & 0 deletions packages/devtools-kit/global.d.ts
Original file line number Diff line number Diff line change
@@ -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 { }
6 changes: 4 additions & 2 deletions packages/devtools-kit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
},
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"types": "./types.d.ts",
"files": [
"**.d.ts",
"dist"
],
"scripts": {
Expand All @@ -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"
}
}
Loading

0 comments on commit b622349

Please sign in to comment.