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.

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

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from Apr 14, 2024

Conversation

reubns
Copy link
Contributor

@reubns reubns commented Apr 3, 2024

Describe the PR

Warning

Once Vue 3.5 is released, this PR will (likely) become obsolete in favour of the official method for generating IDs. If it is acceptable to wait for the 3.5 release, please close this PR.

Closes: #1730

This PR allows users to provide their own implementation for generating IDs. For example in Nuxt >= 3.10, to use SSR-friendly IDs.

// app.vue
provideGetId(() => useId())

Note

The Nuxt implementation above doesn't work for components with inheritAttrs: false due to the implementation of Nuxt's useId. For example, BFormRadio.

Credits: tailwindlabs/headlessui#2959 radix-vue/radix-vue#718

Small replication

Issue is described in #1730

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix 馃悰 - fix(...)
  • Feature - feat(...)
  • ARIA accessibility - fix(...)
  • Documentation update - docs(...)
  • Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

Copy link

stackblitz bot commented Apr 3, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

packages/bootstrap-vue-next/src/utils/getId.ts Outdated Show resolved Hide resolved
packages/bootstrap-vue-next/src/utils/getId.ts Outdated Show resolved Hide resolved
@xvaara
Copy link
Contributor

xvaara commented Apr 4, 2024

Tested with nuxt kitchensink (all the playground components) and most of the hydration mismatches are gone :)

@sebbayer sebbayer mentioned this pull request Apr 5, 2024
6 tasks
@VividLemon VividLemon merged commit c9e60f5 into bootstrap-vue-next:main Apr 14, 2024
3 checks passed
@github-actions github-actions bot mentioned this pull request Apr 14, 2024
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Apr 16, 2024
* upstream/main:
  ci: add workflow dispatch to docs deploy
  chore: release main
  fix(BFormCheckbox): Prevent empty string being cast to true fixes bootstrap-vue-next#1822
  feat(utils): inject getId to allow for custom id generation (bootstrap-vue-next#1836)
  BTable multisort (bootstrap-vue-next#1842)
  fix(BFormSelect): array of numbers or dates (bootstrap-vue-next#1839)
  fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover (bootstrap-vue-next#1837)
  fix(BFormFile): add properties placement and browser as in BootstrapVue (bootstrap-vue-next#1797)
  feat(BCheckbox)!: Implement reverse and without label (bootstrap-vue-next#1825)
  docs: Add documentation and parity section to contributing.md (bootstrap-vue-next#1834)
  vscode vue typescript plugin is now depricated and included in volar
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Apr 17, 2024
* upstream/main:
  update vue deps (bootstrap-vue-next#1850)
  fix(BPopover): fix injection out of setup context. (bootstrap-vue-next#1848)
  ci: add workflow dispatch to docs deploy
  chore: release main
  fix(BFormCheckbox): Prevent empty string being cast to true fixes bootstrap-vue-next#1822
  feat(utils): inject getId to allow for custom id generation (bootstrap-vue-next#1836)
  BTable multisort (bootstrap-vue-next#1842)
  fix(BFormSelect): array of numbers or dates (bootstrap-vue-next#1839)
  fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover (bootstrap-vue-next#1837)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Default component ids are not SSR friendly
3 participants