fix(vue3): do not rely on __vueParentComponent in tooltip

xanf · xanf · commit fe13503f7aa6 · 2022-10-25T00:35:54.000+03:00
diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -14,7 +14,6 @@ import { isBoolean, isEvent, isFunction, isUndefined } from '../../utils/inspect
 import { omit, sortKeys } from '../../utils/object'
 import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
 import { computeHref, computeRel, computeTag, isRouterLink } from '../../utils/router'
-import { getInstanceFromVNode } from '../../utils/get-instance-from-vnode'
 import { attrsMixin } from '../../mixins/attrs'
 import { listenOnRootMixin } from '../../mixins/listen-on-root'
 import { listenersMixin } from '../../mixins/listeners'
@@ -165,9 +164,11 @@ export const BLink = /*#__PURE__*/ Vue.extend({
       } else {
         // Router links do not emit instance `click` events, so we
         // add in an `$emit('click', event)` on its Vue instance
+        //
+        // seems not to be required for Vue3 compat build
         /* istanbul ignore next: difficult to test, but we know it works */
-        if (isRouterLink && getInstanceFromVNode(event.currentTarget)) {
-          getInstanceFromVNode(event.currentTarget).$emit(EVENT_NAME_CLICK, event)
+        if (isRouterLink) {
+          event.currentTarget.__vue__?.$emit(EVENT_NAME_CLICK, event)
         }
         // Call the suppliedHandler(s), if any provided
         concat(suppliedHandler)
diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
@@ -1,7 +1,6 @@
 import { createWrapper, mount } from '@vue/test-utils'
 import { isVue3 } from '../../vue'
-import { waitNT, waitRAF } from '../../../tests/utils'
-import { getInstanceFromVNode } from '../../utils/get-instance-from-vnode'
+import { waitNT, waitRAF, getInstanceFromVNode } from '../../../tests/utils'
 import { BModal } from './modal'
 import { BvModalEvent } from './helpers/bv-modal-event.class'
 
diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
@@ -24,7 +24,7 @@ import {
 } from '../../../constants/events'
 import { useParentMixin } from '../../../mixins/use-parent'
 import { arrayIncludes, concat, from as arrayFrom } from '../../../utils/array'
-import { getInstanceFromVNode } from '../../../utils/get-instance-from-vnode'
+import { getInstanceFromElement } from '../../../utils/element-to-vue-instance-registry'
 import {
   attemptFocus,
   closest,
@@ -796,8 +796,10 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
       //   Dropdown shown and hidden events will need to emit
       //   Note: Dropdown auto-ID happens in a `$nextTick()` after mount
       //         So the ID lookup would need to be done in a `$nextTick()`
-      if (getInstanceFromVNode(target)) {
-        getInstanceFromVNode(target)[on ? '$on' : '$off'](EVENT_NAME_SHOWN, this.forceHide)
+      const instance = getInstanceFromElement(target)
+
+      if (instance) {
+        instance[on ? '$on' : '$off'](EVENT_NAME_SHOWN, this.forceHide)
       }
     },
     // --- Event handlers ---
diff --git a/src/components/transporter/transporter.spec.js b/src/components/transporter/transporter.spec.js
@@ -1,7 +1,6 @@
 import { isVue3 } from '../../vue'
 import { mount } from '@vue/test-utils'
-import { waitNT } from '../../../tests/utils'
-import { getInstanceFromVNode } from '../../utils/get-instance-from-vnode'
+import { waitNT, getInstanceFromVNode } from '../../../tests/utils'
 import { BVTransporter } from './transporter'
 
 describe('utils/transporter component', () => {
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
@@ -37,6 +37,10 @@ import { clickOutMixin } from './click-out'
 import { focusInMixin } from './focus-in'
 import { idMixin, props as idProps } from './id'
 import { listenOnRootMixin } from './listen-on-root'
+import {
+  registerElementToInstance,
+  removeElementToInstance
+} from '../utils/element-to-vue-instance-registry'
 
 // --- Constants ---
 
@@ -181,11 +185,15 @@ export const dropdownMixin = Vue.extend({
     this.whileOpenListen(false)
     this.destroyPopper()
   },
+  mounted() {
+    registerElementToInstance(this.$el, this)
+  },
   beforeDestroy() {
     this.visible = false
     this.whileOpenListen(false)
     this.destroyPopper()
     this.clearHideTimeout()
+    removeElementToInstance(this.$el)
   },
   methods: {
     // Event emitter
diff --git a/src/utils/element-to-vue-instance-registry.js b/src/utils/element-to-vue-instance-registry.js
@@ -0,0 +1,39 @@
+import { isVue3 } from '../vue'
+
+let registry = null
+if (isVue3) {
+  registry = new WeakMap()
+}
+
+export const registerElementToInstance = (element, instance) => {
+  if (!isVue3) {
+    return
+  }
+
+  registry.set(element, instance)
+}
+
+export const removeElementToInstance = element => {
+  if (!isVue3) {
+    return
+  }
+
+  registry.delete(element)
+}
+
+export const getInstanceFromElement = element => {
+  if (!isVue3) {
+    return element.__vue__
+  }
+
+  let currentElement = element
+
+  while (currentElement) {
+    if (registry.has(currentElement)) {
+      return registry.get(currentElement)
+    }
+    currentElement = currentElement.parentNode
+  }
+
+  return null
+}
diff --git a/src/utils/get-instance-from-vnode.js b/src/utils/get-instance-from-vnode.js
diff --git a/tests/utils.js b/tests/utils.js
@@ -1,3 +1,5 @@
+import { isVue3 } from '../src/vue'
+
 // --- Utils for testing ---
 
 export const wrapWithMethods = (Component, methods) => ({
@@ -14,3 +16,6 @@ export const wrapWithMethods = (Component, methods) => ({
 
 export const waitNT = ctx => new Promise(resolve => ctx.$nextTick(resolve))
 export const waitRAF = () => new Promise(resolve => requestAnimationFrame(resolve))
+
+export const getInstanceFromVNode = vnode =>
+  isVue3 ? vnode.__vueParentComponent.ctx : vnode.__vue__
