tech: enable watch mode & esbuild server in dev mode

Author: Raulo Erwan.

esbuild.dev.config.ts

@@ -0,0 +1,213 @@
+// Import Node.js Dependencies
+import fs from "node:fs";
+import fsAsync from "node:fs/promises";
+import http from "node:http";
+import path from "node:path";
+import consumers from "node:stream/consumers";
+import { fileURLToPath } from "node:url";
+
+// Import Third-party Dependencies
+import { getBuildConfiguration } from "@nodesecure/documentation-ui/node";
+import * as i18n from "@nodesecure/i18n";
+import { report } from "@nodesecure/report";
+import type { RC } from "@nodesecure/rc";
+import esbuild from "esbuild";
+import router from "find-my-way";
+import sirv from "sirv";
+import zup from "zup";
+
+// Import Internal Dependencies
+import * as bundle from "./workspaces/server/src/endpoints/bundle.ts";
+import * as config from "./workspaces/server/src/endpoints/config.ts";
+import * as flags from "./workspaces/server/src/endpoints/flags.ts";
+import * as npmDownloads from "./workspaces/server/src/endpoints/npm-downloads.ts";
+import * as scorecard from "./workspaces/server/src/endpoints/ossf-scorecard.ts";
+import * as search from "./workspaces/server/src/endpoints/search.ts";
+import { send } from "./workspaces/server/src/endpoints/util/send.ts";
+
+import english from "./i18n/english.js";
+import french from "./i18n/french.js";
+
+// CONSTANTS
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const kPublicDir = path.join(__dirname, "public");
+const kOutDir = path.join(__dirname, "dist");
+const kImagesDir = path.join(kPublicDir, "img");
+const kNodeModulesDir = path.join(__dirname, "node_modules");
+const kViewsDir = path.join(__dirname, "views");
+const kComponentsDir = path.join(kPublicDir, "components");
+const kDefaultPayloadPath = path.join(process.cwd(), "nsecure-result.json");
+
+const kDevPort = Number(process.env.DEV_PORT ?? 8080);
+
+await i18n.getLocalLang();
+await i18n.extendFromSystemPath(path.join(__dirname, "i18n"));
+
+const imagesFiles = await fsAsync.readdir(kImagesDir);
+
+await Promise.all([
+  ...imagesFiles
+    .map((name) => fsAsync.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
+  fsAsync.copyFile(path.join(kPublicDir, "favicon.ico"), path.join(kOutDir, "favicon.ico"))
+]);
+
+const buildContext = await esbuild.context({
+  entryPoints: [
+    path.join(kPublicDir, "main.js"),
+    path.join(kPublicDir, "main.css"),
+    path.join(kNodeModulesDir, "highlight.js", "styles", "github.css"),
+    ...getBuildConfiguration().entryPoints
+  ],
+
+  loader: {
+    ".jpg": "file",
+    ".png": "file",
+    ".woff": "file",
+    ".woff2": "file",
+    ".eot": "file",
+    ".ttf": "file",
+    ".svg": "file"
+  },
+  platform: "browser",
+  bundle: true,
+  sourcemap: true,
+  treeShaking: true,
+  outdir: kOutDir
+});
+
+await buildContext.watch();
+
+// Route handlers ALS-dependent & implemented directly
+async function serveRoot(_req: http.IncomingMessage, res: http.ServerResponse) {
+  try {
+    let html = await fsAsync.readFile(path.join(kViewsDir, "index.html"), "utf-8");
+
+    const componentFiles = await fsAsync.readdir(kComponentsDir, { recursive: true });
+    const htmlComponents = await Promise.all(
+      (componentFiles as string[])
+        .filter((f) => f.endsWith(".html"))
+        .map((f) => fsAsync.readFile(path.join(kComponentsDir, f), "utf-8"))
+    );
+    html += htmlComponents.join("");
+
+    const i18nLangName = await i18n.getLocalLang();
+    const rendered = zup(html)({
+      lang: i18n.getTokenSync("lang"),
+      i18nLangName,
+      token: (tokenName: string) => i18n.getTokenSync(`ui.${tokenName}`)
+    });
+
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(rendered);
+  }
+  catch (err: any) {
+    res.writeHead(500);
+    res.end(err.message);
+  }
+}
+
+function getI18n(_req: http.IncomingMessage, res: http.ServerResponse) {
+  send(res, {
+    english: english.ui,
+    french: french.ui
+  });
+}
+
+async function getData(_req: http.IncomingMessage, res: http.ServerResponse) {
+  try {
+    const payload = JSON.parse(await fsAsync.readFile(kDefaultPayloadPath, "utf-8"));
+    send(res, payload);
+  }
+  catch {
+    res.statusCode = 204;
+    res.end();
+  }
+}
+
+// from workspaces/server/src/endpoints/report.ts
+// Reads nsecure-result.json from disk instead of ALS context + cache
+const kReportPayload: Partial<RC["report"]> = {
+  includeTransitiveInternal: false,
+  reporters: ["pdf"],
+  charts: [
+    { name: "Extensions", display: true, interpolation: "d3.interpolateRainbow", type: "bar" },
+    { name: "Licenses", display: true, interpolation: "d3.interpolateCool", type: "bar" },
+    { name: "Warnings", display: true, type: "horizontalBar", interpolation: "d3.interpolateInferno" },
+    { name: "Flags", display: true, type: "horizontalBar", interpolation: "d3.interpolateSinebow" }
+  ]
+};
+
+async function postReport(req: http.IncomingMessage, res: http.ServerResponse) {
+  const { title, includesAllDeps, theme } = await consumers.json(req) as {
+    title: string;
+    includesAllDeps: boolean;
+    theme: "light" | "dark";
+  };
+
+  let scannerPayload: any;
+  try {
+    scannerPayload = JSON.parse(fs.readFileSync(kDefaultPayloadPath, "utf-8"));
+  }
+  catch {
+    return send(res, void 0, { code: 500 });
+  }
+
+  const name = scannerPayload.rootDependency.name;
+  const [organizationPrefixOrRepo, repo] = name.split("/");
+  const reportPayload = structuredClone({
+    ...kReportPayload,
+    title,
+    npm: {
+      organizationPrefix: repo === undefined ? null : organizationPrefixOrRepo,
+      packages: [repo === undefined ? organizationPrefixOrRepo : repo]
+    },
+    theme
+  });
+
+  try {
+    const dependencies = includesAllDeps ?
+      scannerPayload.dependencies :
+      { [name]: scannerPayload.dependencies[name] };
+
+    const data = await report(dependencies, reportPayload);
+
+    return send(res, { data }, { headers: { "content-type": "application/pdf" } });
+  }
+  catch (err) {
+    console.error(err);
+
+    return send(res, void 0, { code: 500 });
+  }
+}
+
+const serving = sirv(kOutDir, { dev: true });
+
+// Same as workspaces/server/src/endpoints/index.ts
+const apiRouter = router({
+  ignoreTrailingSlash: true,
+  defaultRoute: (req, res) => serving(req, res, () => {
+    res.writeHead(404);
+    res.end("Not Found");
+  })
+});
+
+apiRouter.get("/", serveRoot);
+apiRouter.get("/data", getData);
+apiRouter.get("/config", config.get);
+apiRouter.put("/config", config.save);
+apiRouter.get("/i18n", getI18n);
+apiRouter.get("/search/:packageName", search.get);
+apiRouter.get("/search-versions/:packageName", search.versions);
+apiRouter.get("/flags", flags.getAll);
+apiRouter.get("/flags/description/:title", flags.get);
+apiRouter.get("/bundle/:packageName", bundle.get);
+apiRouter.get("/bundle/:packageName/:version", bundle.get);
+apiRouter.get("/downloads/:packageName", npmDownloads.get);
+apiRouter.get("/scorecard/:org/:packageName", scorecard.get);
+apiRouter.post("/report", postReport);
+
+http.createServer((req, res) => apiRouter.lookup(req, res))
+  .listen(kDevPort, () => console.log(`Dev server: http://localhost:${kDevPort}`));
+
+console.log("Watching...");

package.json

@@ -17,7 +17,9 @@
     "lint-fix": "npm run lint -- --fix",
     "prepublishOnly": "rimraf ./dist && npm run build && pkg-ok",
     "build": "npm run build:front && npm run build:workspaces",
+    "build:dev": "npm run build:front:dev && npm run build:workspaces",
     "build:front": "node ./esbuild.config.js",
+    "build:front:dev": "node --experimental-strip-types ./esbuild.dev.config.ts",
     "build:workspaces": "npm run build --ws --if-present",
     "test": "npm run test:cli && npm run lint && npm run lint:css",
     "test:cli": "node --no-warnings --test test/**/*.test.js",

public/main.js

@@ -291,3 +291,6 @@ function onSettingsSaved(defaultConfig = null) {
     networkView.classList.remove("locked");
   });
 }
