@rahul_ur/devlink 1.0.10 → 1.0.12

package/bin/cli.mjs

@@ -18,6 +18,71 @@ function exists(p) { return fs.existsSync(p); }
 function readJson(p) { return JSON.parse(fs.readFileSync(p, 'utf8')); }
 function writeJson(p, v) { fs.writeFileSync(p, `${JSON.stringify(v, null, 2)}\n`); }
 
+// Package name -> human-readable framework name, used to give an accurate
+// "devlink doesn't support this yet" message instead of the generic
+// "couldn't find @vitejs/plugin-react import" warning, which wrongly
+// implies there's a manual fix available (there isn't — devlink's inspector
+// hooks in via a Babel plugin specifically on @vitejs/plugin-react).
+const NON_REACT_VITE_PLUGINS = [
+  ['@vitejs/plugin-vue', 'Vue'],
+  ['@vitejs/plugin-vue2', 'Vue 2'],
+  ['@sveltejs/vite-plugin-svelte', 'Svelte'],
+  ['vite-plugin-solid', 'Solid'],
+  ['@preact/preset-vite', 'Preact'],
+  ['vite-plugin-vue2', 'Vue 2'],
+  ['@builder.io/qwik', 'Qwik'],
+];
+
+// Is TypeScript in play for this project? Used to decide the extension for
+// any file we generate from scratch (vite.config.*, devlink.config.*) so we
+// don't hand a plain-JS project a .ts file (which breaks its build unless a
+// TS toolchain is already configured) or vice versa.
+function projectUsesTypeScript() {
+  if (exists(path.join(projectRoot, 'tsconfig.json'))) return true;
+  const pkgPath = path.join(projectRoot, 'package.json');
+  if (!exists(pkgPath)) return false;
+  const pkg = readJson(pkgPath);
+  const all = { ...pkg.dependencies, ...pkg.devDependencies };
+  return Boolean(all['typescript']);
+}
+
+// ─── Bracket matching ───────────────────────────────────────────────────────
+// Small helper for safely editing arbitrary existing config files. Plain
+// string.replace()/regex on a whole file is fragile the moment the thing
+// being matched (e.g. a `react()` call) has its own nested braces — this
+// walks the source char-by-char (skipping over strings/template
+// literals/comments so brackets inside them don't throw off the count) and
+// returns the index of the matching closing bracket for an opening one.
+function findMatchingBracket(src, openIndex, openChar, closeChar) {
+  let depth = 0;
+  let i = openIndex;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '"' || c === "'" || c === '`') {
+      const quote = c;
+      i++;
+      while (i < src.length && src[i] !== quote) {
+        if (src[i] === '\\') i++;
+        i++;
+      }
+    } else if (c === '/' && src[i + 1] === '/') {
+      while (i < src.length && src[i] !== '\n') i++;
+    } else if (c === '/' && src[i + 1] === '*') {
+      i += 2;
+      while (i < src.length && !(src[i] === '*' && src[i + 1] === '/')) i++;
+      i++;
+    } else {
+      if (c === openChar) depth++;
+      else if (c === closeChar) {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+    i++;
+  }
+  return -1;
+}
+
 // ─── .env merging ───────────────────────────────────────────────────────────
 // Sets one or more keys in .env at the project root without touching any
 // other lines already in there (e.g. keys someone set by hand, or ones
