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

vuejs · Mar 28, 2024 · c7097ea · c7097ea
1 parent 842ab8e
commit c7097ea
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 29 deletions.
diff --git a/packages/devtools-kit/global.d.ts b/packages/devtools-kit/global.d.ts
@@ -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>
   }

diff --git a/packages/devtools-kit/src/api/api.ts b/packages/devtools-kit/src/api/api.ts
@@ -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)

diff --git a/packages/devtools-kit/src/core/app-record/index.ts b/packages/devtools-kit/src/core/app-record/index.ts
@@ -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()
 
@@ -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
 }
 
@@ -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
   }

diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -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),

diff --git a/packages/devtools-kit/src/core/component/tree/walker.ts b/packages/devtools-kit/src/core/component/tree/walker.ts
@@ -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))
@@ -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)
@@ -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

diff --git a/packages/devtools-kit/src/core/component/utils/index.ts b/packages/devtools-kit/src/core/component/utils/index.ts
@@ -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)
@@ -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}`
 }

diff --git a/packages/devtools-kit/src/plugins/component.ts b/packages/devtools-kit/src/plugins/component.ts
@@ -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)
@@ -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

diff --git a/packages/devtools-kit/src/state/app-record.ts b/packages/devtools-kit/src/state/app-record.ts
@@ -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>(),
 }
diff --git a/packages/devtools-kit/src/types/app.ts b/packages/devtools-kit/src/types/app.ts
@@ -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: {
@@ -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>