being ssr friendly when accessing dom objects

.bundlewatch.config.json

@@ -38,7 +38,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "22.75 kB"
+      "maxSize": "22.95 kB"
     },
     {
       "path": "./dist/js/bootstrap.esm.js",
@@ -50,11 +50,11 @@
     },
     {
       "path": "./dist/js/bootstrap.js",
-      "maxSize": "29 kB"
+      "maxSize": "29.1 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",
-      "maxSize": "16.5 kB"
+      "maxSize": "16.6 kB"
     }
   ],
   "ci": {

.eslintrc.json

@@ -1,11 +1,13 @@
 {
   "root": true,
+  "plugins": ["ssr-friendly"],
   "extends": [
     "plugin:import/errors",
     "plugin:import/warnings",
     "plugin:unicorn/recommended",
     "xo/esnext",
-    "xo/browser"
+    "xo/browser",
+    "plugin:ssr-friendly/recommended"
   ],
   "rules": {
     "capitalized-comments": "off",
@@ -53,6 +55,8 @@
     "unicorn/prefer-dom-node-remove": "off",
     "unicorn/prefer-query-selector": "off",
     "unicorn/prefer-spread": "off",
-    "unicorn/prevent-abbreviations": "off"
+    "unicorn/prevent-abbreviations": "off",
+    "ssr-friendly/no-dom-globals-in-react-cc-render": "off",
+    "ssr-friendly/no-dom-globals-in-react-fc": "off"
   }
 }

js/src/alert.js

@@ -8,6 +8,7 @@
 import {
   defineJQueryPlugin,
   emulateTransitionEnd,
+  getDocument,
   getElementFromSelector,
   getTransitionDurationFromElement
 } from './util/index'
@@ -127,7 +128,7 @@ class Alert extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDismiss(new Alert()))
+EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDismiss(new Alert()))
 
 /**
  * ------------------------------------------------------------------------

js/src/base-component.js

@@ -6,6 +6,7 @@
  */
 
 import Data from './dom/data'
