From 800de41c90ae44369df0904041d050af4e88bf2e Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@leetchi.com>
Date: Tue, 19 Mar 2024 19:07:24 +0100
Subject: [PATCH 01/10] fix(nuxt): correctly move v-if from slot to wrapper
 component

---
 .../nuxt/src/components/islandsTransform.ts   |  4 +++-
 packages/nuxt/test/islandTransform.test.ts    | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 5d4f452508f9..062bf384d2e1 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -98,10 +98,12 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
               attributes._bind = attributes['v-bind']
               delete attributes['v-bind']
             }
+            const vIf = attributes['v-if']
+            delete attributes['v-if']
             const bindings = getPropsToString(attributes, vfor)
 
             // add the wrapper
-            s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot name="${slotName}" :props="${bindings}">`)
+            s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${vIf ? ` v-if="${vIf}"` : ''} name="${slotName}" :props="${bindings}">`)
             s.appendRight(startingIndex + loc[1].end, '</NuxtTeleportSsrSlot>')
           } else if (options.selectiveClient && ('nuxt-client' in node.attributes || ':nuxt-client' in node.attributes)) {
             hasNuxtClient = true
diff --git a/packages/nuxt/test/islandTransform.test.ts b/packages/nuxt/test/islandTransform.test.ts
index 821e1877d82a..442cee65e372 100644
--- a/packages/nuxt/test/islandTransform.test.ts
+++ b/packages/nuxt/test/islandTransform.test.ts
@@ -183,6 +183,29 @@ describe('islandTransform - server and island components', () => {
             "
       `)
     })
+
+    it('expect v-if to be set in teleport component wrapper', async () => {
+      const result = await viteTransform(`<script setup lang="ts">
+      const foo = true;
+      </script>
+      <template>
+        <slot v-if="foo" />
+      </template>
+      `, 'WithVif.vue', false, true)
+
+      expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
+        "<script setup lang="ts">
+        import { vforToArray as __vforToArray } from '#app/components/utils'
+        import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component'
+        import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'
+              const foo = true;
+              </script>
+              <template>
+                <NuxtTeleportSsrSlot v-if="foo" name="default" :props="undefined"><slot v-if="foo" /></NuxtTeleportSsrSlot>
+              </template>
+              "
+      `)
+    })
   })
 
   describe('nuxt-client', () => {

From 84b560c8a6767bdcb844a4e5f1a333d42d5d635f Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@leetchi.com>
Date: Tue, 19 Mar 2024 19:20:47 +0100
Subject: [PATCH 02/10] perf: remove v-if from slot

---
 packages/nuxt/src/components/islandsTransform.ts | 4 ++++
 packages/nuxt/test/islandTransform.test.ts       | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 062bf384d2e1..a9fa061bbad3 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -104,6 +104,10 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
 
             // add the wrapper
             s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${vIf ? ` v-if="${vIf}"` : ''} name="${slotName}" :props="${bindings}">`)
+            // remove v-if from first tag
+            if (vIf) {
+              s.overwrite(startingIndex + loc[0].start,  startingIndex + loc[0].end, code.slice( startingIndex + loc[0].start,  startingIndex + loc[0].end).replace(`v-if="${vIf}"`, ''))
+            }
             s.appendRight(startingIndex + loc[1].end, '</NuxtTeleportSsrSlot>')
           } else if (options.selectiveClient && ('nuxt-client' in node.attributes || ':nuxt-client' in node.attributes)) {
             hasNuxtClient = true
diff --git a/packages/nuxt/test/islandTransform.test.ts b/packages/nuxt/test/islandTransform.test.ts
index 442cee65e372..d3b7546012e2 100644
--- a/packages/nuxt/test/islandTransform.test.ts
+++ b/packages/nuxt/test/islandTransform.test.ts
@@ -201,7 +201,7 @@ describe('islandTransform - server and island components', () => {
               const foo = true;
               </script>
               <template>
-                <NuxtTeleportSsrSlot v-if="foo" name="default" :props="undefined"><slot v-if="foo" /></NuxtTeleportSsrSlot>
+                <NuxtTeleportSsrSlot v-if="foo" name="default" :props="undefined"><slot  /></NuxtTeleportSsrSlot>
               </template>
               "
       `)

From 72401878c096c4c3658ba20e801aebce8847ab28 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 19 Mar 2024 18:23:23 +0000
Subject: [PATCH 03/10] [autofix.ci] apply automated fixes

---
 packages/nuxt/src/components/islandsTransform.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index a9fa061bbad3..4dcec36a08fa 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -106,7 +106,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
             s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${vIf ? ` v-if="${vIf}"` : ''} name="${slotName}" :props="${bindings}">`)
             // remove v-if from first tag
             if (vIf) {
-              s.overwrite(startingIndex + loc[0].start,  startingIndex + loc[0].end, code.slice( startingIndex + loc[0].start,  startingIndex + loc[0].end).replace(`v-if="${vIf}"`, ''))
+              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, code.slice(startingIndex + loc[0].start, startingIndex + loc[0].end).replace(`v-if="${vIf}"`, ''))
             }
             s.appendRight(startingIndex + loc[1].end, '</NuxtTeleportSsrSlot>')
           } else if (options.selectiveClient && ('nuxt-client' in node.attributes || ':nuxt-client' in node.attributes)) {

From 889a99fc1a055e71a4a5e1bce2d10de4d61610dd Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sat, 23 Mar 2024 18:02:30 +0100
Subject: [PATCH 04/10] fix: add else and else-if directives

---
 .../nuxt/src/components/islandsTransform.ts   | 47 ++++++++++++-------
 packages/nuxt/test/islandTransform.test.ts    | 14 ++++--
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 4dcec36a08fa..47d8baf91d12 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -34,6 +34,7 @@ const HAS_SLOT_OR_CLIENT_RE = /(<slot[^>]*>)|(nuxt-client)/
 const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/
 const NUXTCLIENT_ATTR_RE = /\s:?nuxt-client(="[^"]*")?/g
 const IMPORT_CODE = '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'' + '\nimport NuxtTeleportSsrSlot from \'#app/components/nuxt-teleport-island-slot\''
+const EXTRACTED_ATTRS_RE = /v-(?:if|else-if|else)(="[^"]*")?/g
 
 function wrapWithVForDiv (code: string, vfor: string): string {
   return `<div v-for="${vfor}" style="display: contents;">${code}</div>`
@@ -79,13 +80,6 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
           if (node.name === 'slot') {
             const { attributes, children, loc } = node
 
-            // pass slot fallback to NuxtTeleportSsrSlot fallback
-            if (children.length) {
-              const attrString = Object.entries(attributes).map(([name, value]) => name ? `${name}="${value}" ` : value).join(' ')
-              const slice = code.slice(startingIndex + loc[0].end, startingIndex + loc[1].start).replaceAll(/:?key="[^"]"/g, '')
-              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[1].end, `<slot ${attrString} /><template #fallback>${attributes['v-for'] ? wrapWithVForDiv(slice, attributes['v-for']) : slice}</template>`)
-            }
-
             const slotName = attributes.name ?? 'default'
             let vfor: [string, string] | undefined
             if (attributes['v-for']) {
@@ -95,19 +89,22 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
 
             if (attributes.name) { delete attributes.name }
             if (attributes['v-bind']) {
-              attributes._bind = attributes['v-bind']
-              delete attributes['v-bind']
+              attributes._bind = extractAttributes(attributes, ['v-bind'])['v-bind']
             }
-            const vIf = attributes['v-if']
-            delete attributes['v-if']
+            const teleportAttributes = extractAttributes(attributes, ['v-if', 'v-else-if', 'v-else'])
             const bindings = getPropsToString(attributes, vfor)
-
             // add the wrapper
-            s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${vIf ? ` v-if="${vIf}"` : ''} name="${slotName}" :props="${bindings}">`)
-            // remove v-if from first tag
-            if (vIf) {
-              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, code.slice(startingIndex + loc[0].start, startingIndex + loc[0].end).replace(`v-if="${vIf}"`, ''))
+            s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${attributeToString(teleportAttributes)} name="${slotName}" :props="${bindings}">`)
+            
+            if (children.length) {
+              // pass slot fallback to NuxtTeleportSsrSlot fallback
+              const attrString = attributeToString(attributes)
+              const slice = code.slice(startingIndex + loc[0].end, startingIndex + loc[1].start).replaceAll(/:?key="[^"]"/g, '')
+              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[1].end, `<slot${attrString.replaceAll(EXTRACTED_ATTRS_RE, '')}/><template #fallback>${attributes['v-for'] ? wrapWithVForDiv(slice, attributes['v-for']) : slice}</template>`)
+            } else {
+              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, code.slice(startingIndex + loc[0].start, startingIndex + loc[0].end).replaceAll(EXTRACTED_ATTRS_RE, ''))
             }
