root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(useId): make generated IDs selector compatible 

close #11828
This commit is contained in:
Evan You 2024-09-06 08:46:47 +08:00
parent 72263fa12e
commit babfb4cbcb
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/runtime-core/__tests__/helpers/useId.spec.ts
View File

@ -59,7 +59,7 @@ describe('useId', () => {
const app = createApp(BasicComponentWithUseId) const app = createApp(BasicComponentWithUseId)
return [app, []] return [app, []]
}), }),
).toBe('v:0 v:1') ).toBe('v-0 v-1')
}) })
test('with config.idPrefix', async () => { test('with config.idPrefix', async () => {
@ -69,7 +69,7 @@ describe('useId', () => {
app.config.idPrefix = 'foo' app.config.idPrefix = 'foo'
return [app, []] return [app, []]
}), }),
).toBe('foo:0 foo:1') ).toBe('foo-0 foo-1')
}) })
test('async component', async () => { test('async component', async () => {
@ -92,9 +92,9 @@ describe('useId', () => {
} }
const expected = const expected =
'v:0 v:1 ' + // root 'v-0 v-1 ' + // root
'v:0-0 v:0-1 ' + // inside first async subtree 'v-0-0 v-0-1 ' + // inside first async subtree
'v:1-0 v:1-1' // inside second async subtree 'v-1-0 v-1-1' // inside second async subtree
// assert different async resolution order does not affect id stable-ness // assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory(0, 16))).toBe(expected) expect(await getOutput(() => factory(0, 16))).toBe(expected)
expect(await getOutput(() => factory(16, 0))).toBe(expected) expect(await getOutput(() => factory(16, 0))).toBe(expected)
@ -137,9 +137,9 @@ describe('useId', () => {
} }
const expected = const expected =
'v:0 v:1 ' + // root 'v-0 v-1 ' + // root
'v:0-0 v:0-1 ' + // inside first async subtree 'v-0-0 v-0-1 ' + // inside first async subtree
'v:1-0 v:1-1' // inside second async subtree 'v-1-0 v-1-1' // inside second async subtree
// assert different async resolution order does not affect id stable-ness // assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory(0, 16))).toBe(expected) expect(await getOutput(() => factory(0, 16))).toBe(expected)
expect(await getOutput(() => factory(16, 0))).toBe(expected) expect(await getOutput(() => factory(16, 0))).toBe(expected)
@ -188,9 +188,9 @@ describe('useId', () => {
const expected = const expected =
'<div>' + '<div>' +
'v:0 v:1 ' + // root 'v-0 v-1 ' + // root
'v:0-0 v:0-1 ' + // inside first async subtree 'v-0-0 v-0-1 ' + // inside first async subtree
'v:1-0 v:1-1' + // inside second async subtree 'v-1-0 v-1-1' + // inside second async subtree
'</div>' '</div>'
// assert different async resolution order does not affect id stable-ness // assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory(0, 16))).toBe(expected) expect(await getOutput(() => factory(0, 16))).toBe(expected)
@ -232,10 +232,10 @@ describe('useId', () => {
} }
const expected = const expected =
'v:0 ' + // One 'v-0 ' + // One
'v:0-0 ' + // Two 'v-0-0 ' + // Two
'v:0-0-0 v:0-0-1 ' + // Three + Three nested in Two 'v-0-0-0 v-0-0-1 ' + // Three + Three nested in Two
'v:0-1' // Three after Two 'v-0-1' // Three after Two
// assert different async resolution order does not affect id stable-ness // assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory())).toBe(expected) expect(await getOutput(() => factory())).toBe(expected)
expect(await getOutput(() => factory())).toBe(expected) expect(await getOutput(() => factory())).toBe(expected)
@ -278,8 +278,8 @@ describe('useId', () => {
const expected = const expected =
'<div>' + '<div>' +
'v:0 v:1 ' + // root 'v-0 v-1 ' + // root
'v:0-0-0 v:0-0-1' + // async component inside async setup 'v-0-0-0 v-0-0-1' + // async component inside async setup
'</div>' '</div>'
// assert different async resolution order does not affect id stable-ness // assert different async resolution order does not affect id stable-ness
expect(await getOutput(async () => factory(0, 16))).toBe(expected) expect(await getOutput(async () => factory(0, 16))).toBe(expected)

2
packages/runtime-core/src/helpers/useId.ts
View File

@ -7,7 +7,7 @@ import { warn } from '../warning'
export function useId(): string | undefined { export function useId(): string | undefined {
const i = getCurrentInstance() const i = getCurrentInstance()
if (i) { if (i) {
return (i.appContext.config.idPrefix || 'v') + ':' + i.ids[0] + i.ids[1]++ return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
} else if (__DEV__) { } else if (__DEV__) {
warn( warn(
`useId() is called when there is no active component ` + `useId() is called when there is no active component ` +