client build script improvements

ui/.build/package.json

@@ -14,11 +14,15 @@
     "sass-embedded-win32-x64": "1.83.3"
   },
   "dependencies": {
-    "@types/node": "22.10.6",
+    "@types/fs-ext": "^2.0.3",
+    "@types/micromatch": "^4.0.9",
+    "@types/node": "22.12.0",
     "@types/tinycolor2": "1.4.6",
     "esbuild": "0.24.2",
     "fast-glob": "3.3.3",
     "fast-xml-parser": "4.5.1",
+    "fs-ext": "^2.1.1",
+    "micromatch": "4.0.8",
     "tinycolor2": "1.6.0",
     "typescript": "5.7.3"
   },

ui/.build/src/build.ts

@@ -1,110 +1,72 @@
 import fs from 'node:fs';
-import cps from 'node:child_process';
-import ps from 'node:process';
-import path from 'node:path';
-import { parsePackages, globArray } from './parse.ts';
-import { tsc, stopTscWatch } from './tsc.ts';
+import { execSync } from 'node:child_process';
+import { chdir } from 'node:process';
+import { parsePackages } from './parse.ts';
+import { task, stopTask } from './task.ts';
+import { tsc, stopTsc } from './tsc.ts';
 import { sass, stopSass } from './sass.ts';
-import { esbuild, stopEsbuildWatch } from './esbuild.ts';
-import { sync, stopSync } from './sync.ts';
+import { esbuild, stopEsbuild } from './esbuild.ts';
+import { sync } from './sync.ts';
 import { hash } from './hash.ts';
 import { stopManifest } from './manifest.ts';
 import { env, errorMark, c } from './env.ts';
-import { i18n, stopI18nWatch } from './i18n.ts';
+import { i18n } from './i18n.ts';
 import { unique } from './algo.ts';
 import { clean } from './clean.ts';
 
 export async function build(pkgs: string[]): Promise<void> {
-  if (env.install) cps.execSync('pnpm install', { cwd: env.rootDir, stdio: 'inherit' });
+  chdir(env.rootDir);
+
+  if (env.install) execSync('pnpm install', { stdio: 'inherit' });
+
   if (!pkgs.length) env.log(`Parsing packages in '${c.cyan(env.uiDir)}'`);
 
-  ps.chdir(env.uiDir);
-  await parsePackages();
+  await Promise.allSettled([parsePackages(), fs.promises.mkdir(env.buildTempDir)]);
 
   pkgs
     .filter(x => !env.packages.has(x))
     .forEach(x => env.exit(`${errorMark} - unknown package '${c.magenta(x)}'`));
 
-  env.building =
-    pkgs.length === 0 ? [...env.packages.values()] : unique(pkgs.flatMap(p => env.transitiveDeps(p)));
+  env.building = pkgs.length === 0 ? [...env.packages.values()] : unique(pkgs.flatMap(p => env.deps(p)));
 
   if (pkgs.length) env.log(`Building ${c.grey(env.building.map(x => x.name).join(', '))}`);
 
-  await Promise.allSettled([
-    fs.promises.mkdir(env.jsOutDir),
-    fs.promises.mkdir(env.cssOutDir),
-    fs.promises.mkdir(env.hashOutDir),
-    fs.promises.mkdir(env.themeGenDir),
-    fs.promises.mkdir(env.buildTempDir),
-  ]);
-
-  await Promise.all([sass(), sync().then(hash), i18n()]);
-  await Promise.all([tsc(), esbuild(), monitor(pkgs)]);
+  await Promise.all([i18n(), sync().then(hash), sass(), tsc(), esbuild()]);
+  await monitor(pkgs);
 }
 
