From 6f025990ca5a0754133dcc5ebbf7e6ed747075cb Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 28 Dec 2021 22:07:38 +0800 Subject: [PATCH 1/3] fix(compiler-ssr): TransitionGroup should inject props --- .../__tests__/ssrComponent.spec.ts | 2 +- .../transforms/ssrTransformTransitionGroup.ts | 39 ++++++++++++++++++- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts index d7ceb0bcb3c..737536f6128 100644 --- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts @@ -313,7 +313,7 @@ describe('ssr: components', () => { test('with static tag', () => { expect( compile( - `
` + `
` ).code ).toMatchInlineSnapshot(` "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\") diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts index 80a26c98a49..12827e09e98 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts @@ -1,5 +1,37 @@ -import { ComponentNode, findProp, NodeTypes } from '@vue/compiler-dom' +import { + ComponentNode, + findProp, + NodeTypes, + createCallExpression, + buildProps, + createTemplateLiteral, + DirectiveNode, + AttributeNode +} from '@vue/compiler-dom' import { processChildren, SSRTransformContext } from '../ssrCodegenTransform' +import { SSR_RENDER_ATTRS } from '../runtimeHelpers' + +function injectProp( + node: ComponentNode, + context: SSRTransformContext, + tag: AttributeNode | DirectiveNode +) { + const { props } = buildProps( + node, + context as any, + node.props.filter(p => p !== tag), + true /* ssr */ + ) + if (props) { + context.pushStatement( + createCallExpression(`_push`, [ + createTemplateLiteral([ + createCallExpression(context.helper(SSR_RENDER_ATTRS), [props]) + ]) + ]) + ) + } +} export function ssrProcessTransitionGroup( node: ComponentNode, @@ -11,6 +43,7 @@ export function ssrProcessTransitionGroup( // dynamic :tag context.pushStringPart(`<`) context.pushStringPart(tag.exp!) + injectProp(node, context, tag) context.pushStringPart(`>`) processChildren( @@ -30,7 +63,9 @@ export function ssrProcessTransitionGroup( context.pushStringPart(`>`) } else { // static tag - context.pushStringPart(`<${tag.value!.content}>`) + context.pushStringPart(`<${tag.value!.content}`) + injectProp(node, context, tag) + context.pushStringPart(`>`) processChildren(node.children, context, false, true) context.pushStringPart(``) } From 2f7c7e6def781eb3b4514c52c44aea499ca0274c Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 29 Dec 2021 17:31:01 +0800 Subject: [PATCH 2/3] chore: improve code --- packages/compiler-ssr/__tests__/ssrComponent.spec.ts | 12 ++++++++---- .../src/transforms/ssrTransformTransitionGroup.ts | 5 +++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts index 737536f6128..2e7e82d5aa0 100644 --- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts @@ -316,10 +316,12 @@ describe('ssr: components', () => { `
` ).code ).toMatchInlineSnapshot(` - "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\") + "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\") return function ssrRender(_ctx, _push, _parent, _attrs) { - _push(\`
    \`) + _push(\`\`) _ssrRenderList(_ctx.list, (i) => { _push(\`
    \`) }) @@ -334,10 +336,12 @@ describe('ssr: components', () => { `
    ` ).code ).toMatchInlineSnapshot(` - "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\") + "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\") return function ssrRender(_ctx, _push, _parent, _attrs) { - _push(\`<\${_ctx.someTag}>\`) + _push(\`<\${_ctx.someTag}\`) + _push(\`\${_ssrRenderAttrs(_attrs)}\`) + _push(\`>\`) _ssrRenderList(_ctx.list, (i) => { _push(\`
    \`) }) diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts index 12827e09e98..949d8fc6b8a 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts @@ -6,7 +6,8 @@ import { buildProps, createTemplateLiteral, DirectiveNode, - AttributeNode + AttributeNode, + createTransformContext } from '@vue/compiler-dom' import { processChildren, SSRTransformContext } from '../ssrCodegenTransform' import { SSR_RENDER_ATTRS } from '../runtimeHelpers' @@ -18,7 +19,7 @@ function injectProp( ) { const { props } = buildProps( node, - context as any, + createTransformContext(context.root, context.options), node.props.filter(p => p !== tag), true /* ssr */ ) From 66d5c888ea7bee366cd338f87f92f36d5d2bed3e Mon Sep 17 00:00:00 2001 From: edison Date: Wed, 29 Dec 2021 14:36:24 +0000 Subject: [PATCH 3/3] chore: rename --- .../__tests__/{ssrPortal.spec.ts => ssrTeleport.spec.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/compiler-ssr/__tests__/{ssrPortal.spec.ts => ssrTeleport.spec.ts} (100%) diff --git a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts b/packages/compiler-ssr/__tests__/ssrTeleport.spec.ts similarity index 100% rename from packages/compiler-ssr/__tests__/ssrPortal.spec.ts rename to packages/compiler-ssr/__tests__/ssrTeleport.spec.ts