frameshot-mcp 0.10.0 → 0.11.1

package/README.md

@@ -53,7 +53,7 @@ Two lines. Auto-detects changed components. Posts before/after/diff screenshots
 - uses: actions/checkout@v7
   with:
     fetch-depth: 0
-- uses: kamegoro/frameshot@v0.8.0
+- uses: kamegoro/frameshot@v0.11.0
 ```
 
 <p align="center">
@@ -70,7 +70,7 @@ Changed `.tsx`, `.jsx`, `.vue`, `.svelte`, `.astro`, `.mdx` files detected autom
 <summary>Options</summary>
 
 ```yaml
-- uses: kamegoro/frameshot@v0.8.0
+- uses: kamegoro/frameshot@v0.11.0
   with:
     paths: "./src/components/*.tsx"       # default: auto-detect
     extensions: ".jsx,.tsx,.vue"          # default: .jsx,.tsx,.vue,.svelte,.astro,.mdx
@@ -95,6 +95,32 @@ render_file("src/components/Dashboard.tsx")
 
 Resolves your project's real imports, Tailwind config, CSS Modules, and path aliases — not a CDN polyfill.
 
+### Works out of the box with 16 frameworks
+
+| Meta-frameworks | Core libraries |
+|---|---|
+| Next.js, Nuxt, SvelteKit, SolidStart | React, Vue, Svelte |
+| Remix / React Router 7, Gatsby | Solid, Preact |
+| Qwik, Astro, Vike | Lit / Web Components |
+
+Auto-detected from `package.json`. No config needed for the common case. Framework-specific imports (`next/navigation`, `$app/stores`, `useLoaderData`, …) are stubbed automatically so components render in isolation.
+
+### Mock API calls
+
+Components that fetch data from `/api/...` render in their loaded state instead of showing a spinner:
+
+```
+render_file({
+  path: "src/components/UserList.tsx",
+  mock: {
+    "/api/users": [{ id: 1, name: "Alice" }],
+    "/api/posts/*": { status: 200, body: { data: [] } },
+  },
+})
+```
+
+Pattern syntax: path (`/api/users`), glob (`**/api/*`), or full URL.
+
 ---
 
 ## Using with Claude

package/dist/{chunk-6OTGZDUU.js → chunk-RXVC5ZDW.js}

@@ -10,7 +10,7 @@ import {
   SnapshotStore,
   SnapshotUseCase,
   ViteBundler
-} from "./chunk-WACVDBUF.js";
+} from "./chunk-SP7UAIQL.js";
 
 // src/use-cases/watch.ts
 import { watch } from "chokidar";

package/dist/{chunk-WACVDBUF.js → chunk-SP7UAIQL.js}

