From 958cdec31bef392ef51687a35af96792461e7eb5 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Thu, 7 Mar 2024 22:02:17 +0200
Subject: [PATCH] Switch to using for...of

---
 .eslintrc.json                                |  6 +-
 js/tests/visual/modal.html                    |  8 ++-
 js/tests/visual/popover.html                  |  4 +-
 js/tests/visual/toast.html                    | 12 +++-
 js/tests/visual/tooltip.html                  |  4 +-
 site/assets/js/code-examples.js               | 19 +++---
 site/assets/js/snippets.js                    | 58 +++++++++----------
 site/content/docs/5.3/components/buttons.md   |  4 +-
 .../content/docs/5.3/components/list-group.md |  8 +--
 site/content/docs/5.3/components/navs-tabs.md |  4 +-
 site/content/docs/5.3/components/scrollspy.md |  8 +--
 .../5.3/examples/cheatsheet/cheatsheet.js     | 42 ++++++--------
 .../docs/5.3/examples/checkout/checkout.js    |  6 +-
 .../docs/5.3/examples/sidebars/sidebars.js    |  4 +-
 .../docs/5.3/getting-started/javascript.md    |  5 +-
 site/static/docs/5.3/assets/js/color-modes.js | 19 +++---
 .../docs/5.3/assets/js/validate-forms.js      |  6 +-
 17 files changed, 109 insertions(+), 108 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index bd6f452814..2ba9043432 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -164,8 +164,7 @@
       },
       "rules": {
         "no-console": "off",
-        "no-new": "off",
-        "unicorn/no-array-for-each": "off"
+        "no-new": "off"
       }
     },
     {
@@ -192,8 +191,7 @@
         "ecmaVersion": 2019
       },
       "rules": {
-        "no-new": "off",
-        "unicorn/no-array-for-each": "off"
+        "no-new": "off"
       }
     },
     {
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index efb5127b5a..fe294fa639 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -217,9 +217,13 @@
         }
       }
 
-      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+      for (const popoverEl of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+        new bootstrap.Popover(popoverEl)
+      }
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+      for (const tooltipEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+        new bootstrap.Tooltip(tooltipEl)
+      }
 
       const tall = document.getElementById('tall')
       document.getElementById('tall-toggle').addEventListener('click', () => {
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 73edf998d4..bbc2eb200f 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -35,7 +35,9 @@
     <script>
       /* global bootstrap: false */
 
-      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+      for (const popoverEl of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+        new bootstrap.Popover(popoverEl)
+      }
     </script>
   </body>
 </html>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index e64fd1d880..07869886de 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -55,14 +55,20 @@
       /* global bootstrap: false */
 
       window.addEventListener('load', () => {
-        document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
+        for (const toastEl of document.querySelectorAll('.toast')) {
+          new bootstrap.Toast(toastEl)
+        }
 
         document.getElementById('btnShowToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
+          for (const toastEl of document.querySelectorAll('.toast')) {
+            bootstrap.Toast.getInstance(toastEl).show()
+          }
         })
 
         document.getElementById('btnHideToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
+          for (const toastEl of document.querySelectorAll('.toast')) {
+            bootstrap.Toast.getInstance(toastEl).hide()
+          }
         })
       })
     </script>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 09144b5729..eff8982eea 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -113,7 +113,9 @@
       })
       targetTooltip.show()
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+      for (const tooltipEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+        new bootstrap.Tooltip(tooltipEl)
+      }
     </script>
 
     <script>
diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index 3462da59ba..992ceda550 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -29,14 +29,13 @@
   ].join('')
 
   // Wrap programmatically code blocks and add copy btn.
