Rename variables

build/build-plugins.js

@@ -15,8 +15,8 @@ const globby = require('globby')
 const { babel } = require('@rollup/plugin-babel')
 const banner = require('./banner.js')
 
-const srcPath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
+const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(srcPath + '/**/*.js')
+const jsFiles = globby.sync(sourcePath + '/**/*.js')
 
 // Array which holds the resolved plugins
 const resolvedPlugins = []
@@ -31,7 +31,7 @@ for (const file of jsFiles) {
     dist: file.replace('src', 'dist'),
     fileName: path.basename(file),
     className: filenameToEntity(path.basename(file))
-    // safeClassName: filenameToEntity(path.relative(srcPath, file))
+    // safeClassName: filenameToEntity(path.relative(sourcePath, file))
   })
 }
 

build/generate-sri.js

@@ -48,9 +48,9 @@ const files = [
 ]
 
 for (const file of files) {
-  fs.readFile(file.file, 'utf8', (err, data) => {
+  fs.readFile(file.file, 'utf8', (error, data) => {
-    if (err) {
+    if (error) {
-      throw err
+      throw error
     }
 
     const algo = 'sha384'

build/rollup.config.js

@@ -9,7 +9,7 @@ const banner = require('./banner.js')
 const BUNDLE = process.env.BUNDLE === 'true'
 const ESM = process.env.ESM === 'true'
 
-let fileDest = `bootstrap${ESM ? '.esm' : ''}`
+let fileDestination = `bootstrap${ESM ? '.esm' : ''}`
 const external = ['@popperjs/core']
 const plugins = [
   babel({
@@ -24,7 +24,7 @@ const globals = {
 }
 
 if (BUNDLE) {
-  fileDest += '.bundle'
+  fileDestination += '.bundle'
   // Remove last entry in external array to bundle Popper
   external.pop()
   delete globals['@popperjs/core']
@@ -41,7 +41,7 @@ const rollupConfig = {
   input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
   output: {
     banner,
-    file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
+    file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`),
     format: ESM ? 'esm' : 'umd',
     globals,
     generatedCode: 'es2015'

js/src/carousel.js

@@ -220,8 +220,8 @@ class Carousel extends BaseComponent {
   }
 
   _addTouchEventListeners() {
-    for (const itemImg of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
+    for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
-      EventHandler.on(itemImg, EVENT_DRAG_START, event => event.preventDefault())
+      EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault())
     }
 
     const endCallBack = () => {

js/src/collapse.js

@@ -70,7 +70,7 @@ class Collapse extends BaseComponent {
     for (const elem of toggleList) {
       const selector = getSelectorFromElement(elem)
       const filterElement = SelectorEngine.find(selector)
-        .filter(foundElem => foundElem === this._element)
+        .filter(foundElement => foundElement === this._element)
 
       if (selector !== null && filterElement.length) {
         this._triggerArray.push(elem)
@@ -185,9 +185,9 @@ class Collapse extends BaseComponent {
     this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
 
     for (const trigger of this._triggerArray) {
-      const elem = getElementFromSelector(trigger)
+      const element = getElementFromSelector(trigger)
 
-      if (elem && !this._isShown(elem)) {
+      if (element && !this._isShown(element)) {
         this._addAriaAndCollapsedClass([trigger], false)
       }
     }
@@ -240,7 +240,7 @@ class Collapse extends BaseComponent {
   _getFirstLevelChildren(selector) {
     const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
     // remove children if greater depth
-    return SelectorEngine.find(selector, this._config.parent).filter(elem => !children.includes(elem))
+    return SelectorEngine.find(selector, this._config.parent).filter(element => !children.includes(element))
   }
 
   _addAriaAndCollapsedClass(triggerArray, isOpen) {
@@ -248,14 +248,14 @@ class Collapse extends BaseComponent {
       return
     }
 
-    for (const elem of triggerArray) {
+    for (const element of triggerArray) {
       if (isOpen) {
-        elem.classList.remove(CLASS_NAME_COLLAPSED)
+        element.classList.remove(CLASS_NAME_COLLAPSED)
       } else {
-        elem.classList.add(CLASS_NAME_COLLAPSED)
+        element.classList.add(CLASS_NAME_COLLAPSED)
       }
 
-      elem.setAttribute('aria-expanded', isOpen)
+      element.setAttribute('aria-expanded', isOpen)
     }
   }
 

js/src/dom/event-handler.js

@@ -134,9 +134,9 @@ function findHandler(events, handler, delegationSelector = null) {
   return null
 }
 
-function normalizeParams(originalTypeEvent, handler, delegationFn) {
+function normalizeParameters(originalTypeEvent, handler, delegationFunction) {
   const delegation = typeof handler === 'string'
-  const originalHandler = delegation ? delegationFn : handler
+  const originalHandler = delegation ? delegationFunction : handler
   let typeEvent = getTypeEvent(originalTypeEvent)
 
   if (!nativeEvents.has(typeEvent)) {
@@ -146,20 +146,20 @@ function normalizeParams(originalTypeEvent, handler, delegationFn) {
   return [delegation, originalHandler, typeEvent]
 }
 
-function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
+function addHandler(element, originalTypeEvent, handler, delegationFunction, oneOff) {
   if (typeof originalTypeEvent !== 'string' || !element) {
     return
   }
 
   if (!handler) {
-    handler = delegationFn
+    handler = delegationFunction
-    delegationFn = null
+    delegationFunction = null
   }
 
   // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
   // this prevents the handler from being dispatched the same way as mouseover or mouseout does
   if (customEventsRegex.test(originalTypeEvent)) {
-    const wrapFn = fn => {
+    const wrapFunction = fn => {
       return function (event) {
         if (!event.relatedTarget || (event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget))) {
           return fn.call(this, event)
@@ -167,27 +167,27 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
       }
     }
 
-    if (delegationFn) {
+    if (delegationFunction) {
-      delegationFn = wrapFn(delegationFn)
+      delegationFunction = wrapFunction(delegationFunction)
     } else {
-      handler = wrapFn(handler)
+      handler = wrapFunction(handler)
     }
   }
 
-  const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn)
+  const [delegation, originalHandler, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
   const events = getEvent(element)
   const handlers = events[typeEvent] || (events[typeEvent] = {})
-  const previousFn = findHandler(handlers, originalHandler, delegation ? handler : null)
+  const previousFunction = findHandler(handlers, originalHandler, delegation ? handler : null)
 
-  if (previousFn) {
+  if (previousFunction) {
-    previousFn.oneOff = previousFn.oneOff && oneOff
+    previousFunction.oneOff = previousFunction.oneOff && oneOff
 
     return
   }
 
   const uid = getUidEvent(originalHandler, originalTypeEvent.replace(namespaceRegex, ''))
   const fn = delegation ?
-    bootstrapDelegationHandler(element, handler, delegationFn) :
+    bootstrapDelegationHandler(element, handler, delegationFunction) :
     bootstrapHandler(element, handler)
 
   fn.delegationSelector = delegation ? handler : null
@@ -228,20 +228,20 @@ function getTypeEvent(event) {
 }
 
 const EventHandler = {
-  on(element, event, handler, delegationFn) {
+  on(element, event, handler, delegationFunction) {
-    addHandler(element, event, handler, delegationFn, false)
+    addHandler(element, event, handler, delegationFunction, false)
   },
 
-  one(element, event, handler, delegationFn) {
+  one(element, event, handler, delegationFunction) {
-    addHandler(element, event, handler, delegationFn, true)
+    addHandler(element, event, handler, delegationFunction, true)
   },
 
-  off(element, originalTypeEvent, handler, delegationFn) {
+  off(element, originalTypeEvent, handler, delegationFunction) {
     if (typeof originalTypeEvent !== 'string' || !element) {
       return
     }
 
-    const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn)
+    const [delegation, originalHandler, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
     const inNamespace = typeEvent !== originalTypeEvent
     const events = getEvent(element)
     const isNamespace = originalTypeEvent.startsWith('.')

js/src/dom/manipulator.js

@@ -5,24 +5,24 @@
  * --------------------------------------------------------------------------
  */
 
-function normalizeData(val) {
+function normalizeData(value) {
-  if (val === 'true') {
+  if (value === 'true') {
     return true
   }
 
-  if (val === 'false') {
+  if (value === 'false') {
     return false
   }
 
-  if (val === Number(val).toString()) {
+  if (value === Number(value).toString()) {
-    return Number(val)
+    return Number(value)
   }
 
-  if (val === '' || val === 'null') {
+  if (value === '' || value === 'null') {
     return null
   }
 
-  return val
+  return value
 }
 
 function normalizeDataKey(key) {

js/src/dropdown.js

@@ -136,8 +136,8 @@ class Dropdown 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 && !parent.closest(SELECTOR_NAVBAR_NAV)) {
-      for (const elem of [].concat(...document.body.children)) {
+      for (const element of [].concat(...document.body.children)) {
-        EventHandler.on(elem, 'mouseover', noop)
+        EventHandler.on(element, 'mouseover', noop)
       }
     }
 
@@ -186,8 +186,8 @@ 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) {
-      for (const elem of [].concat(...document.body.children)) {
+      for (const element of [].concat(...document.body.children)) {
-        EventHandler.off(elem, 'mouseover', noop)
+        EventHandler.off(element, 'mouseover', noop)
       }
     }
 
@@ -271,7 +271,7 @@ class Dropdown extends BaseComponent {
     const { offset } = this._config
 
     if (typeof offset === 'string') {
-      return offset.split(',').map(val => Number.parseInt(val, 10))
+      return offset.split(',').map(value => Number.parseInt(value, 10))
     }
 
     if (typeof offset === 'function') {
@@ -314,7 +314,7 @@ class Dropdown extends BaseComponent {
   }
 
   _selectMenuItem({ key, target }) {
-    const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(el => isVisible(el))
+    const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element))
 
     if (!items.length) {
       return

js/src/modal.js

@@ -369,9 +369,9 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   })
 
   // avoid conflict when clicking modal toggler while another one is open
-  const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
+  const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
-  if (allReadyOpen) {
+  if (alreadyOpen) {
-    Modal.getInstance(allReadyOpen).hide()
+    Modal.getInstance(alreadyOpen).hide()
   }
 
   const data = Modal.getOrCreateInstance(target)

js/src/offcanvas.js

@@ -238,8 +238,8 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 })
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-  for (const el of SelectorEngine.find(OPEN_SELECTOR)) {
+  for (const selector of SelectorEngine.find(OPEN_SELECTOR)) {
-    Offcanvas.getOrCreateInstance(el).show()
+    Offcanvas.getOrCreateInstance(selector).show()
   }
 })
 

js/src/tooltip.js

@@ -254,12 +254,12 @@ class Tooltip extends BaseComponent {
     }
 
     const complete = () => {
-      const prevHoverState = this._isHovered
+      const previousHoverState = this._isHovered
 
       this._isHovered = false
       EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
 
-      if (prevHoverState) {
+      if (previousHoverState) {
         this._leave()
       }
     }
@@ -408,7 +408,7 @@ class Tooltip extends BaseComponent {
     const { offset } = this._config
 
     if (typeof offset === 'string') {
-      return offset.split(',').map(val => Number.parseInt(val, 10))
+      return offset.split(',').map(value => Number.parseInt(value, 10))
     }
 
     if (typeof offset === 'function') {
@@ -572,9 +572,9 @@ class Tooltip extends BaseComponent {
   _getConfig(config) {
     const dataAttributes = Manipulator.getDataAttributes(this._element)
 
-    for (const dataAttr of Object.keys(dataAttributes)) {
+    for (const dataAttribute of Object.keys(dataAttributes)) {
-      if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
+      if (DISALLOWED_ATTRIBUTES.has(dataAttribute)) {
-        delete dataAttributes[dataAttr]
+        delete dataAttributes[dataAttribute]
       }
     }
 

js/src/util/sanitizer.js

@@ -82,13 +82,13 @@ export const DefaultAllowlist = {
   ul: []
 }
 
-export function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
+export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
   if (!unsafeHtml.length) {
     return unsafeHtml
   }
 
-  if (sanitizeFn && typeof sanitizeFn === 'function') {
+  if (sanitizeFunction && typeof sanitizeFunction === 'function') {
-    return sanitizeFn(unsafeHtml)
+    return sanitizeFunction(unsafeHtml)
   }
 
   const domParser = new window.DOMParser()

js/src/util/scrollbar.js

@@ -61,39 +61,39 @@ class ScrollBarHelper {
     this._element.style.overflow = 'hidden'
   }
 
-  _setElementAttributes(selector, styleProp, callback) {
+  _setElementAttributes(selector, styleProperty, callback) {
     const scrollbarWidth = this.getWidth()
     const manipulationCallBack = element => {
       if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
         return
       }
 
-      this._saveInitialAttribute(element, styleProp)
+      this._saveInitialAttribute(element, styleProperty)
-      const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProp)
+      const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty)
-      element.style.setProperty(styleProp, `${callback(Number.parseFloat(calculatedValue))}px`)
+      element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`)
     }
 
     this._applyManipulationCallback(selector, manipulationCallBack)
   }
 
-  _saveInitialAttribute(element, styleProp) {
+  _saveInitialAttribute(element, styleProperty) {
-    const actualValue = element.style.getPropertyValue(styleProp)
+    const actualValue = element.style.getPropertyValue(styleProperty)
     if (actualValue) {
-      Manipulator.setDataAttribute(element, styleProp, actualValue)
+      Manipulator.setDataAttribute(element, styleProperty, actualValue)
     }
   }
 
-  _resetElementAttributes(selector, styleProp) {
+  _resetElementAttributes(selector, styleProperty) {
     const manipulationCallBack = element => {
-      const value = Manipulator.getDataAttribute(element, styleProp)
+      const value = Manipulator.getDataAttribute(element, styleProperty)
       // We only want to remove the property if the value is `null`; the value can also be zero
       if (value === null) {
-        element.style.removeProperty(styleProp)
+        element.style.removeProperty(styleProperty)
         return
       }
 
-      Manipulator.removeDataAttribute(element, styleProp)
+      Manipulator.removeDataAttribute(element, styleProperty)
-      element.style.setProperty(styleProp, value)
+      element.style.setProperty(styleProperty, value)
     }
 
     this._applyManipulationCallback(selector, manipulationCallBack)

js/tests/helpers/fixture.js

@@ -1,32 +1,32 @@
 const fixtureId = 'fixture'
 
 export const getFixture = () => {
-  let fixtureEl = document.getElementById(fixtureId)
+  let fixtureElement = document.getElementById(fixtureId)
 
-  if (!fixtureEl) {
+  if (!fixtureElement) {
-    fixtureEl = document.createElement('div')
+    fixtureElement = document.createElement('div')
-    fixtureEl.setAttribute('id', fixtureId)
+    fixtureElement.setAttribute('id', fixtureId)
-    fixtureEl.style.position = 'absolute'
+    fixtureElement.style.position = 'absolute'
-    fixtureEl.style.top = '-10000px'
+    fixtureElement.style.top = '-10000px'
-    fixtureEl.style.left = '-10000px'
+    fixtureElement.style.left = '-10000px'
-    fixtureEl.style.width = '10000px'
+    fixtureElement.style.width = '10000px'
-    fixtureEl.style.height = '10000px'
+    fixtureElement.style.height = '10000px'
-    document.body.append(fixtureEl)
+    document.body.append(fixtureElement)
   }
 
-  return fixtureEl
+  return fixtureElement
 }
 
 export const clearFixture = () => {
-  const fixtureEl = getFixture()
+  const fixtureElement = getFixture()
 
-  fixtureEl.innerHTML = ''
+  fixtureElement.innerHTML = ''
 }
 
-export const createEvent = (eventName, params = {}) => {
+export const createEvent = (eventName, parameters = {}) => {
   const event = document.createEvent('Event')
 
-  event.initEvent(eventName, Boolean(params.bubbles), Boolean(params.cancelable))
+  event.initEvent(eventName, Boolean(parameters.bubbles), Boolean(parameters.cancelable))
   return event
 }
 
@@ -34,8 +34,8 @@ export const jQueryMock = {
   elements: undefined,
   fn: {},
   each(fn) {
-    for (const el of this.elements) {
+    for (const element of this.elements) {
-      fn.call(el)
+      fn.call(element)
     }
   }
 }
@@ -43,8 +43,8 @@ export const jQueryMock = {
 export const clearBodyAndDocument = () => {
   const attributes = ['data-bs-padding-right', 'style']
 
-  for (const attr of attributes) {
+  for (const attribute of attributes) {
-    document.documentElement.removeAttribute(attr)
+    document.documentElement.removeAttribute(attribute)
-    document.body.removeAttribute(attr)
+    document.body.removeAttribute(attribute)
   }
 }

js/tests/karma.conf.js

@@ -50,7 +50,7 @@ const detectBrowsers = {
   }
 }
 
-const conf = {
+const config = {
   basePath: '../..',
   port: 9876,
   colors: true,
@@ -101,8 +101,8 @@ const conf = {
 }
 
 if (BROWSERSTACK) {
-  conf.hostname = ip.address()
+  config.hostname = ip.address()
-  conf.browserStack = {
+  config.browserStack = {
     username: ENV.BROWSER_STACK_USERNAME,
     accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
     build: `bootstrap-${ENV.GITHUB_SHA ? ENV.GITHUB_SHA.slice(0, 7) + '-' : ''}${new Date().toISOString()}`,
@@ -110,8 +110,8 @@ if (BROWSERSTACK) {
     retryLimit: 2
   }
   plugins.push('karma-browserstack-launcher', 'karma-jasmine-html-reporter')
-  conf.customLaunchers = browsers
+  config.customLaunchers = browsers
-  conf.browsers = Object.keys(browsers)
+  config.browsers = Object.keys(browsers)
   reporters.push('BrowserStack', 'kjhtml')
 } else if (JQUERY_TEST) {
   frameworks.push('detectBrowsers')
@@ -120,8 +120,8 @@ if (BROWSERSTACK) {
     'karma-firefox-launcher',
     'karma-detect-browsers'
   )
-  conf.detectBrowsers = detectBrowsers
+  config.detectBrowsers = detectBrowsers
-  conf.files = [
+  config.files = [
     'node_modules/jquery/dist/jquery.slim.min.js',
     {
       pattern: 'js/tests/unit/jquery.spec.js',
@@ -137,8 +137,8 @@ if (BROWSERSTACK) {
     'karma-coverage-istanbul-reporter'
   )
   reporters.push('coverage-istanbul')
-  conf.detectBrowsers = detectBrowsers
+  config.detectBrowsers = detectBrowsers
-  conf.coverageIstanbulReporter = {
+  config.coverageIstanbulReporter = {
     dir: path.resolve(__dirname, '../coverage/'),
     reports: ['lcov', 'text-summary'],
     thresholds: {
@@ -153,19 +153,19 @@ if (BROWSERSTACK) {
   }
 
   if (DEBUG) {
-    conf.hostname = ip.address()
+    config.hostname = ip.address()
     plugins.push('karma-jasmine-html-reporter')
     reporters.push('kjhtml')
-    conf.singleRun = false
+    config.singleRun = false
-    conf.autoWatch = true
+    config.autoWatch = true
   }
 }
 
-conf.frameworks = frameworks
+config.frameworks = frameworks
-conf.plugins = plugins
+config.plugins = plugins
-conf.reporters = reporters
+config.reporters = reporters
 
 module.exports = karmaConfig => {
-  conf.logLevel = karmaConfig.LOG_ERROR
+  config.logLevel = karmaConfig.LOG_ERROR
-  karmaConfig.set(conf)
+  karmaConfig.set(config)
 }