Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): allow importing server components from #components (#23188)

Browse Source
This commit is contained in:
Daniel Roe 2023-09-13 23:35:53 +01:00 committed by GitHub
parent 95d1f9944d
commit a95fd28725
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/nuxt/src/components/module.ts
View File

@ -38,7 +38,7 @@ export default defineNuxtModule<ComponentsOptions>({
const getComponents: getComponentsT = (mode) => { const getComponents: getComponentsT = (mode) => {
return (mode && mode !== 'all') return (mode && mode !== 'all')
? context.components.filter(c => c.mode === mode || c.mode === 'all') ? context.components.filter(c => c.mode === mode || c.mode === 'all' || (c.mode === 'server' && !context.components.some(otherComponent => otherComponent.mode !== 'server' && otherComponent.pascalName === c.pascalName)))
: context.components : context.components
} }

21
packages/nuxt/src/components/transform.ts
View File

@ -5,12 +5,14 @@ import { createUnimport } from 'unimport'
import { createUnplugin } from 'unplugin' import { createUnplugin } from 'unplugin'
import { parseURL } from 'ufo' import { parseURL } from 'ufo'
import { parseQuery } from 'vue-router' import { parseQuery } from 'vue-router'
import { normalize } from 'pathe' import { normalize, resolve } from 'pathe'
import { distDir } from '../dirs'
import type { getComponentsT } from './module' import type { getComponentsT } from './module'
const COMPONENT_QUERY_RE = /[?&]nuxt_component=/ const COMPONENT_QUERY_RE = /[?&]nuxt_component=/
export function createTransformPlugin (nuxt: Nuxt, getComponents: getComponentsT, mode: 'client' | 'server' | 'all') { export function createTransformPlugin (nuxt: Nuxt, getComponents: getComponentsT, mode: 'client' | 'server' | 'all') {
const serverComponentRuntime = resolve(distDir, 'components/runtime/server-component')
const componentUnimport = createUnimport({ const componentUnimport = createUnimport({
imports: [ imports: [
{ {
@ -25,18 +27,20 @@ export function createTransformPlugin (nuxt: Nuxt, getComponents: getComponentsT
const components = getComponents(mode) const components = getComponents(mode)
return components.flatMap((c): Import[] => { return components.flatMap((c): Import[] => {
const withMode = (mode: string | undefined) => mode const withMode = (mode: string | undefined) => mode
? `${c.filePath}${c.filePath.includes('?') ? '&' : '?'}nuxt_component=${mode}` ? `${c.filePath}${c.filePath.includes('?') ? '&' : '?'}nuxt_component=${mode}&nuxt_component_name=${c.pascalName}`
: c.filePath : c.filePath
const mode = !c._raw && c.mode && ['client', 'server'].includes(c.mode) ? c.mode : undefined
return [ return [
{ {
as: c.pascalName, as: c.pascalName,
from: withMode(c.mode === 'client' ? 'client' : undefined), from: withMode(mode),
name: 'default' name: 'default'
}, },
{ {
as: 'Lazy' + c.pascalName, as: 'Lazy' + c.pascalName,
from: withMode([c.mode === 'client' ? 'client' : '', 'async'].filter(Boolean).join(',')), from: withMode([mode, 'async'].filter(Boolean).join(',')),
name: 'default' name: 'default'
} }
] ]
@ -82,6 +86,15 @@ export function createTransformPlugin (nuxt: Nuxt, getComponents: getComponentsT
].join('\n'), ].join('\n'),
map: null map: null
} }
} else if (mode === 'server' || mode === 'server,async') {
const name = query.nuxt_component_name
return {
code: [
`import { createServerComponent } from ${JSON.stringify(serverComponentRuntime)}`,
`export default createServerComponent(${JSON.stringify(name)})`
].join('\n'),
map: null
}
} else { } else {
throw new Error(`Unknown component mode: ${mode}, this might be an internal bug of Nuxt.`) throw new Error(`Unknown component mode: ${mode}, this might be an internal bug of Nuxt.`)
} }

5
test/fixtures/basic/components/global/ServerComponentGlobal.server.vue vendored Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
Test globally-registered server component
</div>
</template>