frameshot-mcp 0.11.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-AF64XFKX.js → chunk-RXVC5ZDW.js}

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

package/dist/{chunk-FQ3BVCX7.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,13 +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(
@@ -1499,7 +1540,7 @@ var RenderUseCase = class {
       fallbackReason = "Vite bundler not available";
     }
     const code = readFileSync3(filePath, "utf-8");
-    const results = await this.render(code, framework, options);
+    const results = await this.render(code, extFramework, options);
     return { results, mode: "cdn", fallbackReason };
   }
   async renderInteraction(code, framework, interactions, options = {}) {

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 import {
   createContainer
-} from "./chunk-AF64XFKX.js";
+} from "./chunk-RXVC5ZDW.js";
 import {
   EXT_TO_FRAMEWORK
-} from "./chunk-FQ3BVCX7.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-AF64XFKX.js";
+} from "./chunk-RXVC5ZDW.js";
 import {
   DEVICE_PRESETS,
   EXT_TO_FRAMEWORK,
   __export
-} from "./chunk-FQ3BVCX7.js";
+} from "./chunk-SP7UAIQL.js";
 
 // src/index.ts
 import { execSync } from "child_process";

package/dist/renderer.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frameshot-mcp",
-  "version": "0.11.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",