Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(kit): deconfliction variable-naming with legacy devtools #300

Merged
merged 1 commit into from
Mar 28, 2024
Merged

fix(kit): deconfliction variable-naming with legacy devtools #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/devtools-kit/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ 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__: {
var __VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__: {
id: number
appIds: Set<string>
}
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-kit/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export class DevToolsPluginApi {
}

async getComponentInstances(app: VueAppInstance) {
const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__
const appRecord = app.__VUE_DEVTOOLS_NEXT_APP_RECORD__
const appId = appRecord.id.toString()
const instances = [...appRecord.instanceMap]
.filter(([key]) => key.split(':')[0] === appId)
Expand Down
10 changes: 5 additions & 5 deletions packages/devtools-kit/src/core/app-record/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ function getAppRootInstance(app: VueAppInstance['appContext']['app']) {
}

function getAppRecordId(app: VueAppInstance['appContext']['app'], defaultId?: string): string {
if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null)
return app.__VUE_DEVTOOLS_APP_RECORD_ID__
if (app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ != null)
return app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__

let id = defaultId ?? (appRecordInfo.id++).toString()

Expand All @@ -32,7 +32,7 @@ function getAppRecordId(app: VueAppInstance['appContext']['app'], defaultId?: st

appRecordInfo.appIds.add(id)

app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id
app.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ = id
return id
}

Expand All @@ -50,10 +50,10 @@ export function createAppRecord(app: VueAppInstance['appContext']['app']): AppRe
rootInstance,
}

app.__VUE_DEVTOOLS_APP_RECORD__ = record
app.__VUE_DEVTOOLS_NEXT_APP_RECORD__ = record
const rootId = `${record.id}:root`
record.instanceMap.set(rootId, record.rootInstance)
record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId
record.rootInstance.__VUE_DEVTOOLS_NEXT_UID__ = rootId

