From 01f5694408d229ecfb7e33df57d2cef69670ce39 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Mon, 3 Feb 2025 13:05:04 +0100
Subject: [PATCH] fix(nuxt): assign slot to be rendered for client components
 (#30768)

---
 packages/nuxt/src/core/runtime/nitro/renderer.ts | 10 +++++-----
 test/basic.test.ts                               |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index 814b8954cc..3f94cddbee 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -674,7 +674,7 @@ function getServerComponentHTML (body: [string, ...string[]]): string {
 
 const SSR_SLOT_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/
 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'] {
   if (!ssrContext.islandContext || !Object.keys(ssrContext.islandContext.slots).length) { return undefined }
@@ -698,21 +698,21 @@ function getClientIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandRespons
     response[clientUid] = {
       ...component,
       html,
-      slots: getComponentSlotTeleport(ssrContext.teleports ?? {}),
+      slots: getComponentSlotTeleport(clientUid, ssrContext.teleports ?? {}),
     }
   }
   return response
 }
 
-function getComponentSlotTeleport (teleports: Record<string, string>) {
+function getComponentSlotTeleport (clientUid: string, teleports: Record<string, string>) {
   const entries = Object.entries(teleports)
   const slots: Record<string, string> = {}
 
   for (const [key, value] of entries) {
     const match = key.match(SSR_CLIENT_SLOT_MARKER)
     if (match) {
-      const [, slot] = match
-      if (!slot) { continue }
+      const [, id, slot] = match
+      if (!slot || clientUid !== id) { continue }
       slots[slot] = value
     }
   }
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 360bfadf9b..6a05e9aa9e 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -1946,6 +1946,7 @@ describe('server components/islands', () => {
     // test islands mounted client side with slot
     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('Sugar Counter')
 
     // test islands wrapped with client-only
     expect(await page.locator('#wrapped-client-only').innerHTML()).toContain('Was router enabled')