@@ -351,7 +351,7 @@ var ProjectDetector = class {
 
 // src/infrastructure/vite-bundler.ts
 import { existsSync as existsSync4 } from "fs";
-import { createRequire } from "module";
+import { createRequire as createRequire2 } from "module";
 import { dirname as dirname2, join as join18, resolve as resolve2 } from "path";
 import { fileURLToPath } from "url";
 
@@ -360,6 +360,7 @@ import { join as join3 } from "path";
 
 // src/infrastructure/adapters/helpers.ts
 import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { createRequire } from "module";
 import { join as join2 } from "path";
 function hasDep(pkgPath, names) {
   if (!existsSync2(pkgPath)) return false;
@@ -388,6 +389,20 @@ async function loadPlugin(pkg, fnName) {
   }
   return [];
 }
+async function loadPluginFromProject(projectRoot, pkg, fnName) {
+  try {
+    const require2 = createRequire(join2(projectRoot, "package.json"));
+    const resolvedPath = require2.resolve(pkg);
+    const mod = await import(`file://${resolvedPath}`);
+    const candidate = fnName ? mod[fnName] : mod.default ?? mod;
+    if (typeof candidate === "function") {
+      const result = candidate();
+      return Array.isArray(result) ? result : [result];
+    }
+  } catch {
+  }
+  return loadPlugin(pkg, fnName);
+}
 function loadReactPlugin() {
   return loadPlugin("@vitejs/plugin-react");
 }
@@ -417,13 +432,21 @@ var AstroAdapter = class {
     if (hasInstalled(projectRoot, "react"))
       plugins.push(...await loadReactPlugin());
     if (hasInstalled(projectRoot, "vue"))
-      plugins.push(...await loadPlugin("@vitejs/plugin-vue"));
+      plugins.push(
+        ...await loadPluginFromProject(projectRoot, "@vitejs/plugin-vue")
+      );
     if (hasInstalled(projectRoot, "svelte"))
       plugins.push(
-        ...await loadPlugin("@sveltejs/vite-plugin-svelte", "svelte")
+        ...await loadPluginFromProject(
+          projectRoot,
+          "@sveltejs/vite-plugin-svelte",
+          "svelte"
+        )
       );
     if (hasInstalled(projectRoot, "solid-js"))
-      plugins.push(...await loadPlugin("vite-plugin-solid"));
+      plugins.push(
+        ...await loadPluginFromProject(projectRoot, "vite-plugin-solid")
+      );
     return plugins;
   }
   useFrameshotVite() {
@@ -482,15 +505,25 @@ var GenericAdapter = class {
     if (hasInstalled(projectRoot, "react"))
       plugins.push(...await loadReactPlugin());
     if (hasInstalled(projectRoot, "vue"))
-      plugins.push(...await loadPlugin("@vitejs/plugin-vue"));
+      plugins.push(
+        ...await loadPluginFromProject(projectRoot, "@vitejs/plugin-vue")
+      );
     if (hasInstalled(projectRoot, "svelte"))
       plugins.push(
-        ...await loadPlugin("@sveltejs/vite-plugin-svelte", "svelte")
+        ...await loadPluginFromProject(
+          projectRoot,
+          "@sveltejs/vite-plugin-svelte",
+          "svelte"
+        )
       );
     if (hasInstalled(projectRoot, "solid-js"))
-      plugins.push(...await loadPlugin("vite-plugin-solid"));
+      plugins.push(
+        ...await loadPluginFromProject(projectRoot, "vite-plugin-solid")
+      );
     if (hasInstalled(projectRoot, "preact"))
-      plugins.push(...await loadPlugin("@preact/preset-vite"));
+      plugins.push(
+        ...await loadPluginFromProject(projectRoot, "@preact/preset-vite")
+      );
     return plugins;
   }
   useFrameshotVite() {
@@ -588,8 +621,8 @@ var NuxtAdapter = class {
   getOptimizeDeps(_root) {
     return ["vue"];
   }
-  async getPlugins(_root) {
-    return loadPlugin("@vitejs/plugin-vue");
+  async getPlugins(root) {
+    return loadPluginFromProject(root, "@vitejs/plugin-vue");
   }
   useFrameshotVite() {
     return true;
@@ -743,11 +776,15 @@ var SvelteAdapter = class {
   getOptimizeDeps() {
     return [];
   }
-  async getPlugins(_root) {
-    return loadPlugin("@sveltejs/vite-plugin-svelte", "svelte");
+  async getPlugins(root) {
+    return loadPluginFromProject(
+      root,
+      "@sveltejs/vite-plugin-svelte",
+      "svelte"
+    );
   }
-  useFrameshotVite() {
-    return true;
+  useFrameshotVite(projectRoot) {
+    return projectRoot ? !hasInstalled(projectRoot, "vite") : false;
   }
   skipProjectConfig() {
     return true;
@@ -771,11 +808,15 @@ var SvelteKitAdapter = class {
   getOptimizeDeps(_root) {
     return [];
   }
-  async getPlugins(_root) {
-    return loadPlugin("@sveltejs/vite-plugin-svelte", "svelte");
+  async getPlugins(root) {
+    return loadPluginFromProject(
+      root,
+      "@sveltejs/vite-plugin-svelte",
+      "svelte"
+    );
   }
-  useFrameshotVite() {
-    return true;
+  useFrameshotVite(projectRoot) {
+    return projectRoot ? !hasInstalled(projectRoot, "vite") : false;
   }
   skipProjectConfig() {
     return true;
@@ -861,8 +902,8 @@ var VueAdapter = class {
   getOptimizeDeps() {
     return ["vue"];
   }
-  async getPlugins(_root) {
-    return loadPlugin("@vitejs/plugin-vue");
+  async getPlugins(root) {
+    return loadPluginFromProject(root, "@vitejs/plugin-vue");
   }
   useFrameshotVite() {
     return true;
@@ -910,7 +951,7 @@ var ViteBundler = class {
     const absPath = resolve2(filePath);
     const project = options.projectRoot ? this.detector.detect(join18(options.projectRoot, "package.json")) : this.detector.detect(absPath);
     const adapter = selectAdapter(project.root);
-    if (!project.hasVite && !adapter.useFrameshotVite()) {
+    if (!project.hasVite && !adapter.useFrameshotVite(project.root)) {
       throw new Error(
         `Vite not found in ${project.root}. Install vite: npm install -D vite`
       );
@@ -988,9 +1029,10 @@ try {
       case "solid":
         return `${cssImport}
 import { render } from "solid-js/web";
+import { createComponent } from "solid-js";
 import Component from "${componentPath}";
 const props = ${propsJson};
-render(() => Component(props), document.getElementById("app"));
+render(() => createComponent(Component, props), document.getElementById("app"));
 `;
       case "preact":
         return `${cssImport}
@@ -1010,7 +1052,7 @@ document.getElementById("app").innerHTML = html;
   async ensureServer(project, adapter) {
     const existing = this.servers.get(project.root);
     if (existing) return existing;
-    const vite = adapter.useFrameshotVite() ? await this.importFrameshotVite() : await this.importVite(project.root);
+    const vite = adapter.useFrameshotVite(project.root) ? await this.importFrameshotVite() : await this.importVite(project.root);
     if (!vite) {
       throw new Error(`Failed to import vite for ${project.root}`);
     }
@@ -1108,7 +1150,7 @@ document.getElementById("app").innerHTML = html;
   }
   async importFrameshotVite() {
     try {
-      const requireFromHere = createRequire(import.meta.url);
+      const requireFromHere = createRequire2(import.meta.url);
       const vitePath = requireFromHere.resolve("vite");
       const mod = await import(vitePath);
       if (mod && typeof mod === "object" && "createServer" in mod) {
@@ -1127,7 +1169,7 @@ document.getElementById("app").innerHTML = html;
   }
   async importVite(projectRoot) {
     try {
-      const require2 = createRequire(join18(projectRoot, "package.json"));
+      const require2 = createRequire2(join18(projectRoot, "package.json"));
       const vitePath = require2.resolve("vite");
       const mod = await import(vitePath);
       if (mod && typeof mod === "object" && "createServer" in mod) {
@@ -1139,7 +1181,7 @@ document.getElementById("app").innerHTML = html;
   }
   hasPackage(projectRoot, name) {
     try {
-      const require2 = createRequire(join18(projectRoot, "package.json"));
+      const require2 = createRequire2(join18(projectRoot, "package.json"));
       require2.resolve(name);
       return true;
     } catch {
@@ -1475,12 +1517,12 @@ var RenderUseCase = class {
   async renderFile(filePath, options = {}) {
     const opts = this.resolveOptions(options);
     const ext = extname2(filePath).toLowerCase();
-    const framework = EXT_TO_FRAMEWORK[ext] ?? "react";
+    const extFramework = EXT_TO_FRAMEWORK[ext] ?? "react";
+    let fallbackReason;
     if (this.viteBundler) {
       try {
         const { url } = await this.viteBundler.getUrl(filePath, {
           props: options.props,
-          framework,
           projectRoot: options.projectRoot
         });
         const results2 = await Promise.all(
@@ -1488,16 +1530,18 @@ var RenderUseCase = class {
         );
         return { results: results2, mode: "vite" };
       } catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
+        fallbackReason = err instanceof Error ? err.message : String(err);
         process.stderr.write(
-          `[frameshot] Vite pipeline failed (${msg}), falling back to CDN
+          `[frameshot] Vite pipeline failed (${fallbackReason}), falling back to CDN
 `
         );
       }
+    } else {
+      fallbackReason = "Vite bundler not available";
     }
     const code = readFileSync3(filePath, "utf-8");
-    const results = await this.render(code, framework, options);
-    return { results, mode: "cdn" };
+    const results = await this.render(code, extFramework, options);
+    return { results, mode: "cdn", fallbackReason };
   }
   async renderInteraction(code, framework, interactions, options = {}) {
     const opts = this.resolveOptions(options);

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 import {
   createContainer
-} from "./chunk-6OTGZDUU.js";
+} from "./chunk-RXVC5ZDW.js";
 import {
   EXT_TO_FRAMEWORK
-} from "./chunk-WACVDBUF.js";
+} from "./chunk-SP7UAIQL.js";
 
 // src/cli.ts
 import { mkdirSync } from "fs";

package/dist/index.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 import {
   createContainer
-} from "./chunk-6OTGZDUU.js";
+} from "./chunk-RXVC5ZDW.js";
 import {
   DEVICE_PRESETS,
   EXT_TO_FRAMEWORK,
   __export
-} from "./chunk-WACVDBUF.js";
+} from "./chunk-SP7UAIQL.js";
 
 // src/index.ts
 import { execSync } from "child_process";
@@ -14907,19 +14907,25 @@ function registerRenderFileTools(server2, useCase) {
         mock
       }) => {
         const start = performance.now();
-        const { results, mode } = await useCase.renderFile(path, {
-          props,
-          viewport: { width, height },
-          fullPage: true,
-          engines: ["chromium"],
-          darkMode,
-          tailwindVersion,
-          projectRoot,
-          mock
-        });
+        const { results, mode, fallbackReason } = await useCase.renderFile(
+          path,
+          {
+            props,
+            viewport: { width, height },
+            fullPage: true,
+            engines: ["chromium"],
+            darkMode,
+            tailwindVersion,
+            projectRoot,
+            mock
+          }
+        );
         const elapsed = Math.round(performance.now() - start);
         const ext = extname(path).toLowerCase();
         const framework = EXT_TO_FRAMEWORK[ext] ?? "react";
+        const fallbackNote = mode === "cdn" && fallbackReason ? `
+\u2139\uFE0F Fell back to CDN pipeline: ${fallbackReason}
+   Imports from node_modules may not resolve. To fix: install vite as a devDep and add a minimal vite.config.` : "";
         const content = results.flatMap((r) => [
           {
             type: "image",
@@ -14930,7 +14936,7 @@ function registerRenderFileTools(server2, useCase) {
             type: "text",
             text: `[${mode}/${framework}] ${r.width}x${r.height} (${elapsed}ms)${r.consoleErrors.length ? `
 \u26A0\uFE0F Console errors:
-${r.consoleErrors.join("\n")}` : ""}`
+${r.consoleErrors.join("\n")}` : ""}${fallbackNote}`
           }
         ]);
         return { content };
@@ -15569,21 +15575,9 @@ function registerAllTools(server2, useCases) {
 
 // src/index.ts
 var container = createContainer();
-async function ensureBrowser() {
-  try {
-    await container.pool.warmup(["chromium"]);
-  } catch {
-    try {
-      execSync("npx playwright install chromium", { stdio: "pipe" });
-      await container.pool.warmup(["chromium"]);
-    } catch {
-    }
-  }
-}
-await ensureBrowser();
 var server = new McpServer({
   name: "frameshot",
-  version: "0.8.0"
+  version: "0.10.0"
 });
 registerAllTools(server, {
   render: container.renderUseCase,
@@ -15596,6 +15590,18 @@ registerAllTools(server, {
 });
 var transport = new StdioServerTransport();
 await server.connect(transport);
+void (async () => {
+  try {
+    await container.pool.warmup(["chromium"]);
+  } catch {
+    try {
+      execSync("npx playwright install chromium", { stdio: "pipe" });
+      await container.pool.warmup(["chromium"]).catch(() => {
+      });
+    } catch {
+    }
+  }
+})();
 process.on("SIGINT", async () => {
   await container.shutdown();
   process.exit(0);

package/dist/renderer.d.ts

@@ -218,6 +218,8 @@ declare class RenderUseCase {
     renderFile(filePath: string, options?: Partial<FileRenderOptions>): Promise<{
         results: ScreenshotResult[];
         mode: "vite" | "cdn";
+        /** If we fell back to CDN, the reason the Vite pipeline was skipped. */
+        fallbackReason?: string;
     }>;
     renderInteraction(code: string, framework: Framework, interactions: Interaction[], options?: Partial<RenderOptions>): Promise<{
         image: string;

package/dist/renderer.js

@@ -13,7 +13,7 @@ import {
   SnapshotStore,
   SnapshotUseCase,
   ViteBundler
-} from "./chunk-WACVDBUF.js";
+} from "./chunk-SP7UAIQL.js";
 export {
   AuditUseCase,
   BrowserPool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frameshot-mcp",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Zero-config visual testing for AI agents. Render project components with full Vite dependency resolution — no stories, no config.",
   "type": "module",
   "main": "dist/index.js",

package/scripts/render-changed.mjs

@@ -259,12 +259,17 @@ async function main() {
     try {
       // Render current (after) version
       console.log(`  Rendering (after): ${filePath}`);
-      const { results: afterResults, mode } = await renderUseCase.renderFile(
-        filePath,
-        renderOpts,
-      );
+      const {
+        results: afterResults,
+        mode,
+        fallbackReason,
+      } = await renderUseCase.renderFile(filePath, renderOpts);
       const afterResult = afterResults[0];
 
+      if (mode === "cdn" && fallbackReason) {
+        console.log(`    ℹ️  CDN fallback: ${fallbackReason}`);
+      }
+
       const afterPath = join(outputDir, `${safeName}_after.png`);
       writeFileSync(afterPath, Buffer.from(afterResult.image, "base64"));