Make event name helper and use it on tooltip & popover to reduce dist sizes (#35856)

* feat: create eventName getter function in baseComponent

* refactor: use `eventName` getter on tooltip & popover

5 files changed, 27 insertions, 69 deletions

diff --git a/js/src/base-component.js b/js/src/base-component.js
index 4140bf1947..75bb90c326 100644
--- a/js/src/base-component.js
+++ b/js/src/base-component.js
@@ -76,6 +76,10 @@ class BaseComponent extends Config {
   static get EVENT_KEY() {
     return `.${this.DATA_KEY}`
   }
+
+  static eventName(name) {
+    return `${name}${this.EVENT_KEY}`
+  }
 }
 
 export default BaseComponent
diff --git a/js/src/popover.js b/js/src/popover.js
index b62b6a2123..b6d1e2010e 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -13,8 +13,6 @@ import Tooltip from './tooltip'
  */
 
 const NAME = 'popover'
-const DATA_KEY = 'bs.popover'
-const EVENT_KEY = `.${DATA_KEY}`
 
 const SELECTOR_TITLE = '.popover-header'
 const SELECTOR_CONTENT = '.popover-body'
@@ -37,19 +35,6 @@ const DefaultType = {
   content: '(null|string|element|function)'
 }
 
-const Event = {
-  HIDE: `hide${EVENT_KEY}`,
-  HIDDEN: `hidden${EVENT_KEY}`,
-  SHOW: `show${EVENT_KEY}`,
-  SHOWN: `shown${EVENT_KEY}`,
-  INSERTED: `inserted${EVENT_KEY}`,
-  CLICK: `click${EVENT_KEY}`,
-  FOCUSIN: `focusin${EVENT_KEY}`,
-  FOCUSOUT: `focusout${EVENT_KEY}`,
-  MOUSEENTER: `mouseenter${EVENT_KEY}`,
-  MOUSELEAVE: `mouseleave${EVENT_KEY}`
-}
-
 /**
  * Class definition
  */
@@ -68,10 +53,6 @@ class Popover extends Tooltip {
     return NAME
   }
 
-  static get Event() {
-    return Event
-  }
-
   // Overrides
   _isWithContent() {
     return this._getTitle() || this._getContent()
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index ef5b9fa825..5cf56ce6e3 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -6,14 +6,7 @@
  */
 
 import * as Popper from '@popperjs/core'
-import {
-  defineJQueryPlugin,
-  findShadowRoot,
-  getElement,
-  getUID,
-  isRTL,
-  noop
-} from './util/index'
+import { defineJQueryPlugin, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index'
 import { DefaultAllowlist } from './util/sanitizer'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
@@ -25,8 +18,6 @@ import TemplateFactory from './util/template-factory'
  */
 
 const NAME = 'tooltip'
-const DATA_KEY = 'bs.tooltip'
-const EVENT_KEY = `.${DATA_KEY}`
 const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
 
 const CLASS_NAME_FADE = 'fade'
@@ -43,6 +34,17 @@ const TRIGGER_FOCUS = 'focus'
 const TRIGGER_CLICK = 'click'
 const TRIGGER_MANUAL = 'manual'
 
+const EVENT_HIDE = 'hide'
+const EVENT_HIDDEN = 'hidden'
+const EVENT_SHOW = 'show'
+const EVENT_SHOWN = 'shown'
+const EVENT_INSERTED = 'inserted'
+const EVENT_CLICK = 'click'
+const EVENT_FOCUSIN = 'focusin'
+const EVENT_FOCUSOUT = 'focusout'
+const EVENT_MOUSEENTER = 'mouseenter'
+const EVENT_MOUSELEAVE = 'mouseleave'
+
 const AttachmentMap = {
   AUTO: 'auto',
   TOP: 'top',
@@ -94,19 +96,6 @@ const DefaultType = {
   popperConfig: '(null|object|function)'
 }
 
-const Event = {
-  HIDE: `hide${EVENT_KEY}`,
-  HIDDEN: `hidden${EVENT_KEY}`,
-  SHOW: `show${EVENT_KEY}`,
-  SHOWN: `shown${EVENT_KEY}`,
-  INSERTED: `inserted${EVENT_KEY}`,
-  CLICK: `click${EVENT_KEY}`,
-  FOCUSIN: `focusin${EVENT_KEY}`,
-  FOCUSOUT: `focusout${EVENT_KEY}`,
-  MOUSEENTER: `mouseenter${EVENT_KEY}`,
-  MOUSELEAVE: `mouseleave${EVENT_KEY}`
-}
-
 /**
  * Class definition
  */
@@ -146,10 +135,6 @@ class Tooltip extends BaseComponent {
     return NAME
   }
 
-  static get Event() {
-    return Event
-  }
-
   // Public
   enable() {
     this._isEnabled = true
@@ -212,7 +197,7 @@ class Tooltip extends BaseComponent {
       return
     }
 
-    const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
+    const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW))
     const shadowRoot = findShadowRoot(this._element)
     const isInTheDom = shadowRoot === null ?
       this._element.ownerDocument.documentElement.contains(this._element) :
@@ -230,7 +215,7 @@ class Tooltip extends BaseComponent {
 
     if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
       container.append(tip)
-      EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
+      EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED))
     }
 
     if (this._popper) {
@@ -255,7 +240,7 @@ class Tooltip extends BaseComponent {
       const previousHoverState = this._isHovered
 
       this._isHovered = false
-      EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
+      EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN))
 
       if (previousHoverState) {
         this._leave()
@@ -270,7 +255,7 @@ class Tooltip extends BaseComponent {
       return
     }
 
-    const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
+    const hideEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDE))
     if (hideEvent.defaultPrevented) {
       return
     }