-  document.querySelectorAll('.highlight')
-    .forEach(element => {
-      // Ignore examples made by shortcode
-      if (!element.closest('.bd-example-snippet')) {
-        element.insertAdjacentHTML('beforebegin', btnHtml)
-        element.previousElementSibling.append(element)
-      }
-    })
+  for (const element of document.querySelectorAll('.highlight')) {
+    // Ignore examples made by shortcode
+    if (!element.closest('.bd-example-snippet')) {
+      element.insertAdjacentHTML('beforebegin', btnHtml)
+      element.previousElementSibling.append(element)
+    }
+  }
 
   /**
    *
@@ -44,9 +43,9 @@
    * @param {string} title
    */
   function snippetButtonTooltip(selector, title) {
-    document.querySelectorAll(selector).forEach(btn => {
+    for (const btn of document.querySelectorAll(selector)) {
       bootstrap.Tooltip.getOrCreateInstance(btn, { title })
-    })
+    }
   }
 
   snippetButtonTooltip('.btn-clipboard', btnTitle)
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 94d8f6deee..55b3f62ec1 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -20,19 +20,17 @@
   // Tooltips
   // --------
   // Instantiate all tooltips in a docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    .forEach(tooltip => {
-      new bootstrap.Tooltip(tooltip)
-    })
+  for (const tooltip of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+    new bootstrap.Tooltip(tooltip)
+  }
 
   // --------
   // Popovers
   // --------
   // Instantiate all popovers in docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="popover"]')
-    .forEach(popover => {
-      new bootstrap.Popover(popover)
-    })
+  for (const popover of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+    new bootstrap.Popover(popover)
+  }
 
   // -------------------------------
   // Toasts
@@ -50,15 +48,14 @@
   }
 
   // Instantiate all toasts in docs pages only
-  document.querySelectorAll('.bd-example .toast')
-    .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
-
-      toast.show()
+  for (const toastNode of document.querySelectorAll('.bd-example .toast')) {
+    const toast = new bootstrap.Toast(toastNode, {
+      autohide: false
     })
 
+    toast.show()
+  }
+
   // Instantiate all toasts in docs pages only
   // js-docs-start live-toast
   const toastTrigger = document.getElementById('liveToastBtn')
@@ -103,32 +100,29 @@
   // Carousels
   // --------
   // Instantiate all non-autoplaying carousels in docs or StackBlitz
-  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
-    .forEach(carousel => {
-      bootstrap.Carousel.getOrCreateInstance(carousel)
-    })
+  for (const carousel of document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')) {
+    bootstrap.Carousel.getOrCreateInstance(carousel)
+  }
 
   // -------------------------------
   // Checks & Radios
   // -------------------------------
   // Indeterminate checkbox example in docs and StackBlitz
-  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
-    .forEach(checkbox => {
-      if (checkbox.id.includes('Indeterminate')) {
-        checkbox.indeterminate = true
-      }
-    })
+  for (const checkbox of document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')) {
+    if (checkbox.id.includes('Indeterminate')) {
+      checkbox.indeterminate = true
+    }
+  }
 
   // -------------------------------
   // Links
   // -------------------------------
   // Disable empty links in docs examples only
