This commit is contained in:
julien huang 2023-12-22 23:02:25 +01:00
parent 4dcc48f4e6
commit 6f3406e640
7 changed files with 221 additions and 59 deletions

View File

@ -12,7 +12,7 @@ import { join } from 'pathe'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
import { useRequestEvent } from '../composables/ssr'
import { getFragmentHTML, getSlotProps } from './utils'
// @ts-expect-error virtual file
@ -25,9 +25,9 @@ const SLOTNAME_RE = /nuxt-ssr-slot-name="([^"]*)"/g
const SLOT_FALLBACK_RE = /<div nuxt-slot-fallback-start="([^"]*)"[^>]*><\/div>(((?!<div nuxt-slot-fallback-end[^>]*>)[\s\S])*)<div nuxt-slot-fallback-end[^>]*><\/div>/g
let id = 0
const getId = import.meta.client ? () => (id++).toString() : randomUUID
const getId = () => (id++).toString()
const components = import.meta.client ? new Map<string, Component>() : undefined
const components = new Map<string, Component>()
async function loadComponents (source = '/', paths: Record<string, string>) {
const promises = []
@ -86,10 +86,9 @@ export default defineComponent({
const filteredProps = computed(() => props.props ? Object.fromEntries(Object.entries(props.props).filter(([key]) => !key.startsWith('data-v-'))) : {})
const hashId = computed(() => hash([props.name, filteredProps.value, props.context, props.source]))
const instance = getCurrentInstance()!
const event = useRequestEvent()
// TODO: remove use of `$fetch.raw` when nitro 503 issues on windows dev server are resolved
const eventFetch = import.meta.server ? event.fetch : import.meta.dev ? $fetch.raw : globalThis.fetch
const eventFetch = import.meta.dev ? $fetch.raw : globalThis.fetch
const mounted = ref(false)
onMounted(() => { mounted.value = true })
@ -97,9 +96,7 @@ export default defineComponent({
nuxtApp.payload.data[key] = {
__nuxt_island: {
key,
...(import.meta.server && import.meta.prerender)
? {}
: { params: { ...props.context, props: props.props ? JSON.stringify(props.props) : undefined } },
params: { ...props.context, props: props.props ? JSON.stringify(props.props) : undefined } ,
result: {
chunks: result.chunks,
props: result.props,
@ -120,11 +117,7 @@ export default defineComponent({
teleports: rawPayload.teleports
}
const ssrHTML = ref<string>('')
if (import.meta.client) {
ssrHTML.value = getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || ''
}
const ssrHTML = ref<string>(getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || '')
const slotProps = computed(() => getSlotProps(ssrHTML.value))
const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId())
@ -134,7 +127,7 @@ export default defineComponent({
const currentSlots = Object.keys(slots)
let html = ssrHTML.value
if (import.meta.client && !canLoadClientComponent.value) {
if (!canLoadClientComponent.value) {
for (const [key, value] of Object.entries(nonReactivePayload.teleports || {})) {
html = html.replace(new RegExp(`<div [^>]*nuxt-ssr-client="${key}"[^>]*>`), (full) => {
return full + value
@ -165,24 +158,14 @@ export default defineComponent({
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
nuxtApp.runWithContext(() => prerenderRoutes(url))
}
// TODO: Validate response
// $fetch handles the app.baseURL in dev
const r = await eventFetch(withQuery(((import.meta.dev && import.meta.client) || props.source) ? url : joinURL(config.app.baseURL ?? '', url), {
const r = await eventFetch(withQuery((import.meta.dev || props.source) ? url : joinURL(config.app.baseURL ?? '', url), {
...props.context,
props: props.props ? JSON.stringify(props.props) : undefined
}))
const result = import.meta.server || !import.meta.dev ? await r.json() : (r as FetchResponse<NuxtIslandResponse>)._data
// TODO: support passing on more headers
if (import.meta.server && import.meta.prerender) {
const hints = r.headers.get('x-nitro-prerender')
if (hints) {
appendResponseHeader(event, 'x-nitro-prerender', hints)
}
}
const result = import.meta.dev ? (r as FetchResponse<NuxtIslandResponse>)._data : await r.json()
setPayload(key, result)
return result
}
@ -204,7 +187,7 @@ export default defineComponent({
key.value++
error.value = null
if (selectiveClient && import.meta.client) {
if (selectiveClient) {
if (canLoadClientComponent.value && res.chunks) {
await loadComponents(props.source, res.chunks)
}
@ -213,10 +196,9 @@ export default defineComponent({
nonReactivePayload.teleports = res.teleports
nonReactivePayload.chunks = res.chunks
if (import.meta.client) {
// must await next tick for Teleport to work correctly with static node re-rendering
await nextTick()
}
setUid()
} catch (e) {
error.value = e
@ -233,13 +215,11 @@ export default defineComponent({
})
}
if (import.meta.client) {
watch(props, debounce(() => fetchComponent(), 100))
}
if (import.meta.client && !nuxtApp.isHydrating && props.lazy) {
if (!nuxtApp.isHydrating && props.lazy) {
fetchComponent()
} else if (import.meta.server || !nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
} else if (!nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
await fetchComponent()
} else if (selectiveClient && canLoadClientComponent.value && nonReactivePayload.chunks) {
await loadComponents(props.source, nonReactivePayload.chunks)
@ -253,22 +233,15 @@ export default defineComponent({
key: key.value
}, [h(createStaticVNode(html.value || '<div></div>', 1))])]
if (uid.value && (mounted.value || nuxtApp.isHydrating || import.meta.server) && html.value) {
if (uid.value && (mounted.value || nuxtApp.isHydrating) && html.value) {
for (const slot in slots) {
if (availableSlots.value.includes(slot)) {
nodes.push(createVNode(Teleport, { to: import.meta.client ? `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-slot-name='${slot}']` : `uid=${uid.value};slot=${slot}` }, {
nodes.push(createVNode(Teleport, { to: `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-slot-name='${slot}']` }, {
default: () => (slotProps.value[slot] ?? [undefined]).map((data: any) => slots[slot]?.(data))
}))
}
}
if (import.meta.server) {
for (const [id, html] of Object.entries(nonReactivePayload.teleports ?? {})) {
nodes.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, {
default: () => [createStaticVNode(html, 1)]
}))
}
}
if (selectiveClient && import.meta.client && canLoadClientComponent.value) {
if (selectiveClient && canLoadClientComponent.value) {
for (const [id, props] of Object.entries(nonReactivePayload.props ?? {})) {
const component = components!.get(id.split('-')[0])!
const vnode = createVNode(Teleport, { to: `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-client="${id}"]` }, {

View File

@ -0,0 +1,169 @@
import { Fragment, Teleport, computed, createStaticVNode, createVNode, defineComponent, h, ref, } from 'vue'
import { hash } from 'ohash'
import { appendResponseHeader } from 'h3'
import { useHead } from '@unhead/vue'
import { randomUUID } from 'uncrypto'
import { joinURL, withQuery } from 'ufo'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
import { getSlotProps } from './utils'
// @ts-expect-error virtual file
import { remoteComponentIslands, selectiveClient } from '#build/nuxt.config.mjs'
const pKey = '_islandPromises'
const SSR_UID_RE = /nuxt-ssr-component-uid="([^"]*)"/
const UID_ATTR = /nuxt-ssr-component-uid(="([^"]*)")?/
const SLOTNAME_RE = /nuxt-ssr-slot-name="([^"]*)"/g
export default defineComponent({
name: 'NuxtIsland',
props: {
name: {
type: String,
required: true
},
lazy: Boolean,
props: {
type: Object,
default: () => undefined
},
context: {
type: Object,
default: () => ({})
},
source: {
type: String,
default: () => undefined
},
dangerouslyLoadClientComponents: {
type: Boolean,
default: false
}
},
async setup(props, { slots }) {
const error = ref<unknown>(null)
const config = useRuntimeConfig()
const nuxtApp = useNuxtApp()
const filteredProps = computed(() => props.props ? Object.fromEntries(Object.entries(props.props).filter(([key]) => !key.startsWith('data-v-'))) : {})
const hashId = computed(() => hash([props.name, filteredProps.value, props.context, props.source]))
const event = useRequestEvent()
function setPayload(key: string, result: NuxtIslandResponse) {
nuxtApp.payload.data[key] = {
__nuxt_island: {
key,
...(import.meta.prerender)
? {}
: { params: { ...props.context, props: props.props ? JSON.stringify(props.props) : undefined } },
result: {
chunks: result.chunks,
props: result.props,
teleports: result.teleports
}
},
...result
}
}
const nonReactivePayload: Pick<NuxtIslandResponse, 'chunks' | 'props' | 'teleports'> = {
chunks: {},
props: {},
teleports: {}
}
const ssrHTML = ref<string>('')
const slotProps = computed(() => getSlotProps(ssrHTML.value))
const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID())
const availableSlots = computed(() => [...ssrHTML.value.matchAll(SLOTNAME_RE)].map(m => m[1]))
function setUid() {
uid.value = ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID() as string
}
const cHead = ref<Record<'link' | 'style', Array<Record<string, string>>>>({ link: [], style: [] })
useHead(cHead)
async function _fetchComponent() {
const key = `${props.name}_${hashId.value}`
if (nuxtApp.payload.data[key]?.html) { return nuxtApp.payload.data[key] }
const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}.json`, props.source).href : `/__nuxt_island/${key}.json`
if (import.meta.prerender) {
// Hint to Nitro to prerender the island component
nuxtApp.runWithContext(() => prerenderRoutes(url))
}
// TODO: Validate response
const r = await event.fetch(withQuery((props.source) ? url : joinURL(config.app.baseURL ?? '', url), {
...props.context,
props: props.props ? JSON.stringify(props.props) : undefined
}))
const result = await r.json()
// TODO: support passing on more headers
if (import.meta.prerender) {
const hints = r.headers.get('x-nitro-prerender')
if (hints) {
appendResponseHeader(event, 'x-nitro-prerender', hints)
}
}
setPayload(key, result)
return result
}
async function fetchComponent(force = false) {
nuxtApp[pKey] = nuxtApp[pKey] || {}
if (!nuxtApp[pKey][uid.value]) {
nuxtApp[pKey][uid.value] = _fetchComponent().finally(() => {
delete nuxtApp[pKey]![uid.value]
})
}
try {
const res: NuxtIslandResponse = await nuxtApp[pKey][uid.value]
cHead.value.link = res.head.link
cHead.value.style = res.head.style
ssrHTML.value = res.html.replace(UID_ATTR, () => {
return `nuxt-ssr-component-uid="${randomUUID()}"`
})
nonReactivePayload.teleports = res.teleports
nonReactivePayload.chunks = res.chunks
setUid()
} catch (e) {
error.value = e
}
}
await fetchComponent()
return () => {
if (!ssrHTML.value || error.value) {
return [slots.fallback?.({ error: error.value }) ?? createVNode('div')]
}
const nodes = [createVNode(Fragment, {}, [h(createStaticVNode(ssrHTML.value || '<div></div>', 1))])]
// render slots and teleports
if (uid.value && ssrHTML.value) {
for (const slot in slots) {
if (availableSlots.value.includes(slot)) {
nodes.push(createVNode(Teleport, { to: `uid=${uid.value};slot=${slot}` }, {
default: () => (slotProps.value[slot] ?? [undefined]).map((data: any) => slots[slot]?.(data))
}))
}
}
for (const [id, html] of Object.entries(nonReactivePayload.teleports ?? {})) {
nodes.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, {
default: () => [createStaticVNode(html, 1)]
}))
}
}
return nodes
}
}
})

View File

@ -57,8 +57,9 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
const isServerOnly = !component._raw && component.mode === 'server' &&
!components.some(c => c.pascalName === component.pascalName && c.mode === 'client')
if (isServerOnly) {
imports.add(genImport(`#app/components/nuxt-island.${options.mode}`, 'NuxtIsland'))
imports.add(genImport(serverComponentRuntime, [{ name: 'createServerComponent' }]))
imports.add(`const ${identifier} = createServerComponent(${JSON.stringify(name)})`)
imports.add(`const ${identifier} = createServerComponent(${JSON.stringify(name)}, NuxtIsland)`)
if (!options.experimentalComponentIslands) {
logger.warn(`Standalone server components (\`${name}\`) are not yet supported without enabling \`experimental.componentIslands\`.`)
}

View File

@ -130,11 +130,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({ bundle: 'server'}), { server: true, client: false })
addVitePlugin(() => unpluginClient.vite({ bundle: 'client'}), { server: false, client: true })
addWebpackPlugin(() => unpluginServer.webpack(), { server: true, client: false })
addWebpackPlugin(() => unpluginClient.webpack(), { server: false, client: true })
addWebpackPlugin(() => unpluginServer.webpack({ bundle: 'server'}), { server: true, client: false })
addWebpackPlugin(() => unpluginClient.webpack({ bundle: 'client'}), { server: false, client: true })
// Do not prefetch global components chunks
nuxt.hook('build:manifest', (manifest) => {

View File

@ -1,8 +1,12 @@
import { defineComponent, h, ref } from 'vue'
import NuxtIsland from '#app/components/nuxt-island'
import { DefineComponent, defineComponent, h, ref } from 'vue'
/**
* Since NuxtIsland is split into a server and client file
* we need to pass it as an argument to createServerComponent
* It is normally injected by transform plugins
*/
/*@__NO_SIDE_EFFECTS__*/
export const createServerComponent = (name: string) => {
export const createServerComponent = (name: string, NuxtIsland: DefineComponent) => {
return defineComponent({
name,
inheritAttrs: false,

View File

@ -47,7 +47,7 @@ export function createTransformPlugin (nuxt: Nuxt, getComponents: getComponentsT
})
}
return createUnplugin(() => ({
return createUnplugin(({bundle} : {bundle: 'server'|'client'}) => ({
name: 'nuxt:components:imports',
transformInclude (id) {
id = normalize(id)
@ -88,10 +88,16 @@ export function createTransformPlugin (nuxt: Nuxt, getComponents: getComponentsT
}
} else if (mode === 'server' || mode === 'server,async') {
const name = query.nuxt_component_name
console.log( [
`import NuxtIsland from "#app/components/nuxt-island.${bundle}"`,
`import { createServerComponent } from ${JSON.stringify(serverComponentRuntime)}`,
`export default createServerComponent(${JSON.stringify(name)}, NuxtIsland)`
].join('\n'))
return {
code: [
`import NuxtIsland from "#app/components/nuxt-island.${bundle}"`,
`import { createServerComponent } from ${JSON.stringify(serverComponentRuntime)}`,
`export default createServerComponent(${JSON.stringify(name)})`
`export default createServerComponent(${JSON.stringify(name)}, NuxtIsland)`
].join('\n'),
map: null
}

View File

@ -294,7 +294,16 @@ async function initNuxt (nuxt: Nuxt) {
addComponent({
name: 'NuxtIsland',
priority: 10, // built-in that we do not expect the user to override
filePath: resolve(nuxt.options.appDir, 'components/nuxt-island')
filePath: resolve(nuxt.options.appDir, 'components/nuxt-island.server'),
mode: 'server',
_raw: true
})
addComponent({
name: 'NuxtIsland',
priority: 10, // built-in that we do not expect the user to override
filePath: resolve(nuxt.options.appDir, 'components/nuxt-island.client'),
mode: 'client',
_raw: true
})
if (!nuxt.options.ssr) {