From: Evan You Date: Mon, 16 Mar 2020 22:24:26 +0000 (-0400) Subject: fix(compiler-ssr): should pass necessary tag names for dynamic v-bind X-Git-Tag: v3.0.0-alpha.9~5 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=a46f3b354d451a857df750a318bd0536338008cd;p=thirdparty%2Fvuejs%2Fcore.git fix(compiler-ssr): should pass necessary tag names for dynamic v-bind --- diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts index c81d6ccb10..a3181f4e66 100644 --- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts @@ -57,13 +57,27 @@ describe('ssr: element', () => { let _temp0 _push(\`\${ _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\") }\`) }" `) }) + + test('should pass tag to custom elements w/ dynamic v-bind', () => { + expect( + compile(``, { + isCustomElement: () => true + }).code + ).toMatchInlineSnapshot(` + "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent) { + _push(\`\`) + }" + `) + }) }) describe('attrs', () => { diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts index a23748a370..d56315d436 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts @@ -60,6 +60,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => { // element // generate the template literal representing the open tag. const openTag: TemplateLiteral['elements'] = [`<${node.tag}`] + // some tags need to be pasesd to runtime for special checks + const needTagForRuntime = + node.tag === 'textarea' || node.tag.indexOf('-') > 0 // v-bind="obj" or v-bind:[key] can potentially overwrite other static // attrs and can affect final rendering result, so when they are present @@ -79,10 +82,12 @@ export const ssrTransformElement: NodeTransform = (node, context) => { // assign the merged props to a temp variable, and check whether // it contains value (if yes, render is as children). const tempId = `_temp${context.temps++}` - propsExp.arguments[0] = createAssignmentExpression( - createSimpleExpression(tempId, false), - props - ) + propsExp.arguments = [ + createAssignmentExpression( + createSimpleExpression(tempId, false), + props + ) + ] const existingText = node.children[0] as TextNode | undefined rawChildrenMap.set( node, @@ -125,6 +130,10 @@ export const ssrTransformElement: NodeTransform = (node, context) => { } } + if (needTagForRuntime) { + propsExp.arguments.push(`"${node.tag}"`) + } + openTag.push(propsExp) } } @@ -234,10 +243,14 @@ export const ssrTransformElement: NodeTransform = (node, context) => { // dynamic key attr // this branch is only encountered for custom directive // transforms that returns properties with dynamic keys + const args: CallExpression['arguments'] = [key, value] + if (needTagForRuntime) { + args.push(`"${node.tag}"`) + } openTag.push( createCallExpression( context.helper(SSR_RENDER_DYNAMIC_ATTR), - [key, value] + args ) ) }