refactor: use shared isAttrRenderable logic between ssr and hydration

packages/runtime-core/src/hydration.ts

@@ -21,8 +21,8 @@ import {
   isBooleanAttr,
   isKnownHtmlAttr,
   isKnownSvgAttr,
-  isObject,
   isOn,
+  isRenderableAttrValue,
   isReservedProp,
   isString,
   normalizeClass,
@@ -770,10 +770,9 @@ function propHasMismatch(
       } else {
         actual = false
       }
-      expected =
+      expected = isRenderableAttrValue(clientValue)
-        isObject(clientValue) || clientValue == null
+        ? String(clientValue)
-          ? false
+        : false
-          : String(clientValue)
     }
     if (actual !== expected) {
       mismatchType = `attribute`

packages/server-renderer/src/helpers/ssrRenderAttrs.ts

@@ -1,4 +1,9 @@
-import { escapeHtml, isSVGTag, stringifyStyle } from '@vue/shared'
+import {
+  escapeHtml,
+  isRenderableAttrValue,
+  isSVGTag,
+  stringifyStyle,
+} from '@vue/shared'
 import {
   includeBooleanAttr,
   isBooleanAttr,
@@ -47,7 +52,7 @@ export function ssrRenderDynamicAttr(
   value: unknown,
   tag?: string,
 ): string {
-  if (!isRenderableValue(value)) {
+  if (!isRenderableAttrValue(value)) {
     return ``
   }
   const attrKey =
@@ -69,20 +74,12 @@ export function ssrRenderDynamicAttr(
 // Render a v-bind attr with static key. The key is pre-processed at compile
 // time and we only need to check and escape value.
 export function ssrRenderAttr(key: string, value: unknown): string {
-  if (!isRenderableValue(value)) {
+  if (!isRenderableAttrValue(value)) {
     return ``
   }
   return ` ${key}="${escapeHtml(value)}"`
 }
 
-function isRenderableValue(value: unknown): boolean {
-  if (value == null) {
-    return false
-  }
-  const type = typeof value
-  return type === 'string' || type === 'number' || type === 'boolean'
-}
-
 export function ssrRenderClass(raw: unknown): string {
   return escapeHtml(normalizeClass(raw))
 }

packages/shared/src/domAttrConfig.ts

@@ -121,3 +121,14 @@ export const isKnownSvgAttr = /*#__PURE__*/ makeMap(
     `xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,` +
     `xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`,
 )
+
+/**
+ * Shared between server-renderer and runtime-core hydration logic
+ */
+export function isRenderableAttrValue(value: unknown): boolean {
+  if (value == null) {
+    return false
+  }
+  const type = typeof value
+  return type === 'string' || type === 'number' || type === 'boolean'
+}