refactor: use more descriptive name for v-show original display key

vuejs · Feb 25, 2024 · 9a365fe · 9a365fe
1 parent c6defc8
commit 9a365fe
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -26,7 +26,7 @@ import {
 } from '@vue/runtime-dom'
 import { type SSRContext, renderToString } from '@vue/server-renderer'
 import { PatchFlags } from '@vue/shared'
-import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
+import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
 
 function mountWithHydration(html: string, render: () => any) {
   const container = document.createElement('div')
@@ -1252,7 +1252,7 @@ describe('SSR hydration', () => {
         foo
       </div>
     `)
-    expect((container.firstChild as any)[vShowOldKey]).toBe('')
+    expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
     expect(vnode.el).toBe(container.firstChild)
     expect(`mismatch`).not.toHaveBeenWarned()
   })

diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts
@@ -1,15 +1,16 @@
 import type { ObjectDirective } from '@vue/runtime-core'
 
-export const vShowOldKey = Symbol('_vod')
+export const vShowOriginalDisplay = Symbol('_vod')
 
 interface VShowElement extends HTMLElement {
   // _vod = vue original display
-  [vShowOldKey]: string
+  [vShowOriginalDisplay]: string
 }
 
 export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   beforeMount(el, { value }, { transition }) {
-    el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
+    el[vShowOriginalDisplay] =
+      el.style.display === 'none' ? '' : el.style.display
     if (transition && value) {
       transition.beforeEnter(el)
     } else {
@@ -24,7 +25,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   updated(el, { value, oldValue }, { transition }) {
     if (
       !value === !oldValue &&
-      (el.style.display === el[vShowOldKey] || !value)
+      (el.style.display === el[vShowOriginalDisplay] || !value)
     )
       return
     if (transition) {
@@ -51,7 +52,7 @@ if (__DEV__) {
 }
 
 function setDisplay(el: VShowElement, value: unknown): void {
-  el.style.display = value ? el[vShowOldKey] : 'none'
+  el.style.display = value ? el[vShowOriginalDisplay] : 'none'
 }
 
 // SSR vnode transforms, only used when user includes client-oriented render

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
@@ -1,6 +1,6 @@
 import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
 import { camelize, warn } from '@vue/runtime-core'
-import { vShowOldKey } from '../directives/vShow'
+import { vShowOriginalDisplay } from '../directives/vShow'
 import { CSS_VAR_TEXT } from '../helpers/useCssVars'
 
 type Style = string | Record<string, string | string[]> | null
@@ -53,8 +53,8 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   // indicates that the `display` of the element is controlled by `v-show`,
   // so we always keep the current `display` value regardless of the `style`
   // value, thus handing over control to `v-show`.
-  if (vShowOldKey in el) {
-    el[vShowOldKey] = hasControlledDisplay ? style.display : ''
+  if (vShowOriginalDisplay in el) {
+    el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ''
     style.display = currentDisplay
   }
 }