Migrate JS to ESM only

.babelrc.js → .babelrc.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   presets: [
     [
       '@babel/preset-env',

.bundlewatch.config.json

@@ -38,23 +38,15 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "43.0 kB"
-    },
-    {
-      "path": "./dist/js/bootstrap.esm.js",
-      "maxSize": "40.75 kB"
-    },
-    {
-      "path": "./dist/js/bootstrap.esm.min.js",
-      "maxSize": "25.5 kB"
+      "maxSize": "47.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.js",
-      "maxSize": "41.5 kB"
+      "maxSize": "40.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",
-      "maxSize": "22.75 kB"
+      "maxSize": "25.5 kB"
     }
   ],
   "ci": {

.eslintrc.json

@@ -215,6 +215,19 @@
         "ecmaVersion": 2020
       }
     },
+    {
+      "files": [
+        "site/src/assets/examples/cheatsheet/cheatsheet.js",
+        "site/src/assets/examples/sidebars/sidebars.js"
+      ],
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 2020
+      },
+      "rules": {
+        "import/no-unresolved": "off"
+      }
+    },
     {
       "files": [
         "**/*.md"

README.md

@@ -104,10 +104,6 @@ Within the download you’ll find the following directories and files, logically
       ├── bootstrap.bundle.js.map
       ├── bootstrap.bundle.min.js
       ├── bootstrap.bundle.min.js.map
-      ├── bootstrap.esm.js
-      ├── bootstrap.esm.js.map
-      ├── bootstrap.esm.min.js
-      ├── bootstrap.esm.min.js.map
       ├── bootstrap.js
       ├── bootstrap.js.map
       ├── bootstrap.min.js

build/build-plugins.mjs

@@ -22,26 +22,15 @@ const jsFiles = await globby(`${sourcePath}/**/*.js`)
 // Array which holds the resolved plugins
 const resolvedPlugins = []
 
-// Trims the "js" extension and uppercases => first letter, hyphens, backslashes & slashes
-const filenameToEntity = filename => filename.replace('.js', '')
-  .replace(/(?:^|-|\/|\\)[a-z]/g, str => str.slice(-1).toUpperCase())
-
 for (const file of jsFiles) {
   resolvedPlugins.push({
     src: file,
     dist: file.replace('src', 'dist'),
-    fileName: path.basename(file),
-    className: filenameToEntity(path.basename(file))
-    // safeClassName: filenameToEntity(path.relative(sourcePath, file))
+    fileName: path.basename(file)
   })
 }
 
 const build = async plugin => {
-  /**
-   * @type {import('rollup').GlobalsOption}
-   */
-  const globals = {}
-
   const bundle = await rollup({
     input: plugin.src,
     plugins: [
@@ -52,42 +41,18 @@ const build = async plugin => {
         babelHelpers: 'bundled'
       })
     ],
-    external(source) {
-      // Pattern to identify local files
-      const pattern = /^(\.{1,2})\//
-
-      // It's not a local file, e.g a Node.js package
-      if (!pattern.test(source)) {
-        globals[source] = source
-        return true
-      }
-
-      const usedPlugin = resolvedPlugins.find(plugin => {
-        return plugin.src.includes(source.replace(pattern, ''))
-      })
-
-      if (!usedPlugin) {
-        throw new Error(`Source ${source} is not mapped!`)
-      }
-
-      // We can change `Index` with `UtilIndex` etc if we use
-      // `safeClassName` instead of `className` everywhere
-      globals[path.normalize(usedPlugin.src)] = usedPlugin.className
-      return true
-    }
+    external: () => true
   })
 
   await bundle.write({
     banner: banner(plugin.fileName),
-    format: 'umd',
-    name: plugin.className,
+    format: 'esm',
     sourcemap: true,
-    globals,
     generatedCode: 'es2015',
     file: plugin.dist
   })
 
-  console.log(`Built ${plugin.className}`)
+  console.log(`Built ${plugin.fileName}`)
 }
 
 (async () => {

build/generate-sri.mjs

@@ -36,14 +36,6 @@ const files = [
   {
     file: 'dist/js/bootstrap.bundle.min.js',
     configPropertyName: 'js_bundle_hash'
-  },
-  {
-    file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.min.js',
-    configPropertyName: 'floating_ui_hash'
-  },
-  {
-    file: 'node_modules/vanilla-calendar-pro/index.js',
-    configPropertyName: 'vanilla_calendar_pro_hash'
   }
 ]
 

build/rollup.config.mjs

@@ -9,9 +9,8 @@ import banner from './banner.mjs'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const BUNDLE = process.env.BUNDLE === 'true'
-const ESM = process.env.ESM === 'true'
 
-let destinationFile = `bootstrap${ESM ? '.esm' : ''}`
+let destinationFile = 'bootstrap'
 const external = ['@floating-ui/dom', 'vanilla-calendar-pro']
 const plugins = [
   babel({
@@ -21,17 +20,11 @@ const plugins = [
     babelHelpers: 'bundled'
   })
 ]
-const globals = {
-  '@floating-ui/dom': 'FloatingUIDOM',
-  'vanilla-calendar-pro': 'VanillaCalendarPro'
-}
 
 if (BUNDLE) {
   destinationFile += '.bundle'
-  // Remove all entries in external array to bundle Floating UI and Vanilla Calendar Pro
+  // Bundle all dependencies (Floating UI, Vanilla Calendar Pro, etc.)
   external.length = 0
-  delete globals['@floating-ui/dom']
-  delete globals['vanilla-calendar-pro']
   plugins.push(
     replace({
       'process.env.NODE_ENV': '"production"',
@@ -42,20 +35,15 @@ if (BUNDLE) {
 }
 
 const rollupConfig = {
-  input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
+  input: path.resolve(__dirname, '../js/index.js'),
   output: {
     banner: banner(),
     file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
-    format: ESM ? 'esm' : 'umd',
-    globals,
+    format: 'esm',
     generatedCode: 'es2015'
   },
   external,
   plugins
 }
 
-if (!ESM) {
-  rollupConfig.output.name = 'bootstrap'
-}
-
 export default rollupConfig

config.yml

@@ -40,11 +40,7 @@ cdn:
   js_hash:              "sha384-Php492snRLTR5p+hMyxpV6gYwp1avWXn4AaX31MgANrvsjr9Dpodl3Nw60L7Pewl"
   js_bundle:            "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js"
   js_bundle_hash:       "sha384-I2J4jlw924JZXHU9un9Mcuixq/rKhd5A8/B1NQ6ifPAiBFacZjwNcec8d6L38jQv"
-  floating_ui:          "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.umd.min.js"
-  floating_ui_hash:     "sha384-R7p1RqabZNhI+RdPNIzTouzd/LBVorZ0Tn3ApcogSOk+HF3o+P0HIenrUw/n0MOj"
   floating_ui_esm:      "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.esm.min.js"
-  vanilla_calendar_pro: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.js"
-  vanilla_calendar_pro_hash: "sha384-uufJjV19/4zCvBe4t3zJFWdYpBIrAC78Ef5NN2i4VjmTowSYuAx+m56vF6ccI4V3"
   vanilla_calendar_pro_esm: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.mjs"
 
 anchors: