Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-21 16:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): produce valid css selector from useId (#25969)

Browse Source
This commit is contained in:
Alexander Lichter 2024-02-27 11:57:26 +01:00 committed by GitHub
parent 0591966080
commit 15a4a080ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/nuxt/src/app/composables/id.ts
View File

@ -3,6 +3,7 @@ import { useNuxtApp } from '../nuxt'
import { clientOnlySymbol } from '#app/components/client-only'
const ATTR_KEY = 'data-n-ids'
const SEPARATOR = '-'
/**
* Generate an SSR-friendly unique identifier that can be passed to accessibility attributes.
@ -13,7 +14,8 @@ export function useId (key?: string): string {
throw new TypeError('[nuxt] [useId] key must be a string.')
}
// TODO: implement in composable-keys
key = key.slice(1)
// Make sure key starts with a letter to be a valid selector
key = `n${key.slice(1)}`
const nuxtApp = useNuxtApp()
const instance = getCurrentInstance()
@ -26,11 +28,11 @@ export function useId (key?: string): string {
instance._nuxtIdIndex ||= {}
instance._nuxtIdIndex[key] ||= 0
const instanceIndex = key + ':' + instance._nuxtIdIndex[key]++
const instanceIndex = key + SEPARATOR + instance._nuxtIdIndex[key]++
if (import.meta.server) {
const ids = JSON.parse(instance.attrs[ATTR_KEY] as string | undefined || '{}')
ids[instanceIndex] = key + ':' + nuxtApp._id++
ids[instanceIndex] = key + SEPARATOR + nuxtApp._id++
instance.attrs[ATTR_KEY] = JSON.stringify(ids)
return ids[instanceIndex]
}