Extract static `DATA_KEY` & `EVENT_KEY` to base-component (#33635)

* Force each plugin that extends base-components to implement a static method `NAME()`
* Remove redundant `NAME` argument from 'Utils.defineJQueryPlugin' & fix test

14 files changed, 49 insertions, 52 deletions

diff --git a/js/src/alert.js b/js/src/alert.js
index 8d0838737a..db58d7426b 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -43,8 +43,8 @@ const CLASS_NAME_SHOW = 'show'
 class Alert extends BaseComponent {
   // Getters
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -127,6 +127,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDi
  * add .Alert to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Alert)
+defineJQueryPlugin(Alert)
 
 export default Alert
diff --git a/js/src/base-component.js b/js/src/base-component.js
index 588a59d756..eacc8420bc 100644
--- a/js/src/base-component.js
+++ b/js/src/base-component.js
@@ -35,7 +35,7 @@ class BaseComponent {
 
   dispose() {
     Data.remove(this._element, this.constructor.DATA_KEY)
-    EventHandler.off(this._element, `.${this.constructor.DATA_KEY}`)
+    EventHandler.off(this._element, this.constructor.EVENT_KEY)
 
     Object.getOwnPropertyNames(this).forEach(propertyName => {
       this[propertyName] = null
@@ -63,6 +63,18 @@ class BaseComponent {
   static get VERSION() {
     return VERSION
   }
+
+  static get NAME() {
+    throw new Error('You have to implement the static method "NAME", for each component!')
+  }
+
+  static get DATA_KEY() {
+    return `bs.${this.NAME}`
+  }
+
+  static get EVENT_KEY() {
+    return `.${this.DATA_KEY}`
+  }
 }
 
 export default BaseComponent
diff --git a/js/src/button.js b/js/src/button.js
index 45c691dd43..4932c19552 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -36,8 +36,8 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 class Button extends BaseComponent {
   // Getters
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -90,6 +90,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
  * add .Button to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Button)
+defineJQueryPlugin(Button)
 
 export default Button
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 92733637e9..0e45fed761 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -127,8 +127,8 @@ class Carousel extends BaseComponent {
     return Default
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -598,6 +598,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  * add .Carousel to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Carousel)
+defineJQueryPlugin(Carousel)
 
 export default Carousel
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 0d1b91be55..1c8f53ebd6 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -105,8 +105,8 @@ class Collapse extends BaseComponent {
     return Default
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -390,6 +390,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Collapse to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Collapse)
+defineJQueryPlugin(Collapse)
 
 export default Collapse
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index f56ab201b7..8f501d8113 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -116,8 +116,8 @@ class Dropdown extends BaseComponent {
     return DefaultType
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -530,6 +530,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Dropdown to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Dropdown)
+defineJQueryPlugin(Dropdown)
 
 export default Dropdown
diff --git a/js/src/modal.js b/js/src/modal.js
index 44f2a0cbb2..058d4a36b2 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -93,8 +93,8 @@ class Modal extends BaseComponent {
     return Default
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -441,6 +441,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Modal to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Modal)
+defineJQueryPlugin(Modal)
 
 export default Modal
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index 8ddb776b1f..65d1e6ba75 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -78,12 +78,12 @@ class Offcanvas extends BaseComponent {
 
   // Getters
 
-  static get Default() {
-    return Default
+  static get NAME() {
+    return NAME
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get Default() {
+    return Default
   }
 
   // Public
@@ -271,6 +271,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  * ------------------------------------------------------------------------
  */
 
-defineJQueryPlugin(NAME, Offcanvas)
+defineJQueryPlugin(Offcanvas)
 
 export default Offcanvas
diff --git a/js/src/popover.js b/js/src/popover.js
index 58b3623280..c105ee2a14 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -76,18 +76,10 @@ class Popover extends Tooltip {
     return NAME
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
-  }
-
   static get Event() {
     return Event
   }
 
-  static get EVENT_KEY() {
-    return EVENT_KEY
-  }
-
   static get DefaultType() {
     return DefaultType
   }
@@ -166,6 +158,6 @@ class Popover extends Tooltip {
  * add .Popover to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Popover)
+defineJQueryPlugin(Popover)
 
 export default Popover
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 7c59dabcff..d22f489570 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -87,8 +87,8 @@ class ScrollSpy extends BaseComponent {
     return Default
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -303,6 +303,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  * add .ScrollSpy to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, ScrollSpy)
+defineJQueryPlugin(ScrollSpy)
 
 export default ScrollSpy
diff --git a/js/src/tab.js b/js/src/tab.js
index 8ee2738113..34107bac03 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -55,8 +55,8 @@ const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'
 class Tab extends BaseComponent {
   // Getters
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -220,6 +220,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Tab to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Tab)
+defineJQueryPlugin(Tab)
 
 export default Tab
diff --git a/js/src/toast.js b/js/src/toast.js
index cf869cd5a3..e427ea6569 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -81,8 +81,8 @@ class Toast extends BaseComponent {
     return Default
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
+  static get NAME() {
+    return NAME
   }
 
   // Public
@@ -243,6 +243,6 @@ class Toast extends BaseComponent {
  * add .Toast to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Toast)
+defineJQueryPlugin(Toast)
 
 export default Toast
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 7226d31234..632115d72e 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -155,18 +155,10 @@ class Tooltip extends BaseComponent {
     return NAME
   }
 
-  static get DATA_KEY() {
-    return DATA_KEY
-  }
-
   static get Event() {
     return Event
   }
 
-  static get EVENT_KEY() {
-    return EVENT_KEY
-  }
-
   static get DefaultType() {
     return DefaultType
   }
@@ -774,6 +766,6 @@ class Tooltip extends BaseComponent {
  * add .Tooltip to jQuery only if jQuery is present
  */
 
-defineJQueryPlugin(NAME, Tooltip)
+defineJQueryPlugin(Tooltip)
 
 export default Tooltip
diff --git a/js/src/util/index.js b/js/src/util/index.js
index a5144f15e4..0dd6b1d454 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -214,11 +214,12 @@ const onDOMContentLoaded = callback => {
 
 const isRTL = () => document.documentElement.dir === 'rtl'
 
-const defineJQueryPlugin = (name, plugin) => {
+const defineJQueryPlugin = plugin => {
   onDOMContentLoaded(() => {
     const $ = getjQuery()
     /* istanbul ignore if */
     if ($) {
+      const name = plugin.NAME
       const JQUERY_NO_CONFLICT = $.fn[name]
       $.fn[name] = plugin.jQueryInterface
       $.fn[name].Constructor = plugin