Refactor components to use a utility function to define jQuery plugins (#32285)

* refactor: use an utility function to define jQuery plugins

* test: add spec for defineJQueryPlugin utility function

* Update .bundlewatch.config.json

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

14 files changed, 67 insertions, 167 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 6438ddca9e..0740663900 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -38,7 +38,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "21.75 kB"
+      "maxSize": "21.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.esm.js",
@@ -54,7 +54,7 @@
     },
     {
       "path": "./dist/js/bootstrap.min.js",
-      "maxSize": "15.75 kB"
+      "maxSize": "15.5 kB"
     }
   ],
   "ci": {
diff --git a/js/src/alert.js b/js/src/alert.js
index e2fad2d1f4..e498d0324d 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -137,18 +136,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDi
  * add .Alert to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Alert.jQueryInterface
-    $.fn[NAME].Constructor = Alert
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Alert.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Alert)
 
 export default Alert
diff --git a/js/src/button.js b/js/src/button.js
index b50f4c7a21..e0f74b0655 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery, onDOMContentLoaded } from './util/index'
+import { defineJQueryPlugin } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
@@ -90,19 +90,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
  * add .Button to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Button.jQueryInterface
-    $.fn[NAME].Constructor = Button
-
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Button.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Button)
 
 export default Button
diff --git a/js/src/carousel.js b/js/src/carousel.js
index a84d8d97f8..299aadedaa 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -614,18 +613,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  * add .Carousel to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Carousel.jQueryInterface
-    $.fn[NAME].Constructor = Carousel
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Carousel.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Carousel)
 
 export default Carousel
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 87eae56db9..590615b724 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   getSelectorFromElement,
@@ -407,18 +406,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Collapse to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Collapse.jQueryInterface
-    $.fn[NAME].Constructor = Collapse
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Collapse.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Collapse)
 
 export default Collapse
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 5fcfb4be9b..4720ed1ab9 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -8,8 +8,7 @@
 import * as Popper from '@popperjs/core'
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   getElementFromSelector,
   isElement,
   isVisible,
@@ -490,18 +489,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stop
  * add .Dropdown to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Dropdown.jQueryInterface
-    $.fn[NAME].Constructor = Dropdown
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Dropdown.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Dropdown)
 
 export default Dropdown
diff --git a/js/src/modal.js b/js/src/modal.js
index 6d84bff725..20fb215c6d 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -602,18 +601,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Modal to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Modal.jQueryInterface
-    $.fn[NAME].Constructor = Modal
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Modal.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Modal)
 
 export default Modal
diff --git a/js/src/popover.js b/js/src/popover.js
index 984bf8fa98..b5a788961c 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery, onDOMContentLoaded } from './util/index'
+import { defineJQueryPlugin } from './util/index'
 import Data from './dom/data'
 import SelectorEngine from './dom/selector-engine'
 import Tooltip from './tooltip'
@@ -165,18 +165,6 @@ class Popover extends Tooltip {
  * add .Popover to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Popover.jQueryInterface
-    $.fn[NAME].Constructor = Popover
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Popover.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Popover)
 
 export default Popover
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 988528a698..a8770ef085 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   getSelectorFromElement,
   getUID,
   isElement,
@@ -315,18 +314,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  * add .ScrollSpy to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = ScrollSpy.jQueryInterface
-    $.fn[NAME].Constructor = ScrollSpy
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return ScrollSpy.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, ScrollSpy)
 
 export default ScrollSpy
diff --git a/js/src/tab.js b/js/src/tab.js
index 9d5440896c..3a48986c47 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -219,18 +218,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * add .Tab to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Tab.jQueryInterface
-    $.fn[NAME].Constructor = Tab
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Tab.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Tab)
 
 export default Tab
diff --git a/js/src/toast.js b/js/src/toast.js
index 3542160b73..bda152af66 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   getTransitionDurationFromElement,
@@ -216,18 +215,6 @@ class Toast extends BaseComponent {
  * add .Toast to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Toast.jQueryInterface
-    $.fn[NAME].Constructor = Toast
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Toast.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Toast)
 
 export default Toast
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 06cf6e55bb..df0f0c19c7 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -8,8 +8,7 @@
 import * as Popper from '@popperjs/core'
 
 import {
-  getjQuery,
-  onDOMContentLoaded,
+  defineJQueryPlugin,
   TRANSITION_END,
   emulateTransitionEnd,
   findShadowRoot,
@@ -786,18 +785,6 @@ class Tooltip extends BaseComponent {
  * add .Tooltip to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
-  const $ = getjQuery()
-  /* istanbul ignore if */
-  if ($) {
-    const JQUERY_NO_CONFLICT = $.fn[NAME]
-    $.fn[NAME] = Tooltip.jQueryInterface
-    $.fn[NAME].Constructor = Tooltip
-    $.fn[NAME].noConflict = () => {
-      $.fn[NAME] = JQUERY_NO_CONFLICT
-      return Tooltip.jQueryInterface
-    }
-  }
-})
+defineJQueryPlugin(NAME, Tooltip)
 
 export default Tooltip
diff --git a/js/src/util/index.js b/js/src/util/index.js
index f1bf6c9fc5..1bf9fe9548 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -188,6 +188,22 @@ const onDOMContentLoaded = callback => {
 
 const isRTL = document.documentElement.dir === 'rtl'
 
+const defineJQueryPlugin = (name, plugin) => {
+  onDOMContentLoaded(() => {
+    const $ = getjQuery()
+    /* istanbul ignore if */
+    if ($) {
+      const JQUERY_NO_CONFLICT = $.fn[name]
+      $.fn[name] = plugin.jQueryInterface
+      $.fn[name].Constructor = plugin
+      $.fn[name].noConflict = () => {
+        $.fn[name] = JQUERY_NO_CONFLICT
+        return plugin.jQueryInterface
+      }
+    }
+  })
+}
+
 export {
   TRANSITION_END,
   getUID,
@@ -204,5 +220,6 @@ export {
   reflow,
   getjQuery,
   onDOMContentLoaded,
-  isRTL
+  isRTL,
+  defineJQueryPlugin
 }
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index ecad59b4d3..d4b09bf771 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -413,4 +413,29 @@ describe('Util', () => {
       expect(spy).toHaveBeenCalled()
     })
   })
+
+  describe('defineJQueryPlugin', () => {
+    const fakejQuery = { fn: {} }
+
+    beforeEach(() => {
+      Object.defineProperty(window, 'jQuery', {
+        value: fakejQuery,
+        writable: true
+      })
+    })
+
+    afterEach(() => {
+      window.jQuery = undefined
+    })
+
+    it('should define a plugin on the jQuery instance', () => {
+      const pluginMock = function () {}
+      pluginMock.jQueryInterface = function () {}
+
+      Util.defineJQueryPlugin('test', pluginMock)
+      expect(fakejQuery.fn.test).toBe(pluginMock.jQueryInterface)
+      expect(fakejQuery.fn.test.Constructor).toBe(pluginMock)
+      expect(typeof fakejQuery.fn.test.noConflict).toEqual('function')
+    })
+  })
 })