feat: implement useStableId composable and update ExtensionCardPopover to use it

Author: gene9831

packages/components/src/extension-manager/components/ExtensionCardPopover.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance, VNode } from 'vue'
-import { computed, ref, toRef, useId } from 'vue'
+import { computed, ref, toRef } from 'vue'
+import { useStableId } from '../../shared/composables'
 import { useAsChild, useExtensionCardPopoverPosition } from '../composables'
 import type { ExtensionCardPopoverPlacement } from '../internal.type'
 
@@ -19,7 +20,7 @@ const props = withDefaults(
   },
 )
 
-const popoverId = `tr-extension-card-popover-${useId()}`
+const popoverId = `tr-extension-card-popover-${useStableId()}`
 const triggerRef = ref<HTMLElement | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
 const open = ref(false)

packages/components/src/shared/composables/index.ts

@@ -3,5 +3,6 @@ export * from './useAutoScroll'
 export * from './useControllableState'
 export * from './useSenderContentRegistration'
 export * from './useSlotRefs'
+export * from './useStableId'
 export * from './useTeleportTarget'
 export * from './useTouchDevice'

packages/components/src/shared/composables/useStableId.ts

@@ -0,0 +1,25 @@
+import * as Vue from 'vue'
+
+type VueWithUseId = typeof Vue & {
+  useId?: () => string
+}
+
+const appIdCounters = new WeakMap<object, number>()
+
+export function useStableId() {
+  const nativeUseId = (Vue as VueWithUseId).useId
+  if (nativeUseId) {
+    return nativeUseId()
+  }
+
+  const instance = Vue.getCurrentInstance()
+  if (!instance) {
+    return ''
+  }
+
+  const appContext = instance.appContext
+  const id = appIdCounters.get(appContext) ?? 0
+  appIdCounters.set(appContext, id + 1)
+
+  return `tr-${id}`
+}