Use explicit imports in our javascript source files (#36854)

26 files changed, 135 insertions, 109 deletions

diff --git a/build/build-plugins.js b/build/build-plugins.js
index a160209b0a..89fbe1d720 100644
--- a/build/build-plugins.js
+++ b/build/build-plugins.js
@@ -27,7 +27,7 @@ const filenameToEntity = filename => filename.replace('.js', '')
 
 for (const file of jsFiles) {
   resolvedPlugins.push({
-    src: file.replace('.js', ''),
+    src: file,
     dist: file.replace('src', 'dist'),
     fileName: path.basename(file),
     className: filenameToEntity(path.basename(file))
diff --git a/js/.eslintrc.json b/js/.eslintrc.json
new file mode 100644
index 0000000000..97ea9e0435
--- /dev/null
+++ b/js/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../.eslintrc.json",
+  "env": {
+    "es2022": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "overrides": [
+    {
+      "files": [
+        "./*.js",
+        "./src/**/*.js"
+      ],
+      "rules": {
+        "import/extensions": [
+          2,
+          {
+            "js": "always"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/js/index.esm.js b/js/index.esm.js
index 062b25408f..5aea57efbf 100644
--- a/js/index.esm.js
+++ b/js/index.esm.js
@@ -5,15 +5,15 @@
  * --------------------------------------------------------------------------
  */
 
-export { default as Alert } from './src/alert'
-export { default as Button } from './src/button'
-export { default as Carousel } from './src/carousel'
-export { default as Collapse } from './src/collapse'
-export { default as Dropdown } from './src/dropdown'
-export { default as Modal } from './src/modal'
-export { default as Offcanvas } from './src/offcanvas'
-export { default as Popover } from './src/popover'
-export { default as ScrollSpy } from './src/scrollspy'
-export { default as Tab } from './src/tab'
-export { default as Toast } from './src/toast'
-export { default as Tooltip } from './src/tooltip'
+export { default as Alert } from './src/alert.js'
+export { default as Button } from './src/button.js'
+export { default as Carousel } from './src/carousel.js'
+export { default as Collapse } from './src/collapse.js'
+export { default as Dropdown } from './src/dropdown.js'
+export { default as Modal } from './src/modal.js'
+export { default as Offcanvas } from './src/offcanvas.js'
+export { default as Popover } from './src/popover.js'
+export { default as ScrollSpy } from './src/scrollspy.js'
+export { default as Tab } from './src/tab.js'
+export { default as Toast } from './src/toast.js'
+export { default as Tooltip } from './src/tooltip.js'
diff --git a/js/index.umd.js b/js/index.umd.js
index c63d7c2079..52793b14cd 100644
--- a/js/index.umd.js
+++ b/js/index.umd.js
@@ -5,18 +5,18 @@
  * --------------------------------------------------------------------------
  */
 
-import Alert from './src/alert'
-import Button from './src/button'
-import Carousel from './src/carousel'
-import Collapse from './src/collapse'
-import Dropdown from './src/dropdown'
-import Modal from './src/modal'
-import Offcanvas from './src/offcanvas'
-import Popover from './src/popover'
-import ScrollSpy from './src/scrollspy'
-import Tab from './src/tab'
-import Toast from './src/toast'
-import Tooltip from './src/tooltip'
+import Alert from './src/alert.js'
+import Button from './src/button.js'
+import Carousel from './src/carousel.js'
+import Collapse from './src/collapse.js'
+import Dropdown from './src/dropdown.js'
+import Modal from './src/modal.js'
+import Offcanvas from './src/offcanvas.js'
+import Popover from './src/popover.js'
+import ScrollSpy from './src/scrollspy.js'
+import Tab from './src/tab.js'
+import Toast from './src/toast.js'
+import Tooltip from './src/tooltip.js'
 
 export default {
   Alert,
diff --git a/js/src/alert.js b/js/src/alert.js
index 6ab6650c14..0019970bee 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants
diff --git a/js/src/base-component.js b/js/src/base-component.js
index dba5e0742a..168d7f8cb4 100644
--- a/js/src/base-component.js
+++ b/js/src/base-component.js
@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import Data from './dom/data'
-import { executeAfterTransition, getElement } from './util/index'
-import EventHandler from './dom/event-handler'
-import Config from './util/config'
+import Data from './dom/data.js'
+import { executeAfterTransition, getElement } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import Config from './util/config.js'
 
 /**
  * Constants
diff --git a/js/src/button.js b/js/src/button.js
index e70525c8b2..3a84c01202 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
+import { defineJQueryPlugin } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 7e89e1614c..e253956285 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -13,12 +13,12 @@ import {
   isVisible,
   reflow,
   triggerTransitionEnd
-} from './util/index'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
-import SelectorEngine from './dom/selector-engine'
-import Swipe from './util/swipe'
-import BaseComponent from './base-component'
+} from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import Manipulator from './dom/manipulator.js'
+import SelectorEngine from './dom/selector-engine.js'
+import Swipe from './util/swipe.js'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants
diff --git a/js/src/collapse.js b/js/src/collapse.js
index df2bbc6473..04a5f4cdf7 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -11,10 +11,10 @@ import {
   getElementFromSelector,
   getSelectorFromElement,
   reflow
-} from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+} from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants
diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index c7019a8d07..c9408d3539 100644
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery } from '../util/index'
+import { getjQuery } from '../util/index.js'
 
 /**
  * Constants
diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js
index 28f23ff8ff..63bc2d1764 100644
--- a/js/src/dom/selector-engine.js
+++ b/js/src/dom/selector-engine.js
@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { isDisabled, isVisible } from '../util/index'
+import { isDisabled, isVisible } from '../util/index.js'
 
 /**
  * Constants
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index d37886d898..6f9adcbe69 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -16,11 +16,11 @@ import {
   isRTL,
   isVisible,
   noop
-} from './util/index'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+} from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import Manipulator from './dom/manipulator.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants
diff --git a/js/src/modal.js b/js/src/modal.js
index c2c5c19e96..11efab20ad 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -5,14 +5,14 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import ScrollBarHelper from './util/scrollbar'
-import BaseComponent from './base-component'
-import Backdrop from './util/backdrop'
-import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import ScrollBarHelper from './util/scrollbar.js'
+import BaseComponent from './base-component.js'
+import Backdrop from './util/backdrop.js'
+import FocusTrap from './util/focustrap.js'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index dc3e910752..a857c4d7e4 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -10,14 +10,14 @@ import {
   getElementFromSelector,
   isDisabled,
   isVisible
-} from './util/index'
-import ScrollBarHelper from './util/scrollbar'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
-import SelectorEngine from './dom/selector-engine'
-import Backdrop from './util/backdrop'
-import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+} from './util/index.js'
+import ScrollBarHelper from './util/scrollbar.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
+import SelectorEngine from './dom/selector-engine.js'
+import Backdrop from './util/backdrop.js'
+import FocusTrap from './util/focustrap.js'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants
diff --git a/js/src/popover.js b/js/src/popover.js
index 93fdc35ff9..ff1aef0233 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -5,8 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
-import Tooltip from './tooltip'
+import { defineJQueryPlugin } from './util/index.js'
+import Tooltip from './tooltip.js'
 
 /**
  * Constants
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index a73bba840b..14c1dbc128 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants
diff --git a/js/src/tab.js b/js/src/tab.js
index a78c27538a..19d3bfc361 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElementFromSelector, getNextActiveElement, isDisabled } from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+import { defineJQueryPlugin, getElementFromSelector, getNextActiveElement, isDisabled } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants
diff --git a/js/src/toast.js b/js/src/toast.js
index aef5da3a9b..5cadb85f83 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, reflow } from './util/index'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin, reflow } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index a3f3377c07..02d11363a7 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -6,12 +6,12 @@
  */
 
 import * as Popper from '@popperjs/core'
-import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index'
-import { DefaultAllowlist } from './util/sanitizer'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
-import BaseComponent from './base-component'
-import TemplateFactory from './util/template-factory'
+import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
+import { DefaultAllowlist } from './util/sanitizer.js'
+import EventHandler from './dom/event-handler.js'
+import Manipulator from './dom/manipulator.js'
+import BaseComponent from './base-component.js'
+import TemplateFactory from './util/template-factory.js'
 
 /**
  * Constants
diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index 342f8afc15..832ba745af 100644
--- a/js/src/util/backdrop.js
+++ b/js/src/util/backdrop.js
@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import { execute, executeAfterTransition, getElement, reflow } from './index'
-import Config from './config'
+import EventHandler from '../dom/event-handler.js'
+import { execute, executeAfterTransition, getElement, reflow } from './index.js'
+import Config from './config.js'
 
 /**
  * Constants
diff --git a/js/src/util/component-functions.js b/js/src/util/component-functions.js
index 798366b079..2298ac3717 100644
--- a/js/src/util/component-functions.js
+++ b/js/src/util/component-functions.js
@@ -5,8 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled } from './index'
+import EventHandler from '../dom/event-handler.js'
+import { getElementFromSelector, isDisabled } from './index.js'
 
 const enableDismissTrigger = (component, method = 'hide') => {
   const clickEvent = `click.dismiss${component.EVENT_KEY}`
diff --git a/js/src/util/config.js b/js/src/util/config.js
index 119a3ea3d0..f2d24b4bac 100644
--- a/js/src/util/config.js
+++ b/js/src/util/config.js
@@ -5,8 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import { isElement, toType } from './index'
-import Manipulator from '../dom/manipulator'
+import { isElement, toType } from './index.js'
+import Manipulator from '../dom/manipulator.js'
 
 /**
  * Class definition
diff --git a/js/src/util/focustrap.js b/js/src/util/focustrap.js
index 01ac766837..b03d46136c 100644
--- a/js/src/util/focustrap.js
+++ b/js/src/util/focustrap.js
@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import SelectorEngine from '../dom/selector-engine'
-import Config from './config'
+import EventHandler from '../dom/event-handler.js'
+import SelectorEngine from '../dom/selector-engine.js'
+import Config from './config.js'
 
 /**
  * Constants
diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index 421426d41a..94a677c9fb 100644
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import SelectorEngine from '../dom/selector-engine'
-import Manipulator from '../dom/manipulator'
-import { isElement } from './index'
+import SelectorEngine from '../dom/selector-engine.js'
+import Manipulator from '../dom/manipulator.js'
+import { isElement } from './index.js'
 
 /**
  * Constants
diff --git a/js/src/util/swipe.js b/js/src/util/swipe.js
index 7fcd655888..3a9139cc07 100644
--- a/js/src/util/swipe.js
+++ b/js/src/util/swipe.js
@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import Config from './config'
-import EventHandler from '../dom/event-handler'
-import { execute } from './index'
+import Config from './config.js'
+import EventHandler from '../dom/event-handler.js'
+import { execute } from './index.js'
 
 /**
  * Constants
diff --git a/js/src/util/template-factory.js b/js/src/util/template-factory.js
index 16ec6c28d2..9cd12dcdbe 100644
--- a/js/src/util/template-factory.js
+++ b/js/src/util/template-factory.js
@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
-import { execute, getElement, isElement } from '../util/index'
-import SelectorEngine from '../dom/selector-engine'
-import Config from './config'
+import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js'
+import { execute, getElement, isElement } from './index.js'
+import SelectorEngine from '../dom/selector-engine.js'
+import Config from './config.js'
 
 /**
  * Constants