+
             s.appendRight(startingIndex + loc[1].end, '</NuxtTeleportSsrSlot>')
           } else if (options.selectiveClient && ('nuxt-client' in node.attributes || ':nuxt-client' in node.attributes)) {
             hasNuxtClient = true
@@ -138,6 +135,24 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
   }
 })
 
+/**
+ * extract attributes from a node
+ */
+function extractAttributes(attributes: Record<string, string>, names: string[]) {
+  const extracted:Record<string, string> = {}
+  for (const name of names) {
+    if (name in attributes) {
+      extracted[name] = attributes[name]
+      delete attributes[name]
+    }
+  }
+  return extracted
+}
+
+function attributeToString(attributes: Record<string, string>) {
+  return Object.entries(attributes).map(([name, value]) => value ? ` ${name}="${value}"` : ` ${name}`).join()
+}
+
 function isBinding (attr: string): boolean {
   return attr.startsWith(':')
 }
diff --git a/packages/nuxt/test/islandTransform.test.ts b/packages/nuxt/test/islandTransform.test.ts
index d3b7546012e2..26f869fff0d2 100644
--- a/packages/nuxt/test/islandTransform.test.ts
+++ b/packages/nuxt/test/islandTransform.test.ts
@@ -99,7 +99,7 @@ describe('islandTransform - server and island components', () => {
       expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
         "<template>
               <div>
-                <NuxtTeleportSsrSlot name="default" :props="[{ some-data: someData }]"><slot :some-data="someData"  /><template #fallback>
+                <NuxtTeleportSsrSlot name="default" :props="[{ some-data: someData }]"><slot :some-data="someData"/><template #fallback>
                   <div>fallback</div>
                 </template></NuxtTeleportSsrSlot>
               </div>
@@ -158,7 +158,7 @@ describe('islandTransform - server and island components', () => {
                     <p>message: {{ message }}</p>
                     <p>Below is the slot I want to be hydrated on the client</p>
                     <div>
-                      <NuxtTeleportSsrSlot name="default" :props="undefined"><slot  /><template #fallback>
+                      <NuxtTeleportSsrSlot name="default" :props="undefined"><slot/><template #fallback>
                         This is the default content of the slot, I should not see this after
                         the client loading has completed.
                       </template></NuxtTeleportSsrSlot>
@@ -184,12 +184,14 @@ describe('islandTransform - server and island components', () => {
       `)
     })
 
-    it('expect v-if to be set in teleport component wrapper', async () => {
+    it('expect v-if/v-else/v-else-if to be set in teleport component wrapper', async () => {
       const result = await viteTransform(`<script setup lang="ts">
       const foo = true;
       </script>
       <template>
-        <slot v-if="foo" />
+      <slot v-if="foo" />
+      <slot v-else-if="test" />
+      <slot v-else />
       </template>
       `, 'WithVif.vue', false, true)
 
@@ -201,7 +203,9 @@ describe('islandTransform - server and island components', () => {
               const foo = true;
               </script>
               <template>
-                <NuxtTeleportSsrSlot v-if="foo" name="default" :props="undefined"><slot  /></NuxtTeleportSsrSlot>
+              <NuxtTeleportSsrSlot v-if="foo" name="default" :props="undefined"><slot  /></NuxtTeleportSsrSlot>
+              <NuxtTeleportSsrSlot v-else-if="test" name="default" :props="undefined"><slot  /></NuxtTeleportSsrSlot>
+              <NuxtTeleportSsrSlot v-else name="default" :props="undefined"><slot  /></NuxtTeleportSsrSlot>
               </template>
               "
       `)

From 8921ed7db2fef8e699f95db2ab914b0961f08c19 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 23 Mar 2024 17:05:04 +0000
Subject: [PATCH 05/10] [autofix.ci] apply automated fixes

---
 packages/nuxt/src/components/islandsTransform.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 47d8baf91d12..1bcea44caa8c 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -95,7 +95,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
             const bindings = getPropsToString(attributes, vfor)
             // add the wrapper
             s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${attributeToString(teleportAttributes)} name="${slotName}" :props="${bindings}">`)
-            
+
             if (children.length) {
               // pass slot fallback to NuxtTeleportSsrSlot fallback
               const attrString = attributeToString(attributes)
@@ -138,7 +138,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
 /**
  * extract attributes from a node
  */
-function extractAttributes(attributes: Record<string, string>, names: string[]) {
+function extractAttributes (attributes: Record<string, string>, names: string[]) {
   const extracted:Record<string, string> = {}
   for (const name of names) {
     if (name in attributes) {
@@ -149,7 +149,7 @@ function extractAttributes(attributes: Record<string, string>, names: string[])
   return extracted
 }
 
-function attributeToString(attributes: Record<string, string>) {
+function attributeToString (attributes: Record<string, string>) {
   return Object.entries(attributes).map(([name, value]) => value ? ` ${name}="${value}"` : ` ${name}`).join()
 }
 

From 9be9380ebec36366466a75b4ead74654e4a2e381 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sat, 23 Mar 2024 21:20:40 +0100
Subject: [PATCH 06/10] fix: fix join()

---
 packages/nuxt/src/components/islandsTransform.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 47d8baf91d12..c093fb9092a5 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -150,7 +150,7 @@ function extractAttributes(attributes: Record<string, string>, names: string[])
 }
 
 function attributeToString(attributes: Record<string, string>) {
-  return Object.entries(attributes).map(([name, value]) => value ? ` ${name}="${value}"` : ` ${name}`).join()
+  return Object.entries(attributes).map(([name, value]) => value ? ` ${name}="${value}"` : ` ${name}`).join('')
 }
 
 function isBinding (attr: string): boolean {

From 576e1a4a8059123f23a18691ee230438cebc9a47 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 23 Mar 2024 20:27:13 +0000
Subject: [PATCH 07/10] [autofix.ci] apply automated fixes

---
 packages/nuxt/src/components/islandsTransform.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index c81d2d503e5c..27f34b38f779 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -149,7 +149,7 @@ function extractAttributes (attributes: Record<string, string>, names: string[])
   return extracted
 }
 
-function attributeToString(attributes: Record<string, string>) {
+function attributeToString (attributes: Record<string, string>) {
   return Object.entries(attributes).map(([name, value]) => value ? ` ${name}="${value}"` : ` ${name}`).join('')
 }
 

From 10646a8d423b87abe2736812f7e9d878ebd3d1f9 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sat, 23 Mar 2024 22:20:50 +0100
Subject: [PATCH 08/10] fix: fix vfor

---
 packages/nuxt/src/components/islandsTransform.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index c81d2d503e5c..f20cdd5b572b 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -81,9 +81,9 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
             const { attributes, children, loc } = node
 
             const slotName = attributes.name ?? 'default'
-            let vfor: [string, string] | undefined
+            let vfor:  string | undefined
             if (attributes['v-for']) {
-              vfor = attributes['v-for'].split(' in ').map((v: string) => v.trim()) as [string, string]
+              vfor = attributes['v-for']
             }
             delete attributes['v-for']
 
@@ -92,7 +92,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
               attributes._bind = extractAttributes(attributes, ['v-bind'])['v-bind']
             }
             const teleportAttributes = extractAttributes(attributes, ['v-if', 'v-else-if', 'v-else'])
-            const bindings = getPropsToString(attributes, vfor)
+            const bindings = getPropsToString(attributes, vfor?.split(' in ').map((v: string) => v.trim()) as [string, string])
             // add the wrapper
             s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportSsrSlot${attributeToString(teleportAttributes)} name="${slotName}" :props="${bindings}">`)
 
@@ -100,7 +100,8 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
               // pass slot fallback to NuxtTeleportSsrSlot fallback
               const attrString = attributeToString(attributes)
               const slice = code.slice(startingIndex + loc[0].end, startingIndex + loc[1].start).replaceAll(/:?key="[^"]"/g, '')
-              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[1].end, `<slot${attrString.replaceAll(EXTRACTED_ATTRS_RE, '')}/><template #fallback>${attributes['v-for'] ? wrapWithVForDiv(slice, attributes['v-for']) : slice}</template>`)
+              debugger
+              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[1].end, `<slot${attrString.replaceAll(EXTRACTED_ATTRS_RE, '')}/><template #fallback>${vfor ? wrapWithVForDiv(slice, vfor) : slice}</template>`)
             } else {
               s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, code.slice(startingIndex + loc[0].start, startingIndex + loc[0].end).replaceAll(EXTRACTED_ATTRS_RE, ''))
             }

