Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-24 09:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix behavior in lazy

Browse Source
This commit is contained in:
julien huang 2023-08-19 13:49:56 +02:00
parent 08079eccef
commit 5b767673c6
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/nuxt/src/app/components/nuxt-island.ts
View File

@ -104,14 +104,22 @@ export default defineComponent({
// needs to be non-reactive because we don't want to trigger re-renders // needs to be non-reactive because we don't want to trigger re-renders
// at hydration, we only retrieve props/chunks/teleports from payload. See the reviver at nuxt\src\app\plugins\revive-payload.client.ts // at hydration, we only retrieve props/chunks/teleports from payload. See the reviver at nuxt\src\app\plugins\revive-payload.client.ts
const rawPayload = toRaw(nuxtApp.payload.data)?.[`${props.name}_${hashId.value}`] ?? {} const rawPayload = toRaw(nuxtApp.payload.data)?.[`${props.name}_${hashId.value}`] ?? {
chunks: {},
props: {},
teleports: {}
}
const nonReactivePayload: Pick<NuxtIslandResponse, 'chunks'| 'props' | 'teleports'> = { const nonReactivePayload: Pick<NuxtIslandResponse, 'chunks'| 'props' | 'teleports'> = {
chunks: rawPayload.chunks, chunks: rawPayload.chunks,
props: rawPayload.props, props: rawPayload.props,
teleports: rawPayload.teleports teleports: rawPayload.teleports
} }
const ssrHTML = ref<string>(getFragmentHTML(instance.vnode?.el ?? null).join('')) const ssrHTML = ref<string>('')
if (import.meta.client) {
ssrHTML.value = getFragmentHTML(instance.vnode?.el ?? null).join('')
}
const slotProps = computed(() => getSlotProps(ssrHTML.value)) const slotProps = computed(() => getSlotProps(ssrHTML.value))
const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID()) const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID())
@ -233,12 +241,11 @@ export default defineComponent({
if ((!html.value || error.value) && slots.fallback) { if ((!html.value || error.value) && slots.fallback) {
return [slots.fallback({ error: error.value })] return [slots.fallback({ error: error.value })]
} }
const nodes = [createVNode(Fragment, { const nodes = [createVNode(Fragment, {
key: key.value key: key.value
}, [h(createStaticVNode(html.value, 1))])] }, [h(createStaticVNode(html.value || '<div></div>', 1))])]
if (uid.value && (mounted.value || nuxtApp.isHydrating || import.meta.server)) { if (uid.value && (mounted.value || nuxtApp.isHydrating || import.meta.server) && html.value) {
for (const slot in slots) { for (const slot in slots) {
if (availableSlots.value.includes(slot)) { 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: import.meta.client ? `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-slot-name='${slot}']` : `uid=${uid.value};slot=${slot}` }, {
@ -247,14 +254,14 @@ export default defineComponent({
} }
} }
if (import.meta.server) { if (import.meta.server) {
for (const [id, html] of Object.entries(nonReactivePayload.teleports)) { for (const [id, html] of Object.entries(nonReactivePayload.teleports ?? {})) {
nodes.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, { nodes.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, {
default: () => [createStaticVNode(html, 1)] default: () => [createStaticVNode(html, 1)]
})) }))
} }
} }
if (import.meta.client && canLoadClientComponent.value && html.value.includes('nuxt-ssr-client')) { if (import.meta.client && canLoadClientComponent.value) {
for (const [id, props] of Object.entries(nonReactivePayload.props)) { for (const [id, props] of Object.entries(nonReactivePayload.props ?? {})) {
// @ts-expect-error _ is the component's default export in build chunks // @ts-expect-error _ is the component's default export in build chunks
const component = components!.get(id.split('-')[0])!._ ?? components!.get(id.split('-')[0])! const component = components!.get(id.split('-')[0])!._ ?? components!.get(id.split('-')[0])!
const vnode = createVNode(Teleport, { to: `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-client="${id}"]` }, { const vnode = createVNode(Teleport, { to: `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-client="${id}"]` }, {