npm - frameshot-mcp - Versions diffs - 0.3.0 → 0.7.0 - Mend

frameshot-mcp 0.3.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/README.md +157 -47
package/action.yml +144 -0
package/dist/chunk-3LVWVDET.js +849 -0
package/dist/chunk-47YJG5HR.js +690 -0
package/dist/chunk-67JZQ6OI.js +819 -0
package/dist/chunk-AZCGKIMU.js +850 -0
package/dist/chunk-B3CLIGWU.js +786 -0
package/dist/chunk-C6QSY4WR.js +811 -0
package/dist/chunk-DX54PJKO.js +603 -0
package/dist/chunk-EMCJGIMY.js +984 -0
package/dist/chunk-FQNWGR62.js +849 -0
package/dist/chunk-FTYTZW6D.js +203 -0
package/dist/chunk-JGVKYXY2.js +857 -0
package/dist/chunk-JYPEA4P2.js +846 -0
package/dist/chunk-KHK35HDD.js +855 -0
package/dist/chunk-Q7A3DLED.js +848 -0
package/dist/chunk-SIA6XEHM.js +811 -0
package/dist/chunk-ST35YDI6.js +834 -0
package/dist/chunk-T5OBJK35.js +855 -0
package/dist/chunk-U3GHS7KO.js +837 -0
package/dist/chunk-WS2ASCD6.js +683 -0
package/dist/chunk-WZMHVSUA.js +847 -0
package/dist/chunk-ZZST6K7Y.js +987 -0
package/dist/cli.d.ts +1 -0
package/dist/cli.js +407 -0
package/dist/index.js +1077 -653
package/dist/renderer.d.ts +297 -0
package/dist/renderer.js +34 -0
package/package.json +32 -7
package/scripts/render-changed.mjs +233 -0
package/scripts/setup-labels.sh +48 -0

package/dist/chunk-DX54PJKO.js ADDED Viewed

