From cf9b135123b1d49ea62e816ab555f9df755ff1b2 Mon Sep 17 00:00:00 2001 From: baiwusanyu <740132583@qq.com> Date: Fri, 20 Jan 2023 11:41:02 +0800 Subject: [PATCH 1/4] fix(compiler-ssr): TransitionGroup owns style-scoped properties on SSR --- .../src/transforms/ssrTransformTransitionGroup.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts index 00b0d9dd45a..80f75c3f3a9 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts @@ -18,6 +18,7 @@ const wipMap = new WeakMap() interface WIPEntry { tag: AttributeNode | DirectiveNode propsExp: string | JSChildNode | null + scopeId: string | null } // phase 1: build props @@ -45,7 +46,8 @@ export function ssrTransformTransitionGroup( } wipMap.set(node, { tag, - propsExp + propsExp, + scopeId: context.scopeId || null }) } } @@ -58,7 +60,7 @@ export function ssrProcessTransitionGroup( ) { const entry = wipMap.get(node) if (entry) { - const { tag, propsExp } = entry + const { tag, propsExp, scopeId } = entry if (tag.type === NodeTypes.DIRECTIVE) { // dynamic :tag context.pushStringPart(`<`) @@ -66,6 +68,9 @@ export function ssrProcessTransitionGroup( if (propsExp) { context.pushStringPart(propsExp) } + if (scopeId) { + context.pushStringPart(scopeId) + } context.pushStringPart(`>`) processChildren( @@ -89,6 +94,9 @@ export function ssrProcessTransitionGroup( if (propsExp) { context.pushStringPart(propsExp) } + if (scopeId) { + context.pushStringPart(scopeId) + } context.pushStringPart(`>`) processChildren(node, context, false, true) context.pushStringPart(``) From 9bffcc60b5de661bc9159a3708600dd1eaf7b2ec Mon Sep 17 00:00:00 2001 From: baiwusanyu <740132583@qq.com> Date: Fri, 20 Jan 2023 12:00:39 +0800 Subject: [PATCH 2/4] fix(compiler-ssr): added unit test --- .../compiler-ssr/__tests__/ssrScopeId.spec.ts | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts index 3445a84fda9..5e25ee8edc7 100644 --- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts @@ -124,4 +124,48 @@ describe('ssr: scopeId', () => { }" `) }) + + // #7554 + test('scopeId is correctly transform to scope attribute of transition-group ', () => { + expect( + compile( + `hello`, + { + scopeId, + mode: 'module' + } + ).code + ).toMatchInlineSnapshot(` + "import { mergeProps as _mergeProps } from "vue" + import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer" + + export function ssrRender(_ctx, _push, _parent, _attrs) { + _push(\`hello\`) + }" + `) + + // with dynamic tag + expect( + compile( + `hello`, + { + scopeId, + mode: 'module' + } + ).code + ).toMatchInlineSnapshot(` + "import { mergeProps as _mergeProps } from "vue" + import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer" + + export function ssrRender(_ctx, _push, _parent, _attrs) { + _push(\`<\${ + _ctx.someTag + }\${ + _ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs)) + }data-v-xxxxxxx>hello\`) + }" + `) + }) }) From 02a146acf4aa29b69dc9947df995cf3cca0438d3 Mon Sep 17 00:00:00 2001 From: baiwusanyu <740132583@qq.com> Date: Sat, 4 Feb 2023 19:20:13 +0800 Subject: [PATCH 3/4] update unit test --- .../compiler-ssr/__tests__/ssrScopeId.spec.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts index 5e25ee8edc7..194f21e8fb5 100644 --- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts @@ -136,13 +136,12 @@ describe('ssr: scopeId', () => { } ).code ).toMatchInlineSnapshot(` - "import { mergeProps as _mergeProps } from "vue" - import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer" - + "import { mergeProps as _mergeProps } from \\"vue\\" + import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\" + export function ssrRender(_ctx, _push, _parent, _attrs) { - _push(\`hello\`) - }" - `) + _push(\`hello\`) + }"`) // with dynamic tag expect( @@ -154,14 +153,14 @@ describe('ssr: scopeId', () => { } ).code ).toMatchInlineSnapshot(` - "import { mergeProps as _mergeProps } from "vue" - import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer" + "import { mergeProps as _mergeProps } from \\"vue\\" + import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\" export function ssrRender(_ctx, _push, _parent, _attrs) { _push(\`<\${ _ctx.someTag }\${ - _ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs)) + _ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs)) }data-v-xxxxxxx>hello\`) From ec4045f21dda69ac8b61709d6840cb63b5fbb93c Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 20 Oct 2023 16:17:47 +0800 Subject: [PATCH 4/4] fix: ensure space before scope id --- packages/compiler-ssr/__tests__/ssrScopeId.spec.ts | 9 +++++---- .../src/transforms/ssrTransformTransitionGroup.ts | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts index 194f21e8fb5..1be6a2c180c 100644 --- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts @@ -138,10 +138,11 @@ describe('ssr: scopeId', () => { ).toMatchInlineSnapshot(` "import { mergeProps as _mergeProps } from \\"vue\\" import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\" - + export function ssrRender(_ctx, _push, _parent, _attrs) { - _push(\`hello\`) - }"`) + _push(\`hello\`) + }" + `) // with dynamic tag expect( @@ -161,7 +162,7 @@ describe('ssr: scopeId', () => { _ctx.someTag }\${ _ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs)) - }data-v-xxxxxxx>hellohello\`) }" diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts index 80f75c3f3a9..b0f96e4dd6c 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts @@ -69,7 +69,7 @@ export function ssrProcessTransitionGroup( context.pushStringPart(propsExp) } if (scopeId) { - context.pushStringPart(scopeId) + context.pushStringPart(` ${scopeId}`) } context.pushStringPart(`>`) @@ -95,7 +95,7 @@ export function ssrProcessTransitionGroup( context.pushStringPart(propsExp) } if (scopeId) { - context.pushStringPart(scopeId) + context.pushStringPart(` ${scopeId}`) } context.pushStringPart(`>`) processChildren(node, context, false, true)