return record
}
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-kit/src/core/component/state/custom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export function getInstanceDetails(instance) {
return {
_custom: {
type: 'component',
id: instance.__VUE_DEVTOOLS_UID__,
id: instance.__VUE_DEVTOOLS_NEXT_UID__,
displayText: getInstanceName(instance),
tooltipText: 'Component instance',
value: reduceStateList(state),
Expand Down
12 changes: 6 additions & 6 deletions packages/devtools-kit/src/core/component/tree/walker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export class ComponentWalker {
// instance.uid is not reliable in devtools as there
// may be 2 roots with same uid which causes unexpected
// behaviour
const id = instance.__VUE_DEVTOOLS_UID__ != null ? instance.__VUE_DEVTOOLS_UID__ : getUniqueComponentId(instance)
instance.__VUE_DEVTOOLS_UID__ = id
const id = instance.__VUE_DEVTOOLS_NEXT_UID__ != null ? instance.__VUE_DEVTOOLS_NEXT_UID__ : getUniqueComponentId(instance)
instance.__VUE_DEVTOOLS_NEXT_UID__ = id

// Dedupe
if (this.captureIds.has(id))
Expand Down Expand Up @@ -119,9 +119,9 @@ export class ComponentWalker {
// keep-alive
if (this.isKeepAlive(instance)) {
const cachedComponents = this.getKeepAliveCachedInstances(instance)
const childrenIds = children.map(child => child.__VUE_DEVTOOLS_UID__)
const childrenIds = children.map(child => child.__VUE_DEVTOOLS_NEXT_UID__)
for (const cachedChild of cachedComponents) {
if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_UID__)) {
if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_NEXT_UID__)) {
const node = await this.capture({ ...cachedChild, isDeactivated: true }, depth + 1)
if (node)
treeNode.children.push(node)
Expand Down Expand Up @@ -241,8 +241,8 @@ export class ComponentWalker {
*/
private mark(instance: VueAppInstance, force = false) {
const instanceMap = getAppRecord(instance)!.instanceMap
if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__)) {
instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance)
if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_NEXT_UID__)) {
instanceMap.set(instance.__VUE_DEVTOOLS_NEXT_UID__, instance)

// force sync appRecord instanceMap
devtoolsAppRecords.active.instanceMap = instanceMap
Expand Down
12 changes: 6 additions & 6 deletions packages/devtools-kit/src/core/component/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@ function saveComponentGussedName(instance: VueAppInstance, name: string) {
}

export function getAppRecord(instance: VueAppInstance) {
if (instance.__VUE_DEVTOOLS_APP_RECORD__)
return instance.__VUE_DEVTOOLS_APP_RECORD__
if (instance.__VUE_DEVTOOLS_NEXT_APP_RECORD__)
return instance.__VUE_DEVTOOLS_NEXT_APP_RECORD__
else if (instance.root)
return instance.appContext.app.__VUE_DEVTOOLS_APP_RECORD__
return instance.appContext.app.__VUE_DEVTOOLS_NEXT_APP_RECORD__
}

export async function getComponentId(options: { app: VueAppInstance, uid: number, instance: VueAppInstance }) {
const { app, uid, instance } = options
try {
if (instance.__VUE_DEVTOOLS_UID__)
return instance.__VUE_DEVTOOLS_UID__
if (instance.__VUE_DEVTOOLS_NEXT_UID__)
return instance.__VUE_DEVTOOLS_NEXT_UID__

const appRecord = await getAppRecord(app)
if (!appRecord)
Expand Down Expand Up @@ -100,7 +100,7 @@ export function getInstanceName(instance: VueAppInstance) {
* @param {Vue} instance
*/
export function getUniqueComponentId(instance: VueAppInstance) {
const appId = instance?.appContext?.app?.__VUE_DEVTOOLS_APP_RECORD_ID__ ?? 0
const appId = instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0
const instanceId = instance === instance.root ? 'root' : instance.uid
return `${appId}:${instanceId}`
}
Expand Down
8 changes: 4 additions & 4 deletions packages/devtools-kit/src/plugins/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
const appRecord = await getAppRecord(app)

if (component) {
if (component.__VUE_DEVTOOLS_UID__ == null)
component.__VUE_DEVTOOLS_UID__ = id
if (component.__VUE_DEVTOOLS_NEXT_UID__ == null)
component.__VUE_DEVTOOLS_NEXT_UID__ = id

if (!appRecord?.instanceMap.has(id)) {
appRecord?.instanceMap.set(id, component)
Expand Down Expand Up @@ -147,8 +147,8 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
const appRecord = await getAppRecord(app)

if (component) {
if (component.__VUE_DEVTOOLS_UID__ == null)
component.__VUE_DEVTOOLS_UID__ = id
if (component.__VUE_DEVTOOLS_NEXT_UID__ == null)
component.__VUE_DEVTOOLS_NEXT_UID__ = id

if (!appRecord?.instanceMap.has(id)) {
// force sync appRecord instanceMap
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-kit/src/state/app-record.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const devtoolsAppRecords = new Proxy<DevToolsAppRecords>(devtoolsState.ap
},
})

export const appRecordInfo = target.__VUE_DEVTOOLS_APP_RECROD_INFO__ ??= {
export const appRecordInfo = target.__VUE_DEVTOOLS_NEXT_APP_RECROD_INFO__ ??= {
id: 0,
appIds: new Set<string>(),
}
8 changes: 4 additions & 4 deletions packages/devtools-kit/src/types/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export type VueAppInstance = ComponentInternalInstance & {
computed: Record<string, unknown>
}
__v_cache: Cache
__VUE_DEVTOOLS_UID__: string
__VUE_DEVTOOLS_NEXT_UID__: string
_isBeingDestroyed: boolean
_instance: VueAppInstance
_container: {
Expand All @@ -71,11 +71,11 @@ export type VueAppInstance = ComponentInternalInstance & {
parent: VueAppInstance
appContext: {
app: VueAppInstance & App & {
__VUE_DEVTOOLS_APP_RECORD_ID__: string
__VUE_DEVTOOLS_APP_RECORD__: AppRecord
__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__: string
__VUE_DEVTOOLS_NEXT_APP_RECORD__: AppRecord
}
}
__VUE_DEVTOOLS_APP_RECORD__: AppRecord
__VUE_DEVTOOLS_NEXT_APP_RECORD__: AppRecord
suspense: SuspenseBoundary & { suspenseKey: string }
renderContext: Record<string, unknown>
devtoolsRawSetupState: Record<string, unknown>
Expand Down
Loading