@ahmednawaz/crank 0.2.5 → 0.2.7

package/bin/crank.js

@@ -710,12 +710,9 @@ async function main() {
     });
   }
 
-  // One-shot parity: setup/default always try inject on React apps (idempotent).
-  if (
-    (command === 'init' || command === 'run') &&
-    detectEnv.hasReact &&
-    flags.mcp !== false
-  ) {
+  // One-shot: always try <Crank /> inject (idempotent). Do not gate on hasReact —
+  // root package.json often omits react in monorepos / Replit layouts.
+  if ((command === 'init' || command === 'run') && flags.mcp !== false) {
     const injectResult = injectCrank(projectRoot, { install: true });
     initResult = initResult || { wrote: [], projectRoot };
     initResult.inject = injectResult;

package/lib/detect.js

@@ -123,6 +123,91 @@ function packageHasDep(pkg, name) {
   );
 }
 
+const REACT_DEP_NAMES = [
+  'react',
+  'react-dom',
+  '@vitejs/plugin-react',
+  '@vitejs/plugin-react-swc',
+  'next'
+];
+
+const REACT_ENTRY_HINTS = [
+  'src/main.tsx',
+  'src/main.jsx',
+  'src/index.tsx',
+  'src/index.jsx',
+  'client/src/main.tsx',
+  'app/main.tsx',
+  'main.tsx',
+  'main.jsx',
+  'index.tsx',
+  'index.jsx'
+];
+
+function packageLooksLikeReact(pkg) {
+  return REACT_DEP_NAMES.some((name) => packageHasDep(pkg, name));
+}
+
+function dirHasNextConfig(dir) {
+  return (
+    exists(path.join(dir, 'next.config.js')) ||
+    exists(path.join(dir, 'next.config.mjs')) ||
+    exists(path.join(dir, 'next.config.ts'))
+  );
+}
+
+function dirHasReactEntryHint(dir) {
+  return REACT_ENTRY_HINTS.some((rel) => exists(path.join(dir, rel)));
+}
+
+/**
+ * True when this directory (or a common app child) looks like a React app.
+ * Root package.json often omits react in monorepos / Replit multi-package layouts.
+ */
+function detectHasReact(projectRoot, packageJson, viteConfig) {
+  if (packageLooksLikeReact(packageJson) || dirHasNextConfig(projectRoot)) {
+    return true;
+  }
+  if (dirHasReactEntryHint(projectRoot)) {
+    return true;
+  }
+
+  const dirs = new Set([projectRoot]);
+  for (const sub of APP_DIR_CANDIDATES) {
+    if (sub === '.') continue;
+    dirs.add(path.join(projectRoot, sub));
+  }
+  if (viteConfig) {
+    dirs.add(path.dirname(viteConfig));
+  }
+
+  for (const dir of dirs) {
+    if (!exists(dir) || dir === projectRoot) continue;
+    const pkg = readJson(path.join(dir, 'package.json'), null);
+    if (packageLooksLikeReact(pkg) || dirHasNextConfig(dir) || dirHasReactEntryHint(dir)) {
+      return true;
+    }
+  }
+
+  // Vite + JSX plugin import in config is a strong React signal
+  if (viteConfig && exists(viteConfig)) {
+    try {
+      const src = fs.readFileSync(viteConfig, 'utf8');
+      if (
+        /@vitejs\/plugin-react/.test(src) ||
+        /\bplugin-react\b/.test(src) ||
+        /from ['"]react['"]/.test(src)
+      ) {
+        return true;
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  return false;
+}
+
 function detectEnvironment(projectRoot) {
   const env = process.env;
   const isReplit = Boolean(
@@ -134,16 +219,13 @@ function detectEnvironment(projectRoot) {
     : null;
   const viteConfig = findViteConfig(projectRoot);
   const hasVite = Boolean(viteConfig) || packageHasDep(packageJson, 'vite');
-  const hasReact =
-    packageHasDep(packageJson, 'react') ||
-    exists(path.join(projectRoot, 'next.config.js')) ||
-    exists(path.join(projectRoot, 'next.config.mjs')) ||
-    exists(path.join(projectRoot, 'next.config.ts'));
+  const hasReact = detectHasReact(projectRoot, packageJson, viteConfig);
   const hasNext =
     packageHasDep(packageJson, 'next') ||
-    exists(path.join(projectRoot, 'next.config.js')) ||
-    exists(path.join(projectRoot, 'next.config.mjs')) ||
-    exists(path.join(projectRoot, 'next.config.ts'));
+    dirHasNextConfig(projectRoot) ||
+    [...APP_DIR_CANDIDATES]
+      .filter((s) => s !== '.')
+      .some((sub) => dirHasNextConfig(path.join(projectRoot, sub)));
   const hasWebpack =
     packageHasDep(packageJson, 'webpack') ||
     exists(path.join(projectRoot, 'webpack.config.js')) ||
@@ -182,6 +264,8 @@ module.exports = {
   readJson,
   writeJson,
   detectEnvironment,
+  detectHasReact,
+  packageLooksLikeReact,
   findViteConfig,
   VITE_CONFIG_NAMES,
   APP_DIR_CANDIDATES

package/lib/init.js

@@ -12,7 +12,7 @@ const {
 
 const PACKAGE_ROOT = path.resolve(__dirname, '..');
 const { resolveUrls } = require('./urls');
-const { installCrankPackage } = require('./wire-react');
+const { installCrankPackage, findEntry } = require('./wire-react');
 
 function ensureGitignore(projectRoot) {
   const file = path.join(projectRoot, '.gitignore');
@@ -187,6 +187,98 @@ module.exports = {
   return stubPath;
 }
 
+const NODE_IMPORT_SPECS = [
+  { re: /import\s+\{\s*createRequire\s*\}\s+from\s+['"]node:module['"]\s*;?/, line: "import { createRequire } from 'node:module'" },
+  { re: /import\s+\{\s*existsSync\s*\}\s+from\s+['"]node:fs['"]\s*;?/, line: "import { existsSync } from 'node:fs'" },
+  { re: /import\s+\{\s*fileURLToPath\s*\}\s+from\s+['"]node:url['"]\s*;?/, line: "import { fileURLToPath } from 'node:url'" }
+];
+
+function hasCrankVitePatch(source) {
+  return (
+    /_crankPluginPath/.test(source) ||
+    /vite-plugin\.cjs/.test(source) ||
+    /Crank Vite plugin/.test(source) ||
+    (/\bcrank\s*\?\s*\[\s*crank\s*\(\s*\)\s*\]/.test(source) && /plugins/.test(source)) ||
+    (/(\bcrank)\s*\(/.test(source) && /plugins/.test(source) && /\.crank\//.test(source))
+  );
+}
+
+/** Drop later duplicate ESM imports of the Node builtins Crank injects. */
+function dedupeCrankNodeImports(source) {
+  let next = source;
+  let changed = false;
+  for (const { re } of NODE_IMPORT_SPECS) {
+    const globalRe = new RegExp(re.source, 'g');
+    const matches = next.match(globalRe);
+    if (!matches || matches.length < 2) continue;
+    let seen = 0;
+    next = next.replace(globalRe, (m) => {
+      seen += 1;
+      if (seen === 1) return m;
+      changed = true;
+      return '';
+    });
+    // Clean blank lines left by removals (keep file readable)
+    next = next.replace(/\n{3,}/g, '\n\n');
+  }
+  return { source: next, changed };
+}
+
+function missingNodeImportLines(source) {
+  return NODE_IMPORT_SPECS.filter(({ re }) => !re.test(source)).map(({ line }) => line);
+}
+
+function ensureCrankInPlugins(source) {
+  if (/\bcrank\s*\?\s*\[\s*crank\s*\(\s*\)\s*\]/.test(source) || /\[\s*\.\.\.\s*\(\s*crank\s*\?/.test(source)) {
+    return { source, changed: false, ok: true };
+  }
+  if (/plugins\s*:\s*\[\s*\]/.test(source)) {
+    return {
+      source: source.replace(/plugins\s*:\s*\[\s*\]/, 'plugins: [...(crank ? [crank()] : [])]'),
+      changed: true,
+      ok: true
+    };
+  }
+  if (/plugins\s*:\s*\[/.test(source)) {
+    return {
+      source: source.replace(/plugins\s*:\s*\[/, 'plugins: [...(crank ? [crank()] : []), '),
+      changed: true,
+      ok: true
+    };
+  }
+  if (/defineConfig\s*\(\s*\{/.test(source)) {
+    return {
+      source: source.replace(
+        /defineConfig\s*\(\s*\{/,
+        'defineConfig({\n  plugins: [...(crank ? [crank()] : [])],'
+      ),
+      changed: true,
+      ok: true
+    };
+  }
+  if (/export\s+default\s+\{/.test(source)) {
+    return {
+      source: source.replace(
+        /export\s+default\s+\{/,
+        'export default {\n  plugins: [...(crank ? [crank()] : [])],'
+      ),
+      changed: true,
+      ok: true
+    };
+  }
+  if (/module\.exports\s*=\s*\{/.test(source)) {
+    return {
+      source: source.replace(
+        /module\.exports\s*=\s*\{/,
+        'module.exports = {\n  plugins: [...(crank ? [crank()] : [])],'
+      ),
+      changed: true,
+      ok: true
+    };
+  }
+  return { source, changed: false, ok: false };
+}
+
 function patchViteConfig(projectRoot) {
   const configPath = findViteConfig(projectRoot);
   const stubPath = writeVitePluginStub(projectRoot);
@@ -196,11 +288,21 @@ function patchViteConfig(projectRoot) {
   }
 
   let source = fs.readFileSync(configPath, 'utf8');
-  if (
-    /vite-plugin\.cjs/.test(source) ||
-    (/(\bcrank)\s*\(/.test(source) && /plugins/.test(source))
-  ) {
-    return { patched: false, reason: 'already-present', file: configPath, plugin: stubPath };
+
+  // Heal configs broken by older Crank versions (duplicate node: imports).
+  const repaired = dedupeCrankNodeImports(source);
+  if (repaired.changed) {
+    source = repaired.source;
+    fs.writeFileSync(configPath, source);
+  }
+
+  if (hasCrankVitePatch(source)) {
+    return {
+      patched: repaired.changed,
+      reason: repaired.changed ? 'repaired-duplicate-imports' : 'already-present',
+      file: configPath,
+      plugin: stubPath
+    };
   }
 
   let relStub = path.relative(path.dirname(configPath), stubPath).replace(/\\/g, '/');
@@ -218,11 +320,8 @@ function patchViteConfig(projectRoot) {
     const crankDecl = isTs
       ? 'let crank: null | (() => unknown) = null'
       : 'let crank = null';
-    const gracefulBlock = `import { createRequire } from 'node:module'
-import { existsSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
-
-// Crank Vite plugin — graceful load (same pattern as Vizpatch); skip if unavailable
+    const importLines = missingNodeImportLines(source);
+    const gracefulBlock = `${importLines.length ? `${importLines.join('\n')}\n\n` : ''}// Crank Vite plugin — graceful load; skip if unavailable
 ${crankDecl}
 try {
   const _crankPluginPath = fileURLToPath(new URL('${relStub}', import.meta.url))
@@ -233,31 +332,14 @@ try {
 } catch {}
 
 `;
+    // If the file already uses createRequire/existsSync/fileURLToPath without
+    // importing them, missingNodeImportLines still adds the needed imports once.
     if (!/_crankPluginPath/.test(source)) {
       source = gracefulBlock + source;
     }
 
-    if (/plugins\s*:\s*\[\s*\]/.test(source)) {
-      source = source.replace(
-        /plugins\s*:\s*\[\s*\]/,
-        'plugins: [...(crank ? [crank()] : [])]'
-      );
-    } else if (/plugins\s*:\s*\[/.test(source)) {
-      source = source.replace(
-        /plugins\s*:\s*\[/,
-        'plugins: [...(crank ? [crank()] : []), '
-      );
-    } else if (/defineConfig\s*\(\s*\{/.test(source)) {
-      source = source.replace(
-        /defineConfig\s*\(\s*\{/,
-        'defineConfig({\n  plugins: [...(crank ? [crank()] : [])],'
-      );
-    } else if (/export\s+default\s+\{/.test(source)) {
-      source = source.replace(
-        /export\s+default\s+\{/,
-        'export default {\n  plugins: [...(crank ? [crank()] : [])],'
-      );
-    } else {
+    const plugged = ensureCrankInPlugins(source);
+    if (!plugged.ok) {
       return {
         patched: false,
         reason: 'unrecognized-vite-shape',
@@ -265,33 +347,20 @@ try {
         plugin: stubPath
       };
     }
+    source = plugged.source;
   } else {
-    const gracefulBlock = `// Crank Vite plugin — graceful load (same pattern as Vizpatch)
+    const gracefulBlock = `// Crank Vite plugin — graceful load; skip if unavailable
 let crank = null;
 try {
   crank = require('${relStub}').crank;
 } catch {}
 
 `;
-    if (!/vite-plugin\.cjs/.test(source)) {
+    if (!/vite-plugin\.cjs/.test(source) && !/_crankPluginPath/.test(source)) {
       source = gracefulBlock + source;
     }
-    if (/plugins\s*:\s*\[\s*\]/.test(source)) {
-      source = source.replace(
-        /plugins\s*:\s*\[\s*\]/,
-        'plugins: [...(crank ? [crank()] : [])]'
-      );
-    } else if (/plugins\s*:\s*\[/.test(source)) {
-      source = source.replace(
-        /plugins\s*:\s*\[/,
-        'plugins: [...(crank ? [crank()] : []), '
-      );
-    } else if (/module\.exports\s*=\s*\{/.test(source)) {
-      source = source.replace(
-        /module\.exports\s*=\s*\{/,
-        'module.exports = {\n  plugins: [...(crank ? [crank()] : [])],'
-      );
-    } else {
+    const plugged = ensureCrankInPlugins(source);
+    if (!plugged.ok) {
       return {
         patched: false,
         reason: 'unrecognized-vite-shape',
@@ -299,12 +368,27 @@ try {
         plugin: stubPath
       };
     }
+    source = plugged.source;
   }
 
+  // Final safety: never leave duplicate node imports.
+  source = dedupeCrankNodeImports(source).source;
+
   fs.writeFileSync(configPath, source);
   return { patched: true, file: configPath, plugin: stubPath };
 }
 
+/** Repair-only: dedupe node: imports left by older Crank Vite patches (React path). */
+function repairViteConfigDuplicates(projectRoot) {
+  const configPath = findViteConfig(projectRoot);
+  if (!configPath) return { repaired: false, reason: 'no-vite-config' };
+  const source = fs.readFileSync(configPath, 'utf8');
+  const repaired = dedupeCrankNodeImports(source);
+  if (!repaired.changed) return { repaired: false, reason: 'clean', file: configPath };
+  fs.writeFileSync(configPath, repaired.source);
+  return { repaired: true, reason: 'repaired-duplicate-imports', file: configPath };
+}
+
 function writeProjectEnvExample(projectRoot) {
   const dest = path.join(projectRoot, '.env.crank.example');
   const src = path.join(PACKAGE_ROOT, '.env.example');
@@ -536,10 +620,21 @@ function initProject(projectRoot, options = {}) {
     installCrankSkill(projectRoot, results);
   }
 
-  // React apps: install dep + write out inject (Sentry/Clerk-style). Do not patch source here.
-  if (env.hasReact && options.react !== false) {
+  // React apps: <Crank /> only — do not inject the Vite plugin (avoids duplicating
+  // node: imports when vite.config already has Vizpatch-style loaders).
+  // Still repair duplicate imports left by older Crank versions.
+  // Treat findEntry hits as React even when root package.json omits the dep.
+  const looksLikeReact = env.hasReact || Boolean(findEntry(projectRoot));
+  if (looksLikeReact && options.react !== false) {
     writeReactMountHint(projectRoot, env, results);
     results.reactMount = true;
+    if (env.hasVite) {
+      const repaired = repairViteConfigDuplicates(projectRoot);
+      if (repaired.repaired) {
+        results.vite = repaired;
+        results.wrote.push(path.relative(projectRoot, repaired.file));
+      }
+    }
   } else if (env.hasVite && options.vite !== false) {
     const viteResult = patchViteConfig(projectRoot);
     results.vite = viteResult;
@@ -901,6 +996,7 @@ module.exports = {
   writeReplitPlatformGuide,
   writeVitePluginStub,
   patchViteConfig,
+  repairViteConfigDuplicates,
   writeInjectionGuide,
   writeReactMountHint,
   patchReplitConfig,

package/lib/resolve-project.js

@@ -3,7 +3,7 @@
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
-const { exists, readJson } = require('./detect');
+const { exists, readJson, findViteConfig, packageLooksLikeReact } = require('./detect');
 
 const APP_DIR_CANDIDATES = [
   '.',
@@ -37,6 +37,59 @@ function hasFrameworkMarker(dir) {
   return FRAMEWORK_FILES.some((name) => exists(path.join(dir, name)));
 }
 
+function dirPackageLooksLikeReact(dir) {
+  return packageLooksLikeReact(readJson(path.join(dir, 'package.json'), null));
+}
+
+/**
+ * Prefer the real app package (Vite/React) over a bare repo-root package.json.
+ */
+function findAppDirectory(repoRoot) {
+  const root = path.resolve(repoRoot);
+
+  // 1. Known app subdirs with a framework config (before root — monorepos)
+  for (const rel of APP_DIR_CANDIDATES) {
+    if (rel === '.') continue;
+    const candidate = path.join(root, rel);
+    if (exists(candidate) && hasFrameworkMarker(candidate)) {
+      return { appRoot: candidate, reason: `framework in ${rel}/` };
+    }
+  }
+
+  // 2. Vite config found via shallow search (e.g. artifacts/<app>/ on Replit)
+  const viteConfig = findViteConfig(root);
+  if (viteConfig) {
+    const viteDir = path.dirname(viteConfig);
+    if (viteDir !== root) {
+      // Prefer the vite package dir when it looks like React, or root does not.
+      if (dirPackageLooksLikeReact(viteDir) || !dirPackageLooksLikeReact(root)) {
+        return {
+          appRoot: viteDir,
+          reason: `vite.config in ${path.relative(root, viteDir) || '.'}`
+        };
+      }
+    }
+  }
+
+  // 3. Root has framework
+  if (hasFrameworkMarker(root)) {
+    return { appRoot: root, reason: 'framework at repo root' };
+  }
+
+  // 4. Subdir / root package.json
+  for (const rel of APP_DIR_CANDIDATES) {
+    const candidate = path.join(root, rel === '.' ? '' : rel);
+    if (exists(candidate) && exists(path.join(candidate, 'package.json'))) {
+      return {
+        appRoot: candidate,
+        reason: `package.json in ${rel === '.' ? 'root' : rel + '/'}`
+      };
+    }
+  }
+
+  return { appRoot: root, reason: 'repo root (fallback)' };
+}
+
 function readCrankConfig(startDir) {
   let dir = path.resolve(startDir);
   for (let i = 0; i < 12; i++) {
@@ -95,33 +148,6 @@ function findPackageRoot(startDir) {
   return path.resolve(startDir);
 }
 
-/**
- * Retune-style: find the app directory inside a repo (app/, client/, web/, …).
- */
-function findAppDirectory(repoRoot) {
-  const root = path.resolve(repoRoot);
-  if (hasFrameworkMarker(root)) {
-    return { appRoot: root, reason: 'framework at repo root' };
-  }
-
-  for (const rel of APP_DIR_CANDIDATES) {
-    if (rel === '.') continue;
-    const candidate = path.join(root, rel);
-    if (exists(candidate) && hasFrameworkMarker(candidate)) {
-      return { appRoot: candidate, reason: `framework in ${rel}/` };
-    }
-  }
-
-  for (const rel of APP_DIR_CANDIDATES) {
-    const candidate = path.join(root, rel === '.' ? '' : rel);
-    if (exists(candidate) && exists(path.join(candidate, 'package.json'))) {
-      return { appRoot: candidate, reason: `package.json in ${rel === '.' ? 'root' : rel + '/'}` };
-    }
-  }
-
-  return { appRoot: root, reason: 'repo root (fallback)' };
-}
-
 /**
  * Resolve where the user's app code lives — no manual path required.
  * Priority: CRANK_PROJECT_ROOT → .crank/config → git root + app dir → package.json walk → cwd.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ahmednawaz/crank",
-  "version": "0.2.5",
-  "description": "Internal Motive UX copy iteration: select UI text → Glean variants → MCP apply. Cursor, Replit, Claude.",
+  "version": "0.2.7",
+  "description": "Internal Motive UX copy iteration: select UI text \u2192 Glean variants \u2192 MCP apply. Cursor, Replit, Claude.",
   "repository": {
     "type": "git",
     "url": "https://github.com/ahmednawaz619/crank.git"
@@ -66,7 +66,9 @@
     "test:resolve": "node scripts/test-resolve-project.js",
     "prepare:publish": "node scripts/prepare-publish.js",
     "verify:deps": "node scripts/verify-deps.js",
-    "publish:team": "node scripts/prepare-publish.js && node scripts/verify-deps.js && npm publish --access public"
+    "publish:team": "node scripts/prepare-publish.js && node scripts/verify-deps.js && npm publish --access public",
+    "test:patch-vite": "node scripts/test-patch-vite.js",
+    "test:react-detect": "node scripts/test-react-detect.js"
   },
   "engines": {
     "node": ">=18"