+import { getDocument, getWindow } from './util/index'
 
 /**
  * ------------------------------------------------------------------------
@@ -17,13 +18,15 @@ const VERSION = '5.0.0-beta2'
 
 class BaseComponent {
   constructor(element) {
-    element = typeof element === 'string' ? document.querySelector(element) : element
+    element = typeof element === 'string' ? getDocument().querySelector(element) : element
 
     if (!element) {
       return
     }
 
     this._element = element
+    this._window = getWindow()
+    this._document = getDocument()
     Data.set(this._element, this.constructor.DATA_KEY, this)
   }
 

js/src/button.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
+import { defineJQueryPlugin, getDocument } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
@@ -70,7 +70,7 @@ class Button extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
+EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
   event.preventDefault()
 
   const button = event.target.closest(SELECTOR_DATA_TOGGLE)

js/src/carousel.js

@@ -8,8 +8,10 @@
 import {
   defineJQueryPlugin,
   emulateTransitionEnd,
+  getDocument,
   getElementFromSelector,
   getTransitionDurationFromElement,
+  getWindow,
   isRTL,
   isVisible,
   reflow,
@@ -117,8 +119,8 @@ class Carousel extends BaseComponent {
 
     this._config = this._getConfig(config)
     this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
-    this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
-    this._pointerEvent = Boolean(window.PointerEvent)
+    this._touchSupported = 'ontouchstart' in this._document.documentElement || this._window.navigator.maxTouchPoints > 0
+    this._pointerEvent = Boolean(this._window.PointerEvent)
 
     this._addEventListeners()
   }
@@ -144,7 +146,7 @@ class Carousel extends BaseComponent {
   nextWhenVisible() {
     // Don't call next when the page isn't visible
     // or the carousel or its parent isn't visible
-    if (!document.hidden && isVisible(this._element)) {
+    if (!this._document.hidden && isVisible(this._element)) {
       this.next()
     }
   }
@@ -183,7 +185,7 @@ class Carousel extends BaseComponent {
       this._updateInterval()
 
       this._interval = setInterval(
-        (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
+        (this._document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
         this._config.interval
       )
     }
@@ -604,9 +606,9 @@ class Carousel extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler)
+EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler)
 
-EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+EventHandler.on(getWindow(), EVENT_LOAD_DATA_API, () => {
   const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE)
 
   for (let i = 0, len = carousels.length; i < len; i++) {

js/src/collapse.js

@@ -8,6 +8,7 @@
 import {
   defineJQueryPlugin,
   emulateTransitionEnd,
+  getDocument,
   getSelectorFromElement,
   getElementFromSelector,
   getTransitionDurationFromElement,
@@ -369,7 +370,7 @@ class Collapse extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
   // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
   if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
     event.preventDefault()

js/src/dom/event-handler.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery } from '../util/index'
+import { getDocument, getjQuery } from '../util/index'
 
 /**
  * ------------------------------------------------------------------------
@@ -292,7 +292,7 @@ const EventHandler = {
     }
 
     if (isNative) {
-      evt = document.createEvent('HTMLEvents')
+      evt = getDocument().createEvent('HTMLEvents')
       evt.initEvent(typeEvent, bubbles, true)
     } else {
       evt = new CustomEvent(event, {

js/src/dom/manipulator.js

@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import { getDocument } from '../util/index'
+
 function normalizeData(val) {
   if (val === 'true') {
     return true
@@ -62,10 +64,11 @@ const Manipulator = {
 
   offset(element) {
     const rect = element.getBoundingClientRect()
+    const documentRef = getDocument()
 
     return {
-      top: rect.top + document.body.scrollTop,
-      left: rect.left + document.body.scrollLeft
+      top: rect.top + documentRef.body.scrollTop,
+      left: rect.left + documentRef.body.scrollLeft
     }
   },
 

js/src/dom/selector-engine.js

@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import { getDocument } from '../util/index'
+
 /**
  * ------------------------------------------------------------------------
  * Constants
@@ -14,11 +16,11 @@
 const NODE_TEXT = 3
 
 const SelectorEngine = {
-  find(selector, element = document.documentElement) {
+  find(selector, element = getDocument().documentElement) {
     return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
   },
 
-  findOne(selector, element = document.documentElement) {
+  findOne(selector, element = getDocument().documentElement) {
     return Element.prototype.querySelector.call(element, selector)
   },
 

js/src/dropdown.js

@@ -9,6 +9,7 @@ import * as Popper from '@popperjs/core'
 
 import {
   defineJQueryPlugin,
+  getDocument,
   getElementFromSelector,
   isElement,
   isVisible,
@@ -190,9 +191,9 @@ class Dropdown extends BaseComponent {
     // empty mouseover listeners to the body's immediate children;
     // only needed because of broken event delegation on iOS
     // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-    if ('ontouchstart' in document.documentElement &&
+    if ('ontouchstart' in this._document.documentElement &&
       !parent.closest(SELECTOR_NAVBAR_NAV)) {
-      [].concat(...document.body.children)
+      [].concat(...this._document.body.children)
         .forEach(elem => EventHandler.on(elem, 'mouseover', null, noop()))
     }
 
@@ -414,10 +415,12 @@ class Dropdown extends BaseComponent {
         continue
       }
 
+      const documentRef = getDocument()
+
       // If this is a touch-enabled device we remove the extra
       // empty mouseover listeners we added for iOS support
-      if ('ontouchstart' in document.documentElement) {
-        [].concat(...document.body.children)
+      if ('ontouchstart' in documentRef.documentElement) {
+        [].concat(...documentRef.body.children)
           .forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()))
       }
 
@@ -513,16 +516,18 @@ class Dropdown extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
-EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler)
-EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
-EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+const documentRef = getDocument()
+
+EventHandler.on(documentRef, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
+EventHandler.on(documentRef, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler)
+EventHandler.on(documentRef, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
+EventHandler.on(documentRef, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
+EventHandler.on(documentRef, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
   event.preventDefault()
   event.stopPropagation()
   Dropdown.dropdownInterface(this, 'toggle')
 })
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation())
+EventHandler.on(documentRef, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation())
 
 /**
  * ------------------------------------------------------------------------