chore: extend HTMLElement with Symbol as key

Author: Alfred-Skyblue

packages/runtime-dom/__tests__/patchClass.spec.ts

@@ -1,5 +1,5 @@
 import { patchProp } from '../src/patchProp'
-import { ElementWithTransition } from '../src/components/Transition'
+import { ElementWithTransition, vtcKey } from '../src/components/Transition'
 import { svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: class patching', () => {
@@ -13,12 +13,12 @@ describe('runtime-dom: class patching', () => {
 
   test('transition class', () => {
     const el = document.createElement('div') as ElementWithTransition
-    el._vtc = new Set(['bar', 'baz'])
+    el[vtcKey] = new Set(['bar', 'baz'])
     patchProp(el, 'class', null, 'foo')
     expect(el.className).toBe('foo bar baz')
     patchProp(el, 'class', null, null)
     expect(el.className).toBe('bar baz')
-    delete el._vtc
+    delete el[vtcKey]
     patchProp(el, 'class', null, 'foo')
     expect(el.className).toBe('foo')
   })

packages/runtime-dom/src/components/Transition.ts

@@ -32,12 +32,14 @@ export interface TransitionProps extends BaseTransitionProps<Element> {
   leaveToClass?: string
 }
 
+export const vtcKey = Symbol('_vtc')
+
 export interface ElementWithTransition extends HTMLElement {
   // _vtc = Vue Transition Classes.
   // Store the temporarily-added transition classes on the element
   // so that we can avoid overwriting them if the element's class is patched
   // during the transition.
-  _vtc?: Set<string>
+  [vtcKey]?: Set<string>
 }
 
 // DOM Transition is a higher-order-component based on the platform-agnostic
@@ -295,18 +297,18 @@ function NumberOf(val: unknown): number {
 export function addTransitionClass(el: Element, cls: string) {
   cls.split(/\s+/).forEach(c => c && el.classList.add(c))
   ;(
-    (el as ElementWithTransition)._vtc ||
-    ((el as ElementWithTransition)._vtc = new Set())
+    (el as ElementWithTransition)[vtcKey] ||
+    ((el as ElementWithTransition)[vtcKey] = new Set())
   ).add(cls)
 }
 
 export function removeTransitionClass(el: Element, cls: string) {
   cls.split(/\s+/).forEach(c => c && el.classList.remove(c))
-  const { _vtc } = el as ElementWithTransition
+  const _vtc = (el as ElementWithTransition)[vtcKey]
   if (_vtc) {
     _vtc.delete(cls)
     if (!_vtc!.size) {
-      ;(el as ElementWithTransition)._vtc = undefined
+      ;(el as ElementWithTransition)[vtcKey] = undefined
     }
   }
 }

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -6,7 +6,8 @@ import {
   getTransitionInfo,
   resolveTransitionProps,
   TransitionPropsValidators,
-  forceReflow
+  forceReflow,
+  vtcKey
 } from './Transition'
 import {
   Fragment,
@@ -199,7 +200,7 @@ function hasCSSTransform(
   // all other transition classes applied to ensure only the move class
   // is applied.
   const clone = el.cloneNode() as HTMLElement
-  const _vtc = el._vtc
+  const _vtc = el[vtcKey]
   if (_vtc) {
     _vtc.forEach(cls => {
       cls.split(/\s+/).forEach(c => c && clone.classList.remove(c))

packages/runtime-dom/src/modules/class.ts

@@ -1,12 +1,12 @@
-import { ElementWithTransition } from '../components/Transition'
+import { ElementWithTransition, vtcKey } from '../components/Transition'
 
 // compiler should normalize class + :class bindings on the same element
 // into a single binding ['staticClass', dynamic]
 export function patchClass(el: Element, value: string | null, isSVG: boolean) {
   // directly setting className should be faster than setAttribute in theory
   // if this is an element during a transition, take the temporary transition
   // classes into account.
-  const transitionClasses = (el as ElementWithTransition)._vtc
+  const transitionClasses = (el as ElementWithTransition)[vtcKey]
   if (transitionClasses) {
     value = (
       value ? [value, ...transitionClasses] : [...transitionClasses]

packages/vue/__tests__/svgNamespace.spec.ts

@@ -5,6 +5,7 @@
 // - runtime-core/src/renderer.ts
 // - compiler-core/src/transforms/transformElement.ts
 
+import { vtcKey } from '../../runtime-dom/src/components/Transition'
 import { render, h, ref, nextTick } from '../src'
 
 describe('SVG support', () => {
@@ -54,7 +55,8 @@ describe('SVG support', () => {
 
     // set a transition class on the <div> - which is only respected on non-svg
     // patches
-    ;(f2 as any)._vtc = ['baz']
+    ;(f2 as any)[vtcKey] = ['baz']
+    console.log('我打印了f2', f2)
     cls.value = 'bar'
     await nextTick()
     expect(f1.getAttribute('class')).toBe('bar')