@dimailn/vuetify 2.7.2-alpha56 → 2.7.2-alpha57

package/src/directives/click-outside/index.ts

@@ -12,6 +12,14 @@ type ClickOutsideDirective = VNodeDirective & {
   value?: ((e: Event) => void) | ClickOutsideBindingArgs
 }
 
+interface ClickOutsideState {
+  onClick: (e: Event) => void
+  onMousedown: (e: Event) => void
+  lastMousedownWasOutside: boolean
+}
+
+const clickOutsideState = new WeakMap<HTMLElement, ClickOutsideState>()
+
 function defaultConditional () {
   return true
 }
@@ -55,8 +63,10 @@ function checkIsActive (e: PointerEvent, binding: ClickOutsideDirective): boolea
 
 function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective) {
   const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler
+  const state = clickOutsideState.get(el)
+  if (!state) return
 
-  el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
+  state.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
     checkIsActive(e, binding) && handler && handler(e)
   }, 0)
 }
@@ -80,39 +90,36 @@ export const ClickOutside = {
   mounted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
     const onClick = (e: Event) => directive(e as PointerEvent, el, binding)
     const onMousedown = (e: Event) => {
-      el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
+      const state = clickOutsideState.get(el)
+      if (!state) return
+      state.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
     }
 
+    clickOutsideState.set(el, {
+      onClick,
+      onMousedown,
+      lastMousedownWasOutside: true
+    })
+
     handleShadow(el, (app: HTMLElement) => {
       app.addEventListener('click', onClick, true)
       app.addEventListener('mousedown', onMousedown, true)
     })
-
-    if (!el._clickOutside) {
-      el._clickOutside = {
-        lastMousedownWasOutside: true
-      }
-    }
-
-    el._clickOutside[vnode.ctx.uid] = {
-      onClick,
-      onMousedown
-    }
   },
 
   unmounted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
-    if (!el._clickOutside) return
+    const state = clickOutsideState.get(el)
+    if (!state) return
 
     handleShadow(el, (app: HTMLElement) => {
-      if (!app || !el._clickOutside?.[vnode.ctx.uid]) return
-
-      const { onClick, onMousedown } = el._clickOutside[vnode.ctx.uid]!
+      if (!app) return
 
+      const { onClick, onMousedown } = state
       app.removeEventListener('click', onClick, true)
       app.removeEventListener('mousedown', onMousedown, true)
     })
 
-    delete el._clickOutside[vnode.ctx.uid]
+    clickOutsideState.delete(el)
   }
 }
 

package/src/directives/intersect/__tests__/intersect.spec.ts

@@ -2,27 +2,45 @@
 import Intersect from '../'
 
 describe('intersect', () => {
+  let observerInstance: any
+
+  beforeEach(() => {
+    observerInstance = undefined
+    ;(global as any).IntersectionObserver = class IntersectionObserver {
+      callback: (entries: any, observer: any) => void
+      observe = jest.fn()
+      unobserve = jest.fn()
+
+      constructor (callback: (entries: any, observer: any) => void) {
+        this.callback = callback
+        observerInstance = this
+      }
+    }
+  })
+
   it('should bind event on mounted', () => {
     const callback = jest.fn()
     const el = document.createElement('div')
     document.body.appendChild(el)
 
     Intersect.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: { quiet: true }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    expect((el as any)._observe).toBeTruthy()
+    expect(observerInstance).toBeTruthy()
+    expect(observerInstance.observe).toHaveBeenCalledWith(el)
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
     Intersect.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: { quiet: true }
-    } as any, { ctx: { uid: 1 } } as any)
-
-    expect((el as any)._observe[1]).toBeFalsy()
+    } as any, {} as any)
+    expect(observerInstance.unobserve).toHaveBeenCalledWith(el)
   })
 
   it('should invoke callback once and unbind', () => {
@@ -33,21 +51,21 @@ describe('intersect', () => {
     const callback = jest.fn()
 
     Intersect.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: { once: true }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
     expect(callback).toHaveBeenCalledTimes(0)
-    expect((el as any)._observe[1]).toBeTruthy()
+    expect(observerInstance).toBeTruthy()
 
-    ;(el as any)._observe[1].observer.callback([{ isIntersecting: false }])
+    observerInstance.callback([{ isIntersecting: false }], observerInstance)
 
-    expect(callback).toHaveBeenCalledTimes(1)
-    expect((el as any)._observe[1]).toBeTruthy()
+    expect(callback).toHaveBeenCalledTimes(0)
 
-    ;(el as any)._observe[1].observer.callback([{ isIntersecting: true }])
+    observerInstance.callback([{ isIntersecting: true }], observerInstance)
 
-    expect(callback).toHaveBeenCalledTimes(2)
-    expect((el as any)._observe[1]).toBeFalsy()
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(observerInstance.unobserve).toHaveBeenCalledWith(el)
   })
 })