From e89a85bb6ea3af15f006f258e303dfcdb1f270e6 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sat, 23 Mar 2024 23:27:21 +0100
Subject: [PATCH 09/10] chore: lint

---
 packages/nuxt/src/components/islandsTransform.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 6b74065a170a..83838414b07c 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -81,7 +81,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
             const { attributes, children, loc } = node
 
             const slotName = attributes.name ?? 'default'
-            let vfor:  string | undefined
+            let vfor: string | undefined
             if (attributes['v-for']) {
               vfor = attributes['v-for']
             }
@@ -100,7 +100,6 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
               // pass slot fallback to NuxtTeleportSsrSlot fallback
               const attrString = attributeToString(attributes)
               const slice = code.slice(startingIndex + loc[0].end, startingIndex + loc[1].start).replaceAll(/:?key="[^"]"/g, '')
-              debugger
               s.overwrite(startingIndex + loc[0].start, startingIndex + loc[1].end, `<slot${attrString.replaceAll(EXTRACTED_ATTRS_RE, '')}/><template #fallback>${vfor ? wrapWithVForDiv(slice, vfor) : slice}</template>`)
             } else {
               s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, code.slice(startingIndex + loc[0].start, startingIndex + loc[0].end).replaceAll(EXTRACTED_ATTRS_RE, ''))

