mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
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:
parent
07b60d2c3e
commit
85208ae557
14 changed files with 67 additions and 167 deletions
|
@ -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": {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue