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

fix(nuxt): assign slot to be rendered for client components (#30768)

Browse Source
This commit is contained in:
Julien Huang 2025-02-03 13:05:04 +01:00 committed by Daniel Roe
parent 31e2570de1
commit 01f5694408
No known key found for this signature in database
GPG Key ID: 3714AB03996F442B
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/nuxt/src/core/runtime/nitro/renderer.ts
View File

@ -674,7 +674,7 @@ function getServerComponentHTML (body: [string, ...string[]]): string {
const SSR_SLOT_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/ const SSR_SLOT_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/
const SSR_CLIENT_TELEPORT_MARKER = /^uid=([^;]*);client=(.*)$/ const SSR_CLIENT_TELEPORT_MARKER = /^uid=([^;]*);client=(.*)$/
const SSR_CLIENT_SLOT_MARKER = /^island-slot=[^;]*;(.*)$/ const SSR_CLIENT_SLOT_MARKER = /^island-slot=([^;]*);(.*)$/
function getSlotIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandResponse['slots'] { function getSlotIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandResponse['slots'] {
if (!ssrContext.islandContext || !Object.keys(ssrContext.islandContext.slots).length) { return undefined } if (!ssrContext.islandContext || !Object.keys(ssrContext.islandContext.slots).length) { return undefined }
@ -698,21 +698,21 @@ function getClientIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandRespons
response[clientUid] = { response[clientUid] = {
...component, ...component,
html, html,
slots: getComponentSlotTeleport(ssrContext.teleports ?? {}), slots: getComponentSlotTeleport(clientUid, ssrContext.teleports ?? {}),
} }
} }
return response return response
} }
function getComponentSlotTeleport (teleports: Record<string, string>) { function getComponentSlotTeleport (clientUid: string, teleports: Record<string, string>) {
const entries = Object.entries(teleports) const entries = Object.entries(teleports)
const slots: Record<string, string> = {} const slots: Record<string, string> = {}
for (const [key, value] of entries) { for (const [key, value] of entries) {
const match = key.match(SSR_CLIENT_SLOT_MARKER) const match = key.match(SSR_CLIENT_SLOT_MARKER)
if (match) { if (match) {
const [, slot] = match const [, id, slot] = match
if (!slot) { continue } if (!slot || clientUid !== id) { continue }
slots[slot] = value slots[slot] = value
} }
} }

1
test/basic.test.ts
View File

@ -1946,6 +1946,7 @@ describe('server components/islands', () => {
// test islands mounted client side with slot // test islands mounted client side with slot
await page.locator('#show-island').click() await page.locator('#show-island').click()
expect(await page.locator('#island-mounted-client-side').innerHTML()).toContain('Interactive testing slot post SSR') expect(await page.locator('#island-mounted-client-side').innerHTML()).toContain('Interactive testing slot post SSR')
expect(await page.locator('#island-mounted-client-side').innerHTML()).toContain('Sugar Counter')
// test islands wrapped with client-only // test islands wrapped with client-only
expect(await page.locator('#wrapped-client-only').innerHTML()).toContain('Was router enabled') expect(await page.locator('#wrapped-client-only').innerHTML()).toContain('Was router enabled')