-  document.querySelectorAll('.bd-content [href="#"]')
-    .forEach(link => {
-      link.addEventListener('click', event => {
-        event.preventDefault()
-      })
+  for (const link of document.querySelectorAll('.bd-content [href="#"]')) {
+    link.addEventListener('click', event => {
+      event.preventDefault()
     })
+  }
 
   // -------------------------------
   // Modal
@@ -161,10 +155,10 @@
   // 'Offcanvas components' example in docs only
   const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
   if (myOffcanvas) {
-    myOffcanvas.forEach(offcanvas => {
+    for (const offcanvas of myOffcanvas) {
       offcanvas.addEventListener('show.bs.offcanvas', event => {
         event.preventDefault()
       }, false)
-    })
+    }
   }
 })()
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index 83a61382a3..65c2868229 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -223,10 +223,10 @@ const bsButton = new bootstrap.Button('#myButton')
 For example, to toggle all buttons
 
 ```js
-document.querySelectorAll('.btn').forEach(buttonElement => {
+for (const buttonElement of document.querySelectorAll('.btn')) {
   const button = bootstrap.Button.getOrCreateInstance(buttonElement)
   button.toggle()
-})
+}
 ```
 
 ## CSS
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 7f7e1457c0..93c9df1b57 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -413,14 +413,14 @@ Enable tabbable list item via JavaScript (each list item needs to be activated i
 
 ```js
 const triggerTabList = document.querySelectorAll('#myTab a')
-triggerTabList.forEach(triggerEl => {
+for (const triggerEl of triggerTabList) {
   const tabTrigger = new bootstrap.Tab(triggerEl)
 
   triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
-})
+}
 ```
 
 You can activate individual list item in several ways:
@@ -491,10 +491,10 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
 
 ```js
 const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
-tabElms.forEach(tabElm => {
+for (const tabElm of tabElms) {
   tabElm.addEventListener('shown.bs.tab', event => {
     event.target // newly activated tab
     event.relatedTarget // previous active tab
   })
-})
+}
 ```
diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
index 5cf75e1450..7123d09fbd 100644
--- a/site/content/docs/5.3/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@@ -613,14 +613,14 @@ Enable tabbable tabs via JavaScript (each tab needs to be activated individually
 
 ```js
 const triggerTabList = document.querySelectorAll('#myTab button')
-triggerTabList.forEach(triggerEl => {
+for (const triggerEl of triggerTabList) {
   const tabTrigger = new bootstrap.Tab(triggerEl)
 
   triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
-})
+}
 ```
 
 You can activate individual tabs in several ways:
diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md
index d1abf75e3e..650e70d97d 100644
--- a/site/content/docs/5.3/components/scrollspy.md
+++ b/site/content/docs/5.3/components/scrollspy.md
@@ -333,13 +333,13 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
 Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
 
 ```js
-document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+for (const el of document.querySelectorAll('#nav-tab > [data-bs-toggle="tab"]')) {
   el.addEventListener('shown.bs.tab', () => {
     const target = el.getAttribute('data-bs-target')
     const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
     bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
   })
-})
+}
 ```
 
 ## Usage
@@ -406,9 +406,9 @@ Here's an example using the refresh method:
 
 ```js
 const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
-dataSpyList.forEach(dataSpyEl => {
+for (const dataSpyEl of dataSpyList) {
   bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
-})
+}
 ```
 
 ### Events
diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
index e25a89e75d..165b29c8a3 100644
--- a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
@@ -4,34 +4,30 @@
   'use strict'
 
   // Tooltip and popover demos
-  document.querySelectorAll('.tooltip-demo')
-    .forEach(tooltip => {
-      new bootstrap.Tooltip(tooltip, {
-        selector: '[data-bs-toggle="tooltip"]'
-      })
+  for (const tooltip of document.querySelectorAll('.tooltip-demo')) {
+    new bootstrap.Tooltip(tooltip, {
+      selector: '[data-bs-toggle="tooltip"]'
+    })
+  }
+
+  for (const popover of document.querySelectorAll('[data-bs-toggle="popover"]')) {
+    new bootstrap.Popover(popover)
+  }
+
+  for (const toastNode of document.querySelectorAll('.toast')) {
+    const toast = new bootstrap.Toast(toastNode, {
+      autohide: false
     })
 
-  document.querySelectorAll('[data-bs-toggle="popover"]')
-    .forEach(popover => {
-      new bootstrap.Popover(popover)
-    })
-
-  document.querySelectorAll('.toast')
-    .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
-
-      toast.show()
-    })
+    toast.show()
+  }
 
   // Disable empty links and submit buttons
-  document.querySelectorAll('[href="#"], [type="submit"]')
-    .forEach(link => {
-      link.addEventListener('click', event => {
-        event.preventDefault()
-      })
+  for (const link of document.querySelectorAll('[href="#"], [type="submit"]')) {
+    link.addEventListener('click', event => {
+      event.preventDefault()
     })
+  }
 
   function setActiveItem() {
     const { hash } = window.location
diff --git a/site/content/docs/5.3/examples/checkout/checkout.js b/site/content/docs/5.3/examples/checkout/checkout.js
index d6ab60d474..37c94a83d6 100644
--- a/site/content/docs/5.3/examples/checkout/checkout.js
+++ b/site/content/docs/5.3/examples/checkout/checkout.js
@@ -3,10 +3,10 @@
   'use strict'
 
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
-  const forms = document.querySelectorAll('.needs-validation');
+  const forms = document.querySelectorAll('.needs-validation')
 
   // Loop over them and prevent submission
-  [...forms].forEach(form => {
+  for (const form of forms) {
     form.addEventListener('submit', event => {
       if (!form.checkValidity()) {
         event.preventDefault()
@@ -15,5 +15,5 @@
 
       form.classList.add('was-validated')
     }, false)
-  })
+  }
 })()
diff --git a/site/content/docs/5.3/examples/sidebars/sidebars.js b/site/content/docs/5.3/examples/sidebars/sidebars.js
index 616ebef1d9..fa457512e8 100644
--- a/site/content/docs/5.3/examples/sidebars/sidebars.js
+++ b/site/content/docs/5.3/examples/sidebars/sidebars.js
@@ -2,7 +2,7 @@
 (() => {
   'use strict'
   const tooltipTriggerList = [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
-  tooltipTriggerList.forEach(tooltipTriggerEl => {
+  for (const tooltipTriggerEl of tooltipTriggerList) {
     new bootstrap.Tooltip(tooltipTriggerEl)
-  })
+  }
 })()
diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
index 47f7341c35..73370b62d8 100644
--- a/site/content/docs/5.3/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -39,8 +39,9 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst
 <script type="module">
   import { Toast } from 'bootstrap.esm.min.js'
 
-  Array.from(document.querySelectorAll('.toast'))
-    .forEach(toastNode => new Toast(toastNode))
+  for (const toastNode of document.querySelectorAll('.toast')) {
+    new Toast(toastNode))
+  }
 </script>
 ```
 
diff --git a/site/static/docs/5.3/assets/js/color-modes.js b/site/static/docs/5.3/assets/js/color-modes.js
index 8a0dabf181..dccd778c59 100644
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@@ -41,10 +41,10 @@
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
     const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
 
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+    for (const element of document.querySelectorAll('[data-bs-theme-value]')) {
       element.classList.remove('active')
       element.setAttribute('aria-pressed', 'false')
-    })
+    }
 
     btnToActive.classList.add('active')
     btnToActive.setAttribute('aria-pressed', 'true')
@@ -67,14 +67,13 @@
   window.addEventListener('DOMContentLoaded', () => {
     showActiveTheme(getPreferredTheme())
 
-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          setStoredTheme(theme)
-          setTheme(theme)
-          showActiveTheme(theme, true)
-        })
+    for (const toggle of document.querySelectorAll('[data-bs-theme-value]')) {
+      toggle.addEventListener('click', () => {
+        const theme = toggle.getAttribute('data-bs-theme-value')
+        setStoredTheme(theme)
+        setTheme(theme)
+        showActiveTheme(theme, true)
       })
+    }
   })
 })()
diff --git a/site/static/docs/5.3/assets/js/validate-forms.js b/site/static/docs/5.3/assets/js/validate-forms.js
index d6ab60d474..37c94a83d6 100644
--- a/site/static/docs/5.3/assets/js/validate-forms.js
+++ b/site/static/docs/5.3/assets/js/validate-forms.js
@@ -3,10 +3,10 @@
   'use strict'
 
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
-  const forms = document.querySelectorAll('.needs-validation');
+  const forms = document.querySelectorAll('.needs-validation')
 
   // Loop over them and prevent submission
-  [...forms].forEach(form => {
+  for (const form of forms) {
     form.addEventListener('submit', event => {
       if (!form.checkValidity()) {
         event.preventDefault()
@@ -15,5 +15,5 @@
 
       form.classList.add('was-validated')
     }, false)
-  })
+  }
 })()