fix(nuxt): use .json extension for server components (#23802)

This commit is contained in:
Daniel Roe 2023-10-20 16:58:02 +01:00 committed by GitHub
parent 591f4305b8
commit 3d6ab2e4fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 9 deletions

View File

@ -110,7 +110,7 @@ export default defineComponent({
const key = `${props.name}_${hashId.value}`
if (nuxtApp.payload.data[key] && !force) { return nuxtApp.payload.data[key] }
const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}`, props.source).href : `/__nuxt_island/${key}`
const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}.json`, props.source).href : `/__nuxt_island/${key}.json`
if (import.meta.server && import.meta.prerender) {
// Hint to Nitro to prerender the island component

View File

@ -21,7 +21,7 @@ if (componentIslands) {
revivers.Island = ({ key, params }: any) => {
const nuxtApp = useNuxtApp()
if (!nuxtApp.isHydrating) {
nuxtApp.payload.data[key] = nuxtApp.payload.data[key] || $fetch(`/__nuxt_island/${key}`, {
nuxtApp.payload.data[key] = nuxtApp.payload.data[key] || $fetch(`/__nuxt_island/${key}.json`, {
responseType: 'json',
...params ? { params } : {}
}).then((r) => {

View File

@ -176,7 +176,7 @@ async function getIslandContext (event: H3Event): Promise<NuxtIslandContext> {
url = await islandPropCache!.getItem(event.path) as string
}
url = url.substring('/__nuxt_island'.length + 1) || ''
const [componentName, hashId] = url.split('?')[0].split('_')
const [componentName, hashId] = url.split('?')[0].replace(/\.json$/, '').split('_')
// TODO: Validate context
const context = event.method === 'GET' ? getQuery(event) : await readBody(event)
@ -445,8 +445,8 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
}
} satisfies RenderResponse
if (import.meta.prerender) {
await islandCache!.setItem(`/__nuxt_island/${islandContext!.name}_${islandContext!.id}`, response)
await islandPropCache!.setItem(`/__nuxt_island/${islandContext!.name}_${islandContext!.id}`, event.path)
await islandCache!.setItem(`/__nuxt_island/${islandContext!.name}_${islandContext!.id}.json`, response)
await islandPropCache!.setItem(`/__nuxt_island/${islandContext!.name}_${islandContext!.id}.json`, event.path)
}
return response
}

View File

@ -1675,7 +1675,7 @@ describe('app config', () => {
describe('component islands', () => {
it('renders components with route', async () => {
const result: NuxtIslandResponse = await $fetch('/__nuxt_island/RouteComponent?url=/foo')
const result: NuxtIslandResponse = await $fetch('/__nuxt_island/RouteComponent.json?url=/foo')
if (isDev()) {
result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/RouteComponent')))
@ -1695,7 +1695,7 @@ describe('component islands', () => {
})
it('render async component', async () => {
const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/LongAsyncComponent', {
const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/LongAsyncComponent.json', {
props: JSON.stringify({
count: 3
})
@ -1716,7 +1716,7 @@ describe('component islands', () => {
})
it('render .server async component', async () => {
const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/AsyncServerComponent', {
const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/AsyncServerComponent.json', {
props: JSON.stringify({
count: 2
})
@ -1737,7 +1737,7 @@ describe('component islands', () => {
})
it('renders pure components', async () => {
const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/PureComponent', {
const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/PureComponent.json', {
props: JSON.stringify({
bool: false,
number: 3487,