feature(vue3): replace transporter implementation with teleport

xanf · xanf · commit e65f80266f22 · 2022-10-25T00:35:54.000+03:00
* Use built-in teleport in Vue3
diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
@@ -1,4 +1,5 @@
 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 { BModal } from './modal'
@@ -177,7 +178,9 @@ describe('modal', () => {
       expect(outer).not.toBe(null)
 
       expect(getInstanceFromVNode(outer)).toBeDefined() // Target
-      expect(getInstanceFromVNode(outer).$options.name).toBe('BVTransporterTarget')
+      if (!isVue3) {
+        expect(getInstanceFromVNode(outer).$options.name).toBe('BVTransporterTarget')
+      }
       expect(outer.parentElement).toBeDefined()
       expect(outer.parentElement).toBe(document.body)
 
diff --git a/src/components/toast/toaster.spec.js b/src/components/toast/toaster.spec.js
@@ -1,5 +1,6 @@
 import { PortalTarget } from 'portal-vue'
 import { mount } from '@vue/test-utils'
+import { isVue3 } from '../../vue'
 import { waitNT, waitRAF } from '../../../tests/utils'
 import { BToaster } from './toaster'
 
@@ -27,7 +28,9 @@ describe('b-toaster', () => {
 
     expect(wrapper.find('.b-toaster-slot').exists()).toBe(true)
     const $slot = wrapper.find('.b-toaster-slot')
-    expect($slot.findComponent(PortalTarget).exists()).toBe(true)
+    if (!isVue3) {
+      expect($slot.findComponent(PortalTarget).exists()).toBe(true)
+    }
     expect($slot.element.tagName).toBe('DIV')
     expect($slot.classes()).toContain('b-toaster-slot')
     expect($slot.classes()).toContain('vue-portal-target')
@@ -60,7 +63,9 @@ describe('b-toaster', () => {
 
     expect(wrapper.find('.b-toaster-slot').exists()).toBe(true)
     const $slot = wrapper.find('.b-toaster-slot')
-    expect($slot.findComponent(PortalTarget).exists()).toBe(true)
+    if (!isVue3) {
+      expect($slot.findComponent(PortalTarget).exists()).toBe(true)
+    }
     expect($slot.element.tagName).toBe('DIV')
     expect($slot.classes()).toContain('b-toaster-slot')
     expect($slot.classes()).toContain('vue-portal-target')
diff --git a/src/components/transporter/transporter.js b/src/components/transporter/transporter.js
@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { Vue, isVue3 } from '../../vue'
 import { NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET } from '../../constants/components'
 import { IS_BROWSER } from '../../constants/env'
 import {
@@ -79,7 +79,7 @@ export const props = {
 // --- Main component ---
 
 // @vue/component
-export const BVTransporter = /*#__PURE__*/ Vue.extend({
+const BVTransporterVue2 = /*#__PURE__*/ Vue.extend({
   name: NAME_TRANSPORTER,
   mixins: [normalizeSlotMixin],
   props,
@@ -177,3 +177,26 @@ export const BVTransporter = /*#__PURE__*/ Vue.extend({
     return h()
   }
 })
+
+const BVTransporterVue3 = /*#__PURE__*/ Vue.extend({
+  name: NAME_TRANSPORTER,
+  mixins: [normalizeSlotMixin],
+  props,
+  render(h) {
+    if (this.disabled) {
+      const $nodes = concat(this.normalizeSlot()).filter(identity)
+      if ($nodes.length > 0) {
+        return $nodes[0]
+      }
+    }
+    return h(
+      Vue.Teleport,
+      {
+        to: this.container
+      },
+      this.normalizeSlot()
+    )
+  }
+})
+
+export const BVTransporter = isVue3 ? BVTransporterVue3 : BVTransporterVue2
diff --git a/src/components/transporter/transporter.spec.js b/src/components/transporter/transporter.spec.js
@@ -1,3 +1,4 @@
+import { isVue3 } from '../../vue'
 import { mount } from '@vue/test-utils'
 import { waitNT } from '../../../tests/utils'
 import { getInstanceFromVNode } from '../../utils/get-instance-from-vnode'
@@ -45,7 +46,9 @@ describe('utils/transporter component', () => {
     expect(target).toBeDefined()
     expect(target).not.toBe(null)
     expect(getInstanceFromVNode(target)).toBeDefined() // Target
-    expect(getInstanceFromVNode(target).$options.name).toBe('BVTransporterTarget')
+    if (!isVue3) {
+      expect(getInstanceFromVNode(target).$options.name).toBe('BVTransporterTarget')
+    }
     expect(target.tagName).toEqual('DIV')
     expect(target.parentElement).toBeDefined()
     expect(target.parentElement).toBe(document.body)
