dslinter 0.0.33 → 0.0.36

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## v0.0.36
+
+[compare changes](https://github.com/jrmybtlr/DSLinter/compare/v0.0.35...v0.0.36)
+
+### 🏡 Chore
+
+- Update native binding version checks to 0.0.34 in dashboard package ([917860a](https://github.com/jrmybtlr/DSLinter/commit/917860a))
+
+### ❤️ Contributors
+
+- Jeremy Butler <jeremy.butler@laravel.com>
+
+## v0.0.35
+
+[compare changes](https://github.com/jrmybtlr/DSLinter/compare/v0.0.34...v0.0.35)
+
+### 🏡 Chore
+
+- Update dependencies and improve dashboard functionality ([71a42f2](https://github.com/jrmybtlr/DSLinter/commit/71a42f2))
+- Update @napi-rs/cli to version 3.6.2 and refactor ANSI regex in dev-banner ([dd264b2](https://github.com/jrmybtlr/DSLinter/commit/dd264b2))
+
+### ❤️ Contributors
+
+- Jeremy Butler <jeremy.butler@laravel.com>
+
+## v0.0.34
+
+[compare changes](https://github.com/jrmybtlr/DSLinter/compare/v0.0.33...v0.0.34)
+
+### 🩹 Fixes
+
+- Update native binding version checks to 0.0.33 and improve type definitions in ComponentPlaygroundPane ([99ad1e6](https://github.com/jrmybtlr/DSLinter/commit/99ad1e6))
+
+### ❤️ Contributors
+
+- Jeremy Butler <jeremy.butler@laravel.com>
+
 ## v0.0.33
 
 [compare changes](https://github.com/jrmybtlr/DSLinter/compare/v0.0.32...v0.0.33)

package/bin/lib/dev-banner.mjs

@@ -0,0 +1,264 @@
+import { homedir } from "node:os";
+import { resolve } from "node:path";
+
+const BOX = {
+  tl: "╭",
+  tr: "╮",
+  bl: "╰",
+  br: "╯",
+  h: "─",
+  v: "│",
+};
+
+/** Block-letter DSLinter (two lines). */
+export const LOGO = [
+  "█▀▄\u2003█▀\u2003█░░\u2003█\u2003█▄░█\u2003▀█▀\u2003█▀▀\u2003█▀█",
+  "█▄▀\u2003▄█\u2003█▄▄\u2003█\u2003█░▀█\u2003░█░\u2003██▄\u2003█▀▄",
+];
+
+const ESC = "\u001b";
+const ANSI_RE = new RegExp(`${ESC}\\[[0-9;]*m`, "g");
+
+/** @param {string} s */
+export function stripAnsi(s) {
+  return s.replace(ANSI_RE, "");
+}
+
+/** @param {string} s */
+export function visibleLength(s) {
+  return stripAnsi(s).length;
+}
+
+/**
+ * @param {string} s
+ * @param {number} width
+ */
+function padVisible(s, width) {
+  const pad = Math.max(0, width - visibleLength(s));
+  return s + " ".repeat(pad);
+}
+
+/**
+ * @param {string} text
+ * @param {number} max
+ */
+function truncatePlain(text, max) {
+  if (text.length <= max) return text;
+  if (max <= 1) return text.slice(0, max);
+  return `${text.slice(0, max - 1)}…`;
+}
+
+/** @param {boolean} enabled */
+function createStyles(enabled) {
+  if (!enabled) {
+    const id = (s) => s;
+    return {
+      label: id,
+      value: id,
+      url: id,
+      dim: id,
+      ok: id,
+      warn: id,
+      err: id,
+    };
+  }
+  const esc = (n, s) => `\u001b[${n}m${s}\u001b[0m`;
+  return {
+    label: (s) => esc("2", s),
+    value: (s) => esc("0", s),
+    url: (s) => esc("4;36", s),
+    dim: (s) => esc("2", s),
+    ok: (s) => esc("32", s),
+    warn: (s) => esc("33", s),
+    err: (s) => esc("31", s),
+  };
+}
+
+/**
+ * @param {string} path
+ * @param {number} [maxLen]
+ */
+export function shortenPath(path, maxLen = 72) {
+  const home = homedir();
+  let s = path.startsWith(home) ? `~${path.slice(home.length)}` : path;
+  if (s.length <= maxLen) return s;
+  const head = Math.ceil((maxLen - 1) / 2);
+  const tail = Math.floor((maxLen - 1) / 2);
+  return `${s.slice(0, head)}…${s.slice(-tail)}`;
+}
+
+/**
+ * @param {string} label
+ * @param {string} plainValue
+ * @param {number} contentWidth
+ * @param {(value: string) => string} [styleValue]
+ */
+function row(label, plainValue, contentWidth, styleValue = (v) => v) {
+  const labelCol = 14;
+  const gap = 2;
+  const valueWidth = Math.max(1, contentWidth - labelCol - gap);
+  const valueLines = wrapPlain(plainValue, valueWidth);
+  const lines = [];
+  for (let i = 0; i < valueLines.length; i++) {
+    const lbl = i === 0 ? padVisible(label, labelCol) : " ".repeat(labelCol);
+    lines.push(`${lbl}${" ".repeat(gap)}${styleValue(valueLines[i])}`);
+  }
+  return lines;
+}
+
+/**
+ * @param {string} text
+ * @param {number} width
+ * @returns {string[]}
+ */
+function wrapPlain(text, width) {
+  if (text.length <= width) return [text];
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let line = "";
+  for (const w of words) {
+    if (line.length + w.length <= width) {
+      line += w;
+    } else if (w.trim() === "") {
+      line += w;
+    } else if (w.length > width) {
+      if (line) lines.push(line.trimEnd());
+      for (let i = 0; i < w.length; i += width) {
+        lines.push(w.slice(i, i + width));
+      }
+      line = "";
+    } else {
+      if (line) lines.push(line.trimEnd());
+      line = w.trimStart();
+    }
+  }
+  if (line) lines.push(line.trimEnd());
+  return lines.length ? lines : [""];
+}
+
+/**
+ * @param {string[]} lines
+ * @param {number} totalWidth
+ */
+function boxLines(lines, totalWidth) {
+  const contentWidth = totalWidth - 4;
+  const out = [];
+  out.push(`${BOX.tl}${BOX.h.repeat(totalWidth - 2)}${BOX.tr}`);
+  for (const line of lines) {
+    const plain = stripAnsi(line);
+    const clipped =
+      plain.length > contentWidth ? truncatePlain(plain, contentWidth) : line;
+    out.push(`${BOX.v} ${padVisible(clipped, contentWidth)} ${BOX.v}`);
+  }
+  out.push(`${BOX.bl}${BOX.h.repeat(totalWidth - 2)}${BOX.br}`);
+  return out;
+}
+
+/**
+ * @param {{
+ *   scanPath: string;
+ *   reportPath: string;
+ *   apiPort: number;
+ *   apiAvailable: boolean;
+ *   dashboardUrl?: string | null;
+ *   bundledUrl?: string | null;
+ *   pollMs?: number;
+ * }} opts
+ * @returns {string}
+ */
+export function formatDevBanner(opts) {
+  const color = createStyles(process.stderr.isTTY === true);
+  const terminalCols = process.stderr.columns ?? 80;
+  const maxBox = Math.min(Math.max(terminalCols, 64), 96);
+
+  const scanAbs = resolve(opts.scanPath);
+  const reportAbs = resolve(opts.reportPath);
+  const apiBase = `http://127.0.0.1:${opts.apiPort}`;
+
+  const apiStatusPlain = opts.apiAvailable ? "listening" : "unavailable — port in use";
+  const bundledStatusPlain = opts.apiAvailable ? "ready" : "port busy";
+  const scanPlain = shortenPath(scanAbs, 80);
+  const reportPlain = shortenPath(reportAbs, 80);
+
+  /** @type {number[]} */
+  const plainWidths = [
+    ...LOGO.map((l) => visibleLength(l)),
+    14 + 2 + scanPlain.length,
+    14 + 2 + reportPlain.length,
+  ];
+  if (opts.dashboardUrl) plainWidths.push(14 + 2 + opts.dashboardUrl.length);
+  if (opts.bundledUrl) {
+    plainWidths.push(14 + 2 + `${opts.bundledUrl}  (${bundledStatusPlain})`.length);
+  }
+  plainWidths.push(14 + 2 + `${apiBase}  (${apiStatusPlain})`.length);
+  if (opts.apiAvailable) {
+    plainWidths.push(14 + 2 + `${apiBase}/dslint-report.json`.length);
+    plainWidths.push(14 + 2 + `${apiBase}/events`.length);
+  }
+  if (opts.pollMs) plainWidths.push(14 + 2 + `polling every ${opts.pollMs} ms`.length);
+  plainWidths.push(visibleLength("  Open the Dashboard URL in your browser. Ctrl+C to stop."));
+
+  const contentWidth = Math.min(maxBox - 4, Math.max(...plainWidths, 40));
+  const totalWidth = contentWidth + 4;
+
+  /** @type {string[]} */
+  const styledRows = [];
+  styledRows.push("");
+  styledRows.push(...LOGO);
+  styledRows.push("");
+  styledRows.push(
+    ...row(color.label("Scan path"), scanPlain, contentWidth, color.value),
+  );
+  styledRows.push(
+    ...row(color.label("Report file"), reportPlain, contentWidth, color.value),
+  );
+  styledRows.push("");
+  if (opts.dashboardUrl) {
+    styledRows.push(
+      ...row(color.label("Dashboard"), opts.dashboardUrl, contentWidth, color.url),
+    );
+  }
+  if (opts.bundledUrl) {
+    const status = opts.apiAvailable ? color.ok(bundledStatusPlain) : color.warn(bundledStatusPlain);
+    styledRows.push(
+      ...row(
+        color.label("Bundled UI"),
+        `${opts.bundledUrl}  (${bundledStatusPlain})`,
+        contentWidth,
+        () => `${color.url(opts.bundledUrl)}  ${color.dim("(")}${status}${color.dim(")")}`,
+      ),
+    );
+  }
+  const apiStatus = opts.apiAvailable ? color.ok(apiStatusPlain) : color.err(apiStatusPlain);
+  styledRows.push(
+    ...row(
+      color.label("Scanner API"),
+      `${apiBase}  (${apiStatusPlain})`,
+      contentWidth,
+      () => `${color.url(apiBase)}  ${color.dim("(")}${apiStatus}${color.dim(")")}`,
+    ),
+  );
+  if (opts.apiAvailable) {
+    styledRows.push(
+      ...row("", `${apiBase}/dslint-report.json`, contentWidth, color.dim),
+    );
+    styledRows.push(...row("", `${apiBase}/events`, contentWidth, color.dim));
+  }
+  if (opts.pollMs) {
+    styledRows.push("");
+    styledRows.push(
+      ...row(color.label("Watch"), `polling every ${opts.pollMs} ms`, contentWidth, color.dim),
+    );
+  }
+  styledRows.push("");
+  styledRows.push(color.dim("  Open the Dashboard URL in your browser. Ctrl+C to stop."));
+
+  return boxLines(styledRows, totalWidth).join("\n");
+}
+
+/**
+ * @param {Parameters<typeof formatDevBanner>[0]} opts
+ */
+export function writeDevBanner(opts) {
+  process.stderr.write(`${formatDevBanner(opts)}\n`);
+}

package/bin/lib/dev-banner.test.mjs

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatDevBanner,
+  LOGO,
+  shortenPath,
+  visibleLength,
+} from "./dev-banner.mjs";
+
+describe("shortenPath", () => {
+  it("replaces home with tilde", () => {
+    const home = process.env.HOME ?? process.env.USERPROFILE ?? "";
+    if (!home) return;
+    expect(shortenPath(`${home}/Projects/foo`, 80)).toBe("~/Projects/foo");
+  });
+
+  it("truncates long paths in the middle", () => {
+    const long = "/very/long/path/segment/that/exceeds/the/maximum/allowed/length/for/display";
+    const out = shortenPath(long, 40);
+    expect(out.length).toBeLessThanOrEqual(40);
+    expect(out).toContain("…");
+  });
+});
+
+describe("formatDevBanner", () => {
+  it("includes logo, scan path, report, dashboard, and API URLs", () => {
+    const text = formatDevBanner({
+      scanPath: "/tmp/components",
+      reportPath: "/tmp/components/public/dslint-report.json",
+      apiPort: 7878,
+      apiAvailable: true,
+      dashboardUrl: "http://localhost:5173/",
+      bundledUrl: "http://127.0.0.1:7878/",
+      pollMs: 150,
+    });
+    expect(text).toContain(LOGO[0]);
+    expect(text).toContain(LOGO[1]);
+    expect(text).toContain("Scan path");
+    expect(text).toContain("Report file");
+    expect(text).toContain("Dashboard");
+    expect(text).toContain("http://localhost:5173/");
+    expect(text).toContain("7878");
+    expect(text).toContain("dslint-report.json");
+    expect(text).toContain("polling every 150 ms");
+  });
+
+  it("marks API unavailable when port is busy", () => {
+    const text = formatDevBanner({
+      scanPath: ".",
+      reportPath: "./public/dslint-report.json",
+      apiPort: 7878,
+      apiAvailable: false,
+      dashboardUrl: "http://localhost:5174/",
+    });
+    expect(text).toContain("unavailable");
+    expect(text).not.toContain("/events");
+  });
+
+  it("keeps right border aligned on every row", () => {
+    const text = formatDevBanner({
+      scanPath: "/very/long/path/that/could/push/the/box/wider/than/usual/Components",
+      reportPath: "/very/long/path/public/dslint-report.json",
+      apiPort: 7878,
+      apiAvailable: false,
+      dashboardUrl: "http://localhost:5175/",
+      bundledUrl: "http://127.0.0.1:7878/",
+      pollMs: 150,
+    });
+    const rows = text.split("\n").filter((l) => l.startsWith("│"));
+    const widths = rows.map((l) => visibleLength(l));
+    expect(new Set(widths).size).toBe(1);
+    expect(rows.every((l) => l.endsWith("│"))).toBe(true);
+  });
+});
+
+describe("visibleLength", () => {
+  it("ignores ansi codes", () => {
+    expect(visibleLength("\u001b[32mok\u001b[0m")).toBe(2);
+    expect(visibleLength("\u001b[4;36mhttp://x\u001b[0m")).toBe(8);
+  });
+});

package/bin/lib/port-check.mjs

@@ -3,21 +3,51 @@ import { spawnSync } from "node:child_process";
 
 /**
  * @param {number} port
- * @param {string} [host]
+ * @param {string} host
  */
-export function isPortInUse(port, host = "127.0.0.1") {
+function isListening(port, host) {
   return new Promise((resolve) => {
-    const server = net.createServer();
-    server.once("error", (err) => {
-      resolve(err && "code" in err && err.code === "EADDRINUSE");
+    const socket = net.connect({ port, host }, () => {
+      socket.destroy();
+      resolve(true);
     });
-    server.once("listening", () => {
-      server.close(() => resolve(false));
+    socket.once("error", () => resolve(false));
+    socket.setTimeout(400, () => {
+      socket.destroy();
+      resolve(false);
     });
-    server.listen(port, host);
   });
 }
 
+/**
+ * Whether something is already accepting connections on `port`.
+ * @param {number} port
+ * @param {string} [host] When set, only that address (e.g. `127.0.0.1` for the Rust scanner).
+ */
+export async function isPortInUse(port, host) {
+  if (host) return isListening(port, host);
+  if (await isListening(port, "127.0.0.1")) return true;
+  try {
+    if (await isListening(port, "::1")) return true;
+  } catch {
+    // IPv6 unavailable
+  }
+  return false;
+}
+
+/**
+ * @param {number} start
+ * @param {number} [tries]
+ */
+export async function findAvailablePort(start, tries = 32) {
+  for (let i = 0; i < tries; i++) {
+    const port = start + i;
+    if (port > 65535) break;
+    if (!(await isPortInUse(port))) return port;
+  }
+  throw new Error(`dslinter: no free port found near ${start}`);
+}
+
 /**
  * @param {number} port
  */
@@ -39,19 +69,22 @@ export function describePortOccupant(port) {
 
 /**
  * @param {number} port
+ * @param {{ silent?: boolean }} [opts]
  */
-export async function warnIfPortBusy(port) {
-  if (!(await isPortInUse(port))) return false;
-  const detail = describePortOccupant(port);
-  process.stderr.write(
-    [
-      "",
-      `[dslinter] Port ${port} is already in use — scanner cannot bind.`,
-      detail ? `  ${detail.replace(/\n/g, "\n  ")}` : "",
-      `  Stop the old process, then restart. Example: lsof -nP -iTCP:${port} -sTCP:LISTEN`,
-      "  If you already have `npm run dev` running, open the Vite URL it printed (e.g. http://localhost:5173/).",
-      "",
-    ].join("\n"),
-  );
+export async function warnIfPortBusy(port, opts = {}) {
+  if (!(await isPortInUse(port, "127.0.0.1"))) return false;
+  if (!opts.silent) {
+    const detail = describePortOccupant(port);
+    process.stderr.write(
+      [
+        "",
+        `[dslinter] Port ${port} is already in use — scanner cannot bind.`,
+        detail ? `  ${detail.replace(/\n/g, "\n  ")}` : "",
+        `  Stop the old process, then restart. Example: lsof -nP -iTCP:${port} -sTCP:LISTEN`,
+        "  If you already have `npm run dev` running, open the Vite URL it printed (e.g. http://localhost:5173/).",
+        "",
+      ].join("\n"),
+    );
+  }
   return true;
 }

package/bin/lib/run-scanner.mjs

@@ -37,11 +37,12 @@ export async function spawnScanner(scannerArgs, options = {}) {
 
   return spawn(process.execPath, [binScript, ...scannerArgs], {
     stdio: "inherit",
+    ...options,
     env: {
       ...process.env,
       DSLINTER_INTERNAL: "1",
+      ...options.env,
     },
-    ...options,
   });
 }