+
+new EventSource("/esbuild").addEventListener("change", () => location.reload());
+

src/commands/http.js

@@ -51,37 +51,36 @@ export async function start(
     cache.prefix = crypto.randomBytes(4).toString("hex");
   }
 
-  const httpServer = buildServer(dataFilePath, {
-    port: httpPort,
-    hotReload: enableDeveloperMode,
-    runFromPayload,
-    projectRootDir: kProjectRootDir,
-    componentsDir: kComponentsDir,
-    i18n: {
-      english,
-      french
-    }
-  });
-
-  httpServer.listen(httpPort, async() => {
-    const link = `http://localhost:${httpServer.address().port}`;
-    console.log(kleur.magenta().bold(await i18n.getToken("cli.http_server_started")), kleur.cyan().bold(link));
-
-    open(link);
-  });
+  if (enableDeveloperMode) {
+    // todo: ping/warn if dev server is not up & running
+    open("http://127.0.0.1:8080");
+  }
+  else {
+    const httpServer = buildServer(dataFilePath, {
+      port: httpPort,
+      hotReload: enableDeveloperMode,
+      runFromPayload,
+      projectRootDir: kProjectRootDir,
+      componentsDir: kComponentsDir,
+      i18n: {
+        english,
+        french
+      }
+    });
 
-  new WebSocketServerInstanciator({
-    cache,
-    logger
-  });
+    new WebSocketServerInstanciator({
+      cache,
+      logger
+    });
 
-  for (const eventName of ["SIGINT", "SIGTERM"]) {
-    process.on(eventName, () => {
-      httpServer.close();
+    for (const eventName of ["SIGINT", "SIGTERM"]) {
+      process.on(eventName, () => {
+        httpServer.close();
 
-      console.log(kleur.red().bold(`${eventName} signal received.`));
-      process.exit(0);
-    });
+        console.log(kleur.red().bold(`${eventName} signal received.`));
+        process.exit(0);
+      });
+    }
   }
 }