From 92bea574a01b3ee6f8177c0415f3ecf056412b9f Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 24 Mar 2024 11:01:55 +0100
Subject: [PATCH 10/10] fix(nuxt): allow binding with -

Co-authored-by:  Divyansh Singh <brc-dd@users.noreply.github.com>
---
 packages/nuxt/src/components/islandsTransform.ts | 2 +-
 packages/nuxt/test/islandTransform.test.ts       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 83838414b07c..da41e693df70 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -159,7 +159,7 @@ function isBinding (attr: string): boolean {
 
 function getPropsToString (bindings: Record<string, string>, vfor?: [string, string]): string {
   if (Object.keys(bindings).length === 0) { return 'undefined' }
-  const content = Object.entries(bindings).filter(b => b[0] && b[0] !== '_bind').map(([name, value]) => isBinding(name) ? `${name.slice(1)}: ${value}` : `${name}: \`${value}\``).join(',')
+  const content = Object.entries(bindings).filter(b => b[0] && b[0] !== '_bind').map(([name, value]) => isBinding(name) ? `[\`${name.slice(1)}\`]: ${value}` : `[\`${name}\`]: \`${value}\``).join(',')
   const data = bindings._bind ? `mergeProps(${bindings._bind}, { ${content} })` : `{ ${content} }`
   if (!vfor) {
     return `[${data}]`
diff --git a/packages/nuxt/test/islandTransform.test.ts b/packages/nuxt/test/islandTransform.test.ts
index 26f869fff0d2..128d63741d60 100644
--- a/packages/nuxt/test/islandTransform.test.ts
+++ b/packages/nuxt/test/islandTransform.test.ts
@@ -65,8 +65,8 @@ describe('islandTransform - server and island components', () => {
               <div>
                 <NuxtTeleportSsrSlot name="default" :props="undefined"><slot /></NuxtTeleportSsrSlot>
 
-                <NuxtTeleportSsrSlot name="named" :props="[{ some-data: someData }]"><slot name="named" :some-data="someData" /></NuxtTeleportSsrSlot>
-                <NuxtTeleportSsrSlot name="other" :props="[{ some-data: someData }]"><slot
+                <NuxtTeleportSsrSlot name="named" :props="[{ [\`some-data\`]: someData }]"><slot name="named" :some-data="someData" /></NuxtTeleportSsrSlot>
+                <NuxtTeleportSsrSlot name="other" :props="[{ [\`some-data\`]: someData }]"><slot
                   name="other"
                   :some-data="someData"
                 /></NuxtTeleportSsrSlot>
@@ -99,7 +99,7 @@ describe('islandTransform - server and island components', () => {
       expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
         "<template>
               <div>
-                <NuxtTeleportSsrSlot name="default" :props="[{ some-data: someData }]"><slot :some-data="someData"/><template #fallback>
+                <NuxtTeleportSsrSlot name="default" :props="[{ [\`some-data\`]: someData }]"><slot :some-data="someData"/><template #fallback>
                   <div>fallback</div>
                 </template></NuxtTeleportSsrSlot>
               </div>