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}` const key = `${props.name}_${hashId.value}`
if (nuxtApp.payload.data[key] && !force) { return nuxtApp.payload.data[key] } 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) { if (import.meta.server && import.meta.prerender) {
// Hint to Nitro to prerender the island component // Hint to Nitro to prerender the island component

View File

@ -21,7 +21,7 @@ if (componentIslands) {
revivers.Island = ({ key, params }: any) => { revivers.Island = ({ key, params }: any) => {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
if (!nuxtApp.isHydrating) { 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', responseType: 'json',
...params ? { params } : {} ...params ? { params } : {}
}).then((r) => { }).then((r) => {

View File

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

View File

@ -1675,7 +1675,7 @@ describe('app config', () => {
describe('component islands', () => { describe('component islands', () => {
it('renders components with route', async () => { 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()) { 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'))) 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 () => { 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({ props: JSON.stringify({
count: 3 count: 3
}) })
@ -1716,7 +1716,7 @@ describe('component islands', () => {
}) })
it('render .server async component', async () => { 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({ props: JSON.stringify({
count: 2 count: 2
}) })
@ -1737,7 +1737,7 @@ describe('component islands', () => {
}) })
it('renders pure components', async () => { 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({ props: JSON.stringify({
bool: false, bool: false,
number: 3487, number: 3487,