@@ -82,19 +147,21 @@ async function promptForApiKeys() {
   console.log('\x1b[36m Optional: cloud model API keys\x1b[0m');
   console.log('\x1b[36m─────────────────────────────────────────────────\x1b[0m');
   console.log('The AI companion works fully offline with Ollama. Add these only');
-  console.log('if you also want Claude or GPT/Codex available in the model picker.');
-  console.log('Leave blank and press Enter to skip either one.\n');
+  console.log('if you also want them available in the model picker.');
+  console.log('Leave any blank and press Enter to skip it.\n');
 
   const rl = createInterface({ input: process.stdin, output: process.stdout });
-  let anthropicKey, openaiKey;
+  let anthropicKey, openaiKey, geminiKey, zenmuxKey;
   try {
     anthropicKey = (await rl.question('  Anthropic API key (Claude) — from https://console.anthropic.com/settings/keys: ')).trim();
     openaiKey = (await rl.question('  OpenAI API key (GPT/Codex) — from https://platform.openai.com/api-keys: ')).trim();
+    geminiKey = (await rl.question('  Google API key (Gemini) — from https://aistudio.google.com/app/apikey: ')).trim();
+    zenmuxKey = (await rl.question('  ZenMux API key (GLM 5.2 + others) — from https://zenmux.ai/settings/keys: ')).trim();
   } finally {
     rl.close();
   }
 
-  if (!anthropicKey && !openaiKey) {
+  if (!anthropicKey && !openaiKey && !geminiKey && !zenmuxKey) {
     log('no keys entered — skipping. You can rerun `devlink setup` anytime to add them.');
     return;
   }
@@ -103,16 +170,18 @@ async function promptForApiKeys() {
   setEnvVars(envPath, {
     ANTHROPIC_API_KEY: anthropicKey,
     OPENAI_API_KEY: openaiKey,
+    GEMINI_API_KEY: geminiKey,
+    ZENMUX_API_KEY: zenmuxKey,
   });
   ensureEnvGitignored();
 
   const examplePath = path.join(projectRoot, '.env.example');
   if (!exists(examplePath)) {
-    fs.writeFileSync(examplePath, 'ANTHROPIC_API_KEY=\nOPENAI_API_KEY=\n');
+    fs.writeFileSync(examplePath, 'ANTHROPIC_API_KEY=\nOPENAI_API_KEY=\nGEMINI_API_KEY=\nZENMUX_API_KEY=\n');
     ok('created .env.example template');
   }
 
-  const added = [anthropicKey && 'Claude', openaiKey && 'GPT/Codex'].filter(Boolean).join(' and ');
+  const added = [anthropicKey && 'Claude', openaiKey && 'GPT/Codex', geminiKey && 'Gemini', zenmuxKey && 'ZenMux'].filter(Boolean).join(', ');
   ok(`saved ${added} API key(s) to .env — restart devlink:bridge to pick them up`);
 }
 
@@ -129,6 +198,38 @@ function detectFramework() {
   return 'unknown';
 }
 
+// When the current directory isn't a recognizable frontend project (e.g.
+// you're standing at the root of a monorepo whose real Vite/Next/CRA app
+// lives in ./frontend or ./apps/web), blindly writing devlink.config.js and
+// a devlink:bridge script *here* would just be clutter in the wrong place.
+// Check one level of subdirectories for a package.json that looks like a
+// real frontend project, so we can point the person at it instead.
+function findFrontendSubdirectories() {
+  const SKIP = new Set(['node_modules', '.git', 'dist', 'build', '.next', '.turbo', '.devlink']);
+  let entries;
+  try {
+    entries = fs.readdirSync(projectRoot, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const candidates = [];
+  for (const entry of entries) {
+    if (!entry.isDirectory() || SKIP.has(entry.name) || entry.name.startsWith('.')) continue;
+    const pkgPath = path.join(projectRoot, entry.name, 'package.json');
+    if (!exists(pkgPath)) continue;
+    try {
+      const pkg = readJson(pkgPath);
+      const all = { ...pkg.dependencies, ...pkg.devDependencies };
+      if (all['vite'] || all['@vitejs/plugin-react'] || all['react-scripts'] || all['next']) {
+        candidates.push(entry.name);
+      }
+    } catch {
+      // Unparsable package.json in that subdir — not a candidate, skip it.
+    }
+  }
+  return candidates;
+}
+
 // ─── Add npm scripts ──────────────────────────────────────────────────────────
 
 function addScripts() {
@@ -147,11 +248,13 @@ function addScripts() {
 // ─── Setup Vite ───────────────────────────────────────────────────────────────
 
 function setupVite() {
-  const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts', 'vite.config.mjs'];
+  const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts', 'vite.config.mjs', 'vite.config.cts', 'vite.config.cjs'];
   const configFile = candidates.find(f => exists(path.join(projectRoot, f)));
 
   if (!configFile) {
-    // Create vite.config.ts from scratch
+    // Create a config from scratch — match extension to whether the project
+    // is actually TypeScript, rather than always assuming .ts.
+    const ext = projectUsesTypeScript() ? 'ts' : 'js';
     const content = `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';
@@ -168,38 +271,176 @@ export default defineConfig({
   ],
 });
 `;
-    fs.writeFileSync(path.join(projectRoot, 'vite.config.ts'), content);
-    ok('created vite.config.ts with devlink config');
+    fs.writeFileSync(path.join(projectRoot, `vite.config.${ext}`), content);
+    ok(`created vite.config.${ext} with devlink config`);
     return;
   }
 
   const configPath = path.join(projectRoot, configFile);
-  let src = fs.readFileSync(configPath, 'utf8');
+  const original = fs.readFileSync(configPath, 'utf8');
 
-  if (src.includes('@rahul_ur/devlink-vite-plugin') || src.includes('@rahul_ur/devlink-babel-plugin')) {
+  if (original.includes('@rahul_ur/devlink-vite-plugin') || original.includes('@rahul_ur/devlink-babel-plugin')) {
     ok(`${configFile} already has devlink config`);
     return;
   }
 
-  // Add import line after last import
-  const importLine = `import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';\n`;
-  const lastImport = src.lastIndexOf('\nimport ');
-  const insertAt = lastImport === -1 ? 0 : src.indexOf('\n', lastImport) + 1;
-  src = src.slice(0, insertAt) + importLine + src.slice(insertAt);
+  // Bail out cleanly (no partial edits) for the one framework variant this
+  // technique can't support: @vitejs/plugin-react-swc compiles with SWC,
+  // not Babel, so a Babel plugin passed through `babel: { plugins }` is
+  // silently ignored. Rather than write a config that looks patched but
+  // does nothing, tell the person up front.
+  if (/@vitejs\/plugin-react-swc/.test(original)) {
+    warn(`${configFile} uses @vitejs/plugin-react-swc, which compiles with SWC and doesn't run Babel plugins.`);
+    warn(`devlink's inspector needs the Babel-based @vitejs/plugin-react instead. Skipping auto-patch — see the README for manual setup options.`);
+    return;
+  }
 
-  // Patch react() call
-  if (src.includes('react()')) {
-    src = src.replace(
-      'react()',
-      `react({\n    babel: {\n      plugins: [devlinkBabelConfig({ root: process.cwd() })].filter(Boolean),\n    },\n  })`
-    );
-    ok(`patched ${configFile} — react() updated`);
-  } else if (src.match(/react\s*\(\s*\{/)) {
-    warn(`Could not auto-patch ${configFile}. Add manually:\n\n  react({ babel: { plugins: [devlinkBabelConfig({ root: process.cwd() })] } })\n`);
+  // Find the local name the React plugin was imported as (usually `react`,
+  // but people alias it — `import reactPlugin from '@vitejs/plugin-react'`).
+  // Also accept CommonJS-style configs (`const react = require('@vitejs/plugin-react')`),
+  // since a plain vite.config.js has no obligation to be ESM.
+  const importMatch =
+    original.match(/import\s+(\w+)\s+from\s+['"]@vitejs\/plugin-react['"]/) ||
+    original.match(/const\s+(\w+)\s*=\s*require\(\s*['"]@vitejs\/plugin-react['"]\s*\)/);
+  if (!importMatch) {
+    const nonReactPlugin = NON_REACT_VITE_PLUGINS.find(([pkg]) => original.includes(pkg));
+    if (nonReactPlugin) {
+      const [, framework] = nonReactPlugin;
+      warn(`${configFile} uses a ${framework} plugin, not @vitejs/plugin-react.`);
+      warn(`devlink's inspector currently only supports React projects (it hooks in via a Babel plugin on @vitejs/plugin-react) — there's no equivalent for ${framework} yet. Skipping auto-patch.`);
+      return;
+    }
+    warn(`Could not find an "import ... from '@vitejs/plugin-react'" (or the CommonJS equivalent) in ${configFile}. Add devlink manually:\n\n  import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';\n  // inside react({ babel: { plugins: [devlinkBabelConfig({ root: process.cwd() })] } })\n`);
+    return;
+  }
+  const reactLocalName = importMatch[1];
+  const isCjsConfig = importMatch[0].trimStart().startsWith('const');
+
+  // Locate the actual call, e.g. `react(...)` or `react (...)`, skipping the
+  // import line itself.
+  const callRegex = new RegExp(`\\b${reactLocalName}\\s*\\(`, 'g');
+  callRegex.lastIndex = importMatch.index + importMatch[0].length;
+  const callMatch = callRegex.exec(original);
+  if (!callMatch) {
+    warn(`Could not find a ${reactLocalName}(...) call in ${configFile} to patch. Add devlink manually — see README.`);
+    return;
   }
 
-  fs.writeFileSync(configPath, src);
-  ok(`updated ${configFile}`);
+  const openParenIndex = callMatch.index + callMatch[0].length - 1;
+  const closeParenIndex = findMatchingBracket(original, openParenIndex, '(', ')');
+  if (closeParenIndex === -1) {
+    warn(`Could not parse the ${reactLocalName}(...) call in ${configFile} (unbalanced parens?). Add devlink manually — see README.`);
+    return;
+  }
+
+  const argsText = original.slice(openParenIndex + 1, closeParenIndex);
+  const trimmedArgs = argsText.trim();
+  const devlinkPluginCall = `devlinkBabelConfig({ root: process.cwd() })`;
+
+  // We compute a single (insertAt, textToInsert) point-insertion into
+  // `original` — deliberately avoiding building up nested replacement
+  // strings with their own relative offsets, since re-deriving absolute
+  // positions from those is exactly where off-by-one bugs creep in.
+  let insertAt, insertText;
+
+  if (trimmedArgs === '') {
+    // react() — bare call, safe to fill in from scratch.
+    insertAt = openParenIndex + 1;
+    insertText = `{\n    babel: {\n      plugins: [${devlinkPluginCall}].filter(Boolean),\n    },\n  }`;
+    // This is a full replacement of the (empty) args, not an insertion —
+    // handle it as a range replace below via closeParenIndex.
+    const patchedBare = original.slice(0, insertAt) + insertText + original.slice(closeParenIndex);
+    finishPatch(patchedBare);
+    return;
+  }
+
+  if (!trimmedArgs.startsWith('{')) {
+    // react(someVariable) or react(...spread) — a bare identifier/expression
+    // we can't safely rewrite without risking breaking the config.
+    warn(`${reactLocalName}(...) in ${configFile} is called with something other than a literal object, so it can't be auto-patched safely. Add devlink manually:\n\n  babel: { plugins: [${devlinkPluginCall}].filter(Boolean) }\n\ninside whatever object is passed to ${reactLocalName}().`);
+    return;
+  }
+
+  // react({ ...existing options... }) — edit the object in place instead of
+  // clobbering whatever's already there (fast refresh options, other babel
+  // plugins, jsxImportSource, etc). All positions below are absolute
+  // offsets into `original`.
+  const objStart = openParenIndex + 1 + argsText.indexOf('{');
+  const objEnd = findMatchingBracket(original, objStart, '{', '}');
+  if (objEnd === -1) {
+    warn(`Could not parse the options object passed to ${reactLocalName}(...) in ${configFile}. Add devlink manually — see README.`);
+    return;
+  }
+
+  const babelKeyMatch = original.slice(objStart, objEnd).match(/\bbabel\s*:\s*\{/);
+  if (!babelKeyMatch) {
+    // No babel key at all — insert one right after the object's opening brace.
+    insertAt = objStart + 1;
+    insertText = `\n    babel: {\n      plugins: [${devlinkPluginCall}].filter(Boolean),\n    },`;
+    finishPatch(original.slice(0, insertAt) + insertText + original.slice(insertAt));
+    return;
+  }
+
+  const babelObjStart = objStart + babelKeyMatch.index + babelKeyMatch[0].length - 1;
+  const babelObjEnd = findMatchingBracket(original, babelObjStart, '{', '}');
+  if (babelObjEnd === -1) {
+    warn(`Could not parse the existing babel option in ${configFile}. Add devlink manually — see README.`);
+    return;
+  }
+
+  const pluginsKeyMatch = original.slice(babelObjStart, babelObjEnd).match(/\bplugins\s*:\s*\[/);
+  if (!pluginsKeyMatch) {
+    // babel: { ... } exists but has no plugins array yet.
+    insertAt = babelObjStart + 1;
+    insertText = `\n      plugins: [${devlinkPluginCall}].filter(Boolean),`;
+    finishPatch(original.slice(0, insertAt) + insertText + original.slice(insertAt));
+    return;
+  }
+
+  // babel.plugins already exists (e.g. another tool's babel plugin) —
+  // append devlink alongside it rather than overwrite it.
+  const arrStart = babelObjStart + pluginsKeyMatch.index + pluginsKeyMatch[0].length - 1;
+  const arrEnd = findMatchingBracket(original, arrStart, '[', ']');
+  if (arrEnd === -1) {
+    warn(`Could not parse the existing babel.plugins array in ${configFile}. Add devlink manually — see README.`);
+    return;
+  }
+  const arrInner = original.slice(arrStart + 1, arrEnd);
+  insertAt = arrEnd; // insert just before the closing ']'
+  insertText = arrInner.trim() === ''
+    ? `${devlinkPluginCall}`
+    : `${arrInner.trimEnd().endsWith(',') ? '' : ','}\n      ${devlinkPluginCall},`;
+  finishPatch(original.slice(0, insertAt) + insertText + original.slice(insertAt));
+  return;
+
+  function finishPatch(patched) {
+
+  // Only now that the react() call itself is confirmed patchable do we add
+  // the import — avoids leaving a dangling unused import if patching fails.
+  // Match the file's existing module style: mixing a top-level `import`
+  // into an otherwise-CommonJS (`require`/`module.exports`) config forces
+  // Node to load the whole file as ESM, at which point `require` is
+  // undefined and the config throws at load time — a worse outcome than
+  // not patching at all.
+  let insertAt = 0;
+  let importLine;
+  if (isCjsConfig) {
+    importLine = `const { devlinkBabelConfig } = require('@rahul_ur/devlink-vite-plugin');\n`;
+    const requireLines = [...patched.matchAll(/^.*\brequire\(['"][^'"]+['"]\).*$/gm)];
+    if (requireLines.length > 0) {
+      const last = requireLines[requireLines.length - 1];
+      insertAt = last.index + last[0].length + 1;
+    }
+  } else {
+    importLine = `import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';\n`;
+    const lastImport = patched.lastIndexOf('\nimport ');
+    insertAt = lastImport === -1 ? 0 : patched.indexOf('\n', lastImport) + 1;
+  }
+  patched = patched.slice(0, insertAt) + importLine + patched.slice(insertAt);
+
+  fs.writeFileSync(configPath, patched);
+    ok(`patched ${configFile} — ${reactLocalName}() now runs devlink's babel plugin`);
+  }
 }
 
 // ─── Setup Next.js ────────────────────────────────────────────────────────────
@@ -261,21 +502,27 @@ function setupCra() {
 // ─── Generate devlink.config.ts ───────────────────────────────────────────────
 
 function generateConfig() {
-  const configPath = path.join(projectRoot, 'devlink.config.ts');
-  if (exists(configPath)) { ok('devlink.config.ts already exists'); return; }
+  const candidates = ['devlink.config.ts', 'devlink.config.js', 'devlink.config.mts', 'devlink.config.mjs', 'devlink.config.cts', 'devlink.config.cjs'];
+  const existingConfig = candidates.find(f => exists(path.join(projectRoot, f)));
+  if (existingConfig) { ok(`${existingConfig} already exists`); return; }
 
-  const root = projectRoot.replace(/\\/g, '/');
-  const srcDir = exists(path.join(projectRoot, 'src')) ? `${root}/src` : root;
+  const ext = projectUsesTypeScript() ? 'ts' : 'js';
+  const configPath = path.join(projectRoot, `devlink.config.${ext}`);
 
-  fs.writeFileSync(configPath, `// devlink.config.ts — edit projectRoot and rootPath for your project
+  // Use relative paths, not absolute filesystem paths — this file is meant
+  // to be committed, and an absolute path baked in here would be wrong the
+  // moment anyone else on the team (or CI) checks the project out.
+  const rootPath = exists(path.join(projectRoot, 'src')) ? './src' : '.';
+
+  fs.writeFileSync(configPath, `// devlink.config.${ext} — edit rootPath if your source lives somewhere other than ./src
 export const devlinkConfig = {
-  projectRoot: '${root}',
-  rootPath: '${srcDir}',
+  projectRoot: '.',
+  rootPath: '${rootPath}',
   defaultDocked: true,
   dockedWidth: 460,
 };
 `);
-  ok('created devlink.config.ts');
+  ok(`created devlink.config.${ext}`);
 }
 
 // ─── Print main.tsx instructions ──────────────────────────────────────────────
@@ -343,9 +590,15 @@ function printInstructions(framework) {
     )
   }
 
-  ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode><Root /></React.StrictMode>
-  )`);
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <Root />
+    </React.StrictMode>,
+  );
+}`);
   }
 
   console.log('\nThis keeps the AI companion, editor, and inspector out of your production');
@@ -363,6 +616,21 @@ async function runSetup() {
   const framework = detectFramework();
   log(`detected framework: ${framework}`);
 
+  if (framework === 'unknown') {
+    const candidates = findFrontendSubdirectories();
+    if (candidates.length > 0) {
+      warn(`No frontend framework detected at ${projectRoot} — this looks like it might be a monorepo root.`);
+      if (candidates.length === 1) {
+        warn(`Found what looks like a frontend project in ./${candidates[0]}. Try running devlink setup from there instead:\n\n  cd ${candidates[0]} && npx devlink setup\n`);
+      } else {
+        warn(`Found possible frontend projects in: ${candidates.map(c => `./${c}`).join(', ')}. Re-run devlink setup from inside the right one.`);
+      }
+      // Deliberately stop here rather than writing devlink.config.js /
+      // package.json scripts at a root that isn't actually the app.
+      return;
+    }
+  }
+
   addScripts();
 
   if (framework === 'vite')        setupVite();

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@rahul_ur/devlink",
-  "version": "1.0.10",
-  "description": "Click any element in your browser \u2192 jump to source code \u2192 edit \u2192 UI updates live. One command setup for Vite, Next.js and CRA.",
+  "version": "1.0.12",
+  "description": "Click any element in your browser → jump to source code → edit → UI updates live. One command setup for Vite, Next.js and CRA.",
   "main": "index.js",
+  "type": "module",
   "bin": {
     "devlink": "./bin/cli.mjs",
     "devlink-setup": "./bin/cli.mjs"
   },
   "files": [
     "bin",
-    "templates",
     "index.js",
     "index.d.ts",
     "README.md",
@@ -42,10 +42,10 @@
   },
   "homepage": "https://github.com/rahul_ur/devlink#readme",
   "dependencies": {
-    "@rahul_ur/devlink-bridge": "^1.0.3",
-    "@rahul_ur/devlink-studio": "^1.0.6",
-    "@rahul_ur/devlink-babel-plugin": "^1.0.5",
-    "@rahul_ur/devlink-vite-plugin": "^1.0.7"
+    "@rahul_ur/devlink-babel-plugin":"1.0.7",
+    "@rahul_ur/devlink-bridge": "1.0.4",
+    "@rahul_ur/devlink-studio": "1.0.7",
+    "@rahul_ur/devlink-vite-plugin": "1.0.7"
   },
   "engines": {
     "node": ">=18.0.0"