Closes #1016: Convert build scripts to ESM. (#1036)

Co-authored-by: Chris Green <[email protected]>

.eslintrc.json

@@ -89,11 +89,11 @@
         "node": true
       },
       "parserOptions": {
-        "sourceType": "script"
+        "sourceType": "module"
       },
       "rules": {
         "no-console": "off",
-        "strict": "error"
+        "unicorn/prefer-top-level-await": "off"
       }
     },
     {

build/banner.js → build/banner.mjs

@@ -1,6 +1,12 @@
-'use strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const pkgJson = path.join(__dirname, '../package.json')
+const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
 
-const pkg = require('../package.json')
 const year = new Date().getFullYear()
 
 function getBanner(pluginFilename) {
@@ -11,4 +17,4 @@ function getBanner(pluginFilename) {
   */`
 }
 
-module.exports = getBanner
+export default getBanner

build/build-plugins.js → build/build-plugins.mjs

@@ -2,18 +2,19 @@
 
 /*!
  * Script to build our plugins to use them separately.
- * Copyright 2020-2022 The Bootstrap Authors
- * Copyright 2020-2022 Twitter, Inc.
+ * Copyright 2020-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import globby from 'globby'
+import { rollup } from 'rollup'
+import banner from './banner.mjs'
 
-const path = require('node:path')
-const rollup = require('rollup')
-const globby = require('globby')
-const { babel } = require('@rollup/plugin-babel')
-const banner = require('./banner.js')
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
 const jsFiles = globby.sync(`${sourcePath}/**/*.js`)
@@ -27,7 +28,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))
@@ -38,7 +39,7 @@ for (const file of jsFiles) {
 const build = async plugin => {
   const globals = {}
 
-  const bundle = await rollup.rollup({
+  const bundle = await rollup({
     input: plugin.src,
     plugins: [
       babel({

build/postcss.config.mjs

@@ -0,0 +1,17 @@
+const mapConfig = {
+  inline: false,
+  annotation: true,
+  sourcesContent: true
+}
+
+export default context => {
+  return {
+    map: context.file.dirname.includes('examples') ? false : mapConfig,
+    plugins: {
+      autoprefixer: {
+        cascade: false
+      },
+      rtlcss: context.env === 'RTL'
+    }
+  }
+}

build/rollup.config.js → build/rollup.config.mjs

@@ -1,15 +1,17 @@
-'use strict'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import banner from './banner.mjs'
 
-const path = require('node:path')
-const { babel } = require('@rollup/plugin-babel')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const replace = require('@rollup/plugin-replace')
-const banner = require('./banner.js')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const BUNDLE = process.env.BUNDLE === 'true'
 const ESM = process.env.ESM === 'true'
 
-let fileDestination = `arizona-bootstrap${ESM ? '.esm' : ''}`
+let destinationFile = `arizona-bootstrap${ESM ? '.esm' : ''}`
 const external = ['@popperjs/core']
 const plugins = [
   babel({
@@ -24,7 +26,7 @@ const globals = {
 }
 
 if (BUNDLE) {
-  fileDestination += '.bundle'
+  destinationFile += '.bundle'
   // Remove last entry in external array to bundle Popper
   external.pop()
   delete globals['@popperjs/core']
@@ -41,7 +43,7 @@ const rollupConfig = {
   input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
   output: {
     banner: banner(),
-    file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`),
+    file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
     format: ESM ? 'esm' : 'umd',
     globals,
     generatedCode: 'es2015'
@@ -54,4 +56,4 @@ if (!ESM) {
   rollupConfig.output.name = 'arizona-bootstrap'
 }
 
-module.exports = rollupConfig
+export default rollupConfig

build/vnu-jar.js → build/vnu-jar.mjs

@@ -2,22 +2,22 @@
 
 /*!
  * Script to run vnu-jar if Java is available.
- * Copyright 2017-2022 The Bootstrap Authors
- * Copyright 2017-2022 Twitter, Inc.
+ * Copyright 2017-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
-
-const { execFile, spawn } = require('node:child_process')
-const vnu = require('vnu-jar')
+import { execFile, spawn } from 'node:child_process'
+import vnu from 'vnu-jar'
 
 execFile('java', ['-version'], (error, stdout, stderr) => {
   if (error) {
-    console.error('Skipping vnu-jar test; Java is missing.')
+    console.error('Skipping vnu-jar test; Java is probably missing.')
+    console.error(error)
     return
   }
 
+  console.log('Running vnu-jar validation...')
+
   const is32bitJava = !/64-Bit/.test(stderr)
 
   // vnu-jar accepts multiple ignores joined with a `|`.
@@ -27,7 +27,6 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
     'Attribute “autocomplete” is only allowed when the input type is.*',
     'Attribute “autocomplete” not allowed on element “button” at this point.',
-    // IE11 doesn't recognise <main> / give the element an implicit "main" landmark.
     // Explicit role="main" is redundant for other modern browsers, but still valid.
     'The “main” role is unnecessary for element “main”.',
     'Self-closing tag syntax in text/html documents is widely discouraged;.*',
@@ -54,6 +53,8 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     args.splice(0, 0, '-Xss512k')
   }
 
+  console.log(`command used: java ${args.join(' ')}`)
+
   return spawn('java', args, {
     shell: true,
     stdio: 'inherit'

package.json

@@ -13,25 +13,25 @@
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
     "css-lint-vars": "fusv scss/ site/assets/scss/",
     "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
-    "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
+    "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
     "dist": "npm-run-all --aggregate-output --parallel css js",
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "hugo --verbose --cleanDestinationDir",
     "docs-compile": "npm run docs-build",
     "docs-develop": "npm-run-all docs-serve-config dist docs-serve-external",
     "docs-linkinator": "linkinator _site",
-    "docs-vnu": "node build/vnu-jar.js",
+    "docs-vnu": "node build/vnu-jar.mjs",
     "docs-lint": "npm-run-all --aggregate-output --parallel docs-vnu docs-linkinator",
     "docs-serve": "hugo server --port 9001 --disableFastRender",
     "docs-serve-config": "scripts/create-hugo-config.sh",
     "docs-serve-external": "hugo server --bind '0.0.0.0' --port 9001 --disableFastRender",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
-    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
-    "js-compile-plugins": "node build/build-plugins.js",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
+    "js-compile-plugins": "node build/build-plugins.mjs",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
     "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
     "js-minify-standalone": "terser --compress passes=2,typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/arizona-bootstrap.js.map,includeSources,url=arizona-bootstrap.min.js.map\" --output dist/js/arizona-bootstrap.min.js dist/js/arizona-bootstrap.js",