being ssr friendly when accessing dom objectsjo-ssr-friendly

4 files changed, 36 insertions, 15 deletions

diff --git a/js/src/util/component-functions.js b/js/src/util/component-functions.js
index ff9d87ee6..6c31fad5c 100644
--- a/js/src/util/component-functions.js
+++ b/js/src/util/component-functions.js
@@ -6,13 +6,13 @@
  */
 
 import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled } from './index'
+import { getElementFromSelector, isDisabled, getDocument } from './index'
 
 const enableDismissTrigger = (component, method = 'hide') => {
   const clickEvent = `click.dismiss${component.EVENT_KEY}`
   const name = component.NAME
 
-  EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
+  EventHandler.on(getDocument(), clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
     if (['A', 'AREA'].includes(this.tagName)) {
       event.preventDefault()
     }
diff --git a/js/src/util/index.js b/js/src/util/index.js
index a4ad9c941..6f5838992 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -27,7 +27,7 @@ const toType = obj => {
 const getUID = prefix => {
   do {
     prefix += Math.floor(Math.random() * MAX_UID)
-  } while (document.getElementById(prefix))
+  } while (getDocument().getElementById(prefix))
 
   return prefix
 }
@@ -61,7 +61,7 @@ const getSelectorFromElement = element => {
   const selector = getSelector(element)
 
   if (selector) {
-    return document.querySelector(selector) ? selector : null
+    return getDocument().querySelector(selector) ? selector : null
   }
 
   return null
@@ -70,7 +70,7 @@ const getSelectorFromElement = element => {
 const getElementFromSelector = element => {
   const selector = getSelector(element)
 
-  return selector ? document.querySelector(selector) : null
+  return selector ? getDocument().querySelector(selector) : null
 }
 
 const getTransitionDurationFromElement = element => {
@@ -79,7 +79,7 @@ const getTransitionDurationFromElement = element => {
   }
 
   // Get transition-duration of the element
-  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)
+  let { transitionDuration, transitionDelay } = getWindow().getComputedStyle(element)
 
   const floatTransitionDuration = Number.parseFloat(transitionDuration)
   const floatTransitionDelay = Number.parseFloat(transitionDelay)
@@ -163,7 +163,7 @@ const isDisabled = element => {
 }
 
 const findShadowRoot = element => {
-  if (!document.documentElement.attachShadow) {
+  if (!getDocument().documentElement.attachShadow) {
     return null
   }
 
@@ -203,7 +203,7 @@ const reflow = element => {
 const getjQuery = () => {
   const { jQuery } = window
 
-  if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+  if (jQuery && !getDocument().body.hasAttribute('data-bs-no-jquery')) {
     return jQuery
   }
 
@@ -213,10 +213,10 @@ const getjQuery = () => {
 const DOMContentLoadedCallbacks = []
 
 const onDOMContentLoaded = callback => {
-  if (document.readyState === 'loading') {
+  if (getDocument().readyState === 'loading') {
     // add listener on the first call when the document is in loading state
     if (!DOMContentLoadedCallbacks.length) {
-      document.addEventListener('DOMContentLoaded', () => {
+      getDocument().addEventListener('DOMContentLoaded', () => {
         DOMContentLoadedCallbacks.forEach(callback => callback())
       })
     }
@@ -227,7 +227,7 @@ const onDOMContentLoaded = callback => {
   }
 }
 
-const isRTL = () => document.documentElement.dir === 'rtl'
+const isRTL = () => getDocument().documentElement.dir === 'rtl'
 
 const defineJQueryPlugin = plugin => {
   onDOMContentLoaded(() => {
@@ -309,6 +309,22 @@ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed
   return list[Math.max(0, Math.min(index, listLength - 1))]
 }
 
+const getWindow = () => {
+  if (typeof window !== 'undefined') {
+    return window
+  }
+
+  return {}
+}
+
+const getDocument = () => {
+  if (typeof document !== 'undefined') {
+    return document
+  }
+
+  return {}
+}
+
 export {
   getElement,
   getUID,
@@ -329,5 +345,7 @@ export {
   isRTL,
   defineJQueryPlugin,
   execute,
-  executeAfterTransition
+  executeAfterTransition,
+  getWindow,
+  getDocument
 }
diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js
index 11b28a9d9..9df43142a 100644
--- a/js/src/util/sanitizer.js
+++ b/js/src/util/sanitizer.js
@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import { getWindow } from './index'
+
 const uriAttributes = new Set([
   'background',
   'cite',
@@ -98,7 +100,8 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
     return sanitizeFn(unsafeHtml)
   }
 
-  const domParser = new window.DOMParser()
+  const windowRef = getWindow()
+  const domParser = new windowRef.DOMParser()
   const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
   const elements = [].concat(...createdDocument.body.querySelectorAll('*'))
 
diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index 73c28254e..7a44c463e 100644
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -7,14 +7,14 @@
 
 import SelectorEngine from '../dom/selector-engine'
 import Manipulator from '../dom/manipulator'
-import { isElement } from './index'
+import { isElement, getDocument } from './index'
 
 const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
 
 class ScrollBarHelper {
   constructor() {
-    this._element = document.body
+    this._element = getDocument().body
   }
 
   getWidth() {