Use Babel and ES6 in docs JS files (#31607)

* Pass docs js through Babel

* Use ES6 in docs js

* Only run babel on src files

* Allow babel in Hugo

* Update scripts.html

* Inherit from the root .eslintrc.json

* Use `Array.from`

* Drop Babel from docs

* Prefer template

* replace IIFE with arrow functions

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>

site/content/docs/5.1/examples/cheatsheet/cheatsheet.js

@@ -1,24 +1,24 @@
 /* global bootstrap: false */
 
-(function () {
+(() => {
   'use strict'
 
   // Tooltip and popover demos
   document.querySelectorAll('.tooltip-demo')
-    .forEach(function (tooltip) {
+    .forEach(tooltip => {
       new bootstrap.Tooltip(tooltip, {
         selector: '[data-bs-toggle="tooltip"]'
       })
     })
 
   document.querySelectorAll('[data-bs-toggle="popover"]')
-    .forEach(function (popover) {
+    .forEach(popover => {
       new bootstrap.Popover(popover)
     })
 
   document.querySelectorAll('.toast')
-    .forEach(function (toastNode) {
-      var toast = new bootstrap.Toast(toastNode, {
+    .forEach(toastNode => {
+      const toast = new bootstrap.Toast(toastNode, {
         autohide: false
       })
 
@@ -27,27 +27,27 @@
 
   // Disable empty links and submit buttons
   document.querySelectorAll('[href="#"], [type="submit"]')
-    .forEach(function (link) {
-      link.addEventListener('click', function (event) {
+    .forEach(link => {
+      link.addEventListener('click', event => {
         event.preventDefault()
       })
     })
 
   function setActiveItem() {
-    var hash = window.location.hash
+    const { hash } = window.location
 
     if (hash === '') {
       return
     }
 
-    var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
+    const link = document.querySelector(`.bd-aside a[href="${hash}"]`)
 
     if (!link) {
       return
     }
 
-    var active = document.querySelector('.bd-aside .active')
-    var parent = link.parentNode.parentNode.previousElementSibling
+    const active = document.querySelector('.bd-aside .active')
+    const parent = link.parentNode.parentNode.previousElementSibling
 
     link.classList.add('active')
 
@@ -59,7 +59,7 @@
       return
     }
 
-    var expanded = active.parentNode.parentNode.previousElementSibling
+    const expanded = active.parentNode.parentNode.previousElementSibling
 
     active.classList.remove('active')
 

site/content/docs/5.1/examples/checkout/form-validation.js

@@ -1,20 +1,19 @@
 // Example starter JavaScript for disabling form submissions if there are invalid fields
-(function () {
+(() => {
   'use strict'
 
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
-  var forms = document.querySelectorAll('.needs-validation')
+  const forms = document.querySelectorAll('.needs-validation')
 
   // Loop over them and prevent submission
-  Array.prototype.slice.call(forms)
-    .forEach(function (form) {
-      form.addEventListener('submit', function (event) {
-        if (!form.checkValidity()) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
+  Array.from(forms).forEach(form => {
+    form.addEventListener('submit', event => {
+      if (!form.checkValidity()) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
 
-        form.classList.add('was-validated')
-      }, false)
-    })
+      form.classList.add('was-validated')
+    }, false)
+  })
 })()

site/content/docs/5.1/examples/dashboard-rtl/dashboard.js

@@ -1,14 +1,14 @@
 /* globals Chart:false, feather:false */
 
-(function () {
+(() => {
   'use strict'
 
   feather.replace({ 'aria-hidden': 'true' })
 
   // Graphs
-  var ctx = document.getElementById('myChart')
+  const ctx = document.getElementById('myChart')
   // eslint-disable-next-line no-unused-vars
-  var myChart = new Chart(ctx, {
+  const myChart = new Chart(ctx, {
     type: 'line',
     data: {
       labels: [

site/content/docs/5.1/examples/dashboard/dashboard.js

@@ -1,14 +1,14 @@
 /* globals Chart:false, feather:false */
 
-(function () {
+(() => {
   'use strict'
 
   feather.replace({ 'aria-hidden': 'true' })
 
   // Graphs
-  var ctx = document.getElementById('myChart')
+  const ctx = document.getElementById('myChart')
   // eslint-disable-next-line no-unused-vars
-  var myChart = new Chart(ctx, {
+  const myChart = new Chart(ctx, {
     type: 'line',
     data: {
       labels: [

site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js

@@ -1,7 +1,7 @@
-(function () {
+(() => {
   'use strict'
 
-  document.querySelector('#navbarSideCollapse').addEventListener('click', function () {
+  document.querySelector('#navbarSideCollapse').addEventListener('click', () => {
     document.querySelector('.offcanvas-collapse').classList.toggle('open')
   })
 })()

site/content/docs/5.1/examples/sidebars/sidebars.js

@@ -1,8 +1,8 @@
 /* global bootstrap: false */
-(function () {
+(() => {
   'use strict'
-  var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-  tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+  tooltipTriggerList.forEach(tooltipTriggerEl => {
     new bootstrap.Tooltip(tooltipTriggerEl)
   })
 })()