Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Nov 9, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/nuxt/src/components/islandsTransform.ts
View file
Open in desktop
Expand Up @@ -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}])"`
Expand Down
21 changes: 13 additions & 8 deletions packages/nuxt/test/islandTransform.test.ts
View file
Open in desktop
Expand Up @@ -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')

Expand All @@ -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>"
`)
})
Expand All @@ -68,7 +73,7 @@ describe('islandTransform - server and island components', () => {
</template>
<script setup lang="ts">
const someData = 'some data'

</script>`
, 'hello.server.vue')

Expand All @@ -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>"
`)
})
Expand All @@ -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>
`
Expand All @@ -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>
"
Expand Down