From 8b41d677cf3efe007961e6dbc9f5bb5678c1b0ec Mon Sep 17 00:00:00 2001 From: edison1105 Date: Mon, 1 Jan 2024 09:53:33 +0800 Subject: [PATCH 1/6] fix(ssr): avoid rendering transition-group slot content as a fragment --- packages/server-renderer/src/helpers/ssrRenderSlot.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts index b388e7d1936..501bb794b09 100644 --- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts +++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts @@ -83,6 +83,17 @@ export function ssrRenderSlotInner( } } else { for (let i = 0; i < slotBuffer.length; i++) { + // #9933 + // Although we handle Transition/TransitionGroup in the transform stage + // without rendering them as fragments, the content passed into the slot + // may still be a fragment. + // Therefore, here we need to avoid rendering it as a fragment again. + if ( + transition && + (slotBuffer[i] === '' || slotBuffer[i] === '') + ) { + continue + } push(slotBuffer[i]) } } From 4b757526e5d2199cc8d8db6adf625ccf12416054 Mon Sep 17 00:00:00 2001 From: edison1105 Date: Mon, 1 Jan 2024 10:23:48 +0800 Subject: [PATCH 2/6] test: add test case --- .../server-renderer/__tests__/ssrSlot.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts index 4534630879f..9060e6054db 100644 --- a/packages/server-renderer/__tests__/ssrSlot.spec.ts +++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts @@ -137,4 +137,20 @@ describe('ssr: slot', () => { ), ).toBe(`
foo
`) }) + + // #9933 + test('transition-group slot', async () => { + expect( + await renderToString( + createApp({ + components: { + one: { + template: ``, + }, + }, + template: `

{{i}}

`, + }), + ), + ).toBe(`

1

2

`) + }) }) From 0bbadcfa9ffc921f898b18a3ee9213e96a9462ad Mon Sep 17 00:00:00 2001 From: edison1105 Date: Mon, 1 Jan 2024 17:15:14 +0800 Subject: [PATCH 3/6] chore: improve code --- packages/server-renderer/__tests__/ssrSlot.spec.ts | 4 ++-- packages/server-renderer/src/helpers/ssrRenderSlot.ts | 10 ++++------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts index 9060e6054db..7e2b2247d25 100644 --- a/packages/server-renderer/__tests__/ssrSlot.spec.ts +++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts @@ -145,12 +145,12 @@ describe('ssr: slot', () => { createApp({ components: { one: { - template: ``, + template: ``, }, }, template: `

{{i}}

`, }), ), - ).toBe(`

1

2

`) + ).toBe(`

1

2

`) }) }) diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts index 501bb794b09..6ac66f680c9 100644 --- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts +++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts @@ -83,18 +83,16 @@ export function ssrRenderSlotInner( } } else { for (let i = 0; i < slotBuffer.length; i++) { + const buffer = slotBuffer[i] // #9933 // Although we handle Transition/TransitionGroup in the transform stage - // without rendering them as fragments, the content passed into the slot + // without rendering it as a fragment, the content passed into the slot // may still be a fragment. // Therefore, here we need to avoid rendering it as a fragment again. - if ( - transition && - (slotBuffer[i] === '' || slotBuffer[i] === '') - ) { + if (transition && (buffer === '' || buffer === '')) { continue } - push(slotBuffer[i]) + push(buffer) } } } From c5b95446bb6684dbf2875d39d4297fe2b63ba0a8 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 3 Jan 2024 17:17:23 +0800 Subject: [PATCH 4/6] chore: only remove the outer fragment --- .../src/helpers/ssrRenderSlot.ts | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts index 6ac66f680c9..b3e6972b160 100644 --- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts +++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts @@ -82,17 +82,22 @@ export function ssrRenderSlotInner( fallbackRenderFn() } } else { + // #9933 + // Although we handle Transition/TransitionGroup in the transform stage + // without rendering it as a fragment, the content passed into the slot + // may still be a fragment. + // Therefore, here we need to avoid rendering it as a fragment again. + if ( + transition && + slotBuffer[0] === '' && + slotBuffer[slotBuffer.length - 1] === '' + ) { + slotBuffer.shift() + slotBuffer.pop() + } + for (let i = 0; i < slotBuffer.length; i++) { - const buffer = slotBuffer[i] - // #9933 - // Although we handle Transition/TransitionGroup in the transform stage - // without rendering it as a fragment, the content passed into the slot - // may still be a fragment. - // Therefore, here we need to avoid rendering it as a fragment again. - if (transition && (buffer === '' || buffer === '')) { - continue - } - push(buffer) + push(slotBuffer[i]) } } } From 4e6563f04c05720967477b7212358fd1c06081d6 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 3 Jan 2024 09:18:53 +0000 Subject: [PATCH 5/6] [autofix.ci] apply automated fixes --- packages/sfc-playground/src/App.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue index 1a484cc4801..cadd39f4baa 100644 --- a/packages/sfc-playground/src/App.vue +++ b/packages/sfc-playground/src/App.vue @@ -69,6 +69,9 @@ const sfcOptions: SFCOptions = { }, template: { isProd: useProdMode.value, + compilerOptions: { + isCustomElement: (tag: string) => tag === 'mjx-container', + }, }, } @@ -134,6 +137,12 @@ onMounted(() => { :autoResize="true" :sfcOptions="sfcOptions" :clearConsole="false" + :preview-options="{ + customCode: { + importCode: `import { initCustomFormatter } from 'vue'`, + useCode: `initCustomFormatter()`, + }, + }" /> From c3cbfbbd79e10bbe59606ff4ec3ff8def12f6fa1 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 3 Jan 2024 17:40:53 +0800 Subject: [PATCH 6/6] refactor: avoid mutating slotBuffer --- packages/server-renderer/src/helpers/ssrRenderSlot.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts index b3e6972b160..df088e8929a 100644 --- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts +++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts @@ -87,16 +87,18 @@ export function ssrRenderSlotInner( // without rendering it as a fragment, the content passed into the slot // may still be a fragment. // Therefore, here we need to avoid rendering it as a fragment again. + let start = 0 + let end = slotBuffer.length if ( transition && slotBuffer[0] === '' && - slotBuffer[slotBuffer.length - 1] === '' + slotBuffer[end - 1] === '' ) { - slotBuffer.shift() - slotBuffer.pop() + start++ + end-- } - for (let i = 0; i < slotBuffer.length; i++) { + for (let i = start; i < end; i++) { push(slotBuffer[i]) } }