Enable unicorn/no-array-for-each rule

.eslintrc.json

@@ -51,7 +51,6 @@
     ],
     "unicorn/explicit-length-check": "off",
     "unicorn/no-array-callback-reference": "off",
-    "unicorn/no-array-for-each": "off",
     "unicorn/no-array-method-this-argument": "off",
     "unicorn/no-null": "off",
     "unicorn/no-unused-properties": "error",

build/generate-sri.js

@@ -47,7 +47,7 @@ const files = [
   }
 ]
 
-files.forEach(file => {
+for (const file of files) {
   fs.readFile(file.file, 'utf8', (err, data) => {
     if (err) {
       throw err
@@ -61,4 +61,4 @@ files.forEach(file => {
 
     sh.sed('-i', new RegExp(`^(\\s+${file.configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile)
   })
-})
+}

build/zip-examples.js

@@ -57,22 +57,22 @@ sh.mkdir('-p', [
 
 sh.cp('-Rf', `${docsDir}/examples/*`, distFolder)
 
-cssFiles.forEach(file => {
+for (const file of cssFiles) {
   sh.cp('-f', `${docsDir}/dist/css/${file}`, `${distFolder}/assets/dist/css/`)
-})
+}
 
-jsFiles.forEach(file => {
+for (const file of jsFiles) {
   sh.cp('-f', `${docsDir}/dist/js/${file}`, `${distFolder}/assets/dist/js/`)
-})
+}
 
-imgFiles.forEach(file => {
+for (const file of imgFiles) {
   sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`)
-})
+}
 
 sh.rm(`${distFolder}/index.html`)
 
 // get all examples' HTML files
-sh.find(`${distFolder}/**/*.html`).forEach(file => {
+for (const file of sh.find(`${distFolder}/**/*.html`)) {
   const fileContents = sh.cat(file)
     .toString()
     .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../')
@@ -81,7 +81,7 @@ sh.find(`${distFolder}/**/*.html`).forEach(file => {
     .replace(/(<script src="\.\.\/.*) integrity=".*>/g, '$1></script>')
     .replace(/( +)<!-- favicons(.|\n)+<style>/i, '    <style>')
   new sh.ShellString(fileContents).to(file)
-})
+}
 
 // create the zip file
 sh.exec(`zip -r9 "${distFolder}.zip" "${distFolder}"`)

js/src/base-component.js

@@ -36,9 +36,9 @@ class BaseComponent {
     Data.remove(this._element, this.constructor.DATA_KEY)
     EventHandler.off(this._element, this.constructor.EVENT_KEY)
 
-    Object.getOwnPropertyNames(this).forEach(propertyName => {
+    for (const propertyName of Object.getOwnPropertyNames(this)) {
       this[propertyName] = null
-    })
+    }
   }
 
   _queueCallback(callback, element, isAnimated = true) {

js/src/carousel.js

@@ -304,9 +304,9 @@ class Carousel extends BaseComponent {
       }
     }
 
-    SelectorEngine.find(SELECTOR_ITEM_IMG, this._element).forEach(itemImg => {
+    for (const itemImg of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
       EventHandler.on(itemImg, EVENT_DRAG_START, event => event.preventDefault())
-    })
+    }
 
     if (this._pointerEvent) {
       EventHandler.on(this._element, EVENT_POINTERDOWN, event => start(event))

js/src/collapse.js

@@ -127,7 +127,8 @@ class Collapse extends BaseComponent {
 
     if (this._config.parent) {
       const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
-      actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth
+      // remove children if greater depth
+      actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem))
     }
 
     const container = SelectorEngine.findOne(this._selector)
@@ -145,7 +146,7 @@ class Collapse extends BaseComponent {
       return
     }
 
-    actives.forEach(elemActive => {
+    for (const elemActive of actives) {
       if (container !== elemActive) {
         Collapse.getOrCreateInstance(elemActive, { toggle: false }).hide()
       }
@@ -153,7 +154,7 @@ class Collapse extends BaseComponent {
       if (!activesData) {
         Data.set(elemActive, DATA_KEY, null)
       }
-    })
+    }
 
     const dimension = this._getDimension()
 
@@ -252,14 +253,15 @@ class Collapse extends BaseComponent {
     }
 
     const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
-    SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem))
-      .forEach(element => {
-        const selected = getElementFromSelector(element)
+    const elements = SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem))
 
-        if (selected) {
-          this._addAriaAndCollapsedClass([element], this._isShown(selected))
-        }
-      })
+    for (const element of elements) {
+      const selected = getElementFromSelector(element)
+
+      if (selected) {
+        this._addAriaAndCollapsedClass([element], this._isShown(selected))
+      }
+    }
   }
 
   _addAriaAndCollapsedClass(triggerArray, isOpen) {
@@ -267,7 +269,7 @@ class Collapse extends BaseComponent {
       return
     }
 
-    triggerArray.forEach(elem => {
+    for (const elem of triggerArray) {
       if (isOpen) {
         elem.classList.remove(CLASS_NAME_COLLAPSED)
       } else {
@@ -275,7 +277,7 @@ class Collapse extends BaseComponent {
       }
 
       elem.setAttribute('aria-expanded', isOpen)
-    })
+    }
   }
 
   // Static
@@ -315,9 +317,9 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   const selector = getSelectorFromElement(this)
   const selectorElements = SelectorEngine.find(selector)
 
-  selectorElements.forEach(element => {
+  for (const element of selectorElements) {
     Collapse.getOrCreateInstance(element, { toggle: false }).toggle()
-  })
+  }
 })
 
 /**

js/src/dom/event-handler.js

@@ -221,13 +221,13 @@ function removeHandler(element, events, typeEvent, handler, delegationSelector)
 function removeNamespacedHandlers(element, events, typeEvent, namespace) {
   const storeElementEvent = events[typeEvent] || {}
 
-  Object.keys(storeElementEvent).forEach(handlerKey => {
+  for (const handlerKey of Object.keys(storeElementEvent)) {
     if (handlerKey.includes(namespace)) {
       const event = storeElementEvent[handlerKey]
 
       removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector)
     }
-  })
+  }
 }
 
 function getTypeEvent(event) {
@@ -266,13 +266,13 @@ const EventHandler = {
     }
 
     if (isNamespace) {
-      Object.keys(events).forEach(elementEvent => {
+      for (const elementEvent of Object.keys(events)) {
         removeNamespacedHandlers(element, events, elementEvent, originalTypeEvent.slice(1))
-      })
+      }
     }
 
     const storeElementEvent = events[typeEvent] || {}
-    Object.keys(storeElementEvent).forEach(keyHandlers => {
+    for (const keyHandlers of Object.keys(storeElementEvent)) {
       const handlerKey = keyHandlers.replace(stripUidRegex, '')
 
       if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
@@ -280,7 +280,7 @@ const EventHandler = {
 
         removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector)
       }
-    })
+    }
   },
 
   trigger(element, event, args) {
@@ -320,13 +320,13 @@ const EventHandler = {
 
     // merge custom information in our event
     if (typeof args !== 'undefined') {
-      Object.keys(args).forEach(key => {
+      for (const key of Object.keys(args)) {
         Object.defineProperty(evt, key, {
           get() {
             return args[key]
           }
         })
-      })
+      }
     }
 
     if (defaultPrevented) {

js/src/dom/manipulator.js

@@ -44,14 +44,13 @@ const Manipulator = {
     }
 
     const attributes = {}
+    const bsKeys = Object.keys(element.dataset).filter(key => key.startsWith('bs'))
 
-    Object.keys(element.dataset)
-      .filter(key => key.startsWith('bs'))
-      .forEach(key => {
-        let pureKey = key.replace(/^bs/, '')
-        pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
-        attributes[pureKey] = normalizeData(element.dataset[key])
-      })
+    for (const key of bsKeys) {
+      let pureKey = key.replace(/^bs/, '')
+      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
+      attributes[pureKey] = normalizeData(element.dataset[key])
+    }
 
     return attributes
   },

js/src/dropdown.js

@@ -151,10 +151,10 @@ 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 &&
-      !parent.closest(SELECTOR_NAVBAR_NAV)) {
-      [].concat(...document.body.children)
-        .forEach(elem => EventHandler.on(elem, 'mouseover', noop))
+    if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) {
+      for (const elem of [].concat(...document.body.children)) {
+        EventHandler.on(elem, 'mouseover', noop)
+      }
     }
 
     this._element.focus()
@@ -203,8 +203,9 @@ class Dropdown extends BaseComponent {
     // 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)
-        .forEach(elem => EventHandler.off(elem, 'mouseover', noop))
+      for (const elem of [].concat(...document.body.children)) {
+        EventHandler.off(elem, 'mouseover', noop)
+      }
     }
 
     if (this._popper) {

js/src/modal.js

@@ -175,8 +175,9 @@ class Modal extends BaseComponent {
   }
 
   dispose() {
-    [window, this._dialog]
-      .forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY))
+    for (const htmlElement of [window, this._dialog]) {
+      EventHandler.off(htmlElement, EVENT_KEY)
+    }
 
     this._backdrop.dispose()
     this._focustrap.deactivate()

js/src/offcanvas.js

@@ -256,9 +256,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   data.toggle(this)
 })
 
-EventHandler.on(window, EVENT_LOAD_DATA_API, () =>
-  SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show())
-)
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+  for (const el of SelectorEngine.find(OPEN_SELECTOR)) {
+    Offcanvas.getOrCreateInstance(el).show()
+  }
+})
 
 enableDismissTrigger(Offcanvas)
 /**

js/src/scrollspy.js

@@ -111,7 +111,7 @@ class ScrollSpy extends BaseComponent {
 
     const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
 
-    targets.map(element => {
+    for (const item of targets.map(element => {
       const targetSelector = getSelectorFromElement(element)
       const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
 
@@ -128,11 +128,10 @@ class ScrollSpy extends BaseComponent {
       return null
     })
       .filter(item => item)
-      .sort((a, b) => a[0] - b[0])
-      .forEach(item => {
-        this._offsets.push(item[0])
-        this._targets.push(item[1])
-      })
+      .sort((a, b) => a[0] - b[0])) {
+      this._offsets.push(item[0])
+      this._targets.push(item[1])
+    }
   }
 
   dispose() {
@@ -226,20 +225,20 @@ class ScrollSpy extends BaseComponent {
       SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
         .classList.add(CLASS_NAME_ACTIVE)
     } else {
-      SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)
-        .forEach(listGroup => {
-          // Set triggered links parents as active
-          // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
-          SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)
-            .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
+      for (const listGroup of SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)) {
+        // Set triggered links parents as active
+        // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
+        for (const item of SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)) {
+          item.classList.add(CLASS_NAME_ACTIVE)
+        }
 
-          // Handle special case when .nav-link is inside .nav-item
-          SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)
-            .forEach(navItem => {
-              SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)
-                .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
-            })
-        })
+        // Handle special case when .nav-link is inside .nav-item
+        for (const navItem of SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)) {
+          for (const item of SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)) {
+            item.classList.add(CLASS_NAME_ACTIVE)
+          }
+        }
+      }
     }
 
     EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
@@ -248,9 +247,12 @@ class ScrollSpy extends BaseComponent {
   }
 
   _clear() {
-    SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
+    const activeNodes = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
       .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
-      .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
+
+    for (const node of activeNodes) {
+      node.classList.remove(CLASS_NAME_ACTIVE)
+    }
   }
 
   // Static
@@ -279,8 +281,9 @@ class ScrollSpy extends BaseComponent {
  */
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-  SelectorEngine.find(SELECTOR_DATA_SPY)
-    .forEach(spy => new ScrollSpy(spy))
+  for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
+    new ScrollSpy(spy) // eslint-disable-line no-new
+  }
 })
 
 /**

js/src/tab.js

@@ -164,8 +164,9 @@ class Tab extends BaseComponent {
       const dropdownElement = element.closest(SELECTOR_DROPDOWN)
 
       if (dropdownElement) {
-        SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement)
-          .forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE))
+        for (const dropdown of SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement)) {
+          dropdown.classList.add(CLASS_NAME_ACTIVE)
+        }
       }
 
       element.setAttribute('aria-expanded', true)

js/src/tooltip.js

@@ -285,9 +285,9 @@ class Tooltip extends BaseComponent {
     // 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) {
-      [].concat(...document.body.children).forEach(element => {
+      for (const element of [].concat(...document.body.children)) {
         EventHandler.on(element, 'mouseover', noop)
-      })
+      }
     }
 
     const complete = () => {
@@ -337,8 +337,9 @@ class Tooltip extends BaseComponent {
     // 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)
-        .forEach(element => EventHandler.off(element, 'mouseover', noop))
+      for (const element of [].concat(...document.body.children)) {
+        EventHandler.off(element, 'mouseover', noop)
+      }
     }
 
     this._activeTrigger[TRIGGER_CLICK] = false
@@ -527,7 +528,7 @@ class Tooltip extends BaseComponent {
   _setListeners() {
     const triggers = this._config.trigger.split(' ')
 
-    triggers.forEach(trigger => {
+    for (const trigger of triggers) {
       if (trigger === 'click') {
         EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event))
       } else if (trigger !== TRIGGER_MANUAL) {
@@ -541,7 +542,7 @@ class Tooltip extends BaseComponent {
         EventHandler.on(this._element, eventIn, this._config.selector, event => this._enter(event))
         EventHandler.on(this._element, eventOut, this._config.selector, event => this._leave(event))
       }
-    })
+    }
 
     this._hideModalHandler = () => {
       if (this._element) {
@@ -648,11 +649,11 @@ class Tooltip extends BaseComponent {
   _getConfig(config) {
     const dataAttributes = Manipulator.getDataAttributes(this._element)
 
-    Object.keys(dataAttributes).forEach(dataAttr => {
+    for (const dataAttr of Object.keys(dataAttributes)) {
       if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
         delete dataAttributes[dataAttr]
       }
-    })
+    }
 
     config = {
       ...this.constructor.Default,
@@ -706,8 +707,9 @@ class Tooltip extends BaseComponent {
     const basicClassPrefixRegex = new RegExp(`(^|\\s)${this._getBasicClassPrefix()}\\S+`, 'g')
     const tabClass = tip.getAttribute('class').match(basicClassPrefixRegex)
     if (tabClass !== null && tabClass.length > 0) {
-      tabClass.map(token => token.trim())
-        .forEach(tClass => tip.classList.remove(tClass))
+      for (const tClass of tabClass.map(token => token.trim())) {
+        tip.classList.remove(tClass)
+      }
     }
   }
 

js/src/util/index.js

@@ -125,7 +125,7 @@ const getElement = obj => {
 }
 
 const typeCheckConfig = (componentName, config, configTypes) => {
-  Object.keys(configTypes).forEach(property => {
+  for (const property of Object.keys(configTypes)) {
     const expectedTypes = configTypes[property]
     const value = config[property]
     const valueType = value && isElement(value) ? 'element' : toType(value)
@@ -135,7 +135,7 @@ const typeCheckConfig = (componentName, config, configTypes) => {
         `${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`
       )
     }
-  })
+  }
 }
 
 const isVisible = element => {
@@ -217,7 +217,9 @@ const onDOMContentLoaded = callback => {
     // add listener on the first call when the document is in loading state
     if (!DOMContentLoadedCallbacks.length) {
       document.addEventListener('DOMContentLoaded', () => {
-        DOMContentLoadedCallbacks.forEach(callback => callback())
+        for (const callback of DOMContentLoadedCallbacks) {
+          callback()
+        }
       })
     }
 

js/src/util/sanitizer.js

@@ -114,11 +114,11 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
     const attributeList = [].concat(...element.attributes)
     const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || [])
 
-    attributeList.forEach(attribute => {
+    for (const attribute of attributeList) {
       if (!allowedAttribute(attribute, allowedAttributes)) {
         element.removeAttribute(attribute.nodeName)
       }
-    })
+    }
   }
 
   return createdDocument.body.innerHTML

js/src/util/scrollbar.js

@@ -85,7 +85,9 @@ class ScrollBarHelper {
     if (isElement(selector)) {
       callBack(selector)
     } else {
-      SelectorEngine.find(selector, this._element).forEach(callBack)
+      for (const sel of SelectorEngine.find(selector, this._element)) {
+        callBack(sel)
+      }
     }
   }
 

js/tests/helpers/fixture.js

@@ -34,17 +34,17 @@ export const jQueryMock = {
   elements: undefined,
   fn: {},
   each(fn) {
-    this.elements.forEach(el => {
+    for (const el of this.elements) {
       fn.call(el)
-    })
+    }
   }
 }
 
 export const clearBodyAndDocument = () => {
   const attributes = ['data-bs-padding-right', 'style']
 
-  attributes.forEach(attr => {
+  for (const attr of attributes) {
     document.documentElement.removeAttribute(attr)
     document.body.removeAttribute(attr)
-  })
+  }
 }

js/tests/unit/carousel.spec.js

@@ -211,14 +211,14 @@ describe('Carousel', () => {
 
       spyOn(carousel, '_triggerSlideEvent')
 
-      carousel._isSliding = true;
+      carousel._isSliding = true
 
-      ['ArrowLeft', 'ArrowRight'].forEach(key => {
+      for (const key of ['ArrowLeft', 'ArrowRight']) {
         const keydown = createEvent('keydown')
         keydown.key = key
 
         carouselEl.dispatchEvent(keydown)
-      })
+      }
 
       expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
     })

js/tests/unit/modal.spec.js

@@ -17,10 +17,9 @@ describe('Modal', () => {
     clearBodyAndDocument()
     document.body.classList.remove('modal-open')
 
-    document.querySelectorAll('.modal-backdrop')
-      .forEach(backdrop => {
-        backdrop.remove()
-      })
+    for (const backdrop of document.querySelectorAll('.modal-backdrop')) {
+      backdrop.remove()
+    }
   })
 
   beforeEach(() => {

js/tests/unit/popover.spec.js

@@ -15,9 +15,9 @@ describe('Popover', () => {
 
     const popoverList = document.querySelectorAll('.popover')
 
-    popoverList.forEach(popoverEl => {
+    for (const popoverEl of popoverList) {
       popoverEl.remove()
-    })
+    }
   })
 
   describe('VERSION', () => {

js/tests/unit/tooltip.spec.js

@@ -15,9 +15,9 @@ describe('Tooltip', () => {
   afterEach(() => {
     clearFixture()
 
-    document.querySelectorAll('.tooltip').forEach(tooltipEl => {
+    for (const tooltipEl of document.querySelectorAll('.tooltip')) {
       tooltipEl.remove()
-    })
+    }
   })
 
   describe('VERSION', () => {

js/tests/unit/util/backdrop.spec.js

@@ -17,9 +17,9 @@ describe('Backdrop', () => {
     clearFixture()
     const list = document.querySelectorAll(CLASS_BACKDROP)
 
-    list.forEach(el => {
+    for (const el of list) {
       el.remove()
-    })
+    }
   })
 
   describe('show', () => {
@@ -35,9 +35,10 @@ describe('Backdrop', () => {
       instance.show()
       instance.show(() => {
         expect(getElements().length).toEqual(1)
-        getElements().forEach(el => {
+        for (const el of getElements()) {
           expect(el.classList.contains(CLASS_NAME_SHOW)).toEqual(true)
-        })
+        }
+
         done()
       })
     })
@@ -67,9 +68,10 @@ describe('Backdrop', () => {
 
       instance.show(() => {
         expect(getElements().length).toEqual(1)
-        getElements().forEach(el => {
+        for (const el of getElements()) {
           expect(el.classList.contains(CLASS_NAME_FADE)).toEqual(true)
-        })
+        }
+
         done()
       })
     })