fix(nuxt): use default export for raw components (#25282)

This commit is contained in:
Becem 2024-01-20 21:43:11 +01:00 committed by GitHub
parent 9d1ca7cd88
commit a551b216ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 105 additions and 1 deletions

View File

@ -76,7 +76,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
identifier += '_lazy'
imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
} else {
imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
imports.add(genImport(component.filePath, [{ name: component._raw ? 'default' : component.export, as: identifier }]))
if (isClientOnly) {
imports.add(`const ${identifier}_wrapped = createClientOnly(${identifier})`)

View File

@ -2307,6 +2307,38 @@ function normaliseIslandResult (result: NuxtIslandResponse) {
}
}
describe('import components', () => {
let html = ''
it.sequential('fetch import-components page', async () => {
html = await $fetch('/import-components')
})
it('load default component with mode all', () => {
expect(html).toContain('default-comp-all')
})
it('load default component with mode client', () => {
expect(html).toContain('default-comp-client')
})
it('load default component with mode server', () => {
expect(html).toContain('default-comp-server')
})
it('load named component with mode all', () => {
expect(html).toContain('named-comp-all')
})
it('load named component with mode client', () => {
expect(html).toContain('named-comp-client')
})
it('load named component with mode server', () => {
expect(html).toContain('named-comp-server')
})
})
describe('lazy import components', () => {
let html = ''

View File

@ -0,0 +1,49 @@
import { addComponent, createResolver, defineNuxtModule } from 'nuxt/kit'
export default defineNuxtModule({
meta: {
name: 'import-components'
},
setup () {
const { resolve } = createResolver(import.meta.url)
addComponent({
name: 'DCompClient',
filePath: resolve('./runtime/components'),
mode: 'client',
})
addComponent({
name: 'DCompServer',
filePath: resolve('./runtime/components'),
mode: 'server',
})
addComponent({
name: 'DCompAll',
filePath: resolve('./runtime/components'),
mode: 'all',
})
addComponent({
name: 'NCompClient',
export: 'NComp',
filePath: resolve('./runtime/components'),
mode: 'client',
})
addComponent({
name: 'NCompServer',
export: 'NComp',
filePath: resolve('./runtime/components'),
mode: 'server',
})
addComponent({
name: 'NCompAll',
export: 'NComp',
filePath: resolve('./runtime/components'),
mode: 'all',
})
},
})

View File

@ -0,0 +1,13 @@
import { defineComponent, h } from 'vue'
export default defineComponent({
name: 'DComp',
props: { message: String },
render: (props: any) => h('h1', props.message),
})
export const NComp = defineComponent({
name: 'NComp',
props: { message: String },
render: (props: any) => h('h1', props.message),
})

View File

@ -0,0 +1,10 @@
<template>
<div>
<DCompAll message="default-comp-all" />
<DCompClient message="default-comp-client" />
<DCompServer message="default-comp-server" />
<NCompAll message="named-comp-all" />
<NCompClient message="named-comp-client" />
<NCompServer message="named-comp-server" />
</div>
</template>