add a way to disable jQuery detection

js/src/alert/alert.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -165,6 +165,8 @@ class Alert {
 EventHandler
   .on(document, Event.CLICK_DATA_API, Selector.DISMISS, Alert.handleDismiss(new Alert()))
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -173,7 +175,7 @@ EventHandler
  */
 
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Alert.jQueryInterface
   $.fn[NAME].Constructor = Alert

js/src/button/button.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { jQuery as $ } from '../util/index'
+import { getjQuery } from '../util/index'
 import Data from '../dom/data'
 import EventHandler from '../dom/event-handler'
 import SelectorEngine from '../dom/selector-engine'
@@ -179,6 +179,8 @@ EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, even
   }
 })
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -186,7 +188,7 @@ EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, even
  * add .button to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Button.jQueryInterface
   $.fn[NAME].Constructor = Button

js/src/carousel/carousel.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -615,6 +615,8 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => {
   }
 })
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -622,7 +624,7 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => {
  * add .carousel to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Carousel.jQueryInterface
   $.fn[NAME].Constructor = Carousel

js/src/collapse/collapse.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   getSelectorFromElement,
@@ -419,6 +419,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
   })
 })
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -426,7 +428,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
  * add .collapse to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Collapse.jQueryInterface
   $.fn[NAME].Constructor = Collapse

js/src/dom/event-handler.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { jQuery as $ } from '../util/index'
+import { getjQuery } from '../util/index'
 import { createCustomEvent, defaultPreventedPreservedOnDispatch } from './polyfill'
 
 /**
@@ -14,6 +14,7 @@ import { createCustomEvent, defaultPreventedPreservedOnDispatch } from './polyfi
  * ------------------------------------------------------------------------
  */
 
+const $ = getjQuery()
 const namespaceRegex = /[^.]*(?=\..*)\.|.*/
 const stripNameRegex = /\..*/
 const keyEventRegex = /^key/
@@ -293,7 +294,7 @@ const EventHandler = {
     let defaultPrevented = false
     let evt = null
 
-    if (inNamespace && typeof $ !== 'undefined') {
+    if (inNamespace && $) {
       jQueryEvent = $.Event(event, args)
 
       $(element).trigger(jQueryEvent)

js/src/dropdown/dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   getElementFromSelector,
   isElement,
   makeArray,
@@ -526,6 +526,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
 EventHandler
   .on(document, Event.CLICK_DATA_API, Selector.FORM_CHILD, e => e.stopPropagation())
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -533,7 +535,7 @@ EventHandler
  * add .dropdown to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Dropdown.jQueryInterface
   $.fn[NAME].Constructor = Dropdown

js/src/modal/modal.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -582,6 +582,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
   data.show(this)
 })
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -589,7 +591,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
  * add .modal to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Modal.jQueryInterface
   $.fn[NAME].Constructor = Modal

js/src/popover/popover.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { jQuery as $ } from '../util/index'
+import { getjQuery } from '../util/index'
 import Data from '../dom/data'
 import SelectorEngine from '../dom/selector-engine'
 import Tooltip from '../tooltip/tooltip'
@@ -173,13 +173,15 @@ class Popover extends Tooltip {
   }
 }
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
  * ------------------------------------------------------------------------
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Popover.jQueryInterface
   $.fn[NAME].Constructor = Popover

js/src/scrollspy/scrollspy.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   getSelectorFromElement,
   getUID,
   makeArray,
@@ -336,13 +336,15 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => {
     .forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
 })
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
  * ------------------------------------------------------------------------
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = ScrollSpy.jQueryInterface
   $.fn[NAME].Constructor = ScrollSpy

js/src/tab/tab.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   getElementFromSelector,
@@ -242,6 +242,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
   data.show()
 })
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -249,7 +251,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
  * add .tab to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Tab.jQueryInterface
   $.fn[NAME].Constructor = Tab

js/src/toast/toast.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   getTransitionDurationFromElement,
@@ -222,6 +222,8 @@ class Toast {
   }
 }
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -229,7 +231,7 @@ class Toast {
  *  add .toast to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Toast.jQueryInterface
   $.fn[NAME].Constructor = Toast

js/src/tooltip/tooltip.js

@@ -6,7 +6,7 @@
  */
 
 import {
-  jQuery as $,
+  getjQuery,
   TRANSITION_END,
   emulateTransitionEnd,
   findShadowRoot,
@@ -798,6 +798,8 @@ class Tooltip {
   }
 }
 
+const $ = getjQuery()
+
 /**
  * ------------------------------------------------------------------------
  * jQuery
@@ -805,7 +807,7 @@ class Tooltip {
  * add .tooltip to jQuery only if jQuery is present
  */
 /* istanbul ignore if */
-if (typeof $ !== 'undefined') {
+if ($) {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Tooltip.jQueryInterface
   $.fn[NAME].Constructor = Tooltip

js/src/util/index.js

@@ -8,7 +8,6 @@
 const MAX_UID = 1000000
 const MILLISECONDS_MULTIPLIER = 1000
 const TRANSITION_END = 'transitionend'
-const { jQuery } = window
 
 // Shoutout AngusCroll (https://goo.gl/pxwQGp)
 const toType = obj => ({}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase())
@@ -176,8 +175,18 @@ const noop = () => function () {}
 
 const reflow = element => element.offsetHeight
 
+const getjQuery = () => {
+  const { jQuery } = window
+
+  if (jQuery && !document.body.hasAttribute('data-no-jquery')) {
+    return jQuery
+  }
+
+  return null
+}
+
 export {
-  jQuery,
+  getjQuery,
   TRANSITION_END,
   getUID,
   getSelectorFromElement,

js/src/util/index.spec.js

@@ -346,4 +346,37 @@ describe('Util', () => {
       expect(Util.reflow(div)).toEqual(0)
     })
   })
+
+  describe('getjQuery', () => {
+    const fakejQuery = { trigger() {} }
+
+    beforeEach(() => {
+      Object.defineProperty(window, 'jQuery', {
+        value: fakejQuery,
+        writable: true
+      })
+    })
+
+    afterEach(() => {
+      window.jQuery = undefined
+    })
+
+    it('should return jQuery object when present', () => {
+      expect(Util.getjQuery()).toEqual(fakejQuery)
+    })
+
+    it('should not return jQuery object when present if data-no-jquery', () => {
+      document.body.setAttribute('data-no-jquery', '')
+
+      expect(window.jQuery).toEqual(fakejQuery)
+      expect(Util.getjQuery()).toEqual(null)
+
+      document.body.removeAttribute('data-no-jquery')
+    })
+
+    it('should not return jQuery if not present', () => {
+      window.jQuery = undefined
+      expect(Util.getjQuery()).toEqual(null)
+    })
+  })
 })

site/content/docs/4.3/getting-started/javascript.md

@@ -67,7 +67,7 @@ myModal.addEventListener('show.bs.modal', function (e) {
 {{< callout warning >}}
 ## jQuery events
 
-Bootstrap will detect jQuery only if `jQuery` is present in the `window` object. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`).
+Bootstrap will detect jQuery if `jQuery` is present in the `window` object and no `data-no-jquery` attribute on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
 
 {{< highlight js >}}
 $('#myTab a').on('shown.bs.tab', function () {