From 30a9123a332237c102b8060f26b10128fb00bbdd Mon Sep 17 00:00:00 2001 From: alpadev Date: Mon, 30 Nov 2020 07:17:40 +0100 Subject: [PATCH 1/4] refactor: use an utility function to define jquery plugins --- js/src/alert.js | 17 ++--------------- js/src/button.js | 17 ++--------------- js/src/carousel.js | 17 ++--------------- js/src/collapse.js | 17 ++--------------- js/src/dropdown.js | 17 ++--------------- js/src/modal.js | 17 ++--------------- js/src/popover.js | 16 ++-------------- js/src/scrollspy.js | 17 ++--------------- js/src/tab.js | 17 ++--------------- js/src/toast.js | 17 ++--------------- js/src/tooltip.js | 17 ++--------------- js/src/util/index.js | 19 ++++++++++++++++++- 12 files changed, 40 insertions(+), 165 deletions(-) diff --git a/js/src/alert.js b/js/src/alert.js index f1f612232d46..be89037c7b1f 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 2409955642de..3e6a11149055 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 d8ad3a135415..34e3ddbaabbd 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 0ad2b198e992..1c6dc452c57b 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 0ac108ab8110..c27ec90d303c 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -6,8 +6,7 @@ */ import { - getjQuery, - onDOMContentLoaded, + defineJQueryPlugin, getElementFromSelector, isElement, isVisible, @@ -516,18 +515,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 94bf95f8ad8a..ad86c16e2982 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 d8bd92eefb64..4aa4e34c440d 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 a05e57d623ed..0a4b65aa457c 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 c8aac3be7244..5e62530b5ba6 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 30df4606afd5..9122452fac2f 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 17148ed9a644..0b1a09e998a5 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -6,8 +6,7 @@ */ import { - getjQuery, - onDOMContentLoaded, + defineJQueryPlugin, TRANSITION_END, emulateTransitionEnd, findShadowRoot, @@ -795,18 +794,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 96cadc65bcbe..cf179cb57784 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 } From 45a279bb7ffac3c4e0096f456f743759d6b80952 Mon Sep 17 00:00:00 2001 From: alpadev Date: Mon, 30 Nov 2020 07:21:15 +0100 Subject: [PATCH 2/4] test: add spec for defineJQueryPlugin utility function --- js/tests/unit/util/index.spec.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index ecad59b4d348..8a95153666ed 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -413,4 +413,33 @@ 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) + window.document.dispatchEvent(new Event('DOMContentLoaded', { + bubbles: true, + cancelable: true + })) + expect(fakejQuery.fn.test).toBe(pluginMock.jQueryInterface) + expect(fakejQuery.fn.test.Constructor).toBe(pluginMock) + expect(fakejQuery.fn.test.noConflict).toBeDefined() + }) + }) }) From 365e99cbefb20e2ee9d940823ba290642640a57c Mon Sep 17 00:00:00 2001 From: alpadev Date: Fri, 4 Dec 2020 18:03:44 +0100 Subject: [PATCH 3/4] test: update spec for defineJQueryPlugin utility function --- js/tests/unit/util/index.spec.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index 8a95153666ed..d4b09bf77169 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -433,13 +433,9 @@ describe('Util', () => { pluginMock.jQueryInterface = function () {} Util.defineJQueryPlugin('test', pluginMock) - window.document.dispatchEvent(new Event('DOMContentLoaded', { - bubbles: true, - cancelable: true - })) expect(fakejQuery.fn.test).toBe(pluginMock.jQueryInterface) expect(fakejQuery.fn.test.Constructor).toBe(pluginMock) - expect(fakejQuery.fn.test.noConflict).toBeDefined() + expect(typeof fakejQuery.fn.test.noConflict).toEqual('function') }) }) }) From c3e4b26434cdbd3b618ddd15e971e08d4cfeb38e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 6 Dec 2020 19:00:34 +0200 Subject: [PATCH 4/4] Update .bundlewatch.config.json --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 6438ddca9e7f..074066390022 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": {