devlens-mcp 0.1.2 → 0.1.4

package/README.md

@@ -23,12 +23,13 @@ In your project root:
 npx devlens-mcp init
 ```
 
-This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.ts`, and installs the Chromium browser automatically.
+This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.js`, and installs the Chromium browser automatically.
 
-Edit `devlens.config.ts` to map your source files to dev server routes, then restart Claude Code.
+Edit `devlens.config.js` to map your source files to dev server routes, then restart Claude Code.
 
-```typescript
-// devlens.config.ts
+```js
+// devlens.config.js
+/** @type {import('devlens-mcp').DevLensConfig} */
 const config = {
   devServerUrl: 'http://localhost:5173',
   routes: [
@@ -44,7 +45,7 @@ export default config;
 
 - **`.mcp.json`** — registers the devlens MCP server so Claude Code can call the `dl_*` tools
 - **`.claude/skills/devlens.md`** — the skill that tells Claude to automatically capture after every file write, diff before/after significant changes, and run a visual audit before deploying
-- **`devlens.config.ts`** — maps file glob patterns to dev server routes
+- **`devlens.config.js`** — maps file glob patterns to dev server routes
 
 ## Performance
 

package/dist/index.js

@@ -28,7 +28,7 @@ Only call it once per session.
 
 ### Rule 2: Capture after every frontend file write
 After every \`Edit\` or \`Write\` to a \`.tsx\`, \`.jsx\`, \`.css\`, \`.vue\`, or \`.svelte\` file:
-1. Call \`dl_capture\` with either \`route\` (if you know it) or \`filePath\` (auto-resolved from devlens.config.ts)
+1. Call \`dl_capture\` with either \`route\` (if you know it) or \`filePath\` (auto-resolved from devlens.config.js)
 2. Add \`selector\` if you only changed a specific component (keeps the image small and fast)
 3. Look at the returned image \u2014 does it look right?
 4. If something looks wrong (layout broken, text missing, wrong color, overlapping elements), fix it before moving on
@@ -64,7 +64,8 @@ call \`dl_capture\` immediately and show the result.
 - Omit selector for full-page captures (slower, larger image)
 - Prefer element-level captures during iteration, full-page before deploy
 `;
-var CONFIG_TEMPLATE = `// devlens.config.ts \u2014 map your source files to dev server routes
+var CONFIG_TEMPLATE = `// devlens.config.js \u2014 map your source files to dev server routes
+/** @type {import('devlens-mcp').DevLensConfig} */
 const config = {
   devServerUrl: 'http://localhost:5173',
   hmrDebounceMs: 150,
@@ -97,12 +98,12 @@ async function runInit() {
   mkdirSync(skillsDir, { recursive: true });
   writeFileSync(join(skillsDir, "devlens.md"), SKILL_CONTENT);
   console.log("  \u2713 .claude/skills/devlens.md written");
-  const configPath = resolve(cwd, "devlens.config.ts");
+  const configPath = resolve(cwd, "devlens.config.js");
   if (!existsSync(configPath)) {
     writeFileSync(configPath, CONFIG_TEMPLATE);
-    console.log("  \u2713 devlens.config.ts created (edit this to add your routes)");
+    console.log("  \u2713 devlens.config.js created (edit this to add your routes)");
   } else {
-    console.log("  \u2713 devlens.config.ts already exists \u2014 skipped");
+    console.log("  \u2713 devlens.config.js already exists \u2014 skipped");
   }
   console.log("  Installing Chromium browser...");
   const result = spawnSync("npx", ["playwright", "install", "chromium"], { stdio: "inherit", shell: true });
@@ -114,7 +115,7 @@ async function runInit() {
   console.log("");
   console.log("DevLens initialized. Next step:");
   console.log("");
-  console.log("  1. Edit devlens.config.ts to map your pages to routes");
+  console.log("  1. Edit devlens.config.js to map your pages to routes");
   console.log("");
   console.log("  2. Restart Claude Code");
   console.log("");
@@ -134,18 +135,26 @@ var defaults = {
   hmrDebounceMs: 150
 };
 async function loadConfig(cwd = process.cwd()) {
-  const configPath = resolve2(cwd, "devlens.config.ts");
-  try {
-    const jsPath = configPath.replace(/\.ts$/, ".js");
-    const mod = await import(pathToFileURL(jsPath).href);
-    return { ...defaults, ...mod.default };
-  } catch {
-    return {
-      ...defaults,
-      devServerUrl: "http://localhost:5173",
-      routes: []
-    };
+  const candidates = [
+    resolve2(cwd, "devlens.config.js"),
+    resolve2(cwd, "devlens.config.ts")
+  ];
+  for (const configPath of candidates) {
+    try {
+      const mod = await import(pathToFileURL(configPath).href);
+      return { ...defaults, ...mod.default };
+    } catch (err) {
+      const code = err.code;
+      if (code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND") continue;
+      console.error(`[devlens] Failed to load ${configPath}:`, err);
+    }
   }
+  console.warn('[devlens] No devlens.config.js found \u2014 using defaults (routes: []). Run "npx devlens-mcp init" to create one.');
+  return {
+    ...defaults,
+    devServerUrl: "http://localhost:5173",
+    routes: []
+  };
 }
 
 // src/browser/manager.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devlens-mcp",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Real-time visual feedback plugin for Claude Code frontend development",
   "type": "module",
   "main": "dist/index.js",