@@ -0,0 +1,603 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+// src/renderer.ts
+import pixelmatch from "pixelmatch";
+import { chromium, firefox, webkit } from "playwright";
+import { PNG } from "pngjs";
+var pool = /* @__PURE__ */ new Map();
+var ENGINES = ["chromium", "firefox", "webkit"];
+async function warmup(engines = ENGINES) {
+  await Promise.all(engines.map((e) => getSlot(e)));
+}
+async function getSlot(engine) {
+  const existing = pool.get(engine);
+  if (existing?.browser.isConnected() && existing.ready) {
+    return existing;
+  }
+  const launcher = { chromium, firefox, webkit }[engine];
+  let browser;
+  try {
+    browser = await launcher.launch({
+      headless: true,
+      ...engine === "chromium" ? { channel: "chrome" } : {}
+    });
+  } catch (_e) {
+    throw new Error(
+      `${engine} is not installed. Run: npx playwright install ${engine}`
+    );
+  }
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 800 },
+    deviceScaleFactor: 2
+  });
+  const page = await context.newPage();
+  await page.setContent(
+    '<html><head><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script></head><body></body></html>',
+    { waitUntil: "networkidle" }
+  );
+  const slot = { browser, page, ready: true };
+  pool.set(engine, slot);
+  return slot;
+}
+function wrapComponent(code, framework, darkMode = false, css = "", tailwindVersion = "3") {
+  const tailwind = tailwindVersion === "4" ? '<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>' : '<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>';
+  const tailwindConfig = tailwindVersion === "4" ? "" : "<script>tailwind.config={darkMode:'class'}</script>";
+  const customCss = css ? `<style>${css}</style>` : "";
+  const baseStyle = `<style>*{margin:0;box-sizing:border-box}body{padding:16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}</style>`;
+  const htmlClass = darkMode ? ' class="dark"' : "";
+  if (framework === "html") {
+    if (code.includes("<html")) return code;
+    return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}${baseStyle}${customCss}</head><body>${code}</body></html>`;
+  }
+  if (framework === "react") {
+    const cleanedCode = code.replace(/['"]use client['"];?\n?/g, "").replace(/['"]use server['"];?\n?/g, "").replace(/import\s+.*?\s+from\s+['"]next\/image['"];?\n?/g, "").replace(/import\s+.*?\s+from\s+['"]next\/link['"];?\n?/g, "");
+    return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+${baseStyle}${customCss}</head><body><div id="root"></div>
+<script type="text/babel">
+const Image = (props) => React.createElement('img', {...props, src: props.src?.src || props.src});
+const Link = ({href, children, ...props}) => React.createElement('a', {href, ...props}, children);
+${cleanedCode}
+const _C = typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:typeof Default!=='undefined'?Default:null;
+if(_C)ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(_C));
+</script></body></html>`;
+  }
+  if (framework === "vue") {
+    return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+${baseStyle}${customCss}</head><body><div id="app"></div>
+<script>
+const{createApp,ref,reactive,computed,onMounted,watch,watchEffect}=Vue;
+${code}
+const _C=typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:null;
+if(_C)createApp(_C).mount('#app');
+</script></body></html>`;
+  }
+  if (framework === "svelte") {
+    return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/svelte@4/compiler.cjs"></script>
+${baseStyle}${customCss}</head><body><div id="app"></div>
+<script type="module">
+import "https://unpkg.com/svelte@4/internal/index.mjs";
+${code}
+const _C=typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:null;
+if(_C)new _C({target:document.getElementById('app')});
+</script></body></html>`;
+  }
+  return code;
+}
+async function renderSingle(engine, html, options) {
+  const { width = 1280, height = 800, fullPage = true, waitFor = 0 } = options;
+  const slot = await getSlot(engine);
+  const { page } = slot;
+  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));
+  const currentViewport = page.viewportSize();
+  if (currentViewport?.width !== width || currentViewport?.height !== height) {
+    await page.setViewportSize({ width, height });
+  }
+  await page.setContent(html, { waitUntil: "load", 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 function render(code, framework, options = {}) {
+  const engines = options.engines ?? ["chromium"];
+  const html = wrapComponent(
+    code,
+    framework,
+    options.darkMode ?? false,
+    options.css ?? "",
+    options.tailwindVersion ?? "3"
+  );
+  const results = await Promise.all(
+    engines.map((e) => renderSingle(e, html, options))
+  );
+  return results;
+}
+async function screenshotUrl(url, options = {}) {
+  const engines = options.engines ?? ["chromium"];
+  const { waitForNetworkIdle = true } = options;
+  const results = await Promise.all(
+    engines.map(async (engine) => {
+      const {
+        width = 1280,
+        height = 800,
+        fullPage = true,
+        waitFor = 0
+      } = options;
+      const slot = await getSlot(engine);
+      const { page } = slot;
+      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));
+      const currentViewport = page.viewportSize();
+      if (currentViewport?.width !== width || currentViewport?.height !== height) {
+        await page.setViewportSize({ width, height });
+      }
+      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
+      };
+    })
+  );
+  return results;
+}
+async function auditA11y(code, framework, options = {}) {
+  const html = wrapComponent(
+    code,
+    framework,
+    options.darkMode ?? false,
+    options.css ?? "",
+    options.tailwindVersion ?? "3"
+  );
+  const slot = await getSlot("chromium");
+  const { page } = slot;
+  const { width = 1280, height = 800 } = options;
+  const currentViewport = page.viewportSize();
+  if (currentViewport?.width !== width || currentViewport?.height !== height) {
+    await page.setViewportSize({ width, height });
+  }
+  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 function diffComponent(before, after, framework, options = {}) {
+  const [beforeResults, afterResults] = await Promise.all([
+    render(before, framework, { ...options, engines: ["chromium"] }),
+    render(after, framework, { ...options, engines: ["chromium"] })
+  ]);
+  const beforeBuf = Buffer.from(beforeResults[0].image, "base64");
+  const afterBuf = Buffer.from(afterResults[0].image, "base64");
+  const beforePng = PNG.sync.read(beforeBuf);
+  const afterPng = PNG.sync.read(afterBuf);
+  const width = Math.max(beforePng.width, afterPng.width);
+  const height = Math.max(beforePng.height, afterPng.height);
+  const normalizedBefore = new PNG({ width, height });
+  const normalizedAfter = new PNG({ width, height });
+  PNG.bitblt(
+    beforePng,
+    normalizedBefore,
+    0,
+    0,
+    beforePng.width,
+    beforePng.height,
+    0,
+    0
+  );
+  PNG.bitblt(
+    afterPng,
+    normalizedAfter,
+    0,
+    0,
+    afterPng.width,
+    afterPng.height,
+    0,
+    0
+  );
+  const diffPng = new PNG({ width, height });
+  const diffPixels = pixelmatch(
+    normalizedBefore.data,
+    normalizedAfter.data,
+    diffPng.data,
+    width,
+    height,
+    { threshold: 0.1 }
+  );
+  const totalPixels = width * height;
+  return {
+    before: beforeResults[0].image,
+    after: afterResults[0].image,
+    diff: PNG.sync.write(diffPng).toString("base64"),
+    diffPixels,
+    totalPixels,
+    diffPercentage: Math.round(diffPixels / totalPixels * 1e4) / 100
+  };
+}
+async function captureAnimation(code, framework, options = {}) {
+  const { frames = 5, duration = 1e3 } = options;
+  const html = wrapComponent(
+    code,
+    framework,
+    options.darkMode ?? false,
+    options.css ?? "",
+    options.tailwindVersion ?? "3"
+  );
+  const slot = await getSlot("chromium");
+  const { page } = slot;
+  const { width = 1280, height = 800 } = options;
+  const currentViewport = page.viewportSize();
+  if (currentViewport?.width !== width || currentViewport?.height !== height) {
+    await page.setViewportSize({ width, height });
+  }
+  await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+  const interval = duration / (frames - 1);
+  const results = [];
+  for (let i = 0; i < frames; i++) {
+    if (i > 0) {
+      await page.waitForTimeout(interval);
+    }
+    const screenshot = await page.screenshot({ type: "png", fullPage: false });
+    results.push({
+      timestamp: Math.round(i * interval),
+      image: screenshot.toString("base64")
+    });
+  }
+  return results;
+}
+async function renderWithInteractions(code, framework, interactions, options = {}) {
+  const { width = 1280, height = 800 } = options;
+  const html = wrapComponent(
+    code,
+    framework,
+    options.darkMode ?? false,
+    options.css ?? "",
+    options.tailwindVersion ?? "3"
+  );
+  const slot = await getSlot("chromium");
+  const { page } = slot;
+  const currentViewport = page.viewportSize();
+  if (currentViewport?.width !== width || currentViewport?.height !== height) {
+    await page.setViewportSize({ width, height });
+  }
+  await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+  for (const interaction of interactions) {
+    switch (interaction.action) {
+      case "click":
+        if (interaction.selector) {
+          await page.click(interaction.selector);
+        }
+        break;
+      case "hover":
+        if (interaction.selector) {
+          await page.hover(interaction.selector);
+        }
+        break;
+      case "focus":
+        if (interaction.selector) {
+          await page.focus(interaction.selector);
+        }
+        break;
+      case "type":
+        if (interaction.selector && interaction.value) {
+          await page.fill(interaction.selector, interaction.value);
+        }
+        break;
+      case "wait":
+        await page.waitForTimeout(interaction.ms ?? 300);
+        break;
+    }
+  }
+  const screenshot = await page.screenshot({ type: "png", fullPage: true });
+  const metrics = await page.evaluate(() => ({
+    w: document.documentElement.scrollWidth,
+    h: document.documentElement.scrollHeight
+  }));
+  return {
+    image: screenshot.toString("base64"),
+    width: metrics.w,
+    height: metrics.h
+  };
+}
+async function renderGrid(cells, framework, options = {}) {
+  const { columns = Math.min(cells.length, 3) } = options;
+  const cellWidth = options.width ?? 400;
+  const cellHeight = options.height ?? 300;
+  const screenshots = await Promise.all(
+    cells.map(async (cell) => {
+      const [result] = await render(cell.code, framework, {
+        ...options,
+        width: cellWidth,
+        height: cellHeight,
+        engines: ["chromium"]
+      });
+      return Buffer.from(result.image, "base64");
+    })
+  );
+  const rows = Math.ceil(cells.length / columns);
+  const pngs = screenshots.map((buf) => PNG.sync.read(buf));
+  const actualCellWidth = Math.max(...pngs.map((p) => p.width));
+  const actualCellHeight = Math.max(...pngs.map((p) => p.height));
+  const labelHeight = 30;
+  const gridWidth = actualCellWidth * columns;
+  const gridHeight = (actualCellHeight + labelHeight) * rows;
+  const grid = new PNG({ width: gridWidth, height: gridHeight });
+  grid.data.fill(255);
+  for (let i = 0; i < pngs.length; i++) {
+    const col = i % columns;
+    const row = Math.floor(i / columns);
+    const x = col * actualCellWidth;
+    const y = row * (actualCellHeight + labelHeight) + labelHeight;
+    PNG.bitblt(pngs[i], grid, 0, 0, pngs[i].width, pngs[i].height, x, y);
+  }
+  return {
+    image: PNG.sync.write(grid).toString("base64"),
+    width: gridWidth,
+    height: gridHeight,
+    cells: cells.length
+  };
+}
+async function perfAudit(code, framework, options = {}) {
+  const { width = 1280, height = 800 } = options;
+  const html = wrapComponent(
+    code,
+    framework,
+    options.darkMode ?? false,
+    options.css ?? "",
+    options.tailwindVersion ?? "3"
+  );
+  const slot = await getSlot("chromium");
+  const { page } = slot;
+  const currentViewport = page.viewportSize();
+  if (currentViewport?.width !== width || currentViewport?.height !== height) {
+    await page.setViewportSize({ width, height });
+  }
+  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 };
+}
+async function renderMatrix(code, framework, viewports, themes, options = {}) {
+  const combinations = [];
+  for (const viewport of viewports) {
+    for (const theme of themes) {
+      combinations.push({ viewport, theme });
+    }
+  }
+  const results = await Promise.all(
+    combinations.map(async ({ viewport, theme }) => {
+      const [result] = await render(code, framework, {
+        ...options,
+        width: viewport.width,
+        height: viewport.height,
+        darkMode: theme === "dark",
+        engines: ["chromium"],
+        fullPage: true
+      });
+      return {
+        viewport: viewport.label,
+        theme,
+        image: result.image,
+        width: result.width,
+        height: result.height,
+        consoleErrors: result.consoleErrors
+      };
+    })
+  );
+  return results;
+}
+async function diffFromReference(code, framework, referenceImage, options = {}) {
+  const { threshold = 0.1 } = options;
+  const [renderResult] = await render(code, framework, {
+    ...options,
+    engines: ["chromium"]
+  });
+  const renderedBuf = Buffer.from(renderResult.image, "base64");
+  const referenceBuf = Buffer.from(referenceImage, "base64");
+  const renderedPng = PNG.sync.read(renderedBuf);
+  const referencePng = PNG.sync.read(referenceBuf);
+  const width = Math.max(renderedPng.width, referencePng.width);
+  const height = Math.max(renderedPng.height, referencePng.height);
+  const normalizedRendered = new PNG({ width, height });
+  const normalizedReference = new PNG({ width, height });
+  PNG.bitblt(
+    renderedPng,
+    normalizedRendered,
+    0,
+    0,
+    renderedPng.width,
+    renderedPng.height,
+    0,
+    0
+  );
+  PNG.bitblt(
+    referencePng,
+    normalizedReference,
+    0,
+    0,
+    referencePng.width,
+    referencePng.height,
+    0,
+    0
+  );
+  const diffPng = new PNG({ width, height });
+  const diffPixels = pixelmatch(
+    normalizedReference.data,
+    normalizedRendered.data,
+    diffPng.data,
+    width,
+    height,
+    { threshold }
+  );
+  const totalPixels = width * height;
+  const diffPercentage = Math.round(diffPixels / totalPixels * 1e4) / 100;
+  return {
+    rendered: renderResult.image,
+    diff: PNG.sync.write(diffPng).toString("base64"),
+    diffPixels,
+    totalPixels,
+    diffPercentage,
+    passed: diffPercentage === 0
+  };
+}
+async function renderCatalog(files, options = {}) {
+  const results = [];
+  for (const file of files) {
+    try {
+      const [result] = await render(file.code, file.framework, {
+        ...options,
+        engines: ["chromium"]
+      });
+      results.push({
+        path: file.path,
+        framework: file.framework,
+        image: result.image,
+        width: result.width,
+        height: result.height,
+        consoleErrors: result.consoleErrors
+      });
+    } catch {
+      results.push({
+        path: file.path,
+        framework: file.framework,
+        image: "",
+        width: 0,
+        height: 0,
+        consoleErrors: [`Failed to render ${file.path}`]
+      });
+    }
+  }
+  return results;
+}
+var snapshotStore = /* @__PURE__ */ new Map();
+function saveSnapshot(key, image) {
+  snapshotStore.set(key, { image, timestamp: Date.now() });
+}
+function getSnapshot(key) {
+  return snapshotStore.get(key);
+}
+function listSnapshots() {
+  return Array.from(snapshotStore.entries()).map(([key, val]) => ({
+    key,
+    timestamp: val.timestamp
+  }));
+}
+async function shutdown() {
+  for (const slot of pool.values()) {
+    await slot.browser.close().catch(() => {
+    });
+  }
+  pool.clear();
+}
+export {
+  __export,
+  warmup,
+  render,
+  screenshotUrl,
+  auditA11y,
+  diffComponent,
+  captureAnimation,
+  renderWithInteractions,
+  renderGrid,
+  perfAudit,
+  renderMatrix,
+  diffFromReference,
+  renderCatalog,
+  saveSnapshot,
+  getSnapshot,
+  listSnapshots,
+  shutdown
+};