update dependencies, cleanup, refine (#642)

* update dependencies, cleanup, refine

fixes #637

* update CI command to verify

scripts/build.js

@@ -1,12 +1,12 @@
+import fs from 'fs';
 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 getPort from 'get-port';
-import glob from 'globby';
-import mkdirp from 'mkdirp';
+import getPort, { portNumbers } from 'get-port';
+import { globby } from 'globby';
 import { execSync } from 'child_process';
 
 const bs = browserSync.create();
@@ -22,7 +22,7 @@ const { bundle, copydir, dir, serve, types } = commandLineArgs([
 const outdir = dir;
 
 del.sync(outdir);
-mkdirp.sync(outdir);
+fs.mkdirSync(outdir, { recursive: true });
 
 (async () => {
   try {
@@ -47,15 +47,15 @@ mkdirp.sync(outdir);
         // The whole shebang
         './src/shoelace.ts',
         // Components
-        ...(await glob('./src/components/**/!(*.(style|test)).ts')),
+        ...(await globby('./src/components/**/!(*.(style|test)).ts')),
         // Translations
-        ...(await glob('./src/translations/**/*.ts')),
+        ...(await globby('./src/translations/**/*.ts')),
         // Public utilities
-        ...(await glob('./src/utilities/**/!(*.(style|test)).ts')),
+        ...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
         // Theme stylesheets
-        ...(await glob('./src/themes/**/!(*.test).ts')),
+        ...(await globby('./src/themes/**/!(*.test).ts')),
         // React wrappers
-        ...(await glob('./src/react/**/*.ts'))
+        ...(await globby('./src/react/**/*.ts'))
       ],
       outdir,
       chunkNames: 'chunks/[name].[hash]',
@@ -93,7 +93,7 @@ mkdirp.sync(outdir);
   // Dev server
   if (serve) {
     const port = await getPort({
-      port: getPort.makeRange(4000, 4999)
+      port: portNumbers(4000, 4999)
     });
 
     // Make sure docs/dist is empty since we're serving it virtually

scripts/make-css.js

@@ -4,19 +4,19 @@
 import chalk from 'chalk';
 import commandLineArgs from 'command-line-args';
 import fs from 'fs/promises';
-import glob from 'globby';
-import mkdirp from 'mkdirp';
+import { mkdirSync } from 'fs';
+import { globbySync } from 'globby';
 import path from 'path';
 import prettier from 'prettier';
 import stripComments from 'strip-css-comments';
 
 const { outdir } = commandLineArgs({ name: 'outdir', type: String });
-const files = glob.sync('./src/themes/**/*.styles.ts');
+const files = globbySync('./src/themes/**/*.styles.ts');
 const themesDir = path.join(outdir, 'themes');
 
 console.log('Generating stylesheets');
 
-mkdirp.sync(themesDir);
+mkdirSync(themesDir, { recursive: true });
 
 try {
   files.map(async file => {

scripts/make-icons.js

@@ -1,17 +1,15 @@
 //
 // This script downloads and generates icons and icon metadata.
 //
-import Promise from 'bluebird';
 import chalk from 'chalk';
 import commandLineArgs from 'command-line-args';
 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 { readFileSync, mkdirSync } from 'fs';
 import { stat, readFile, writeFile } from 'fs/promises';
-import glob from 'globby';
+import { globby } from 'globby';
 import path from 'path';
 
 const { outdir } = commandLineArgs({ name: 'outdir', type: String });
@@ -38,7 +36,7 @@ let numIcons = 0;
     // Copy icons
     console.log(`Copying icons and license`);
     await del([iconDir]);
-    await mkdirp(iconDir);
+    mkdirSync(iconDir, { recursive: true });
     await Promise.all([
       copy(`${srcPath}/icons`, iconDir),
       copy(`${srcPath}/LICENSE.md`, path.join(iconDir, 'LICENSE.md')),
@@ -47,20 +45,22 @@ let numIcons = 0;
 
     // Generate metadata
     console.log(`Generating icon metadata`);
-    const files = await glob(`${srcPath}/docs/content/icons/**/*.md`);
+    const files = await globby(`${srcPath}/docs/content/icons/**/*.md`);
 
-    const metadata = await Promise.map(files, async file => {
-      const name = path.basename(file, path.extname(file));
-      const data = fm(await readFile(file, 'utf8')).attributes;
-      numIcons++;
+    const metadata = await Promise.all(
+      files.map(async file => {
+        const name = path.basename(file, path.extname(file));
+        const data = fm(await readFile(file, 'utf8')).attributes;
+        numIcons++;
 
-      return {
-        name,
-        title: data.title,
-        categories: data.categories,
-        tags: data.tags
-      };
-    });
+        return {
+          name,
+          title: data.title,
+          categories: data.categories,
+          tags: data.tags
+        };
+      })
+    );
 
     await writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');
 

scripts/make-react.js

@@ -1,9 +1,8 @@
 import chalk from 'chalk';
 import fs from 'fs';
 import del from 'del';
-import mkdirp from 'mkdirp';
 import path from 'path';
-import pascalCase from 'pascal-case';
+import { pascalCase } from 'pascal-case';
 import prettier from 'prettier';
 import prettierConfig from '../prettier.config.cjs';
 import { getAllComponents } from './shared.js';
@@ -12,7 +11,7 @@ const outdir = path.join('./src/react');
 
 // Clear build directory
 del.sync(outdir);
-mkdirp.sync(outdir);
+fs.mkdirSync(outdir, { recursive: true });
 
 // Fetch component metadata
 const metadata = JSON.parse(fs.readFileSync('./dist/custom-elements.json', 'utf8'));
@@ -29,7 +28,7 @@ components.map(component => {
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.modulePath.replace(/^src\//, '').replace(/\.ts$/, '');
 
-  mkdirp.sync(componentDir);
+  fs.mkdirSync(componentDir, { recursive: true });
 
   const events = (component.events || []).map(event => `${`on${pascalCase(event.name)}`}: '${event.name}'`).join(',\n');
 

scripts/make-search.js

@@ -1,7 +1,7 @@
 import commandLineArgs from 'command-line-args';
 import fs from 'fs';
 import path from 'path';
-import glob from 'globby';
+import { globby } from 'globby';
 import lunr from 'lunr';
 import { getAllComponents } from './shared.js';
 
@@ -59,7 +59,7 @@ console.log('Generating search index for documentation');
     return members.join(' ');
   }
 
-  const files = await glob('./docs/**/*.md');
+  const files = await globby('./docs/**/*.md');
   const map = {};
   const searchIndex = lunr(function () {
     // The search index uses these field names extensively, so shortening them can save some serious bytes. The initial

scripts/plop/plopfile.js

@@ -1,4 +1,4 @@
-module.exports = function (plop) {
+export default function (plop) {
   plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^sl-/, ''));
 
   plop.setHelper('tagToTitle', tag => {
@@ -64,4 +64,4 @@ module.exports = function (plop) {
       }
     ]
   });
-};
+}