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>

.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": {

js/src/alert.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   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(() => {
+defineJQueryPlugin(NAME, Alert)
-  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
-    }
-  }
-})
 
 export default Alert

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(() => {
+defineJQueryPlugin(NAME, Button)
-  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
-    }
-  }
-})
 
 export default Button

js/src/carousel.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   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(() => {
+defineJQueryPlugin(NAME, Carousel)
-  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
-    }
-  }
-})
 
 export default Carousel

js/src/collapse.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   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(() => {
+defineJQueryPlugin(NAME, Collapse)
-  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
-    }
-  }
-})
 
 export default Collapse

js/src/dropdown.js

@@ -8,8 +8,7 @@
 import * as Popper from '@popperjs/core'
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   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(() => {
+defineJQueryPlugin(NAME, Dropdown)
-  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
-    }
-  }
-})
 
 export default Dropdown

js/src/modal.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   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(() => {
+defineJQueryPlugin(NAME, Modal)
-  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
-    }
-  }
-})
 
 export default Modal

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(() => {
+defineJQueryPlugin(NAME, Popover)
-  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
-    }
-  }
-})
 
 export default Popover

js/src/scrollspy.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   getSelectorFromElement,
   getUID,
   isElement,
@@ -315,18 +314,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  * add .ScrollSpy to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
+defineJQueryPlugin(NAME, ScrollSpy)
-  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
-    }
-  }
-})
 
 export default ScrollSpy

js/src/tab.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   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(() => {
+defineJQueryPlugin(NAME, Tab)
-  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
-    }
-  }
-})
 
 export default Tab

js/src/toast.js

@@ -6,8 +6,7 @@
  */
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   TRANSITION_END,
   emulateTransitionEnd,
   getTransitionDurationFromElement,
@@ -216,18 +215,6 @@ class Toast extends BaseComponent {
  * add .Toast to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
+defineJQueryPlugin(NAME, Toast)
-  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
-    }
-  }
-})
 
 export default Toast

js/src/tooltip.js

@@ -8,8 +8,7 @@
 import * as Popper from '@popperjs/core'
 
 import {
-  getjQuery,
+  defineJQueryPlugin,
-  onDOMContentLoaded,
   TRANSITION_END,
   emulateTransitionEnd,
   findShadowRoot,
@@ -786,18 +785,6 @@ class Tooltip extends BaseComponent {
  * add .Tooltip to jQuery only if jQuery is present
  */
 
-onDOMContentLoaded(() => {
+defineJQueryPlugin(NAME, Tooltip)
-  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
-    }
-  }
-})
 
 export default Tooltip

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
 }

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')
+    })
+  })
 })