fix(nuxt): handle multi-line slots in islands (#24212)

nuxt · Dec 11, 2023 · c05337e · c05337e
1 parent 57e5400
commit c05337e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
@@ -97,7 +97,7 @@ function isBinding (attr: string): boolean {
 
 function getBindings (bindings: Record<string, string>, vfor?: [string, string]): string {
   if (Object.keys(bindings).length === 0) { return '' }
-  const content = Object.entries(bindings).filter(b => 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 `:nuxt-ssr-slot-data="JSON.stringify([${data}])"`

diff --git a/packages/nuxt/test/islandTransform.test.ts b/packages/nuxt/test/islandTransform.test.ts
@@ -34,11 +34,15 @@ describe('islandTransform - server and island components', () => {
         <slot />
 
         <slot name="named" :some-data="someData" />
+        <slot
+          name="other"
+          :some-data="someData"
+        />
       </div>
       </template>
       <script setup lang="ts">
       const someData = 'some data'
-      
+
       </script>`
       , 'hello.server.vue')
 
@@ -48,12 +52,13 @@ describe('islandTransform - server and island components', () => {
                 <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"default\\" />
 
                 <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"named\\" :nuxt-ssr-slot-data=\\"JSON.stringify([{ some-data: someData }])\\"/>
+                <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"other\\" :nuxt-ssr-slot-data=\\"JSON.stringify([{ some-data: someData }])\\"/>
               </div>
               </template>
               <script setup lang=\\"ts\\">
         import { vforToArray as __vforToArray } from '#app/components/utils'
               const someData = 'some data'
-              
+
               </script>"
       `)
     })
@@ -68,7 +73,7 @@ describe('islandTransform - server and island components', () => {
       </template>
       <script setup lang="ts">
       const someData = 'some data'
-      
+
       </script>`
       , 'hello.server.vue')
 
@@ -83,7 +88,7 @@ describe('islandTransform - server and island components', () => {
               <script setup lang=\\"ts\\">
         import { vforToArray as __vforToArray } from '#app/components/utils'
               const someData = 'some data'
-              
+
               </script>"
       `)
     })
@@ -109,13 +114,13 @@ describe('islandTransform - server and island components', () => {
         </UCard>
       </div>
     </template>
-    
+
     <script setup lang="ts">
     export interface Props {
       count?: number;
     }
     const props = withDefaults(defineProps<Props>(), { count: 0 });
-    
+
     const message = "Hello World";
     </script>
     `
@@ -142,14 +147,14 @@ describe('islandTransform - server and island components', () => {
                 </UCard>
               </div>
             </template>
-            
+
             <script setup lang=\\"ts\\">
         import { vforToArray as __vforToArray } from '#app/components/utils'
             export interface Props {
               count?: number;
             }
             const props = withDefaults(defineProps<Props>(), { count: 0 });
-            
+
             const message = \\"Hello World\\";
             </script>
             "