refactor: use shared isAttrRenderable logic between ssr and hydration

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 2953778a0fdcd02f68ad1c511bf95012fde83139..b22afdb7aa5e78ad8c742965adcf4e8b91c4433e 100644 (file)
--- a/packages/runtime-core/src/hydration.ts
+++ b/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 =
-        isObject(clientValue) || clientValue == null
-          ? false
-          : String(clientValue)
+      expected = isRenderableAttrValue(clientValue)
+        ? String(clientValue)
+        : false
     }
     if (actual !== expected) {
       mismatchType = `attribute`

diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
index a8d1c7df9dbced81e9211a7acf82762b0ed17f99..5eb77116b194b2c2e9833fe02df326c63f0b9bc6 100644 (file)
--- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
+++ b/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))
 }

diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index a34eb3260ce227a45c3a1f733fe38546b759f90c..758dfb307befae9595381c9619bfa0a38e7f1717 100644 (file)
--- a/packages/shared/src/domAttrConfig.ts
+++ b/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'
+}