package/src/directives/intersect/index.ts

@@ -17,16 +17,13 @@ interface ObserveDirectiveBinding
   }
 }
 
-// Расширяем HTMLElement для хранения данных наблюдателя
-declare global {
-  interface HTMLElement {
-    _observe?: Record<
-      number,
-      { init: boolean, observer: IntersectionObserver }
-    >
-  }
+interface IntersectState {
+  init: boolean
+  observer: IntersectionObserver
 }
 
+const intersectState = new WeakMap<HTMLElement, IntersectState>()
+
 function mounted (
   el: HTMLElement,
   binding: ObserveDirectiveBinding,
@@ -48,8 +45,8 @@ function mounted (
       entries: IntersectionObserverEntry[] = [],
       observer: IntersectionObserver
     ) => {
-      const _observe = el._observe?.[vnode.ctx!.uid]
-      if (!_observe) return // Just in case, should never fire
+      const state = intersectState.get(el)
+      if (!state) return // Just in case, should never fire
 
       const isIntersecting = entries.some(entry => entry.isIntersecting)
 
@@ -58,20 +55,19 @@ function mounted (
       if (
         handler &&
         typeof handler === 'function' &&
-        (!modifiers.quiet || _observe.init) &&
-        (!modifiers.once || isIntersecting || _observe.init)
+        (!modifiers.quiet || state.init) &&
+        (!modifiers.once || isIntersecting || state.init)
       ) {
         handler(entries, observer, isIntersecting)
       }
 
       if (isIntersecting && modifiers.once) unmounted(el, binding, vnode)
-      else _observe.init = true
+      else state.init = true
     },
     options
   )
 
-  el._observe = Object(el._observe)
-  el._observe![vnode.ctx!.uid] = { init: false, observer }
+  intersectState.set(el, { init: false, observer })
 
   observer.observe(el)
 }
@@ -93,11 +89,11 @@ function unmounted (
   binding: ObserveDirectiveBinding,
   vnode: VNode
 ) {
-  const observe = el._observe?.[vnode.ctx!.uid]
-  if (!observe) return
+  const state = intersectState.get(el)
+  if (!state) return
 
-  observe.observer.unobserve(el)
-  delete el._observe![vnode.ctx!.uid]
+  state.observer.unobserve(el)
+  intersectState.delete(el)
 }
 
 export const Intersect: ObjectDirective<

package/src/directives/mutate/__tests__/mutate.spec.ts

@@ -1,17 +1,18 @@
 // Directives
 import Mutate from '../'
 
+const observers: any[] = [];
+
 (global as any).MutationObserver = class { // Mock MutationObserver
   _callback: Function
-
   _observe = jest.fn()
+  disconnect = jest.fn()
 
   constructor (callback) {
     this._callback = callback
+    observers.push(this)
   }
 
-  disconnect () {}
-
   observe (_, options) {
     this._observe(options)
   }
@@ -22,26 +23,30 @@ import Mutate from '../'
 }
 
 describe('mutate.ts', () => {
+  beforeEach(() => {
+    observers.length = 0
+  })
+
   it('should bind event on inserted', () => {
     const callback = jest.fn()
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    expect(el._mutate).toBeTruthy()
+    expect(observers).toHaveLength(1)
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
-
-    const uid = Object.keys(el._mutate)[0]
-    expect(el._mutate[uid]).toBeFalsy()
+    } as any, {} as any)
+    expect(observers[0].disconnect).toHaveBeenCalled()
   })
 
   it('should fire event on mutation', () => {
@@ -50,19 +55,20 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
   })
 
   it('should fire event once', () => {
@@ -71,18 +77,18 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: {
         once: true
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
     // Once modifier should remove the observer
-    expect(Object.keys(el._mutate)).toHaveLength(0)
+    expect(observers[0].disconnect).toHaveBeenCalled()
 
     document.body.removeChild(el)
   })
@@ -93,6 +99,7 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: {
         options: {
           attributes: false,
@@ -100,17 +107,17 @@ describe('mutate.ts', () => {
         },
         handler: callback
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+    expect(observers[0]._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: {
         options: {
           attributes: false,
@@ -118,7 +125,7 @@ describe('mutate.ts', () => {
         },
         handler: callback
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
   })
 
   it('should work with observer modifiers', () => {
@@ -127,29 +134,30 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+    expect(observers[0]._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
   })
 })

package/src/directives/mutate/index.ts

@@ -17,6 +17,12 @@ type MutateModifiers = {
   char?: boolean
 };
 
+interface MutateState {
+  observer: MutationObserver
+}
+
+const mutateState = new WeakMap<HTMLElement, MutateState>()
+
 function mounted (
   el: HTMLElement,
   binding: DirectiveBinding<MutateValue>,
@@ -51,7 +57,7 @@ function mounted (
   const observer = new MutationObserver(
     (mutationsList: MutationRecord[], observer: MutationObserver) => {
       /* istanbul ignore if */
-      if (!el._mutate) return // Just in case, should never fire
+      if (!mutateState.has(el)) return // Just in case, should never fire
 
       callback(mutationsList, observer)
 
@@ -61,8 +67,7 @@ function mounted (
   )
 
   observer.observe(el, options)
-  el._mutate = Object(el._mutate)
-  el._mutate![vnode.ctx!.uid] = { observer }
+  mutateState.set(el, { observer })
 }
 
 function unmounted (
@@ -70,10 +75,11 @@ function unmounted (
   binding: DirectiveBinding<MutateValue>,
   vnode: VNode
 ) {
-  if (!el._mutate?.[vnode.ctx!.uid]) return
+  const state = mutateState.get(el)
+  if (!state) return
 
-  el._mutate[vnode.ctx!.uid]!.observer.disconnect()
-  delete el._mutate[vnode.ctx!.uid]
+  state.observer.disconnect()
+  mutateState.delete(el)
 }
 
 export const Mutate = {

package/src/directives/resize/__tests__/resize.spec.ts

@@ -8,10 +8,10 @@ describe('resize.ts', () => {
     jest.spyOn(window, 'removeEventListener')
     const el = {}
 
-    Resize.mounted(el as HTMLElement, { value: callback } as any, { ctx: { uid: 1 } } as any)
+    Resize.mounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback } as any, {} as any)
     expect(callback).toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unmounted(el as HTMLElement, { value: callback } as any, { ctx: { uid: 1 } } as any)
+    Resize.unmounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback } as any, {} as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 
@@ -21,10 +21,10 @@ describe('resize.ts', () => {
     jest.spyOn(window, 'removeEventListener')
     const el = {}
 
-    Resize.mounted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { ctx: { uid: 1 } } as any)
+    Resize.mounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback, modifiers: { quiet: true } } as any, {} as any)
     expect(callback).not.toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unmounted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { ctx: { uid: 1 } } as any)
+    Resize.unmounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback, modifiers: { quiet: true } } as any, {} as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 })

package/src/directives/resize/index.ts

@@ -5,18 +5,13 @@ interface ResizeDirectiveBinding extends DirectiveBinding {
   options?: boolean | AddEventListenerOptions
 }
 
-declare global {
-  interface HTMLElement {
-    _onResize?: Record<
-      number,
-      {
-        callback: () => void
-        options: boolean | AddEventListenerOptions
-      }
-    >
-  }
+interface ResizeState {
+  callback: () => void
+  options: boolean | AddEventListenerOptions
 }
 
+const resizeState = new WeakMap<HTMLElement, ResizeState>()
+
 function mounted (
   el: HTMLElement,
   binding: ResizeDirectiveBinding,
@@ -27,11 +22,10 @@ function mounted (
 
   window.addEventListener('resize', callback, options)
 
-  el._onResize = Object(el._onResize)
-  el._onResize![vnode.ctx!.uid] = {
+  resizeState.set(el, {
     callback,
     options
-  }
+  })
 
   if (!binding.modifiers || !binding.modifiers.quiet) {
     callback()
@@ -43,13 +37,12 @@ function unmounted (
   binding: ResizeDirectiveBinding,
   vnode: VNode
 ) {
-  if (!el._onResize?.[vnode.ctx!.uid]) return
-
-  const { callback, options } = el._onResize[vnode.ctx!.uid]!
+  const state = resizeState.get(el)
+  if (!state) return
+  const { callback, options } = state
 
   window.removeEventListener('resize', callback, options)
-
-  delete el._onResize[vnode.ctx!.uid]
+  resizeState.delete(el)
 }
 
 export const Resize: ObjectDirective = {

package/src/directives/scroll/__tests__/scroll.spec.ts

@@ -12,9 +12,10 @@ describe('scroll.ts', () => {
   let vnode
 
   beforeEach(() => {
-    vnode = { ctx: { uid: 1 } } as any
+    vnode = {} as any
     options = { passive: true }
     binding = {
+      instance: { $: { uid: 1 } },
       value: jest.fn(),
       modifiers: {},
       arg: null
@@ -32,16 +33,10 @@ describe('scroll.ts', () => {
     mounted(el, binding, vnode)
 
     expect(spyOnWindowAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toEqual({
-      handler: binding.value,
-      options,
-      target: window
-    })
 
     unmounted(el, binding, vnode)
 
     expect(spyOnWindowRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toBeUndefined()
   })
 
   it('should work with a provided valid querySelector string', () => {
@@ -66,16 +61,10 @@ describe('scroll.ts', () => {
     mounted(el, binding, vnode)
 
     expect(spyOnFooAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toEqual({
-      handler: binding.value,
-      options,
-      target
-    })
 
     unmounted(el, binding, vnode)
 
     expect(spyOnFooRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toBeUndefined()
 
     document.body.removeChild(target)
   })
@@ -86,16 +75,10 @@ describe('scroll.ts', () => {
     mounted(el, binding, vnode)
 
     expect(el.addEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toEqual({
-      handler: binding.value,
-      options,
-      target: undefined
-    })
 
     unmounted(el, binding, vnode)
 
     expect(el.removeEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toBeUndefined()
   })
 
   it('should not remove listeners if no _onScroll property present', () => {
@@ -106,25 +89,18 @@ describe('scroll.ts', () => {
 
   it('should accept an object for the value with handler and/or options', () => {
     const handler = binding.value
+    jest.spyOn(window, 'addEventListener')
 
     binding.value = { handler }
 
     mounted(el, binding, vnode)
 
-    expect(el._onScroll[1]).toEqual({
-      handler,
-      target: window,
-      options: { passive: true }
-    })
+    expect(window.addEventListener).toHaveBeenLastCalledWith('scroll', handler, { passive: true })
 
     binding.value = { handler, options: { passive: false } }
 
     mounted(el, binding, vnode)
 
-    expect(el._onScroll[1]).toEqual({
-      handler,
-      target: window,
-      options: { passive: false }
-    })
+    expect(window.addEventListener).toHaveBeenLastCalledWith('scroll', handler, { passive: false })
   })
 })

package/src/directives/scroll/index.ts

@@ -13,6 +13,14 @@ interface ScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers'> {
   }
 }
 
+interface ScrollState {
+  handler: EventListener | EventListenerObject
+  options: boolean | AddEventListenerOptions
+  target?: EventTarget
+}
+
+const scrollState = new WeakMap<HTMLElement, ScrollState>()
+
 function mounted (
   el: HTMLElement,
   binding: ScrollDirectiveBinding,
@@ -38,13 +46,12 @@ function mounted (
 
   target.addEventListener('scroll', handler, options)
 
-  el._onScroll = Object(el._onScroll)
-  el._onScroll![vnode.ctx!.uid] = {
+  scrollState.set(el, {
     handler,
     options,
     // Don't reference self
     target: self ? undefined : target
-  }
+  })
 }
 
 function unmounted (
@@ -52,12 +59,12 @@ function unmounted (
   binding: ScrollDirectiveBinding,
   vnode: VNode
 ) {
-  if (!el._onScroll?.[vnode.ctx!.uid]) return
-
-  const { handler, options, target = el } = el._onScroll[vnode.ctx!.uid]!
+  const state = scrollState.get(el)
+  if (!state) return
+  const { handler, options, target = el } = state
 
   target.removeEventListener('scroll', handler, options)
-  delete el._onScroll[vnode.ctx!.uid]
+  scrollState.delete(el)
 }
 
 export const Scroll: ObjectDirective = {