fix(nuxt): components auto-import for JSX (#22330)

This commit is contained in:
Anthony Fu 2023-07-26 06:30:44 +02:00 committed by GitHub
parent 694f13b18f
commit e3437c67d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 5 deletions

View File

@ -31,7 +31,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
if (include.some(pattern => pattern.test(id))) {
return true
}
return isVue(id, { type: ['template', 'script'] })
return isVue(id, { type: ['template', 'script'] }) || !!id.match(/\.[tj]sx$/)
},
transform (code) {
const components = options.getComponents()

View File

@ -129,11 +129,11 @@ export default defineNuxtModule<ComponentsOptions>({
const unpluginServer = createTransformPlugin(nuxt, getComponents, 'server')
const unpluginClient = createTransformPlugin(nuxt, getComponents, 'client')
addVitePlugin(unpluginServer.vite(), { server: true, client: false })
addVitePlugin(unpluginClient.vite(), { server: false, client: true })
addVitePlugin(() => unpluginServer.vite(), { server: true, client: false })
addVitePlugin(() => unpluginClient.vite(), { server: false, client: true })
addWebpackPlugin(unpluginServer.webpack(), { server: true, client: false })
addWebpackPlugin(unpluginClient.webpack(), { server: false, client: true })
addWebpackPlugin(() => unpluginServer.webpack(), { server: true, client: false })
addWebpackPlugin(() => unpluginClient.webpack(), { server: false, client: true })
// Do not prefetch global components chunks
nuxt.hook('build:manifest', (manifest) => {

View File

@ -105,6 +105,7 @@ describe('pages', () => {
// should import JSX/TSX components with custom elements
expect(html).toContain('TSX component')
expect(html).toContain('<custom-component>custom</custom-component>')
expect(html).toContain('Sugar Counter 12 x 2 = 24')
})
it('respects aliases in page metadata', async () => {

View File

@ -3,6 +3,7 @@ export default defineComponent({
return <div>
TSX component
<custom-component>custom</custom-component>
<SugarCounter multiplier={2} />
</div>
}
})