Merge branch 'main' into main-xmr-scss-svg

.bundlewatch.config.json

@@ -46,7 +46,7 @@
     },
     {
       "path": "./dist/js/bootstrap.esm.min.js",
-      "maxSize": "18.25 kB"
+      "maxSize": "18.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.js",

.github/workflows/browserstack.yml

@@ -2,6 +2,7 @@ name: BrowserStack
 
 on:
   push:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/bundlewatch.yml

@@ -5,6 +5,7 @@ on:
     branches-ignore:
       - "dependabot/**"
   pull_request:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/codeql.yml

@@ -14,6 +14,7 @@ on:
       - "!dependabot/**"
   schedule:
     - cron: "0 2 * * 5"
+  workflow_dispatch:
 
 jobs:
   analyze:

.github/workflows/css.yml

@@ -5,6 +5,7 @@ on:
     branches-ignore:
       - "dependabot/**"
   pull_request:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/docs.yml

@@ -5,6 +5,7 @@ on:
     branches-ignore:
       - "dependabot/**"
   pull_request:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/js.yml

@@ -5,6 +5,7 @@ on:
     branches-ignore:
       - "dependabot/**"
   pull_request:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/lint.yml

@@ -5,6 +5,7 @@ on:
     branches-ignore:
       - "dependabot/**"
   pull_request:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/node-sass.yml

@@ -5,6 +5,7 @@ on:
     branches-ignore:
       - "dependabot/**"
   pull_request:
+  workflow_dispatch:
 
 env:
   FORCE_COLOR: 2

.github/workflows/release-notes.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
 
 jobs:
   update_release_draft:

.gitignore

@@ -1,7 +1,8 @@
 # Ignore docs files
 /_site/
-# Hugo resources folder
+# Hugo files
 /resources/
+/.hugo_build.lock
 
 # Numerous always-ignore extensions
 *.diff

README.md

@@ -65,8 +65,6 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-starte
 [![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue)](https://atmospherejs.com/twbs/bootstrap)
 [![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap)](https://packagist.org/packages/twbs/bootstrap)
 [![NuGet](https://img.shields.io/nuget/vpre/bootstrap)](https://www.nuget.org/packages/bootstrap/absoluteLatest)
-[![peerDependencies Status](https://img.shields.io/david/peer/twbs/bootstrap)](https://david-dm.org/twbs/bootstrap?type=peer)
-[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap)](https://david-dm.org/twbs/bootstrap?type=dev)
 [![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main)](https://coveralls.io/github/twbs/bootstrap?branch=main)
 [![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)
 [![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)
@@ -79,7 +77,9 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-starte
 
 ## What's included
 
-Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
+
+<details><summary>Download contents</summary>
 
 ```text
 bootstrap/
@@ -130,6 +130,7 @@ bootstrap/
     ├── bootstrap.min.js
     └── bootstrap.min.js.map
 ```
+</details>
 
 We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
 

build/build-plugins.js

@@ -11,173 +11,94 @@
 
 const path = require('path')
 const rollup = require('rollup')
+const glob = require('glob')
 const { babel } = require('@rollup/plugin-babel')
 const banner = require('./banner.js')
 
-const rootPath = path.resolve(__dirname, '../js/dist/')
-const plugins = [
-  babel({
-    // Only transpile our source code
-    exclude: 'node_modules/**',
-    // Include the helpers in each file, at most one copy of each
-    babelHelpers: 'bundled'
-  })
-]
-const bsPlugins = {
-  Data: path.resolve(__dirname, '../js/src/dom/data.js'),
-  EventHandler: path.resolve(__dirname, '../js/src/dom/event-handler.js'),
-  Manipulator: path.resolve(__dirname, '../js/src/dom/manipulator.js'),
-  SelectorEngine: path.resolve(__dirname, '../js/src/dom/selector-engine.js'),
-  Alert: path.resolve(__dirname, '../js/src/alert.js'),
-  Base: path.resolve(__dirname, '../js/src/base-component.js'),
-  Button: path.resolve(__dirname, '../js/src/button.js'),
-  Carousel: path.resolve(__dirname, '../js/src/carousel.js'),
-  Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
-  Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
-  Modal: path.resolve(__dirname, '../js/src/modal.js'),
-  Offcanvas: path.resolve(__dirname, '../js/src/offcanvas.js'),
-  Popover: path.resolve(__dirname, '../js/src/popover.js'),
-  ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'),
-  Tab: path.resolve(__dirname, '../js/src/tab.js'),
-  Toast: path.resolve(__dirname, '../js/src/toast.js'),
-  Tooltip: path.resolve(__dirname, '../js/src/tooltip.js')
-}
-
-const defaultPluginConfig = {
-  external: [
-    bsPlugins.Data,
-    bsPlugins.Base,
-    bsPlugins.EventHandler,
-    bsPlugins.SelectorEngine
-  ],
-  globals: {
-    [bsPlugins.Data]: 'Data',
-    [bsPlugins.Base]: 'Base',
-    [bsPlugins.EventHandler]: 'EventHandler',
-    [bsPlugins.SelectorEngine]: 'SelectorEngine'
-  }
-}
+const srcPath = path.resolve(__dirname, '../js/src/')
+const jsFiles = glob.sync(srcPath + '/**/*.js')
 
-const getConfigByPluginKey = pluginKey => {
-  switch (pluginKey) {
-    case 'Alert':
-    case 'Offcanvas':
-    case 'Tab':
-      return defaultPluginConfig
-
-    case 'Base':
-    case 'Button':
-    case 'Carousel':
-    case 'Collapse':
-    case 'Modal':
-    case 'ScrollSpy': {
-      const config = Object.assign(defaultPluginConfig)
-      config.external.push(bsPlugins.Manipulator)
-      config.globals[bsPlugins.Manipulator] = 'Manipulator'
-      return config
-    }
+// Array which holds the resolved plugins
+const resolvedPlugins = []
 
-    case 'Dropdown':
-    case 'Tooltip': {
-      const config = Object.assign(defaultPluginConfig)
-      config.external.push(bsPlugins.Manipulator, '@popperjs/core')
-      config.globals[bsPlugins.Manipulator] = 'Manipulator'
-      config.globals['@popperjs/core'] = 'Popper'
-      return config
-    }
+// 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())
 
-    case 'Popover':
-      return {
-        external: [
-          bsPlugins.Data,
-          bsPlugins.SelectorEngine,
-          bsPlugins.Tooltip
-        ],
-        globals: {
-          [bsPlugins.Data]: 'Data',
-          [bsPlugins.SelectorEngine]: 'SelectorEngine',
-          [bsPlugins.Tooltip]: 'Tooltip'
-        }
-      }
-
-    case 'Toast':
-      return {
-        external: [
-          bsPlugins.Data,
-          bsPlugins.Base,
-          bsPlugins.EventHandler,
-          bsPlugins.Manipulator
-        ],
-        globals: {
-          [bsPlugins.Data]: 'Data',
-          [bsPlugins.Base]: 'Base',
-          [bsPlugins.EventHandler]: 'EventHandler',
-          [bsPlugins.Manipulator]: 'Manipulator'
-        }
-      }
-
-    default:
-      return {
-        external: []
-      }
-  }
+for (const file of jsFiles) {
+  resolvedPlugins.push({
+    src: file.replace('.js', ''),
+    dist: file.replace('src', 'dist'),
+    fileName: path.basename(file),
+    className: filenameToEntity(path.basename(file))
+    // safeClassName: filenameToEntity(path.relative(srcPath, file))
+  })
 }
 
-const utilObjects = new Set([
-  'Util',
-  'Sanitizer',
-  'Backdrop'
-])
-
-const domObjects = new Set([
-  'Data',
-  'EventHandler',
-  'Manipulator',
-  'SelectorEngine'
-])
-
 const build = async plugin => {
-  console.log(`Building ${plugin} plugin...`)
+  const globals = {}
 
-  const { external, globals } = getConfigByPluginKey(plugin)
-  const pluginFilename = path.basename(bsPlugins[plugin])
-  let pluginPath = rootPath
+  const bundle = await rollup.rollup({
+    input: plugin.src,
+    plugins: [
+      babel({
+        // Only transpile our source code
+        exclude: 'node_modules/**',
+        // Include the helpers in each file, at most one copy of each
+        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
+      }
 
-  if (utilObjects.has(plugin)) {
-    pluginPath = `${rootPath}/util/`
-  }
+      const usedPlugin = resolvedPlugins.find(plugin => {
+        return plugin.src.includes(source.replace(pattern, ''))
+      })
 
-  if (domObjects.has(plugin)) {
-    pluginPath = `${rootPath}/dom/`
-  }
+      if (!usedPlugin) {
+        throw new Error(`Source ${source} is not mapped!`)
+      }
 
-  const bundle = await rollup.rollup({
-    input: bsPlugins[plugin],
-    plugins,
-    external
+      // We can change `Index` with `UtilIndex` etc if we use
+      // `safeClassName` instead of `className` everywhere
+      globals[path.normalize(usedPlugin.src)] = usedPlugin.className
+      return true
+    }
   })
 
   await bundle.write({
-    banner: banner(pluginFilename),
+    banner: banner(plugin.fileName),
     format: 'umd',
-    name: plugin,
+    name: plugin.className,
     sourcemap: true,
     globals,
     generatedCode: 'es2015',
-    file: path.resolve(__dirname, `${pluginPath}/${pluginFilename}`)
+    file: plugin.dist
   })
 
-  console.log(`Building ${plugin} plugin... Done!`)
+  console.log(`Built ${plugin.className}`)
 }
 
-const main = async () => {
+(async () => {
   try {
-    await Promise.all(Object.keys(bsPlugins).map(plugin => build(plugin)))
+    const basename = path.basename(__filename)
+    const timeLabel = `[${basename}] finished`
+
+    console.log('Building individual plugins...')
+    console.time(timeLabel)
+
+    await Promise.all(Object.values(resolvedPlugins).map(plugin => build(plugin)))
+
+    console.timeEnd(timeLabel)
   } catch (error) {
     console.error(error)
-
     process.exit(1)
   }
-}
-
-main()
+})()

build/change-version.js

@@ -57,7 +57,7 @@ async function replaceRecursively(file, oldVersion, newVersion) {
 }
 
 async function main(args) {
-  const [oldVersion, newVersion] = args
+  let [oldVersion, newVersion] = args
 
   if (!oldVersion || !newVersion) {
     console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')
@@ -66,7 +66,7 @@ async function main(args) {
   }
 
   // Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s
-  [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg)
+  [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg)
 
   try {
     const files = await globby(GLOB, GLOBBY_OPTIONS)