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>
This commit is contained in:
alpadev 2020-12-08 07:16:50 +01:00 committed by GitHub
parent 07b60d2c3e
commit 85208ae557
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 67 additions and 167 deletions

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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
}

View File

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