add file watcher to showcase

Author: heswell

vuu-ui/package-lock.json

@@ -37,7 +37,7 @@
     "deploy:websocket-test": "node ./tools/deploy-websocket-test.mjs",
     "view-bundle": "node ./scripts/visualize-bundle.mjs",
     "type-defs": "node ./scripts/build-all-type-defs.mjs",
-    "showcase": "cd showcase && tsx ../tools/vuu-showcase/scripts/showcase-vite-api.ts",
+    "showcase": "cd showcase && tsx ../tools/vuu-showcase/scripts/showcase-dev.ts",
     "showcase:prod": "npm run build:worker && cd showcase && tsx ../tools/vuu-showcase/scripts/showcase-build.ts",
     "test:cypress": "npm run build:worker && cypress run --component --browser chrome --headless",
     "test:cypress:local": "cypress open --component --browser chrome",

vuu-ui/package.json

@@ -29,7 +29,8 @@
     "@fontsource/open-sans": "^4.5.13",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/theme": "1.28.0",
-    "symlink-dir": "^6.0.5"
+    "symlink-dir": "^6.0.5",
+    "watcher": "2.3.1"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

vuu-ui/tools/vuu-showcase/package.json

@@ -1,11 +1,10 @@
 import mdx from "@mdx-js/rollup";
-import chalk from "chalk";
 import fs from "fs";
 import MagicString from "magic-string";
-import open from "open";
 import { createFilter, createServer, type PluginOption } from "vite";
 import INDEX_HTML from "./html-template";
 import path from "path";
+import Watcher from "watcher";
 
 import { createFolder, linkSourceDirectory, writeFile } from "./utils";
 import { treeSourceFromFileSystem } from "./treeSourceFromFileSystem";
@@ -18,6 +17,16 @@ const treeSourceJson = treeSourceFromFileSystem(pathToExhibits);
 const end = performance.now();
 console.log(`[showcase-vite-api] building tree took ${end - start}ms`);
 
+const watcher = new Watcher(pathToExhibits, {
+  recursive: true,
+  ignoreInitial: true,
+});
+watcher.on("all", (event, targetPath /* targetPathNext*/) => {
+  // This is what the library does internally when you pass it a handler directly
+  console.log(`[watcher] ${event} ${targetPath}`); // => could be any target event: 'add', 'addDir', 'change', 'rename', 'renameDir', 'unlink' or 'unlinkDir'
+  // console.log(targetPathNext); // => the file system path "targetPath" got renamed to, this is only provided on 'rename'/'renameDir' events
+});
+
 const cwd = process.cwd();
 const __dirname = path.join(cwd, ".showcase/dev");
 
@@ -109,3 +118,10 @@ server.bindCLIShortcuts({ print: true });
 
 // console.log(`opening showcase at ${chalk.green("http://localhost:5173/")} ...`);
 // open("http://localhost:5173/");
+
+process.on("SIGINT", async function () {
+  console.log("[showcase-dev] shutting down");
+  watcher.close();
+  await server.close();
+  process.exit();
+});