Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): add key to .client component placeholders (#20093)

Browse Source
This commit is contained in:
Julien Huang 2023-04-07 10:31:04 +02:00 committed by GitHub
parent a02f69943f
commit b068f79fee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/nuxt/src/app/components/client-only.mjs
View File

@ -1,4 +1,4 @@
import { ref, onMounted, defineComponent, createElementBlock, h, createElementVNode } from 'vue' import { mergeProps, ref, onMounted, defineComponent, createElementBlock, h, createElementVNode } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'ClientOnly', name: 'ClientOnly',
@ -37,7 +37,7 @@ export function createClientOnly (component) {
? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag) ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
: h(res) : h(res)
} else { } else {
return h('div', ctx.$attrs ?? ctx._.attrs) return h('div', mergeProps(ctx.$attrs ?? ctx._.attrs, { key: 'placeholder-key' }))
} }
} }
} else if (clone.template) { } else if (clone.template) {
@ -63,7 +63,7 @@ export function createClientOnly (component) {
? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag) ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
: h(res) : h(res)
} else { } else {
return h('div', ctx.attrs) return h('div', mergeProps(ctx.attrs, { key: 'placeholder-key' }))
} }
} }
}) })

4
test/basic.test.ts
View File

@ -229,6 +229,7 @@ describe('pages', () => {
'.client-only-script-setup', '.client-only-script-setup',
'.no-state' '.no-state'
] ]
// ensure directives are correctly applied // ensure directives are correctly applied
await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isHidden())) await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isHidden()))
.then(results => results.forEach(isHidden => expect(isHidden).toBeTruthy())) .then(results => results.forEach(isHidden => expect(isHidden).toBeTruthy()))
@ -240,6 +241,9 @@ describe('pages', () => {
await Promise.all(visibleSelectors.map(selector => page.locator(selector).innerHTML())) await Promise.all(visibleSelectors.map(selector => page.locator(selector).innerHTML()))
.then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe(''))) .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe('')))
// issue #20061
expect(await page.$eval('.client-only-script-setup', e => getComputedStyle(e).backgroundColor)).toBe('rgb(255, 0, 0)')
// ensure multi-root-node is correctly rendered // ensure multi-root-node is correctly rendered
expect(await page.locator('.multi-root-node-count').innerHTML()).toContain('0') expect(await page.locator('.multi-root-node-count').innerHTML()).toContain('0')
expect(await page.locator('.multi-root-node-button').innerHTML()).toContain('add 1 to count') expect(await page.locator('.multi-root-node-button').innerHTML()).toContain('add 1 to count')

8
test/fixtures/basic/components/client/SetupScript.client.vue vendored
View File

@ -7,7 +7,7 @@ defineExpose({ add })
</script> </script>
<template> <template>
<div> <div class="bg-red">
<div>client only script setup component {{ props.foo }}</div> <div>client only script setup component {{ props.foo }}</div>
<button @click="add"> <button @click="add">
{{ count }} {{ count }}
@ -16,3 +16,9 @@ defineExpose({ add })
<slot name="test" /> <slot name="test" />
</div> </div>
</template> </template>
<style scoped>
.bg-red{
background-color: rgb(255, 0, 0);
}
</style>