diff options
author | alpadev <2838324+alpadev@users.noreply.github.com> | 2020-12-08 09:16:50 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-08 09:16:50 +0300 |
commit | 85208ae5570aeefe4e94c1ceb29ca3b6ffdf83a1 (patch) | |
tree | aa53633a26516f28ea292749f2389c1708ce2c44 | |
parent | 07b60d2c3e0744d1a3182228caa0eec42a8328b1 (diff) |
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>
-rw-r--r-- | .bundlewatch.config.json | 4 | ||||
-rw-r--r-- | js/src/alert.js | 17 | ||||
-rw-r--r-- | js/src/button.js | 17 | ||||
-rw-r--r-- | js/src/carousel.js | 17 | ||||
-rw-r--r-- | js/src/collapse.js | 17 | ||||
-rw-r--r-- | js/src/dropdown.js | 17 | ||||
-rw-r--r-- | js/src/modal.js | 17 | ||||
-rw-r--r-- | js/src/popover.js | 16 | ||||
-rw-r--r-- | js/src/scrollspy.js | 17 | ||||
-rw-r--r-- | js/src/tab.js | 17 | ||||
-rw-r--r-- | js/src/toast.js | 17 | ||||
-rw-r--r-- | js/src/tooltip.js | 17 | ||||
-rw-r--r-- | js/src/util/index.js | 19 | ||||
-rw-r--r-- | js/tests/unit/util/index.spec.js | 25 |
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') + }) + }) }) |