From 23bb82af2dbabfb8a9edbb913bb34b576fff1d8c Mon Sep 17 00:00:00 2001 From: liulinboyi <814921718@qq.com> Date: Tue, 24 May 2022 23:05:12 +0800 Subject: [PATCH 1/3] feat: Hydration when Transition with v-if --- .../__tests__/ssrSlotOutlet.spec.ts | 2 +- .../src/transforms/ssrTransformSlotOutlet.ts | 4 +++ .../src/helpers/ssrRenderSlot.ts | 33 +++++++++++-------- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts index 695cfdf7f13..21fbe649c4a 100644 --- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts @@ -123,7 +123,7 @@ describe('ssr: ', () => { "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\") return function ssrRender(_ctx, _push, _parent, _attrs) { - _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent) + _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true) }" `) }) diff --git a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts index 3486f355102..c4bbb6ff620 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts @@ -50,6 +50,10 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => { parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1 ) { method = SSR_RENDER_SLOT_INNER + if (!(context.scopeId && context.slotted !== false)) { + args.push('null') + } + args.push('true') } node.ssrCodegenNode = createCallExpression(context.helper(method), args) diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts index 8f746ec1e47..54deaf266d9 100644 --- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts +++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts @@ -40,7 +40,8 @@ export function ssrRenderSlotInner( fallbackRenderFn: (() => void) | null, push: PushFn, parentComponent: ComponentInternalInstance, - slotScopeId?: string + slotScopeId?: string, + transition?: boolean ) { const slotFn = slots[slotName] if (slotFn) { @@ -59,21 +60,27 @@ export function ssrRenderSlotInner( renderVNodeChildren(push, ret, parentComponent, slotScopeId) } else { // ssr slot. - // check if the slot renders all comments, in which case use the fallback - let isEmptySlot = true - for (let i = 0; i < slotBuffer.length; i++) { - if (!isComment(slotBuffer[i])) { - isEmptySlot = false - break - } - } - if (isEmptySlot) { - if (fallbackRenderFn) { - fallbackRenderFn() + if (transition) { + for (let i = 0; i < slotBuffer.length; i++) { + push(slotBuffer[i]) } } else { + // check if the slot renders all comments, in which case use the fallback + let isEmptySlot = true for (let i = 0; i < slotBuffer.length; i++) { - push(slotBuffer[i]) + if (!isComment(slotBuffer[i])) { + isEmptySlot = false + break + } + } + if (isEmptySlot) { + if (fallbackRenderFn) { + fallbackRenderFn() + } + } else { + for (let i = 0; i < slotBuffer.length; i++) { + push(slotBuffer[i]) + } } } } From 5f2267cee604611392e7ea43173ccdd946043270 Mon Sep 17 00:00:00 2001 From: liulinboyi <814921718@qq.com> Date: Tue, 24 May 2022 23:06:20 +0800 Subject: [PATCH 2/3] test: add test for Hydration when Transition with v-if --- .../server-renderer/__tests__/ssrSlot.spec.ts | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts index baf8f227806..9b93a55c0f0 100644 --- a/packages/server-renderer/__tests__/ssrSlot.spec.ts +++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts @@ -113,4 +113,32 @@ describe('ssr: slot', () => { `
one
two
` ) }) + + test('transition slot', async () => { + expect( + await renderToString( + createApp({ + components: { + one: { + template: `` + } + }, + template: `
foo
` + }) + ) + ).toBe(``) + + expect( + await renderToString( + createApp({ + components: { + one: { + template: `` + } + }, + template: `
foo
` + }) + ) + ).toBe(`
foo
`) + }) }) From fa6afb7e66e5a12ad7707c0e51352c3c32638602 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 6 Jun 2022 04:19:48 -0400 Subject: [PATCH 3/3] Update ssrRenderSlot.ts --- .../src/helpers/ssrRenderSlot.ts | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts index 54deaf266d9..fbe7266b2a1 100644 --- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts +++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts @@ -60,27 +60,25 @@ export function ssrRenderSlotInner( renderVNodeChildren(push, ret, parentComponent, slotScopeId) } else { // ssr slot. + // check if the slot renders all comments, in which case use the fallback + let isEmptySlot = true if (transition) { - for (let i = 0; i < slotBuffer.length; i++) { - push(slotBuffer[i]) - } + isEmptySlot = false } else { - // check if the slot renders all comments, in which case use the fallback - let isEmptySlot = true for (let i = 0; i < slotBuffer.length; i++) { if (!isComment(slotBuffer[i])) { isEmptySlot = false break } } - if (isEmptySlot) { - if (fallbackRenderFn) { - fallbackRenderFn() - } - } else { - for (let i = 0; i < slotBuffer.length; i++) { - push(slotBuffer[i]) - } + } + if (isEmptySlot) { + if (fallbackRenderFn) { + fallbackRenderFn() + } + } else { + for (let i = 0; i < slotBuffer.length; i++) { + push(slotBuffer[i]) } } }