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

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))

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"
+          }
+        ]
+      }
+    }
+  ]
+}

js/index.esm.js

@@ -5,15 +5,15 @@
  * --------------------------------------------------------------------------
  */
 
-export { default as Alert } from './src/alert'
+export { default as Alert } from './src/alert.js'
-export { default as Button } from './src/button'
+export { default as Button } from './src/button.js'
-export { default as Carousel } from './src/carousel'
+export { default as Carousel } from './src/carousel.js'
-export { default as Collapse } from './src/collapse'
+export { default as Collapse } from './src/collapse.js'
-export { default as Dropdown } from './src/dropdown'
+export { default as Dropdown } from './src/dropdown.js'
-export { default as Modal } from './src/modal'
+export { default as Modal } from './src/modal.js'
-export { default as Offcanvas } from './src/offcanvas'
+export { default as Offcanvas } from './src/offcanvas.js'
-export { default as Popover } from './src/popover'
+export { default as Popover } from './src/popover.js'
-export { default as ScrollSpy } from './src/scrollspy'
+export { default as ScrollSpy } from './src/scrollspy.js'
-export { default as Tab } from './src/tab'
+export { default as Tab } from './src/tab.js'
-export { default as Toast } from './src/toast'
+export { default as Toast } from './src/toast.js'
-export { default as Tooltip } from './src/tooltip'
+export { default as Tooltip } from './src/tooltip.js'

js/index.umd.js

@@ -5,18 +5,18 @@
  * --------------------------------------------------------------------------
  */
 
