chore: 🔧 improve verify and test.watch (#1759)

<!-- ## Title: Please consider adding the [skip chromatic] flag to the
PR title in case you dont need chromatic testing your changes. -->
## Description:
<!-- *PR notes: Please describe the changes in this PR.* -->
Closes #1758 

## Definition of Reviewable:
- [x] relevant tickets are linked

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/two-guests-train.md

@@ -0,0 +1,2 @@
+---
+---

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "node .husky/install.mjs",
-    "verify": "pnpm format.verify && pnpm lint.verify && pnpm --recursive --if-present verify",
+    "verify": "pnpm format.verify && pnpm lint.verify && pnpm --recursive --if-present --workspace-concurrency=1 verify",
     "fix": "pnpm lint.fix && pnpm format.fix",
     "lint.fix": "eslint packages --max-warnings 0 --fix",
     "lint.verify": "eslint packages --max-warnings 0 && echo '✅ Linting verified'",

packages/components/package.json

@@ -60,13 +60,14 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
+    "watch": "pnpm build --watch",
     "verify": "pnpm build && echo '✅ Build verified' && pnpm ts.verify && pnpm test.verify && echo '✅ Test verified'",
     "ts.verify": "tsc --noEmit --project ./tsconfig.json && echo '✅ TypeScript verified'",
     "plop": "plop --plopfile scripts/plop/plopfile.js",
-    "test": "pnpm build && web-test-runner --group default",
-    "test.verify": "web-test-runner --group default",
-    "test.single": "web-test-runner -- --watch --group",
-    "test.watch": "web-test-runner --watch --group default",
+    "test": "pnpm build --lite && web-test-runner --group default",
+    "test.verify": "pnpm build --lite && web-test-runner --group default",
+    "test.single": "concurrently -P --raw \"pnpm watch --lite\" \"web-test-runner --watch --group {1}\" --",
+    "test.watch": "pnpm test.single default",
     "postversion": "pnpm build && node scripts/node-write-sizes.mjs"
   },
   "dependencies": {
@@ -92,8 +93,10 @@
     "autoprefixer": "^10.4.20",
     "chalk": "^5.3.0",
     "change-case": "^5.4.4",
+    "chokidar": "^4.0.3",
     "command-line-args": "^6.0.1",
     "comment-parser": "^1.4.1",
+    "concurrently": "^9.1.2",
     "cssnano": "^7.0.6",
     "custom-element-jet-brains-integration": "^1.6.2",
     "custom-element-vs-code-integration": "^1.4.1",

packages/components/scripts/build.js

@@ -1,7 +1,8 @@
 import { deleteAsync } from 'del';
-import { exec, spawn } from 'child_process';
+import { exec } from 'child_process';
 import { globby } from 'globby';
 import chalk from 'chalk';
+import chokidar from 'chokidar';
 import copy from 'recursive-copy';
 import esbuild from 'esbuild';
 import fs from 'fs/promises';
@@ -11,13 +12,15 @@ import { litTailwindAndMinifyPlugin } from './esbuild-plugin-lit-tailwind-and-mi
 
 const outdir = 'dist';
 const cdndir = 'cdn';
+const lite = process.argv.includes('--lite');
+const watch = process.argv.includes('--watch');
 
 const spinner = ora({ hideCursor: false }).start();
 const execPromise = util.promisify(exec);
 let childProcess;
 let buildResults;
 
-const bundleDirectories = [cdndir, outdir, `${outdir}-versioned`, `${cdndir}-versioned`];
+const bundleDirectories = lite ? [outdir] : [cdndir, outdir, `${outdir}-versioned`, `${cdndir}-versioned`];
 
 //
 // Builds the source with esbuild.
@@ -84,12 +87,11 @@ async function buildTheSource() {
     entryNames: '[dir]/[name].iife'
   };
 
-  return await Promise.all([
-    esbuild.build(cdnConfig),
-    esbuild.build(npmConfig),
-    esbuild.build(bundleConfig),
-    esbuild.build(iifeConfig)
-  ]);
+  return await Promise.all(
+    lite
+      ? [esbuild.build(npmConfig)]
+      : [esbuild.build(cdnConfig), esbuild.build(npmConfig), esbuild.build(bundleConfig), esbuild.build(iifeConfig)]
+  );
 }
 
 //
