search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

use native `useId` from Vue.js 3.5 when available #3458

Closed P4sca1 closed 3 weeks ago

P4sca1 commented 3 weeks ago

https://github.com/tailwindlabs/headlessui/discussions/3457

Vue 3.5 added a native SSR-safe useId function. This PR updates the code to use that function by default if no custom function has been provided.

Theoretically this is a breaking change, as versions prior to Vue 3.5 are no longer supported. However, package managers should emit a warning or an error when the peer dependency range is no longer satisfied.

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ❌ Failed (Inspect) Sep 6, 2024 9:58am
vercel[bot] commented 3 weeks ago

@P4sca1 is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

RobinMalfait commented 3 weeks ago

Internal note: Vercel previews are currently failing because they are setup for the main branch where playgrounds live in a different location.

P4sca1 commented 3 weeks ago

Thank you for the change to keep support for older versions of vue! @RobinMalfait

I am wondering if there is still a use case for providing a custom id generator with versions > 3.5? Right now it is no longer possible to provide a custom generator when Vue.useId exists.

RobinMalfait commented 3 weeks ago

@P4sca1 the changes were introduced to prevent a breaking change. Thanks for the initial work on this!

Regarding your question, I think the only real use case for providing custom useId implementations was if our fallback implementation was not good enough. But if you are on a newer version of Vue where the useId hook is available, I don't see an immediate use case for providing a custom implementation.

Worst case, for testing reasons, you could mock the useId at that point for example.

/cc @thecrypticace worked on this initially, so he might have some better insights on this.

thecrypticace commented 3 weeks ago

I suspect the answer to that question is no. The reason we added support for it in the first place was that Nuxt had its own useId function before Vue did. And the intent on our side was always to migrate to the native useId once it was available.

With Vue v3.5 Nuxt is now using the native useId that's built in so the need for custom useId hooks is probably limited to pre-Vue 3.5 projects: https://github.com/nuxt/nuxt/pull/28285/files#diff-56fa79b2b6b6d55801e7e885441f1ee98891adfbbe7d11844721dcfdc2dc5583

RobinMalfait commented 3 weeks ago

Thank you @P4sca1, this has been released in the latest version.

DamianGlowala commented 2 weeks ago

What about insiders version?