frameshot-mcp 0.7.0 → 0.8.0

package/dist/chunk-AUACBLHM.js

@@ -0,0 +1,191 @@
+import {
+  attachConsoleCapture,
+  takeScreenshot
+} from "./chunk-O7NWWFIU.js";
+
+// src/infrastructure/snapshot-store.ts
+var SnapshotStore = class {
+  store = /* @__PURE__ */ new Map();
+  save(key, image) {
+    this.store.set(key, { image, timestamp: Date.now() });
+  }
+  get(key) {
+    return this.store.get(key);
+  }
+  list() {
+    return Array.from(this.store.entries()).map(([key, val]) => ({
+      key,
+      timestamp: val.timestamp
+    }));
+  }
+};
+
+// src/use-cases/audit.ts
+var AuditUseCase = class {
+  constructor(pool, htmlBuilder) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+  }
+  pool;
+  htmlBuilder;
+  async auditA11y(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await this.pool.setViewport("chromium", viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const axeSource = await import("axe-core").then((m) => m.source);
+    await page.addScriptTag({ content: axeSource });
+    const results = await page.evaluate(() => {
+      return window.axe.run();
+    });
+    return {
+      violations: results.violations.map(
+        (v) => ({
+          id: v.id,
+          impact: v.impact,
+          description: v.description,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.map((n) => ({
+            html: n.html,
+            target: n.target
+          }))
+        })
+      ),
+      passes: results.passes.length,
+      incomplete: results.incomplete.length
+    };
+  }
+  async perfAudit(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await this.pool.setViewport("chromium", viewport);
+    const start = performance.now();
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const renderTimeMs = Math.round(performance.now() - start);
+    const metrics = await page.evaluate(() => {
+      const all = document.querySelectorAll("*");
+      let maxDepth = 0;
+      for (const el of all) {
+        let depth = 0;
+        let node = el;
+        while (node) {
+          depth++;
+          node = node.parentElement;
+        }
+        if (depth > maxDepth) maxDepth = depth;
+      }
+      return {
+        domElements: all.length,
+        domDepth: maxDepth,
+        scriptCount: document.querySelectorAll("script").length,
+        styleSheetCount: document.styleSheets.length,
+        imageCount: document.querySelectorAll("img").length,
+        totalDomSize: document.documentElement.outerHTML.length
+      };
+    });
+    return { renderTimeMs, ...metrics };
+  }
+};
+
+// src/use-cases/screenshot.ts
+var ScreenshotUseCase = class {
+  constructor(pool) {
+    this.pool = pool;
+  }
+  pool;
+  async screenshotUrl(url, options = {}) {
+    const engines = options.engines ?? ["chromium"];
+    const { waitForNetworkIdle = true } = options;
+    return Promise.all(
+      engines.map(async (engine) => {
+        const { width = 1280, height = 800 } = options.viewport ?? {};
+        const fullPage = options.fullPage ?? true;
+        const waitFor = options.waitFor ?? 0;
+        const page = await this.pool.getPage(engine);
+        await this.pool.setViewport(engine, { width, height });
+        const { errors, cleanup } = attachConsoleCapture(page);
+        await page.goto(url, { waitUntil: "domcontentloaded", timeout: 15e3 });
+        if (waitForNetworkIdle) {
+          await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
+          });
+        }
+        if (options.waitForSelector) {
+          await page.waitForSelector(options.waitForSelector, {
+            timeout: 1e4
+          });
+        }
+        if (waitFor > 0) {
+          await page.waitForTimeout(waitFor);
+        }
+        return takeScreenshot(page, engine, fullPage, errors, cleanup);
+      })
+    );
+  }
+  async screenshotUrlWithRetry(url, options = {}) {
+    const { retryCount = 0, ...screenshotOpts } = options;
+    const maxAttempts = retryCount + 1;
+    let lastError;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      try {
+        if (attempt > 0) {
+          const delay = 300 * 2 ** (attempt - 1);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+        return await this.screenshotUrl(url, screenshotOpts);
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    throw lastError;
+  }
+};
+
+// src/use-cases/snapshot.ts
+var SnapshotUseCase = class {
+  constructor(store, renderUseCase, diffUseCase) {
+    this.store = store;
+    this.renderUseCase = renderUseCase;
+    this.diffUseCase = diffUseCase;
+  }
+  store;
+  renderUseCase;
+  diffUseCase;
+  async save(key, code, framework, options = {}) {
+    const [result] = await this.renderUseCase.render(code, framework, {
+      ...options,
+      engines: ["chromium"]
+    });
+    this.store.save(key, result.image);
+    return { image: result.image, width: result.width, height: result.height };
+  }
+  async check(key, code, framework, options = {}) {
+    const snapshot = this.store.get(key);
+    if (!snapshot) return null;
+    return this.diffUseCase.diffFromReference(
+      code,
+      framework,
+      snapshot.image,
+      options
+    );
+  }
+  list() {
+    return this.store.list();
+  }
+};
+
+export {
+  SnapshotStore,
+  AuditUseCase,
+  ScreenshotUseCase,
+  SnapshotUseCase
+};

package/dist/chunk-GVOEFYEX.js

@@ -0,0 +1,139 @@
+import {
+  AuditUseCase,
+  BrowserPool,
+  CatalogUseCase,
+  DiffUseCase,
+  HtmlBuilder,
+  ImageComparator,
+  RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotStore,
+  SnapshotUseCase,
+  ViteBundler
+} from "./chunk-Q7NQA4ZM.js";
+
+// src/use-cases/watch.ts
+import { watch } from "chokidar";
+var WatchUseCase = class {
+  constructor(renderUseCase) {
+    this.renderUseCase = renderUseCase;
+  }
+  renderUseCase;
+  sessions = /* @__PURE__ */ new Map();
+  nextId = 1;
+  start(patterns, props, callback) {
+    const id = `watch-${this.nextId++}`;
+    const watcher = watch(patterns, {
+      ignoreInitial: false,
+      awaitWriteFinish: { stabilityThreshold: 200, pollInterval: 50 }
+    });
+    watcher.on("add", (path) => this.handleChange(id, path, props, callback));
+    watcher.on(
+      "change",
+      (path) => this.handleChange(id, path, props, callback)
+    );
+    const session = {
+      id,
+      patterns,
+      stop: () => {
+        watcher.close();
+        this.sessions.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() {
+    for (const session of this.sessions.values()) {
+      session.stop();
+    }
+  }
+  activeSessions() {
+    return Array.from(this.sessions.values());
+  }
+  async handleChange(sessionId, filePath, props, callback) {
+    const start = performance.now();
+    try {
+      const { results, mode } = await this.renderUseCase.renderFile(filePath, {
+        props,
+        autoFit: true,
+        fullPage: true,
+        engines: ["chromium"]
+      });
+      const result = results[0];
+      callback({
+        sessionId,
+        filePath,
+        image: result.image,
+        width: result.width,
+        height: result.height,
+        elapsedMs: Math.round(performance.now() - start),
+        mode,
+        consoleErrors: result.consoleErrors
+      });
+    } catch (err) {
+      callback({
+        sessionId,
+        filePath,
+        image: "",
+        width: 0,
+        height: 0,
+        elapsedMs: Math.round(performance.now() - start),
+        mode: "cdn",
+        consoleErrors: [],
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+};
+
+// 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/chunk-L2CADTS7.js

@@ -0,0 +1,191 @@
+import {
+  attachConsoleCapture,
+  takeScreenshot
+} from "./chunk-3CDSNOX5.js";
+
+// src/infrastructure/snapshot-store.ts
+var SnapshotStore = class {
+  store = /* @__PURE__ */ new Map();
+  save(key, image) {
+    this.store.set(key, { image, timestamp: Date.now() });
+  }
+  get(key) {
+    return this.store.get(key);
+  }
+  list() {
+    return Array.from(this.store.entries()).map(([key, val]) => ({
+      key,
+      timestamp: val.timestamp
+    }));
+  }
+};
+
+// src/use-cases/audit.ts
+var AuditUseCase = class {
+  constructor(pool, htmlBuilder) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+  }
+  pool;
+  htmlBuilder;
+  async auditA11y(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await this.pool.setViewport("chromium", viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const axeSource = await import("axe-core").then((m) => m.source);
+    await page.addScriptTag({ content: axeSource });
+    const results = await page.evaluate(() => {
+      return window.axe.run();
+    });
+    return {
+      violations: results.violations.map(
+        (v) => ({
+          id: v.id,
+          impact: v.impact,
+          description: v.description,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.map((n) => ({
+            html: n.html,
+            target: n.target
+          }))
+        })
+      ),
+      passes: results.passes.length,
+      incomplete: results.incomplete.length
+    };
+  }
+  async perfAudit(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await this.pool.setViewport("chromium", viewport);
+    const start = performance.now();
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const renderTimeMs = Math.round(performance.now() - start);
+    const metrics = await page.evaluate(() => {
+      const all = document.querySelectorAll("*");
+      let maxDepth = 0;
+      for (const el of all) {
+        let depth = 0;
+        let node = el;
+        while (node) {
+          depth++;
+          node = node.parentElement;
+        }
+        if (depth > maxDepth) maxDepth = depth;
+      }
+      return {
+        domElements: all.length,
+        domDepth: maxDepth,
+        scriptCount: document.querySelectorAll("script").length,
+        styleSheetCount: document.styleSheets.length,
+        imageCount: document.querySelectorAll("img").length,
+        totalDomSize: document.documentElement.outerHTML.length
+      };
+    });
+    return { renderTimeMs, ...metrics };
+  }
+};
+
+// src/use-cases/screenshot.ts
+var ScreenshotUseCase = class {
+  constructor(pool) {
+    this.pool = pool;
+  }
+  pool;
+  async screenshotUrl(url, options = {}) {
+    const engines = options.engines ?? ["chromium"];
+    const { waitForNetworkIdle = true } = options;
+    return Promise.all(
+      engines.map(async (engine) => {
+        const { width = 1280, height = 800 } = options.viewport ?? {};
+        const fullPage = options.fullPage ?? true;
+        const waitFor = options.waitFor ?? 0;
+        const page = await this.pool.getPage(engine);
+        await this.pool.setViewport(engine, { width, height });
+        const { errors, cleanup } = attachConsoleCapture(page);
+        await page.goto(url, { waitUntil: "domcontentloaded", timeout: 15e3 });
+        if (waitForNetworkIdle) {
+          await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
+          });
+        }
+        if (options.waitForSelector) {
+          await page.waitForSelector(options.waitForSelector, {
+            timeout: 1e4
+          });
+        }
+        if (waitFor > 0) {
+          await page.waitForTimeout(waitFor);
+        }
+        return takeScreenshot(page, engine, fullPage, errors, cleanup);
+      })
+    );
+  }
+  async screenshotUrlWithRetry(url, options = {}) {
+    const { retryCount = 0, ...screenshotOpts } = options;
+    const maxAttempts = retryCount + 1;
+    let lastError;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      try {
+        if (attempt > 0) {
+          const delay = 300 * 2 ** (attempt - 1);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+        return await this.screenshotUrl(url, screenshotOpts);
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    throw lastError;
+  }
+};
+
+// src/use-cases/snapshot.ts
+var SnapshotUseCase = class {
+  constructor(store, renderUseCase, diffUseCase) {
+    this.store = store;
+    this.renderUseCase = renderUseCase;
+    this.diffUseCase = diffUseCase;
+  }
+  store;
+  renderUseCase;
+  diffUseCase;
+  async save(key, code, framework, options = {}) {
+    const [result] = await this.renderUseCase.render(code, framework, {
+      ...options,
+      engines: ["chromium"]
+    });
+    this.store.save(key, result.image);
+    return { image: result.image, width: result.width, height: result.height };
+  }
+  async check(key, code, framework, options = {}) {
+    const snapshot = this.store.get(key);
+    if (!snapshot) return null;
+    return this.diffUseCase.diffFromReference(
+      code,
+      framework,
+      snapshot.image,
+      options
+    );
+  }
+  list() {
+    return this.store.list();
+  }
+};
+
+export {
+  SnapshotStore,
+  AuditUseCase,
+  ScreenshotUseCase,
+  SnapshotUseCase
+};

package/dist/chunk-MA3FOIQY.js

@@ -0,0 +1,157 @@
+import {
+  AuditUseCase,
+  BrowserPool,
+  CatalogUseCase,
+  DiffUseCase,
+  HtmlBuilder,
+  ImageComparator,
+  RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotStore,
+  SnapshotUseCase,
+  ViteBundler
+} from "./chunk-PYWXJZTZ.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
+};