@@ -125,40 +127,62 @@ async function nextTask(label, action) {
   }
 }
 
-await nextTask('Cleaning up the previous build', async () => {
-  await Promise.all([...bundleDirectories.map(dir => deleteAsync(dir))]);
-  await fs.mkdir(outdir, { recursive: true });
-});
+async function runBuild() {
+  if (!watch) {
+    await nextTask('Cleaning up the previous build', async () => {
+      await Promise.all([...bundleDirectories.map(dir => deleteAsync(dir))]);
+      await Promise.all([...bundleDirectories.map(dir => fs.mkdir(dir, { recursive: true }))]);
+    });
+  }
 
-await nextTask('Generating component metadata', () => {
-  return Promise.all(
-    bundleDirectories.map(dir => {
-      return execPromise(`node scripts/make-metadata.js --outdir "${dir}"`, { stdio: 'inherit' });
-    })
-  );
-});
+  if (!lite) {
+    await nextTask('Generating component metadata', () => {
+      return Promise.all(
+        bundleDirectories.map(dir => {
+          return execPromise(`node scripts/make-metadata.js --outdir "${dir}"`, { stdio: 'inherit' });
+        })
+      );
+    });
+  }
 
-await nextTask('Generating Utility CSS', () => {
-  return execPromise(`node scripts/make-css.js`, { stdio: 'inherit' });
-});
+  await nextTask('Generating Utility CSS', () => {
+    const args = lite ? '--lite' : '';
+    return execPromise(`node scripts/make-css.js ${args}`, { stdio: 'inherit' });
+  });
+
+  if (!lite) {
+    await nextTask('Running the TypeScript compiler', () => {
+      return execPromise(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
+    });
+
+    // Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
+    await nextTask(`Themes, Icons, and TS Types to "${cdndir}"`, async () => {
+      await deleteAsync(cdndir);
+      await copy(outdir, cdndir);
+    });
+  }
 
-await nextTask('Running the TypeScript compiler', () => {
-  return execPromise(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
-});
+  await nextTask('Building source files', async () => {
+    buildResults = await buildTheSource();
+  });
 
-// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
-await nextTask(`Themes, Icons, and TS Types to "${cdndir}"`, async () => {
-  await deleteAsync(cdndir);
-  await copy(outdir, cdndir);
-});
+  if (!lite) {
+    await nextTask('Versioning components and meta data', async () => {
+      await execPromise('node scripts/make-versioning.js', { stdio: 'inherit' });
+    });
+  }
+}
 
-await nextTask('Building source files', async () => {
-  buildResults = await buildTheSource();
-});
+runBuild();
 
-await nextTask('Versioning components and meta data', async () => {
-  await execPromise('node scripts/make-versioning.js', { stdio: 'inherit' });
-});
+if (watch) {
+  const watcher = chokidar.watch('src', {
+    persistent: true,
+    ignored: path => path.includes('.test.ts')
+  });
+
+  watcher.on('change', runBuild);
+}
 
 // Cleanup on exit
 process.on('SIGINT', handleCleanup);

packages/components/scripts/make-css.js

@@ -13,6 +13,7 @@ import tailwindcss from 'tailwindcss';
 import tailwindcssNesting from 'tailwindcss/nesting/index.js';
 
 (async () => {
+  const lite = process.argv.includes('--lite');
   const css = await fs.readFile('./src/solid-components.css', 'utf8');
 
   const result = await postcss([
@@ -26,6 +27,8 @@ import tailwindcssNesting from 'tailwindcss/nesting/index.js';
 
   await fs.writeFile('./dist/solid-components.css', result);
 
+  if (lite) return;
+
   const minifiedResult = await postcss([
     atImportPlugin({ allowDuplicates: false }),
     tailwindcssNesting,