convert build scripts to ESM

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - 🚨 BREAKING: all `invalid` props on form controls now reflect validity before interaction [#455](https://github.com/shoelace-style/shoelace/issues/455)
 - Allow `null` to be passed to disable animations in `setDefaultAnimation()` and `setAnimation()`
+- Converted build scripts to ESM
 - Fixed a bug in `sl-checkbox` where `invalid` did not update properly
 - Fixed a bug in `sl-dropdown` where a `keydown` listener wasn't cleaned up properly
 - Fixed a bug in `sl-select` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
@@ -21,7 +22,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## 2.0.0-beta.43
 
-- Added `?` to optional arguments in methods tables
+- Added `?` to optional arguments in methods tables in the docs
 - Added the `scrollPosition()` method to `sl-textarea` to get/set scroll position
 - Added intial tests for `sl-dialog`, `sl-drawer`, `sl-dropdown`, and `sl-tooltip`
 - Fixed a bug in `sl-tab-group` where scrollable tab icons were not displaying correctly

package.json

@@ -29,11 +29,11 @@
     "url": "https://github.com/sponsors/claviska"
   },
   "scripts": {
-    "start": "node scripts/build.cjs --dev",
-    "build": "node scripts/build.cjs",
+    "start": "node scripts/build.js --dev",
+    "build": "node scripts/build.js",
     "prepublishOnly": "npm run build && npm run test",
     "prettier": "prettier --write --loglevel warn .",
-    "create": "node scripts/create-component.cjs",
+    "create": "node scripts/create-component.js",
     "test": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer",
     "test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer --watch"
   },

scripts/build.js

@@ -1,28 +1,29 @@
 //
 // Builds the project. To spin up a dev server, pass the --serve flag.
 //
-const bs = require('browser-sync').create();
-const chalk = require('chalk');
-const commandLineArgs = require('command-line-args');
-const copy = require('recursive-copy');
-const del = require('del');
-const esbuild = require('esbuild');
-const execSync = require('child_process').execSync;
-const getPort = require('get-port');
-const glob = require('globby');
-const inlineImportPlugin = require('esbuild-plugin-inline-import');
-const path = require('path');
-const sass = require('sass');
-const sassPlugin = require('esbuild-plugin-sass');
-const { build } = require('esbuild');
+import browserSync from 'browser-sync';
+import chalk from 'chalk';
+import commandLineArgs from 'command-line-args';
+import copy from 'recursive-copy';
+import del from 'del';
+import esbuild from 'esbuild';
+import { execSync } from 'child_process';
+import getPort from 'get-port';
+import glob from 'globby';
+import inlineImportPlugin from 'esbuild-plugin-inline-import';
+import path from 'path';
+import sass from 'sass';
+import sassPlugin from 'esbuild-plugin-sass';
 
+const build = esbuild.build;
+const bs = browserSync.create();
 const { dev } = commandLineArgs({ name: 'dev', type: Boolean });
 
 del.sync('./dist');
 
 if (!dev) execSync('tsc', { stdio: 'inherit' }); // for type declarations
