Skip to content

Commit 65eef6e

Browse files
AkryumAkryum
committed
feat: devtools.hide component option (app-level)
1 parent 1be34fe commit 65eef6e

8 files changed

Lines changed: 49 additions & 5 deletions

File tree

‎packages/api/src/api/component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,7 @@ export interface ComponentCustomState extends ComponentStateBase {
6969
}
7070

7171
export type ComponentState = ComponentStateBase | ComponentPropState | ComponentCustomState
72+
73+
export interface ComponentDevtoolsOptions {
74+
hide?: boolean
75+
}

‎packages/api/src/api/hooks.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentTreeNode, InspectedComponentData, ComponentInstance } from './component'
1+
import { ComponentTreeNode, InspectedComponentData, ComponentInstance, ComponentDevtoolsOptions } from './component'
22
import { App } from './app'
33
import { CustomInspectorNode, CustomInspectorState, TimelineEvent } from './api'
44

@@ -17,6 +17,7 @@ export const enum Hooks {
1717
GET_ELEMENT_COMPONENT = 'getElementComponent',
1818
GET_COMPONENT_ROOT_ELEMENTS = 'getComponentRootElements',
1919
EDIT_COMPONENT_STATE = 'editComponentState',
20+
GET_COMPONENT_DEVTOOLS_OPTIONS = 'getAppDevtoolsOptions',
2021
INSPECT_TIMELINE_EVENT = 'inspectTimelineEvent',
2122
GET_INSPECTOR_TREE = 'getInspectorTree',
2223
GET_INSPECTOR_STATE = 'getInspectorState',
@@ -91,6 +92,10 @@ export type HookPayloads = {
9192
path: string[]
9293
state: EditStatePayload
9394
}
95+
[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS]: {
96+
componentInstance: ComponentInstance
97+
options: ComponentDevtoolsOptions
98+
}
9499
[Hooks.INSPECT_TIMELINE_EVENT]: {
95100
app: App
96101
layerId: string
@@ -147,6 +152,7 @@ export interface Hookable<TContext> {
147152
getElementComponent (handler: HookHandler<HookPayloads[Hooks.GET_ELEMENT_COMPONENT], TContext>)
148153
getComponentRootElements (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_ROOT_ELEMENTS], TContext>)
149154
editComponentState (handler: HookHandler<HookPayloads[Hooks.EDIT_COMPONENT_STATE], TContext>)
155+
getComponentDevtoolsOptions (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS], TContext>)
150156
inspectTimelineEvent (handler: HookHandler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT], TContext>)
151157
getInspectorTree (handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_TREE], TContext>)
152158
getInspectorState (handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_STATE], TContext>)

‎packages/app-backend-api/src/api.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
CustomInspectorOptions,
1111
EditStatePayload,
1212
WithId,
13-
ComponentTreeNode
13+
ComponentTreeNode,
14+
ComponentDevtoolsOptions
1415
} from '@vue/devtools-api'
1516
import { DevtoolsHookable } from './hooks'
1617
import { BackendContext } from './backend-context'
@@ -159,6 +160,14 @@ export class DevtoolsApi {
159160
return payload.componentInstance
160161
}
161162

163+
async getComponentDevtoolsOptions (instance: ComponentInstance): Promise<ComponentDevtoolsOptions> {
164+
const payload = await this.callHook(Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS, {
165+
componentInstance: instance,
166+
options: null
167+
})
168+
return payload.options || {}
169+
}
170+
162171
async inspectTimelineEvent (eventData: TimelineEventOptions & WithId, app: App) {
163172
const payload = await this.callHook(Hooks.INSPECT_TIMELINE_EVENT, {
164173
event: eventData.event,

‎packages/app-backend-api/src/hooks.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,10 @@ export class DevtoolsHookable implements Hookable<BackendContext> {
9797
this.hook(Hooks.EDIT_COMPONENT_STATE, handler)
9898
}
9999

100+
getComponentDevtoolsOptions (handler: Handler<HookPayloads[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS]>) {
101+
this.hook(Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS, handler)
102+
}
103+
100104
inspectTimelineEvent (handler: Handler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT]>) {
101105
this.hook(Hooks.INSPECT_TIMELINE_EVENT, handler)
102106
}

‎packages/app-backend-core/src/app.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,17 @@ export function waitForAppsRegistration () {
111111
return jobs.queue(async () => { /* NOOP */ })
112112
}
113113

114-
export function sendApps (ctx: BackendContext) {
114+
export async function sendApps (ctx: BackendContext) {
115+
const appRecords = []
116+
117+
for (const k in ctx.appRecords) {
118+
const appRecord = ctx.appRecords[k]
119+
if (!(await ctx.api.getComponentDevtoolsOptions(appRecord.rootInstance)).hide) {
120+
appRecords.push(appRecord)
121+
}
122+
}
123+
115124
ctx.bridge.send(BridgeEvents.TO_FRONT_APP_LIST, {
116-
apps: ctx.appRecords.map(mapAppRecord)
125+
apps: appRecords.map(mapAppRecord)
117126
})
118127
}

‎packages/app-backend-vue3/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ export const backend: DevtoolsBackend = {
6363
editState(payload, ctx)
6464
})
6565

66+
api.on.getComponentDevtoolsOptions(payload => {
67+
payload.options = payload.componentInstance.type.devtools
68+
})
69+
6670
api.on.transformCall(payload => {
6771
if (payload.callName === HookEvents.COMPONENT_UPDATED) {
6872
const component = payload.inArgs[0]

‎packages/shell-dev-vue3/src/main.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ app.use(router)
2525
app.mount('#app')
2626

2727
createApp({
28-
render: () => h('h1', {}, 'App 2')
28+
render: () => h('h1', 'App 2')
2929
}).mount('#app2')
3030

3131
createApp(App3).mount('#app3')
32+
33+
createApp({
34+
render: () => h('h1', 'Ghost app'),
35+
devtools: {
36+
hide: true
37+
}
38+
}).mount('#ghost-app')

‎packages/shell-dev-vue3/target.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<div id="app"></div>
1414
<div id="app2"></div>
1515
<div id="app3"></div>
16+
<div id="ghost-app"></div>
1617
<div id="shadow"></div>
1718
<script src="target/hook.js"></script>
1819
<script src="target/target.js"></script>

0 commit comments

Comments
 (0)