-export async function stopBuildWatch(): Promise<void> {
-  for (const w of watchers) w.close();
-  watchers.length = 0;
-  clearTimeout(tscTimeout);
-  clearTimeout(packageTimeout);
-  tscTimeout = packageTimeout = undefined;
+function stopBuild(): Promise<any> {
+  stopTask();
   stopSass();
-  stopSync();
-  stopI18nWatch();
-  stopManifest();
-  await Promise.allSettled([stopTscWatch(), stopEsbuildWatch()]);
+  stopManifest(true);
+  return Promise.allSettled([stopTsc(), stopEsbuild()]);
 }
 
-const watchers: fs.FSWatcher[] = [];
-
-let packageTimeout: NodeJS.Timeout | undefined;
-let tscTimeout: NodeJS.Timeout | undefined;
-
-async function monitor(pkgs: string[]): Promise<void> {
+function monitor(pkgs: string[]) {
   if (!env.watch) return;
-  const [typePkgs, typings] = await Promise.all([
-    globArray('*/package.json', { cwd: env.typesDir }),
-    globArray('*/*.d.ts', { cwd: env.typesDir }),
-  ]);
-  const tscChange = async () => {
-    if (packageTimeout) return;
-    stopManifest();
-    await Promise.allSettled([stopTscWatch(), stopEsbuildWatch()]);
-    clearTimeout(tscTimeout);
-    tscTimeout = setTimeout(() => {
-      if (packageTimeout) return;
-      tsc().then(esbuild);
-    }, 2000);
-  };
-  const packageChange = async () => {
-    if (env.watch && env.install) {
-      clearTimeout(tscTimeout);
-      clearTimeout(packageTimeout);
-      await stopBuildWatch();
-      packageTimeout = setTimeout(() => clean().then(() => build(pkgs)), 2000);
-      return;
-    }
-    env.warn('Exiting due to package.json change');
-    ps.exit(0);
-  };
-
-  watchers.push(await watchModified(path.join(env.rootDir, 'package.json'), packageChange));
-  for (const p of typePkgs) watchers.push(await watchModified(p, packageChange));
-  for (const t of typings) watchers.push(await watchModified(t, tscChange));
-  for (const pkg of env.building) {
-    watchers.push(await watchModified(path.join(pkg.root, 'package.json'), packageChange));
-    watchers.push(await watchModified(path.join(pkg.root, 'tsconfig.json'), tscChange));
-  }
-}
-
-async function watchModified(pathname: string, onChange: () => void): Promise<fs.FSWatcher> {
-  let stat = await fs.promises.stat(pathname);
-
-  return fs.watch(pathname, async () => {
-    const newStat = await fs.promises.stat(pathname);
-    if (stat.mtimeMs === newStat.mtimeMs) return;
-
-    stat = newStat;
-    onChange();
+  return task({
+    key: 'monitor',
+    glob: [
+      { cwd: env.rootDir, path: 'package.json' },
+      { cwd: env.typesDir, path: '*/package.json' },
+      { cwd: env.uiDir, path: '*/package.json' },
+      { cwd: env.typesDir, path: '*/*.d.ts' },
+      { cwd: env.uiDir, path: '*/tsconfig.json' },
+    ],
+    debounce: 1000,
+    monitorOnly: true,
+    execute: async files => {
+      if (files.some(x => x.endsWith('package.json'))) {
+        if (!env.install) env.exit('Exiting due to package.json change');
+        await stopBuild();
+        if (env.clean) await clean();
+        build(pkgs);
+      } else if (files.some(x => x.endsWith('.d.ts') || x.endsWith('tsconfig.json'))) {
+        stopManifest();
+        await Promise.allSettled([stopTsc(), stopEsbuild()]);
+        tsc();
+        esbuild();
+      }
+    },
   });
 }

ui/.build/src/console.ts

@@ -25,9 +25,7 @@ export async function startConsole() {
         if (val.length <= 1) val = val[0] ?? '';
         else if (val.every(x => typeof x === 'string')) val = val.join(' ');
 
-        env.log(`${mark}${c.grey(typeof val === 'string' ? val : JSON.stringify(val, undefined, 2))}`, {
-          ctx: 'web',
-        });
+        env.log(`${mark}${c.grey(typeof val === 'string' ? val : JSON.stringify(val, undefined, 2))}`, 'web');
         res
           .writeHead(200, { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST' })
           .end();