-import Alert from './src/alert'
+import Alert from './src/alert.js'
-import Button from './src/button'
+import Button from './src/button.js'
-import Carousel from './src/carousel'
+import Carousel from './src/carousel.js'
-import Collapse from './src/collapse'
+import Collapse from './src/collapse.js'
-import Dropdown from './src/dropdown'
+import Dropdown from './src/dropdown.js'
-import Modal from './src/modal'
+import Modal from './src/modal.js'
-import Offcanvas from './src/offcanvas'
+import Offcanvas from './src/offcanvas.js'
-import Popover from './src/popover'
+import Popover from './src/popover.js'
-import ScrollSpy from './src/scrollspy'
+import ScrollSpy from './src/scrollspy.js'
-import Tab from './src/tab'
+import Tab from './src/tab.js'
-import Toast from './src/toast'
+import Toast from './src/toast.js'
-import Tooltip from './src/tooltip'
+import Tooltip from './src/tooltip.js'
 
 export default {
   Alert,

js/src/alert.js

@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
+import { defineJQueryPlugin } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants

js/src/base-component.js

@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import Data from './dom/data'
+import Data from './dom/data.js'
-import { executeAfterTransition, getElement } from './util/index'
+import { executeAfterTransition, getElement } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import Config from './util/config'
+import Config from './util/config.js'
 
 /**
  * Constants

js/src/button.js

@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
+import { defineJQueryPlugin } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants

js/src/carousel.js

@@ -13,12 +13,12 @@ import {
   isVisible,
   reflow,
   triggerTransitionEnd
-} from './util/index'
+} from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import Manipulator from './dom/manipulator'
+import Manipulator from './dom/manipulator.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import Swipe from './util/swipe'
+import Swipe from './util/swipe.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants

js/src/collapse.js

@@ -11,10 +11,10 @@ import {
   getElementFromSelector,
   getSelectorFromElement,
   reflow
-} from './util/index'
+} from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants

js/src/dom/event-handler.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { getjQuery } from '../util/index'
+import { getjQuery } from '../util/index.js'
 
 /**
  * Constants

js/src/dom/selector-engine.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { isDisabled, isVisible } from '../util/index'
+import { isDisabled, isVisible } from '../util/index.js'
 
 /**
  * Constants

js/src/dropdown.js

@@ -16,11 +16,11 @@ import {
   isRTL,
   isVisible,
   noop
-} from './util/index'
+} from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import Manipulator from './dom/manipulator'
+import Manipulator from './dom/manipulator.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants

js/src/modal.js

@@ -5,14 +5,14 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
+import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import ScrollBarHelper from './util/scrollbar'
+import ScrollBarHelper from './util/scrollbar.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
-import Backdrop from './util/backdrop'
+import Backdrop from './util/backdrop.js'
-import FocusTrap from './util/focustrap'
+import FocusTrap from './util/focustrap.js'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants

js/src/offcanvas.js

@@ -10,14 +10,14 @@ import {
   getElementFromSelector,
   isDisabled,
   isVisible
-} from './util/index'
+} from './util/index.js'
-import ScrollBarHelper from './util/scrollbar'
+import ScrollBarHelper from './util/scrollbar.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import Backdrop from './util/backdrop'
+import Backdrop from './util/backdrop.js'
-import FocusTrap from './util/focustrap'
+import FocusTrap from './util/focustrap.js'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants

js/src/popover.js

@@ -5,8 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin } from './util/index'
+import { defineJQueryPlugin } from './util/index.js'
-import Tooltip from './tooltip'
+import Tooltip from './tooltip.js'
 
 /**
  * Constants

js/src/scrollspy.js

@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index'
+import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants

js/src/tab.js

@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElementFromSelector, getNextActiveElement, isDisabled } from './util/index'
+import { defineJQueryPlugin, getElementFromSelector, getNextActiveElement, isDisabled } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import SelectorEngine from './dom/selector-engine'
+import SelectorEngine from './dom/selector-engine.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
 
 /**
  * Constants

js/src/toast.js

@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, reflow } from './util/index'
+import { defineJQueryPlugin, reflow } from './util/index.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './util/component-functions.js'
 
 /**
  * Constants

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 { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
-import { DefaultAllowlist } from './util/sanitizer'
+import { DefaultAllowlist } from './util/sanitizer.js'
-import EventHandler from './dom/event-handler'
+import EventHandler from './dom/event-handler.js'
-import Manipulator from './dom/manipulator'
+import Manipulator from './dom/manipulator.js'
-import BaseComponent from './base-component'
+import BaseComponent from './base-component.js'
-import TemplateFactory from './util/template-factory'
+import TemplateFactory from './util/template-factory.js'
 
 /**
  * Constants

js/src/util/backdrop.js

@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
+import EventHandler from '../dom/event-handler.js'
-import { execute, executeAfterTransition, getElement, reflow } from './index'
+import { execute, executeAfterTransition, getElement, reflow } from './index.js'
-import Config from './config'
+import Config from './config.js'
 
 /**
  * Constants

js/src/util/component-functions.js

@@ -5,8 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
+import EventHandler from '../dom/event-handler.js'
-import { getElementFromSelector, isDisabled } from './index'
+import { getElementFromSelector, isDisabled } from './index.js'
 
 const enableDismissTrigger = (component, method = 'hide') => {
   const clickEvent = `click.dismiss${component.EVENT_KEY}`

js/src/util/config.js

@@ -5,8 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import { isElement, toType } from './index'
+import { isElement, toType } from './index.js'
-import Manipulator from '../dom/manipulator'
+import Manipulator from '../dom/manipulator.js'
 
 /**
  * Class definition

js/src/util/focustrap.js

@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
+import EventHandler from '../dom/event-handler.js'
-import SelectorEngine from '../dom/selector-engine'
+import SelectorEngine from '../dom/selector-engine.js'
-import Config from './config'
+import Config from './config.js'
 
 /**
  * Constants

js/src/util/scrollbar.js

@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import SelectorEngine from '../dom/selector-engine'
+import SelectorEngine from '../dom/selector-engine.js'
-import Manipulator from '../dom/manipulator'
+import Manipulator from '../dom/manipulator.js'
-import { isElement } from './index'
+import { isElement } from './index.js'
 
 /**
  * Constants

js/src/util/swipe.js

@@ -5,9 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import Config from './config'
+import Config from './config.js'
-import EventHandler from '../dom/event-handler'
+import EventHandler from '../dom/event-handler.js'
-import { execute } from './index'
+import { execute } from './index.js'
 
 /**
  * Constants

js/src/util/template-factory.js

@@ -5,10 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
+import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js'
-import { execute, getElement, isElement } from '../util/index'
+import { execute, getElement, isElement } from './index.js'
-import SelectorEngine from '../dom/selector-engine'
+import SelectorEngine from '../dom/selector-engine.js'
-import Config from './config'
+import Config from './config.js'
 
 /**
  * Constants