@@ -301,7 +286,7 @@ class Tooltip extends BaseComponent {
       }
 
       this._element.removeAttribute('aria-describedby')
-      EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
+      EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN))
 
       this._disposePopper()
     }
@@ -484,14 +469,14 @@ class Tooltip extends BaseComponent {
 
     for (const trigger of triggers) {
       if (trigger === 'click') {
-        EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event))
+        EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => this.toggle(event))
       } else if (trigger !== TRIGGER_MANUAL) {
         const eventIn = trigger === TRIGGER_HOVER ?
-          this.constructor.Event.MOUSEENTER :
-          this.constructor.Event.FOCUSIN
+          this.constructor.eventName(EVENT_MOUSEENTER) :
+          this.constructor.eventName(EVENT_FOCUSIN)
         const eventOut = trigger === TRIGGER_HOVER ?
-          this.constructor.Event.MOUSELEAVE :
-          this.constructor.Event.FOCUSOUT
+          this.constructor.eventName(EVENT_MOUSELEAVE) :
+          this.constructor.eventName(EVENT_FOCUSOUT)
 
         EventHandler.on(this._element, eventIn, this._config.selector, event => {
           const context = this._initializeOnDelegatedTarget(event)
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index bf3a71848c..d1a4c78478 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -43,12 +43,6 @@ describe('Popover', () => {
     })
   })
 
-  describe('Event', () => {
-    it('should return plugin events', () => {
-      expect(Popover.Event).toEqual(jasmine.any(Object))
-    })
-  })
-
   describe('EVENT_KEY', () => {
     it('should return plugin event key', () => {
       expect(Popover.EVENT_KEY).toEqual('.bs.popover')
@@ -174,7 +168,7 @@ describe('Popover', () => {
 
       popover.show()
 
-      expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.Event.SHOW)
+      expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show'))
       expect(document.querySelector('.popover')).toBeNull()
     })
 
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 0713dabfb6..c961744dfd 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -42,12 +42,6 @@ describe('Tooltip', () => {
     })
   })
 
-  describe('Event', () => {
-    it('should return plugin events', () => {
-      expect(Tooltip.Event).toEqual(jasmine.any(Object))
-    })
-  })
-
   describe('EVENT_KEY', () => {
     it('should return plugin event key', () => {
       expect(Tooltip.EVENT_KEY).toEqual('.bs.tooltip')