From 15a4a080acb441a5978c7d08f683c27f46f09c06 Mon Sep 17 00:00:00 2001 From: Alexander Lichter Date: Tue, 27 Feb 2024 11:57:26 +0100 Subject: [PATCH] fix(nuxt): produce valid css selector from `useId` (#25969) --- packages/nuxt/src/app/composables/id.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/nuxt/src/app/composables/id.ts b/packages/nuxt/src/app/composables/id.ts index 728ebcf238..c5019b0c2b 100644 --- a/packages/nuxt/src/app/composables/id.ts +++ b/packages/nuxt/src/app/composables/id.ts @@ -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] }