fix(hydration): avoid hydration mismatch warning for styles with diff…

…erent order (#10011)

close #10000
close #10006

packages/runtime-core/__tests__/hydration.spec.ts

@@ -1431,11 +1431,35 @@ describe('SSR hydration', () => {
  mountWithHydration(`<div style="color:red;"></div>`, () =>
  h('div', { style: `color:red;` }),
  )
+ mountWithHydration(
+ `<div style="color:red; font-size: 12px;"></div>`,
+ () => h('div', { style: `font-size: 12px; color:red;` }),
+ )
+ mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
+ withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ [vShow, false],
+ ]),
+ )
  expect(`Hydration style mismatch`).not.toHaveBeenWarned()
  mountWithHydration(`<div style="color:red;"></div>`, () =>
  h('div', { style: { color: 'green' } }),
  )
- expect(`Hydration style mismatch`).toHaveBeenWarned()
+ expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+ })
+
+ test('style mismatch w/ v-show', () => {
+ mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
+ withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ [vShow, false],
+ ]),
+ )
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ mountWithHydration(`<div style="color:red;"></div>`, () =>
+ withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ [vShow, false],
+ ]),
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
  })
 
  test('attr mismatch', () => {
@@ -1451,6 +1475,12 @@ describe('SSR hydration', () => {
  mountWithHydration(`<select multiple></div>`, () =>
  h('select', { multiple: 'multiple' }),
  )
+ mountWithHydration(`<textarea>foo</textarea>`, () =>
+ h('textarea', { value: 'foo' }),
+ )
+ mountWithHydration(`<textarea></textarea>`, () =>
+ h('textarea', { value: '' }),
+ )
  expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
 
  mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))

packages/runtime-core/src/hydration.ts

@@ -448,7 +448,7 @@ export function createHydrationFunctions(
  ) {
  for (const key in props) {
  // check hydration mismatch
- if (__DEV__ && propHasMismatch(el, key, props[key])) {
+ if (__DEV__ && propHasMismatch(el, key, props[key], vnode)) {
  hasMismatch = true
  }
  if (
@@ -712,7 +712,12 @@ export function createHydrationFunctions(
 /**
  * Dev only
  */
-function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
+function propHasMismatch(
+ el: Element,
+ key: string,
+ clientValue: any,
+ vnode: VNode,
+): boolean {
  let mismatchType: string | undefined
  let mismatchKey: string | undefined
  let actual: any
@@ -726,24 +731,41 @@ function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
  mismatchType = mismatchKey = `class`
  }
  } else if (key === 'style') {
- actual = el.getAttribute('style')
- expected = isString(clientValue)
- ? clientValue
- : stringifyStyle(normalizeStyle(clientValue))
- if (actual !== expected) {
+ // style might be in different order, but that doesn't affect cascade
+ actual = toStyleMap(el.getAttribute('style') || '')
+ expected = toStyleMap(
+ isString(clientValue)
+ ? clientValue
+ : stringifyStyle(normalizeStyle(clientValue)),
+ )
+ // If `v-show=false`, `display: 'none'` should be added to expected
+ if (vnode.dirs) {
+ for (const { dir, value } of vnode.dirs) {
+ // @ts-expect-error only vShow has this internal name
+ if (dir.name === 'show' && !value) {
+ expected.set('display', 'none')
+ }
+ }
+ }
+ if (!isMapEqual(actual, expected)) {
  mismatchType = mismatchKey = 'style'
  }
  } else if (
  (el instanceof SVGElement && isKnownSvgAttr(key)) ||
  (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
  ) {
- actual = el.hasAttribute(key) && el.getAttribute(key)
+ // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
+ actual = el.hasAttribute(key)
+ ? el.getAttribute(key)
+ : key in el
+ ? el[key as keyof typeof el]
+ : ''
  expected = isBooleanAttr(key)
  ? includeBooleanAttr(clientValue)
  ? ''
  : false
  : clientValue == null
- ? false
+ ? ''
  : String(clientValue)
  if (actual !== expected) {
  mismatchType = `attribute`
@@ -783,3 +805,28 @@ function isSetEqual(a: Set<string>, b: Set<string>): boolean {
  }
  return true
 }
+
+function toStyleMap(str: string): Map<string, string> {
+ const styleMap: Map<string, string> = new Map()
+ for (const item of str.split(';')) {
+ let [key, value] = item.split(':')
+ key = key?.trim()
+ value = value?.trim()
+ if (key && value) {
+ styleMap.set(key, value)
+ }
+ }
+ return styleMap
+}
+
+function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
+ if (a.size !== b.size) {
+ return false
+ }
+ for (const [key, value] of a) {
+ if (value !== b.get(key)) {
+ return false
+ }
+ }
+ return true
+}

packages/runtime-dom/src/directives/vShow.ts

@@ -7,7 +7,7 @@ interface VShowElement extends HTMLElement {
  [vShowOldKey]: string
 }
 
-export const vShow: ObjectDirective<VShowElement> = {
+export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
  beforeMount(el, { value }, { transition }) {
  el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
  if (transition && value) {
@@ -42,6 +42,10 @@ export const vShow: ObjectDirective<VShowElement> = {
  },
 }
 
+if (__DEV__) {
+ vShow.name = 'show'
+}
+
 function setDisplay(el: VShowElement, value: unknown): void {
  el.style.display = value ? el[vShowOldKey] : 'none'
 }