Fix SSR hydration mismatches caused by createId function

[markbrockhoff]

This bug is intended to work as a "TODO" to fix this issue once vue 3.5 is out.

Version

1.0.0-beta.0

Description

Some of the onyx components cause hydration mismatches when using server side rendering.
This is caused by the ids generated to e.g. link labels or other aria attributes. At the moment the ids for that are generated using a global counter variable stored inside a IIFE (see packages/headless/src/utils/id.ts). Using a global counter causes issues during SSR as the state of the counter will be preserved on the server across requests while being reset on the client:

The easiest solution to the problem would probably be to wait vor vue 3.5 which should include a new composable called useId(). This composable creates SSR safe unique ids for such usecases. (There is a discussion in progress regarding this issue: vuejs/rfcs#557)

Reproduction steps

Use a SSR framework like e.g. Nuxt Js to render Onyx components on the server and hydrate them on the client.

Confirmations

• I have checked that there is not already a bug report for my issue.
• I confirm that are no sensitive information included in this bug report. e.g. credentials, internal project details (for employees of the Schwarz Group) etc.

[JoCa96]

We will wait for release of 3.5: vuejs/core#11404

[markbrockhoff]

Vue 3.5 is finally out including the new useId composable. So this is no longer blocked ;)

[larsrickert]

Vue 3.5 is finally out including the new useId composable. So this is no longer blocked ;)

I already created a PR (#1844) but unfortunately there is currently a Storybook blocker that we need to wait for before we are able to release the update/fix to Vue 3.5, see #1844 (comment)

[larsrickert]

@markbrockhoff The issue is fixed now with onyx version 1.0.0-beta.42 👍🏼