-execSync('node scripts/make-metadata.cjs', { stdio: 'inherit' });
-execSync('node scripts/make-icons.cjs', { stdio: 'inherit' });
+execSync('node scripts/make-metadata.js', { stdio: 'inherit' });
+execSync('node scripts/make-icons.js', { stdio: 'inherit' });
 
 (async () => {
   const entryPoints = [

scripts/create-component.js

@@ -1,17 +1,19 @@
-const args = process.argv.slice(2);
-const chalk = require('chalk');
-const fs = require('fs');
-const mkdirp = require('mkdirp');
-const path = require('path');
+import chalk from 'chalk';
+import fs from 'fs';
+import mkdirp from 'mkdirp';
+import path from 'path';
+import process from 'process';
 
+const args = process.argv.slice(2);
 const tagName = (args[0] + '').toLowerCase().trim();
 const tagNameWithoutPrefix = tagName.replace(/^sl-/, '');
 const className = tagName.replace(/(^\w|-\w)/g, string => string.replace(/-/, '').toUpperCase());
 const readableName = tagNameWithoutPrefix
   .replace(/-/g, ' ')
   .replace(/\w\S*/g, string => string.charAt(0).toUpperCase() + string.substr(1).toLowerCase());
-const version = require('../package.json').version;
-const minorVersion = version.split('.').slice(0, 2).join('.');
+
+const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const minorVersion = packageData.version.split('.').slice(0, 2).join('.');
 
 // Check for tag name
 if (!tagName) {

scripts/make-icons.js

@@ -1,30 +1,30 @@
 //
 // This script downloads and generates icons and icon metadata.
 //
-const Promise = require('bluebird');
-const promisify = require('util').promisify;
-const chalk = require('chalk');
-const copy = require('recursive-copy');
-const del = require('del');
-const download = require('download');
-const mkdirp = require('mkdirp');
-const fm = require('front-matter');
-const fs = require('fs').promises;
-const glob = promisify(require('glob'));
-const path = require('path');
+import Promise from 'bluebird';
+import chalk from 'chalk';
+import copy from 'recursive-copy';
+import del from 'del';
+import download from 'download';
+import mkdirp from 'mkdirp';
+import fm from 'front-matter';
+import { readFileSync } from 'fs';
+import { stat, readFile, writeFile } from 'fs/promises';
+import glob from 'globby';
+import path from 'path';
 
-const baseDir = path.dirname(__dirname);
 const iconDir = './dist/assets/icons';
+const iconPackageData = JSON.parse(readFileSync('./node_modules/bootstrap-icons/package.json', 'utf8'));
 let numIcons = 0;
 
 (async () => {
   try {
-    const version = require('bootstrap-icons/package').version;
+    const version = iconPackageData.version;
     const srcPath = `./.cache/icons/icons-${version}`;
     const url = `https://github.com/twbs/icons/archive/v${version}.zip`;
 
     try {
-      await fs.stat(`${srcPath}/LICENSE.md`);
+      await stat(`${srcPath}/LICENSE.md`);
       console.log(chalk.cyan('Generating icons from cache'));
     } catch {
       // Download the source from GitHub (since not everything is published to NPM)
@@ -48,7 +48,7 @@ let numIcons = 0;
 
     const metadata = await Promise.map(files, async file => {
       const name = path.basename(file, path.extname(file));
-      const data = fm(await fs.readFile(file, 'utf8')).attributes;
+      const data = fm(await readFile(file, 'utf8')).attributes;
       numIcons++;
 
       return {
@@ -59,7 +59,7 @@ let numIcons = 0;
       };
     });
 
-    await fs.writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');
+    await writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');
 
     console.log(chalk.green(`Successfully processed ${numIcons} icons ✨\n`));
   } catch (err) {

scripts/make-metadata.js

@@ -1,12 +1,13 @@
 //
 // This script runs TypeDoc and uses its output to generate metadata files used by the docs
 //
-const chalk = require('chalk');
-const execSync = require('child_process').execSync;
-const fs = require('fs');
-const mkdirp = require('mkdirp');
-const path = require('path');
-const package = require('../package.json');
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import fs from 'fs';
+import mkdirp from 'mkdirp';
+import path from 'path';
+
+const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 
 function getTagName(className) {
   return className.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^-/, '');
@@ -78,12 +79,12 @@ const data = JSON.parse(fs.readFileSync('.cache/typedoc.json', 'utf8'));
 const modules = data.children;
 const components = modules.filter(module => module.kindString === 'Class');
 const metadata = {
-  name: package.name,
-  description: package.description,
-  version: package.version,
-  author: package.author,
-  homepage: package.homepage,
-  license: package.license,
+  name: packageData.name,
+  description: packageData.description,
+  version: packageData.version,
+  author: packageData.author,
+  homepage: packageData.homepage,
+  license: packageData.license,
   components: []
 };