From 1a954c5b2506a1d2bb6c2c30e13a3ec88c4a5091 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 17 Jun 2021 17:38:48 -0400 Subject: [PATCH] convert build scripts to ESM --- docs/resources/changelog.md | 3 +- package.json | 6 ++-- scripts/{build.cjs => build.js} | 33 ++++++++++--------- ...eate-component.cjs => create-component.js} | 16 +++++---- scripts/{make-icons.cjs => make-icons.js} | 32 +++++++++--------- .../{make-metadata.cjs => make-metadata.js} | 25 +++++++------- 6 files changed, 60 insertions(+), 55 deletions(-) rename scripts/{build.cjs => build.js} (82%) rename scripts/{create-component.cjs => create-component.js} (92%) rename scripts/{make-icons.cjs => make-icons.js} (68%) rename scripts/{make-metadata.cjs => make-metadata.js} (95%) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 5d0f45b91..3c21436a4 100644 --- a/docs/resources/changelog.md +++ b/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 diff --git a/package.json b/package.json index a148ab7fd..63aebdc89 100644 --- a/package.json +++ b/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" }, diff --git a/scripts/build.cjs b/scripts/build.js similarity index 82% rename from scripts/build.cjs rename to scripts/build.js index 1e71874e9..05cb228a6 100644 --- a/scripts/build.cjs +++ b/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 = [ diff --git a/scripts/create-component.cjs b/scripts/create-component.js similarity index 92% rename from scripts/create-component.cjs rename to scripts/create-component.js index 3b687f97c..708fe07bf 100644 --- a/scripts/create-component.cjs +++ b/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) { diff --git a/scripts/make-icons.cjs b/scripts/make-icons.js similarity index 68% rename from scripts/make-icons.cjs rename to scripts/make-icons.js index 89aeb90ba..2cdeb4a96 100644 --- a/scripts/make-icons.cjs +++ b/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) { diff --git a/scripts/make-metadata.cjs b/scripts/make-metadata.js similarity index 95% rename from scripts/make-metadata.cjs rename to scripts/make-metadata.js index 06d07f3f5..8235ec596 100644 --- a/scripts/make-metadata.cjs +++ b/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: [] };