wip: style mismatch with v-show

Author: edison1105

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

@@ -3220,19 +3220,35 @@ describe('Vapor Mode hydration', () => {
       expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
     })
 
-    test.todo('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('style mismatch w/ v-show', async () => {
+      await mountWithHydration(
+        `<div style="color:red;display:none"></div>`,
+        `<div v-show="data" style="color: red;"></div>`,
+        ref(false),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+
+      // mismatch with single root
+      const { container: root } = await mountWithHydration(
+        `<div style="color:red;"></div>`,
+        `<div v-show="data" style="color: red;"></div>`,
+        ref(false),
+      )
+      expect(root.innerHTML).toBe(
+        '<div style="color: red; display: none;"></div>',
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarned()
+
+      // mismatch with multiple root
+      const { container } = await mountWithHydration(
+        `<div style="color:red;"></div><span/>`,
+        `<div v-show="data.show" :style="data.style"></div><span/>`,
+        ref({ show: false, style: 'color: red' }),
+      )
+      expect(container.innerHTML).toBe(
+        '<div style="color: red; display: none;"></div><span></span>',
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarned()
     })
 
     // test('attr mismatch', () => {

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

@@ -1,13 +1,16 @@
 import {
+  MismatchTypes,
   type VShowElement,
   vShowHidden,
   vShowOriginalDisplay,
   warn,
+  warnPropMismatch,
 } from '@vue/runtime-dom'
 import { renderEffect } from '../renderEffect'
 import { isVaporComponent } from '../component'
 import { type Block, DynamicFragment } from '../block'
 import { isArray } from '@vue/shared'
+import { isHydrating, logMismatchError } from '../dom/hydration'
 
 export function applyVShow(target: Block, source: () => any): void {
   if (isVaporComponent(target)) {
@@ -45,7 +48,28 @@ function setDisplay(target: Block, value: unknown): void {
       el[vShowOriginalDisplay] =
         el.style.display === 'none' ? '' : el.style.display
     }
-    el.style.display = value ? el[vShowOriginalDisplay]! : 'none'
+
+    if (
+      (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+      isHydrating
+    ) {
+      if (!value && el.style.display !== 'none') {
+        warnPropMismatch(
+          el,
+          'style',
+          MismatchTypes.STYLE,
+          `display: ${el.style.display}`,
+          'display: none',
+        )
+        logMismatchError()
+
+        el.style.display = 'none'
+        el[vShowOriginalDisplay] = ''
+      }
+    } else {
+      el.style.display = value ? el[vShowOriginalDisplay]! : 'none'
+    }
+
     el[vShowHidden] = !value
   } else if (__DEV__) {
     warn(

packages/runtime-vapor/src/dom/prop.ts

@@ -21,6 +21,7 @@ import {
   shouldSetAsProp,
   toClassSet,
   toStyleMap,
+  vShowHidden,
   warn,
   warnPropMismatch,
 } from '@vue/runtime-dom'
@@ -201,7 +202,11 @@ export function setStyle(el: TargetElement, value: any): void {
       const expected = stringifyStyle(normalizedValue)
       const expectedStyleMap = toStyleMap(expected)
 
-      // TODO: handle v-show="false"
+      // If `v-show=false`, `display: 'none'` should be added to expected
+      if ((el as any)[vShowHidden]) {
+        expectedStyleMap.set('display', 'none')
+      }
+
       // TODO: handle css vars
 
       if (!isMapEqual(actualStyleMap, expectedStyleMap)) {
@@ -228,7 +233,11 @@ function setStyleIncremental(el: any, value: any): NormalizedStyle | undefined {
     const expected = isString(value) ? value : stringifyStyle(normalizedValue)
     const expectedStyleMap = toStyleMap(expected)
 
-    // TODO: handle v-show="false"
+    // If `v-show=false`, `display: 'none'` should be added to expected
+    if (el[vShowHidden]) {
+      expectedStyleMap.set('display', 'none')
+    }
+
     // TODO: handle css vars
 
     // check if the expected styles are present in the actual styles