wip(ssr): use consistent attr key behavior in compiler

diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 6354fd791d8550a1a4d3168dfe88c7a68e5aaa21..b541a9ed9ef8d44e920d6423f688e5f8b15ff62e 100644 (file)
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -24,7 +24,13 @@ import {
   MERGE_PROPS,
   isBindKey
 } from '@vue/compiler-dom'
-import { escapeHtml, isBooleanAttr, isSSRSafeAttrName, NO } from '@vue/shared'
+import {
+  escapeHtml,
+  isBooleanAttr,
+  isSSRSafeAttrName,
+  NO,
+  propsToAttrMap
+} from '@vue/shared'
 import { createSSRCompilerError, SSRErrorCodes } from '../errors'
 import {
   SSR_RENDER_ATTR,
@@ -166,7 +172,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
               for (let j = 0; j < props.length; j++) {
                 const { key, value } = props[j]
                 if (key.type === NodeTypes.SIMPLE_EXPRESSION && key.isStatic) {
-                  const attrName = key.content
+                  let attrName = key.content
                   // static key attr
                   if (attrName === 'class') {
                     openTag.push(
@@ -187,17 +193,21 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                         ))
                       )
                     }
-                  } else if (isBooleanAttr(attrName)) {
-                    openTag.push(
-                      createConditionalExpression(
-                        value,
-                        createSimpleExpression(' ' + attrName, true),
-                        createSimpleExpression('', true),
-                        false /* no newline */
-                      )
-                    )
                   } else {
-                    if (isSSRSafeAttrName(attrName)) {
+                    attrName =
+                      node.tag.indexOf('-') > 0
+                        ? attrName // preserve raw name on custom elements
+                        : propsToAttrMap[attrName] || attrName.toLowerCase()
+                    if (isBooleanAttr(attrName)) {
+                      openTag.push(
+                        createConditionalExpression(
+                          value,
+                          createSimpleExpression(' ' + attrName, true),
+                          createSimpleExpression('', true),
+                          false /* no newline */
+                        )
+                      )
+                    } else if (isSSRSafeAttrName(attrName)) {
                       openTag.push(
                         createCallExpression(context.helper(SSR_RENDER_ATTR), [
                           key,

diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
index 35d5dc4f6efa5b7bc3e85d624cc4131f231e1991..4a1dcb8df5f9ad68906504da29b68ac0de4c17ac 100644 (file)
--- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
@@ -57,6 +57,9 @@ export function ssrRenderDynamicAttr(
   } else if (isSSRSafeAttrName(attrKey)) {
     return ` ${attrKey}="${escapeHtml(value)}"`
   } else {
+    console.warn(
+      `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}`
+    )
     return ``
   }
 }