feat(utils): inject getId to allow for custom id generation

packages/bootstrap-vue-next/src/BootstrapVue.ts

@@ -2,6 +2,7 @@ import type {Plugin} from 'vue'
 import type {BootstrapVueOptions, ComponentType, DirectiveType} from './types'
 import toastPlugin from './plugins/toastPlugin'
 import breadcrumbPlugin from './plugins/breadcrumbPlugin'
+import idPlugin from './plugins/idPlugin'
 import modalControllerPlugin from './plugins/modalControllerPlugin'
 import modalManagerPlugin from './plugins/modalManagerPlugin'
 import rtlPlugin from './plugins/rtlPlugin'
@@ -146,6 +147,9 @@ export const createBootstrap = ({
     if (plugins?.breadcrumb ?? true === true) {
       app.use(breadcrumbPlugin)
     }
+    if ((plugins?.id ?? true === true) || typeof plugins.id === 'object') {
+      app.use(idPlugin, plugins)
+    }
     if (plugins?.modalController ?? true === true) {
       app.use(modalControllerPlugin)
     }

packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue

@@ -1,14 +1,7 @@
 <script lang="ts">
 import {useAriaInvalid, useId, useStateClass} from '../../composables'
 import {RX_SPACE_SPLIT} from '../../constants/regex'
-import {
-  attemptFocus,
-  getId,
-  IS_BROWSER,
-  isVisible,
-  normalizeSlot,
-  suffixPropName,
-} from '../../utils'
+import {attemptFocus, IS_BROWSER, isVisible, normalizeSlot, suffixPropName} from '../../utils'
 import {computed, defineComponent, h, nextTick, onMounted, type PropType, ref, watch} from 'vue'
 import BCol from '../BCol.vue'
 import BFormInvalidFeedback from '../BForm/BFormInvalidFeedback.vue'
@@ -224,7 +217,7 @@ export default defineComponent({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let $label: any = null
     const labelContent = normalizeSlot(SLOT_NAME_LABEL, {}, slots) || props.label
-    const labelId = labelContent ? getId('_BV_label_') : null
+    const labelId = labelContent ? useId(undefined, '_BV_label_').value : null
 
     if (labelContent || this.isHorizontal) {
       const labelTag: 'legend' | 'label' = isFieldset ? 'legend' : 'label'
@@ -277,7 +270,9 @@ export default defineComponent({
     let $invalidFeedback = null
     const invalidFeedbackContent =
       normalizeSlot(SLOT_NAME_INVALID_FEEDBACK, {}, slots) || this.invalidFeedback
-    const invalidFeedbackId = invalidFeedbackContent ? getId('_BV_feedback_invalid_') : undefined
+    const invalidFeedbackId = invalidFeedbackContent
+      ? useId(undefined, '_BV_feedback_invalid_').value
+      : undefined
 
     if (invalidFeedbackContent) {
       $invalidFeedback = h(
@@ -295,7 +290,9 @@ export default defineComponent({
     let $validFeedback = null
     const validFeedbackContent =
       normalizeSlot(SLOT_NAME_VALID_FEEDBACK, {}, slots) || this.validFeedback
-    const validFeedbackId = validFeedbackContent ? getId('_BV_feedback_valid_') : undefined
+    const validFeedbackId = validFeedbackContent
+      ? useId(undefined, '_BV_feedback_valid_').value
+      : undefined
 
     if (validFeedbackContent) {
       $validFeedback = h(
@@ -313,7 +310,9 @@ export default defineComponent({
 
     let $description = null
     const descriptionContent = normalizeSlot(SLOT_NAME_DESCRIPTION, {}, slots) || this.description
-    const descriptionId = descriptionContent ? getId('_BV_description_') : undefined
+    const descriptionId = descriptionContent
+      ? useId(undefined, '_BV_description_').value
+      : undefined
     if (descriptionContent) {
       $description = h(
         BFormText,

packages/bootstrap-vue-next/src/composables/index.ts

@@ -16,7 +16,7 @@ export {
 } from './useFormCheck'
 export {default as useFormInput} from './useFormInput'
 export {default as useFormSelect} from './useFormSelect'
-export {default as useId} from './useId'
+export {default as useId, getId} from './useId'
 export {default as useManualTransition} from './useManualTransition'
 export {default as useModal} from './useModal'
 export {default as useModalController} from './useModalController'

packages/bootstrap-vue-next/src/composables/useId.ts

@@ -1,5 +1,10 @@
-import {getId} from '../utils'
-import {computed, type ComputedRef, type MaybeRefOrGetter, toValue} from 'vue'
+import {idPluginKey} from '../utils'
+import {computed, type ComputedRef, inject, type MaybeRefOrGetter, toValue} from 'vue'
 
 export default (id?: MaybeRefOrGetter<string | undefined>, suffix?: string): ComputedRef<string> =>
   computed(() => toValue(id) || getId(suffix))
+
+export const getId = (suffix = '') => {
+  const getId = inject(idPluginKey, () => Math.random().toString().slice(2, 8))
+  return `__BVID__${getId()}___BV_${suffix}__`
+}

packages/bootstrap-vue-next/src/plugins/idPlugin.ts

@@ -0,0 +1,11 @@
+import {type Plugin} from 'vue'
+import type {BootstrapVueOptions} from '../types'
+import {idPluginKey} from '../utils'
+
+export default {
+  install(app, options: BootstrapVueOptions['plugins']) {
+    if (options?.id instanceof Object && typeof options.id.getId === 'function') {
+      app.provide(idPluginKey, options.id.getId)
+    }
+  },
+} satisfies Plugin

packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts

@@ -19,6 +19,23 @@ export interface BootstrapVueOptions {
      * @default true
      */
     breadcrumb?: boolean
+    /**
+     * @default true
+     */
+    id?:
+      | boolean
+      /**
+       * This function is allows users to provide a custom id generator
+       * as a workaround for the lack of stable SSR IDs in Vue 3.x
+       *
+       * This lets the Nuxt module swap in the Nuxt `useId` function
+       * which is stable across SSR and client.
+       *
+       * @default undefined
+       */
+      | {
+          getId?: () => string
+        }
     /**
      * @default true
      */

packages/bootstrap-vue-next/src/utils/index.ts

@@ -7,7 +7,6 @@ export {default as formatItem} from './formatItem'
 export {default as getBreakpointProps} from './getBreakpointProps'
 export {default as getClasses} from './getClasses'
 export {default as getElement} from './getElement'
-export {default as getId} from './getId'
 export {default as getSlotElements} from './getSlotElements'
 export {default as getTableFieldHeadLabel} from './getTableFieldHeadLabel'
 export {default as isLink} from './isLink'

packages/bootstrap-vue-next/src/utils/keys.ts

@@ -203,3 +203,5 @@ export const modalManagerPluginKey: InjectionKey<{
   pushRegistry: (modal: Readonly<ComponentInternalInstance>) => void
   removeRegistry: (modal: Readonly<ComponentInternalInstance>) => void
 }> = Symbol('modalManagerPlugin')
+
+export const idPluginKey: InjectionKey<() => string> = Symbol('idPluginKey')

packages/bootstrap-vue-next/tests/composables/idPlugin.spec.ts

@@ -0,0 +1,100 @@
+/* eslint-disable vue/one-component-per-file */
+import {mount} from '@vue/test-utils'
+import {getId} from '../../src/composables'
+import {describe, expect, it} from 'vitest'
+import {defineComponent, h, provide} from 'vue'
+import {useSetup} from '../utils'
+import {idPluginKey} from '../../src/utils'
+
+describe('getId', () => {
+  it('returns something', () => {
+    useSetup(() => {
+      const value = getId()
+      expect(value).toBeDefined()
+    })
+  })
+
+  it('returns a string', () => {
+    useSetup(() => {
+      const value = getId()
+      expect(typeof value === 'string').toBe(true)
+    })
+  })
+
+  it('string contains __BVID__', () => {
+    useSetup(() => {
+      const value = getId()
+      expect(value).toContain('__BVID__')
+    })
+  })
+
+  it('string contains ___BV_{suffix}__ when suffix is defined', () => {
+    useSetup(() => {
+      const value = getId('foobar')
+      expect(value).toContain('___BV_foobar__')
+    })
+  })
+
+  it('string contains ___BV___ when not suffix', () => {
+    useSetup(() => {
+      const value = getId()
+      expect(value).toContain('___BV___')
+    })
+  })
+})
+
+export function useSetupWithProvideGetId<V>(setup: () => V) {
+  const Comp = defineComponent({
+    setup,
+    render() {
+      return h('div')
+    },
+  })
+
+  const Provider = defineComponent({
+    components: {Comp},
+    setup() {
+      provide(idPluginKey, () => `${Math.random().toString().slice(2, 8)}__PROVIDED__`)
+    },
+    template: '<Comp />',
+  })
+
+  return mount(Provider, {slots: {default: Comp}})
+}
+
+describe('provideGetId', () => {
+  it('returns something', () => {
+    useSetupWithProvideGetId(() => {
+      const value = getId()
+      expect(value).toBeDefined()
+    })
+  })
+
+  it('returns a string', () => {
+    useSetupWithProvideGetId(() => {
+      const value = getId()
+      expect(typeof value === 'string').toBe(true)
+    })
+  })
+
+  it('string contains __PROVIDED__', () => {
+    useSetupWithProvideGetId(() => {
+      const value = getId()
+      expect(value).toContain('__PROVIDED__')
+    })
+  })
+
+  it('string contains __PROVIDED_____BV_{suffix}__ when suffix is defined', () => {
+    useSetupWithProvideGetId(() => {
+      const value = getId('foobar')
+      expect(value).toContain('__PROVIDED_____BV_foobar__')
+    })
+  })
+
+  it('string contains __PROVIDED_____BV___ when not suffix', () => {
+    useSetupWithProvideGetId(() => {
+      const value = getId()
+      expect(value).toContain('__PROVIDED_____BV___')
+    })
+  })
+})

packages/bootstrap-vue-next/tests/composables/useId.spec.ts

@@ -1,21 +1,28 @@
+import {useSetup} from '../../tests/utils'
 import {useId} from '../../src/composables'
 import {describe, expect, it} from 'vitest'
 import {reactive} from 'vue'
 
 describe('useId blackbox test', () => {
   it('returns id value when id is defined', () => {
-    const props = reactive({id: 'foo'})
-    const value = useId(() => props.id)
-    expect(value.value).toBe('foo')
+    useSetup(() => {
+      const props = reactive({id: 'foo'})
+      const value = useId(() => props.id)
+      expect(value.value).toBe('foo')
+    })
   })
 
   it('returns something when id is undefined', () => {
-    const value = useId()
-    expect(value.value).toBeDefined()
+    useSetup(() => {
+      const value = useId()
+      expect(value.value).toBeDefined()
+    })
   })
 
   it('something returned when undefined contains suffix when suffix', () => {
-    const value = useId(undefined, 'foobar')
-    expect(value.value).toContain('foobar')
+    useSetup(() => {
+      const value = useId(undefined, 'foobar')
+      expect(value.value).toContain('foobar')
+    })
   })
 })

packages/bootstrap-vue-next/tests/utils.ts

@@ -1,3 +1,6 @@
+import {defineComponent, h} from 'vue'
+import {mount} from '@vue/test-utils'
+
 export const createContainer = (tag = 'div'): HTMLElement => {
   const container = document.createElement(tag)
   document.body.appendChild(container)
@@ -7,3 +10,13 @@ export const waitRAF = (): Promise<number> =>
   new Promise((resolve) => requestAnimationFrame(resolve))
 export const asyncTimeout = (timeout: number): Promise<void> =>
   new Promise((resolve) => setTimeout(resolve.bind(null), timeout))
+export const useSetup = <V>(setup: () => V) => {
+  const Comp = defineComponent({
+    setup,
+    render() {
+      return h('div')
+    },
+  })
+
+  return mount(Comp)
+}

packages/nuxt/src/runtime/createBootstrap.ts

@@ -1,11 +1,16 @@
 import {createBootstrap} from 'bootstrap-vue-next'
-import {defineNuxtPlugin} from '#imports'
+import {defineNuxtPlugin, useId} from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(
     createBootstrap({
       components: false,
       directives: false,
+      plugins: {
+        id: {
+          getId: () => useId().replace(':', '_'),
+        },
+      },
     })
   )
 })