frameshot-mcp 0.7.0 → 0.9.7

package/dist/chunk-VUYZHZBH.js

@@ -0,0 +1,157 @@
+import {
+  AuditUseCase,
+  BrowserPool,
+  CatalogUseCase,
+  DiffUseCase,
+  HtmlBuilder,
+  ImageComparator,
+  RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotStore,
+  SnapshotUseCase,
+  ViteBundler
+} from "./chunk-MEBQ7ZWA.js";
+
+// src/use-cases/watch.ts
+import { watch } from "chokidar";
+var WatchUseCase = class {
+  constructor(renderUseCase) {
+    this.renderUseCase = renderUseCase;
+  }
+  renderUseCase;
+  sessions = /* @__PURE__ */ new Map();
+  latestRenders = /* @__PURE__ */ new Map();
+  inFlight = /* @__PURE__ */ new Set();
+  // key: `${sessionId}:${filePath}`
+  nextId = 1;
+  start(patterns, props, callback) {
+    const id = `watch-${this.nextId++}`;
+    const watcher = watch(patterns, {
+      ignoreInitial: true,
+      // only watch future changes, not existing files on startup
+      awaitWriteFinish: { stabilityThreshold: 200, pollInterval: 50 }
+    });
+    watcher.on(
+      "change",
+      (path) => this.handleChange(id, path, props, callback)
+    );
+    const session = {
+      id,
+      patterns,
+      stop: () => {
+        watcher.close();
+        this.sessions.delete(id);
+        this.latestRenders.delete(id);
+      }
+    };
+    this.sessions.set(id, session);
+    return session;
+  }
+  stop(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) return false;
+    session.stop();
+    return true;
+  }
+  stopAll() {
+    const sessions = Array.from(this.sessions.values());
+    for (const session of sessions) {
+      session.stop();
+    }
+    this.latestRenders.clear();
+  }
+  activeSessions() {
+    return Array.from(this.sessions.values());
+  }
+  getLatestRender(sessionId) {
+    return this.latestRenders.get(sessionId);
+  }
+  async handleChange(sessionId, filePath, props, callback) {
+    const key = `${sessionId}:${filePath}`;
+    if (this.inFlight.has(key)) return;
+    this.inFlight.add(key);
+    const start = performance.now();
+    try {
+      const { results, mode } = await this.renderUseCase.renderFile(filePath, {
+        props,
+        autoFit: true,
+        fullPage: true,
+        engines: ["chromium"]
+      });
+      const result = results[0];
+      const event = {
+        sessionId,
+        filePath,
+        image: result.image,
+        width: result.width,
+        height: result.height,
+        elapsedMs: Math.round(performance.now() - start),
+        mode,
+        consoleErrors: result.consoleErrors
+      };
+      this.latestRenders.set(sessionId, event);
+      await callback(event);
+    } catch (err) {
+      const event = {
+        sessionId,
+        filePath,
+        image: "",
+        width: 0,
+        height: 0,
+        elapsedMs: Math.round(performance.now() - start),
+        mode: "cdn",
+        consoleErrors: [],
+        error: err instanceof Error ? err.message : String(err)
+      };
+      this.latestRenders.set(sessionId, event);
+      await callback(event);
+    } finally {
+      this.inFlight.delete(key);
+    }
+  }
+};
+
+// src/container.ts
+function createContainer() {
+  const pool = new BrowserPool();
+  const htmlBuilder = new HtmlBuilder();
+  const imageComparator = new ImageComparator();
+  const snapshotStore = new SnapshotStore();
+  const viteBundler = new ViteBundler();
+  const renderUseCase = new RenderUseCase(
+    pool,
+    htmlBuilder,
+    imageComparator,
+    viteBundler
+  );
+  const screenshotUseCase = new ScreenshotUseCase(pool);
+  const diffUseCase = new DiffUseCase(renderUseCase, imageComparator);
+  const auditUseCase = new AuditUseCase(pool, htmlBuilder);
+  const snapshotUseCase = new SnapshotUseCase(
+    snapshotStore,
+    renderUseCase,
+    diffUseCase
+  );
+  const catalogUseCase = new CatalogUseCase(renderUseCase);
+  const watchUseCase = new WatchUseCase(renderUseCase);
+  return {
+    pool,
+    viteBundler,
+    renderUseCase,
+    screenshotUseCase,
+    diffUseCase,
+    auditUseCase,
+    snapshotUseCase,
+    catalogUseCase,
+    watchUseCase,
+    async shutdown() {
+      watchUseCase.stopAll();
+      await viteBundler.shutdown();
+      await pool.shutdown();
+    }
+  };
+}
+
+export {
+  createContainer
+};

