chore: merge conflict

Author: Alfred-Skyblue

packages/reactivity/src/baseHandlers.ts

@@ -26,7 +26,6 @@ import {
   hasChanged,
   isArray,
   isIntegerKey,
-  extend,
   makeMap
 } from '@vue/shared'
 import { isRef } from './ref'
@@ -45,11 +44,6 @@ const builtInSymbols = new Set(
     .filter(isSymbol)
 )
 
-const get = /*#__PURE__*/ createGetter()
-const shallowGet = /*#__PURE__*/ createGetter(false, true)
-const readonlyGet = /*#__PURE__*/ createGetter(true)
-const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)
-
 const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations()
 
 function createArrayInstrumentations() {
@@ -91,8 +85,15 @@ function hasOwnProperty(this: object, key: string) {
   return obj.hasOwnProperty(key)
 }
 
-function createGetter(isReadonly = false, shallow = false) {
-  return function get(target: Target, key: string | symbol, receiver: object) {
+class BaseReactiveHandler implements ProxyHandler<Target> {
+  constructor(
+    protected readonly _isReadonly = false,
+    protected readonly _shallow = false
+  ) {}
+
+  get(target: Target, key: string | symbol, receiver: object) {
+    const isReadonly = this._isReadonly,
+      shallow = this._shallow
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadonly
     } else if (key === ReactiveFlags.IS_READONLY) {
@@ -155,11 +156,12 @@ function createGetter(isReadonly = false, shallow = false) {
   }
 }
 
-const set = /*#__PURE__*/ createSetter()
-const shallowSet = /*#__PURE__*/ createSetter(true)
+class MutableReactiveHandler extends BaseReactiveHandler {
+  constructor(shallow = false) {
+    super(false, shallow)
+  }
 
-function createSetter(shallow = false) {
-  return function set(
+  set(
     target: object,
     key: string | symbol,
     value: unknown,
@@ -169,7 +171,7 @@ function createSetter(shallow = false) {
     if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
       return false
     }
-    if (!shallow) {
+    if (!this._shallow) {
       if (!isShallow(value) && !isReadonly(value)) {
         oldValue = toRaw(oldValue)
         value = toRaw(value)
@@ -197,51 +199,50 @@ function createSetter(shallow = false) {
     }
     return result
   }
-}
 
-function deleteProperty(target: object, key: string | symbol): boolean {
-  const hadKey = hasOwn(target, key)
-  const oldValue = (target as any)[key]
-  const result = Reflect.deleteProperty(target, key)
-  if (result && hadKey) {
-    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
+  deleteProperty(target: object, key: string | symbol): boolean {
+    const hadKey = hasOwn(target, key)
+    const oldValue = (target as any)[key]
+    const result = Reflect.deleteProperty(target, key)
+    if (result && hadKey) {
+      trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
+    }
+    return result
   }
-  return result
-}
 
-function has(target: object, key: string | symbol): boolean {
-  const result = Reflect.has(target, key)
-  if (!isSymbol(key) || !builtInSymbols.has(key)) {
-    track(target, TrackOpTypes.HAS, key)
+  has(target: object, key: string | symbol): boolean {
+    const result = Reflect.has(target, key)
+    if (!isSymbol(key) || !builtInSymbols.has(key)) {
+      track(target, TrackOpTypes.HAS, key)
+    }
+    return result
+  }
+  ownKeys(target: object): (string | symbol)[] {
+    track(
+      target,
+      TrackOpTypes.ITERATE,
+      isArray(target) ? 'length' : ITERATE_KEY
+    )
+    return Reflect.ownKeys(target)
   }
-  return result
-}
-
-function ownKeys(target: object): (string | symbol)[] {
-  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
-  return Reflect.ownKeys(target)
 }
 
-export const mutableHandlers: ProxyHandler<object> = {
-  get,
-  set,
-  deleteProperty,
-  has,
-  ownKeys
-}
+class ReadonlyReactiveHandler extends BaseReactiveHandler {
+  constructor(shallow = false) {
+    super(true, shallow)
+  }
 
-export const readonlyHandlers: ProxyHandler<object> = {
-  get: readonlyGet,
-  set(target, key) {
+  set(target: object, key: string | symbol) {
     if (__DEV__) {
       warn(
         `Set operation on key "${String(key)}" failed: target is readonly.`,
         target
       )
     }
     return true
-  },
-  deleteProperty(target, key) {
+  }
+
+  deleteProperty(target: object, key: string | symbol) {
     if (__DEV__) {
       warn(
         `Delete operation on key "${String(key)}" failed: target is readonly.`,
@@ -252,22 +253,18 @@ export const readonlyHandlers: ProxyHandler<object> = {
   }
 }
 
-export const shallowReactiveHandlers = /*#__PURE__*/ extend(
-  {},
-  mutableHandlers,
-  {
-    get: shallowGet,
-    set: shallowSet
-  }
+export const mutableHandlers: ProxyHandler<object> =
+  /*#__PURE__*/ new MutableReactiveHandler()
+
+export const readonlyHandlers: ProxyHandler<object> =
+  /*#__PURE__*/ new ReadonlyReactiveHandler()
+
+export const shallowReactiveHandlers = /*#__PURE__*/ new MutableReactiveHandler(
+  true
 )
 
 // Props handlers are special in the sense that it should not unwrap top-level
 // refs (in order to allow refs to be explicitly passed down), but should
 // retain the reactivity of the normal readonly object.
-export const shallowReadonlyHandlers = /*#__PURE__*/ extend(
-  {},
-  readonlyHandlers,
-  {
-    get: shallowReadonlyGet
-  }
-)
+export const shallowReadonlyHandlers =
+  /*#__PURE__*/ new ReadonlyReactiveHandler(true)

packages/runtime-core/src/components/BaseTransition.ts

@@ -22,6 +22,9 @@ import { RendererElement } from '../renderer'
 
 type Hook<T = () => void> = T | T[]
 
+const leaveCbKey = Symbol('_leaveCb')
+const enterCbKey = Symbol('_enterCb')
+
 export interface BaseTransitionProps<HostElement = RendererElement> {
   mode?: 'in-out' | 'out-in' | 'default'
   appear?: boolean
@@ -89,8 +92,8 @@ export interface TransitionElement {
   // in persisted mode (e.g. v-show), the same element is toggled, so the
   // pending enter/leave callbacks may need to be cancelled if the state is toggled
   // before it finishes.
-  _enterCb?: PendingCallback
-  _leaveCb?: PendingCallback
+  [enterCbKey]?: PendingCallback
+  [leaveCbKey]?: PendingCallback
 }
 
 export function useTransitionState(): TransitionState {
@@ -259,9 +262,9 @@ const BaseTransitionImpl: ComponentOptions = {
             )
             leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild
             // early removal callback
-            el._leaveCb = () => {
+            el[leaveCbKey] = () => {
               earlyRemove()
-              el._leaveCb = undefined
+              el[leaveCbKey] = undefined
               delete enterHooks.delayedLeave
             }
             enterHooks.delayedLeave = delayedLeave
@@ -366,18 +369,18 @@ export function resolveTransitionHooks(
         }
       }
       // for same element (v-show)
-      if (el._leaveCb) {
-        el._leaveCb(true /* cancelled */)
+      if (el[leaveCbKey]) {
+        el[leaveCbKey](true /* cancelled */)
       }
       // for toggled element with same key (v-if)
       const leavingVNode = leavingVNodesCache[key]
       if (
         leavingVNode &&
         isSameVNodeType(vnode, leavingVNode) &&
-        leavingVNode.el!._leaveCb
+        (leavingVNode.el as TransitionElement)[leaveCbKey]
       ) {
         // force early removal (not cancelled)
-        leavingVNode.el!._leaveCb()
+        ;(leavingVNode.el as TransitionElement)[leaveCbKey]!()
       }
       callHook(hook, [el])
     },
@@ -396,7 +399,7 @@ export function resolveTransitionHooks(
         }
       }
       let called = false
-      const done = (el._enterCb = (cancelled?) => {
+      const done = (el[enterCbKey] = (cancelled?) => {
         if (called) return
         called = true
         if (cancelled) {
@@ -407,7 +410,7 @@ export function resolveTransitionHooks(
         if (hooks.delayedLeave) {
           hooks.delayedLeave()
         }
-        el._enterCb = undefined
+        el[enterCbKey] = undefined
       })
       if (hook) {
         callAsyncHook(hook, [el, done])
@@ -418,15 +421,15 @@ export function resolveTransitionHooks(
 
     leave(el, remove) {
       const key = String(vnode.key)
-      if (el._enterCb) {
-        el._enterCb(true /* cancelled */)
+      if (el[enterCbKey]) {
+        el[enterCbKey](true /* cancelled */)
       }
       if (state.isUnmounting) {
         return remove()
       }
       callHook(onBeforeLeave, [el])
       let called = false
-      const done = (el._leaveCb = (cancelled?) => {
+      const done = (el[leaveCbKey] = (cancelled?) => {
         if (called) return
         called = true
         remove()
@@ -435,7 +438,7 @@ export function resolveTransitionHooks(
         } else {
           callHook(onAfterLeave, [el])
         }
-        el._leaveCb = undefined
+        el[leaveCbKey] = undefined
         if (leavingVNodesCache[key] === vnode) {
           delete leavingVNodesCache[key]
         }

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
     }
   }
 }