frameshot-mcp 0.3.0 → 0.7.0

package/dist/chunk-FTYTZW6D.js

@@ -0,0 +1,203 @@
+// 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 consoleErrors = [];
+        const onError = (msg) => {
+          if (msg.type() === "error") consoleErrors.push(msg.text());
+        };
+        page.on("console", onError);
+        page.on("pageerror", (err) => consoleErrors.push(err.message));
+        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);
+        }
+        const screenshot = await page.screenshot({ type: "png", fullPage });
+        const metrics = await page.evaluate(() => ({
+          w: document.documentElement.scrollWidth,
+          h: document.documentElement.scrollHeight
+        }));
+        page.removeListener("console", onError);
+        return {
+          engine,
+          image: screenshot.toString("base64"),
+          width: metrics.w,
+          height: metrics.h,
+          consoleErrors
+        };
+      })
+    );
+  }
+  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
+};