package/dist/cli.js

@@ -1,19 +1,21 @@
 #!/usr/bin/env node
 import {
-  BrowserPool,
-  CatalogUseCase,
-  DiffUseCase,
-  EXT_TO_FRAMEWORK,
-  HtmlBuilder,
-  ImageComparator,
-  RenderUseCase,
-  ViteBundler
-} from "./chunk-Q7A3DLED.js";
+  createContainer
+} from "./chunk-VUYZHZBH.js";
+import {
+  EXT_TO_FRAMEWORK
+} from "./chunk-MEBQ7ZWA.js";
 
 // src/cli.ts
-import { execFileSync, execSync } from "child_process";
-import { mkdirSync, readFileSync, writeFileSync } from "fs";
+import { mkdirSync } from "fs";
+import { resolve as resolve2 } from "path";
+
+// src/cli/commands.ts
+import { execSync } from "child_process";
+import { readFileSync, writeFileSync } from "fs";
 import { basename, extname, relative, resolve } from "path";
+
+// src/cli/display.ts
 var c = {
   reset: "\x1B[0m",
   bold: "\x1B[1m",
@@ -66,6 +68,15 @@ function spinner(text) {
 function separator() {
   log(`  ${c.gray}${"\u2500".repeat(48)}${c.reset}`);
 }
+function renderBar(pct) {
+  const width = 30;
+  const filled = Math.round(pct / 100 * width);
+  const empty = width - filled;
+  return `${c.yellow}${"\u2588".repeat(filled)}${c.gray}${"\u2591".repeat(empty)}${c.reset} ${c.dim}${pct.toFixed(1)}%${c.reset}`;
+}
+
+// src/cli/image.ts
+import { execFileSync } from "child_process";
 function supportsItermImage() {
   const term = process.env.TERM_PROGRAM ?? "";
   return term === "iTerm.app" || term === "WezTerm" || !!process.env.TERM_PROGRAM_VERSION?.includes("iTerm") || term === "vscode";
@@ -121,117 +132,10 @@ function displayImage(base64, filePath) {
   } catch {
   }
 }
-function parseArgs(args) {
-  const command = args[0] ?? "help";
-  const positional = args[1] ?? "";
-  const flags = {
-    out: ".frameshot",
-    recursive: false
-  };
-  for (let i = 2; i < args.length; i++) {
-    const arg = args[i];
-    switch (arg) {
-      case "--props":
-        try {
-          flags.props = JSON.parse(args[++i]);
-        } catch {
-          error("Invalid --props JSON");
-        }
-        break;
-      case "--out":
-      case "-o":
-        flags.out = args[++i];
-        break;
-      case "--recursive":
-      case "-r":
-        flags.recursive = true;
-        break;
-      case "--width":
-        flags.width = Number.parseInt(args[++i], 10);
-        break;
-      case "--height":
-        flags.height = Number.parseInt(args[++i], 10);
-        break;
-    }
-  }
-  return { command, positional, flags };
-}
-var HELP = `
-  ${brand()} ${c.dim}v0.7.0${c.reset}
-  ${c.dim}Zero-config component screenshots \u2014 Vite + Playwright${c.reset}
-
-  ${c.white}${c.bold}Commands${c.reset}
-    ${c.blue}render${c.reset} ${c.dim}<file>${c.reset}          Render a component to PNG
-    ${c.blue}catalog${c.reset} ${c.dim}<dir>${c.reset}          Render all components in a directory
-    ${c.blue}diff${c.reset} ${c.dim}<file>${c.reset}             Visual diff against git HEAD
 
-  ${c.white}${c.bold}Options${c.reset}
-    ${c.purple}--props${c.reset} ${c.dim}'{...}'${c.reset}            Component props (JSON)
-    ${c.purple}--out${c.reset}, ${c.purple}-o${c.reset} ${c.dim}<dir>${c.reset}            Output directory ${c.gray}[.frameshot]${c.reset}
-    ${c.purple}--recursive${c.reset}, ${c.purple}-r${c.reset}            Scan subdirectories
-    ${c.purple}--width${c.reset} ${c.dim}<px>${c.reset}                Viewport width ${c.gray}[auto]${c.reset}
-    ${c.purple}--height${c.reset} ${c.dim}<px>${c.reset}               Viewport height ${c.gray}[auto]${c.reset}
-
-  ${c.white}${c.bold}Examples${c.reset}
-    ${c.gray}$${c.reset} frameshot render src/Button.tsx
-    ${c.gray}$${c.reset} frameshot render src/Card.tsx ${c.purple}--props${c.reset} '{"title":"Hi"}'
-    ${c.gray}$${c.reset} frameshot catalog src/components/ ${c.purple}-r${c.reset}
-    ${c.gray}$${c.reset} frameshot diff src/Header.tsx
-
-  ${c.dim}Supports: React \xB7 Vue \xB7 Svelte \xB7 Tailwind \xB7 CSS Modules${c.reset}
-  ${c.dim}Display:  iTerm2 \xB7 Kitty \xB7 Sixel \xB7 fallback to open${c.reset}
-
-`;
-async function main() {
-  const { command, positional, flags } = parseArgs(process.argv.slice(2));
-  if (command === "help" || command === "--help" || command === "-h") {
-    process.stdout.write(HELP);
-    return;
-  }
-  if (!positional) {
-    error(
-      `Missing argument. Run ${c.dim}frameshot --help${c.reset} for usage.`
-    );
-  }
-  log(`
-  ${brand()} ${c.dim}v0.7.0${c.reset}
-`);
-  const pool = new BrowserPool();
-  const htmlBuilder = new HtmlBuilder();
-  const imageComparator = new ImageComparator();
-  const viteBundler = new ViteBundler();
-  const renderUseCase = new RenderUseCase(
-    pool,
-    htmlBuilder,
-    imageComparator,
-    viteBundler
-  );
-  const catalogUseCase = new CatalogUseCase(renderUseCase);
-  const diffUseCase = new DiffUseCase(renderUseCase, imageComparator);
-  const outDir = resolve(flags.out);
-  mkdirSync(outDir, { recursive: true });
-  try {
-    await pool.warmup(["chromium"]);
-    switch (command) {
-      case "render":
-        await cmdRender(renderUseCase, positional, flags, outDir);
-        break;
-      case "catalog":
-        await cmdCatalog(catalogUseCase, positional, flags, outDir);
-        break;
-      case "diff":
-        await cmdDiff(diffUseCase, positional, flags, outDir);
-        break;
-      default:
-        error(
-          `Unknown command '${command}'. Run ${c.dim}frameshot --help${c.reset} for usage.`
-        );
-    }
-  } finally {
-    await viteBundler.shutdown();
-    await pool.shutdown();
-  }
-  log("");
+// src/cli/commands.ts
+function getViewport(flags) {
+  return { width: flags.width ?? 1280, height: flags.height ?? 800 };
 }
 async function cmdRender(useCase, filePath, flags, outDir) {
   const absPath = resolve(filePath);
@@ -253,10 +157,7 @@ async function cmdRender(useCase, filePath, flags, outDir) {
   const start = performance.now();
   const { results, mode } = await useCase.renderFile(absPath, {
     props: flags.props,
-    viewport: {
-      width: flags.width ?? 1280,
-      height: flags.height ?? 800
-    },
+    viewport: getViewport(flags),
     autoFit,
     fullPage: true,
     engines: ["chromium"]
@@ -301,7 +202,7 @@ async function cmdCatalog(useCase, dirPath, flags, outDir) {
   const s = spinner("Scanning & rendering components...");
   const results = await useCase.renderCatalog(absDir, {
     recursive: flags.recursive,
-    viewport: { width: flags.width ?? 1280, height: flags.height ?? 800 },
+    viewport: getViewport(flags),
     autoFit: flags.width === void 0 || flags.height === void 0
   });
   if (results.length === 0) {
@@ -349,7 +250,7 @@ async function cmdDiff(useCase, filePath, flags, outDir) {
     baseCode = execSync(`git show HEAD:${gitRelPath}`, { encoding: "utf-8" });
   } catch {
     s.stop(`${c.red}Failed${c.reset}`);
-    error(
+    throw new Error(
       `Could not get HEAD version of ${relPath}. Is this file tracked by git?`
     );
   }
@@ -357,7 +258,7 @@ async function cmdDiff(useCase, filePath, flags, outDir) {
   const ext = extname(filePath).toLowerCase();
   const framework = EXT_TO_FRAMEWORK[ext] ?? "react";
   const result = await useCase.diffComponent(baseCode, currentCode, framework, {
-    viewport: { width: flags.width ?? 1280, height: flags.height ?? 800 },
+    viewport: getViewport(flags),
     autoFit: flags.width === void 0 || flags.height === void 0
   });
   const elapsed = Math.round(performance.now() - start);
@@ -396,11 +297,108 @@ async function cmdDiff(useCase, filePath, flags, outDir) {
     );
   }
 }
-function renderBar(pct) {
-  const width = 30;
-  const filled = Math.round(pct / 100 * width);
-  const empty = width - filled;
-  return `${c.yellow}${"\u2588".repeat(filled)}${c.gray}${"\u2591".repeat(empty)}${c.reset} ${c.dim}${pct.toFixed(1)}%${c.reset}`;
+
+// src/cli.ts
+function parseArgs(args) {
+  const command = args[0] ?? "help";
+  const positional = args[1] ?? "";
+  const flags = {
+    out: ".frameshot",
+    recursive: false
+  };
+  for (let i = 2; i < args.length; i++) {
+    const arg = args[i];
+    switch (arg) {
+      case "--props":
+        try {
+          flags.props = JSON.parse(args[++i]);
+        } catch {
+          error("Invalid --props JSON");
+        }
+        break;
+      case "--out":
+      case "-o":
+        flags.out = args[++i];
+        break;
+      case "--recursive":
+      case "-r":
+        flags.recursive = true;
+        break;
+      case "--width":
+        flags.width = Number.parseInt(args[++i], 10);
+        break;
+      case "--height":
+        flags.height = Number.parseInt(args[++i], 10);
+        break;
+    }
+  }
+  return { command, positional, flags };
+}
+var HELP = `
+  ${brand()} ${c.dim}v0.7.0${c.reset}
+  ${c.dim}Zero-config component screenshots \u2014 Vite + Playwright${c.reset}
+
+  ${c.white}${c.bold}Commands${c.reset}
+    ${c.blue}render${c.reset} ${c.dim}<file>${c.reset}          Render a component to PNG
+    ${c.blue}catalog${c.reset} ${c.dim}<dir>${c.reset}          Render all components in a directory
+    ${c.blue}diff${c.reset} ${c.dim}<file>${c.reset}             Visual diff against git HEAD
+
+  ${c.white}${c.bold}Options${c.reset}
+    ${c.purple}--props${c.reset} ${c.dim}'{...}'${c.reset}            Component props (JSON)
+    ${c.purple}--out${c.reset}, ${c.purple}-o${c.reset} ${c.dim}<dir>${c.reset}            Output directory ${c.gray}[.frameshot]${c.reset}
+    ${c.purple}--recursive${c.reset}, ${c.purple}-r${c.reset}            Scan subdirectories
+    ${c.purple}--width${c.reset} ${c.dim}<px>${c.reset}                Viewport width ${c.gray}[auto]${c.reset}
+    ${c.purple}--height${c.reset} ${c.dim}<px>${c.reset}               Viewport height ${c.gray}[auto]${c.reset}
+
+  ${c.white}${c.bold}Examples${c.reset}
+    ${c.gray}$${c.reset} frameshot render src/Button.tsx
+    ${c.gray}$${c.reset} frameshot render src/Card.tsx ${c.purple}--props${c.reset} '{"title":"Hi"}'
+    ${c.gray}$${c.reset} frameshot catalog src/components/ ${c.purple}-r${c.reset}
+    ${c.gray}$${c.reset} frameshot diff src/Header.tsx
+
+  ${c.dim}Supports: React \xB7 Vue \xB7 Svelte \xB7 Tailwind \xB7 CSS Modules${c.reset}
+  ${c.dim}Display:  iTerm2 \xB7 Kitty \xB7 Sixel \xB7 fallback to open${c.reset}
+
+`;
+async function main() {
+  const { command, positional, flags } = parseArgs(process.argv.slice(2));
+  if (command === "help" || command === "--help" || command === "-h") {
+    process.stdout.write(HELP);
+    return;
+  }
+  if (!positional) {
+    error(
+      `Missing argument. Run ${c.dim}frameshot --help${c.reset} for usage.`
+    );
+  }
+  log(`
+  ${brand()} ${c.dim}v0.7.0${c.reset}
+`);
+  const container = createContainer();
+  const { pool, renderUseCase, catalogUseCase, diffUseCase } = container;
+  const outDir = resolve2(flags.out);
+  mkdirSync(outDir, { recursive: true });
+  try {
+    await pool.warmup(["chromium"]);
+    switch (command) {
+      case "render":
+        await cmdRender(renderUseCase, positional, flags, outDir);
+        break;
+      case "catalog":
+        await cmdCatalog(catalogUseCase, positional, flags, outDir);
+        break;
+      case "diff":
+        await cmdDiff(diffUseCase, positional, flags, outDir);
+        break;
+      default:
+        error(
+          `Unknown command '${command}'. Run ${c.dim}frameshot --help${c.reset} for usage.`
+        );
+    }
+  } finally {
+    await container.shutdown();
+  }
+  log("");
 }
 main().catch((e) => {
   error(e.message ?? String(e));