vibefast-cli 1.2.1 → 1.3.1

package/docs/archive/AUTO-DETECT-DEPS.md

@@ -1,607 +0,0 @@
-# 🔍 Auto-Detecting Missing Dependencies
-
-## The Problem
-
-When we install a feature, we copy files that import packages:
-following is an example we aint using that pck name in reality:
-```typescript
-// apps/native/src/features/charts/index.tsx
-import { LineChart } from 'react-native-chart-kit'; // ← Package not installed!
-import { Dimensions } from 'react-native';
-```
-
-If `react-native-chart-kit` isn't installed, the app will crash or fail to build.
-
-## The Question
-
-Can we **automatically detect** what packages are missing instead of manually specifying them in recipe.json?
-
-**Answer: YES!** Multiple approaches:
-
----
-
-## Approach 1: Run TypeScript Type Checking ✅ BEST
-
-### How It Works
-
-TypeScript will error on missing packages:
-
-```bash
-$ pnpm tsc --noEmit
-# Output:
-# error TS2307: Cannot find module 'react-native-chart-kit' or its corresponding type declarations.
-```
-
-### Implementation
-
-**File:** `src/core/typecheck.ts` (NEW)
-
-```typescript
-import { executeBash } from './shell.js';
-import { log } from './log.js';
-
-export interface TypeCheckResult {
-  success: boolean;
-  missingPackages: string[];
-  errors: string[];
-}
-
-export async function runTypeCheck(cwd: string): Promise<TypeCheckResult> {
-  log.info('Running type check to detect missing packages...');
-  
-  // Try different type checkers in order of preference
-  const checkers = [
-    { cmd: 'pnpm tsc --noEmit', name: 'pnpm' },
-    { cmd: 'yarn tsc --noEmit', name: 'yarn' },
-    { cmd: 'npx tsc --noEmit', name: 'npm' },
-  ];
-  
-  let result;
-  for (const checker of checkers) {
-    result = await executeBash(checker.cmd, { cwd });
-    if (result.exitCode !== 127) { // 127 = command not found
-      break;
-    }
-  }
-  
-  if (!result || result.exitCode === 127) {
-    log.warn('TypeScript not found, skipping type check');
-    return { success: true, missingPackages: [], errors: [] };
-  }
-  
-  // Parse TypeScript errors
-  const missingPackages = new Set<string>();
-  const errors: string[] = [];
-  
-  const lines = result.stderr.split('\n');
-  
-  for (const line of lines) {
-    // Match: error TS2307: Cannot find module 'package-name'
-    const match = line.match(/error TS2307: Cannot find module '([^']+)'/);
-    if (match) {
-      const moduleName = match[1];
-      
-      // Extract package name (handle scoped packages and subpaths)
-      const packageName = extractPackageName(moduleName);
-      
-      if (packageName && !isBuiltInModule(packageName)) {
-        missingPackages.add(packageName);
-      }
-    }
-    
-    // Collect all errors for debugging
-    if (line.includes('error TS')) {
-      errors.push(line);
-    }
-  }
-  
-  return {
-    success: result.exitCode === 0,
-    missingPackages: Array.from(missingPackages),
-    errors,
-  };
-}
-
-function extractPackageName(modulePath: string): string | null {
-  // Handle different import patterns:
-  // 'react-native-chart-kit' → 'react-native-chart-kit'
-  // 'react-native-chart-kit/dist/LineChart' → 'react-native-chart-kit'
-  // '@react-navigation/native' → '@react-navigation/native'
-  // '@react-navigation/native/lib/index' → '@react-navigation/native'
-  
-  if (modulePath.startsWith('@')) {
-    // Scoped package: @scope/package
-    const parts = modulePath.split('/');
-    if (parts.length >= 2) {
-      return `${parts[0]}/${parts[1]}`;
-    }
-  } else {
-    // Regular package: package-name
-    const parts = modulePath.split('/');
-    return parts[0];
-  }
-  
-  return null;
-}
-
-function isBuiltInModule(packageName: string): boolean {
-  // Node.js built-in modules
-  const builtIns = [
-    'fs', 'path', 'crypto', 'http', 'https', 'url', 'util',
-    'stream', 'events', 'buffer', 'process', 'os', 'child_process',
-  ];
-  
-  // React Native built-ins
-  const rnBuiltIns = [
-    'react-native',
-    'react',
-  ];
-  
-  return builtIns.includes(packageName) || rnBuiltIns.includes(packageName);
-}
-```
-
-### Usage in add command
-
-**File:** `src/commands/add.ts`
-
-```typescript
-// After copying files, BEFORE adding watermarks
-
-if (!options.dryRun && !options.skipTypeCheck) {
-  log.plain('');
-  log.info('🔍 Checking for missing dependencies...');
-  
-  const typeCheckResult = await runTypeCheck(paths.cwd);
-  
-  if (typeCheckResult.missingPackages.length > 0) {
-    log.plain('');
-    log.warn('⚠ Missing packages detected:');
-    log.plain('');
-    
-    typeCheckResult.missingPackages.forEach(pkg => {
-      log.plain(`  • ${pkg}`);
-    });
-    
-    log.plain('');
-    
-    // Try to find versions from recipe.json if available
-    const packagesWithVersions: Record<string, string> = {};
-    
-    if (manifest.dependencies?.npm) {
-      typeCheckResult.missingPackages.forEach(pkg => {
-        if (manifest.dependencies.npm[pkg]) {
-          packagesWithVersions[pkg] = manifest.dependencies.npm[pkg];
-        } else {
-          // Default to latest
-          packagesWithVersions[pkg] = 'latest';
-        }
-      });
-    } else {
-      // No recipe dependencies, use latest for all
-      typeCheckResult.missingPackages.forEach(pkg => {
-        packagesWithVersions[pkg] = 'latest';
-      });
-    }
-    
-    // Show install command
-    const pm = await detectPackageManager(paths.cwd);
-    const pkgList = Object.entries(packagesWithVersions)
-      .map(([name, version]) => version === 'latest' ? name : `${name}@${version}`)
-      .join(' ');
-    const installCmd = getInstallCommand(pm, pkgList.split(' '));
-    
-    log.info('📦 Install with:');
-    log.plain(`  ${installCmd}`);
-    log.plain('');
-    
-    // Ask to install
-    if (!options.yes) {
-      const shouldInstall = promptYesNo(
-        'Install missing packages now? (Y/n): ',
-        true
-      );
-      
-      if (shouldInstall) {
-        log.info('Installing packages...');
-        const result = await installPackages(packagesWithVersions, paths.cwd);
-        
-        if (result.success) {
-          log.success('✓ Packages installed successfully!');
-          
-          // Run type check again to verify
-          log.info('Verifying installation...');
-          const verifyResult = await runTypeCheck(paths.cwd);
-          
-          if (verifyResult.missingPackages.length > 0) {
-            log.warn('⚠ Some packages are still missing:');
-            verifyResult.missingPackages.forEach(pkg => {
-              log.plain(`  • ${pkg}`);
-            });
-          } else {
-            log.success('✓ All dependencies resolved!');
-          }
-        } else {
-          log.error(`✗ Installation failed: ${result.error}`);
-        }
-      }
-    } else {
-      // Auto-install in --yes mode
-      log.info('Installing packages...');
-      const result = await installPackages(packagesWithVersions, paths.cwd);
-      
-      if (!result.success) {
-        log.error(`✗ Installation failed: ${result.error}`);
-        process.exit(1);
-      }
-    }
-  } else if (typeCheckResult.success) {
-    log.success('✓ No missing dependencies detected');
-  } else {
-    log.warn('⚠ Type check completed with errors (but no missing packages)');
-    if (typeCheckResult.errors.length > 0 && process.env.DEBUG) {
-      log.plain('');
-      log.plain('Errors:');
-      typeCheckResult.errors.slice(0, 5).forEach(err => {
-        log.plain(`  ${err}`);
-      });
-    }
-  }
-}
-```
-
-### Add CLI flag
-
-```typescript
-export const addCommand = new Command('add')
-  .description('Add a VibeFast feature to your project')
-  .argument('<feature>', 'Feature name to install')
-  .option('--target <target>', 'Target platform (native or web)', 'native')
-  .option('--dry-run', 'Preview changes without applying')
-  .option('--force', 'Overwrite existing files without asking')
-  .option('--yes', 'Answer yes to all prompts')
-  .option('--skip-install', 'Skip package installation')
-  .option('--skip-type-check', 'Skip type checking for missing packages') // NEW
-  .action(async (feature: string, options) => {
-    // ...
-  });
-```
-
----
-
-## Approach 2: Parse Import Statements 🟡 FALLBACK
-
-If TypeScript isn't available, parse imports manually.
-
-### Implementation
-
-**File:** `src/core/importParser.ts` (NEW)
-
-```typescript
-import { readFile } from 'fs/promises';
-import { join } from 'path';
-
-export async function extractImports(filePath: string): Promise<string[]> {
-  const content = await readFile(filePath, 'utf-8');
-  const imports = new Set<string>();
-  
-  // Match various import patterns
-  const patterns = [
-    // import X from 'package'
-    /import\s+.*?\s+from\s+['"]([^'"]+)['"]/g,
-    // import 'package'
-    /import\s+['"]([^'"]+)['"]/g,
-    // require('package')
-    /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
-    // import('package')
-    /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
-  ];
-  
-  for (const pattern of patterns) {
-    let match;
-    while ((match = pattern.exec(content)) !== null) {
-      const importPath = match[1];
-      
-      // Skip relative imports
-      if (importPath.startsWith('.') || importPath.startsWith('/')) {
-        continue;
-      }
-      
-      imports.add(importPath);
-    }
-  }
-  
-  return Array.from(imports);
-}
-
-export async function extractImportsFromFiles(
-  filePaths: string[]
-): Promise<string[]> {
-  const allImports = new Set<string>();
-  
-  for (const filePath of filePaths) {
-    // Only parse JS/TS files
-    if (!/\.(js|jsx|ts|tsx)$/.test(filePath)) {
-      continue;
-    }
-    
-    try {
-      const imports = await extractImports(filePath);
-      imports.forEach(imp => allImports.add(imp));
-    } catch (error) {
-      // Skip files that can't be read
-      continue;
-    }
-  }
-  
-  return Array.from(allImports).map(extractPackageName).filter(Boolean) as string[];
-}
-```
-
-### Check Against Installed Packages
-
-**File:** `src/core/packageChecker.ts` (NEW)
-
-```typescript
-import { readFile } from 'fs/promises';
-import { join } from 'path';
-import { exists } from './fsx.js';
-
-export async function getInstalledPackages(cwd: string): Promise<Set<string>> {
-  const packageJsonPath = join(cwd, 'package.json');
-  
-  if (!await exists(packageJsonPath)) {
-    return new Set();
-  }
-  
-  const content = await readFile(packageJsonPath, 'utf-8');
-  const packageJson = JSON.parse(content);
-  
-  const installed = new Set<string>();
-  
-  // Add dependencies
-  if (packageJson.dependencies) {
-    Object.keys(packageJson.dependencies).forEach(pkg => installed.add(pkg));
-  }
-  
-  // Add devDependencies
-  if (packageJson.devDependencies) {
-    Object.keys(packageJson.devDependencies).forEach(pkg => installed.add(pkg));
-  }
-  
-  return installed;
-}
-
-export async function findMissingPackages(
-  requiredPackages: string[],
-  cwd: string
-): Promise<string[]> {
-  const installed = await getInstalledPackages(cwd);
-  
-  return requiredPackages.filter(pkg => !installed.has(pkg));
-}
-```
-
-### Usage
-
-```typescript
-// After copying files
-
-// Extract imports from copied files
-const imports = await extractImportsFromFiles(copiedFiles);
-
-// Check which are missing
-const missing = await findMissingPackages(imports, paths.cwd);
-
-if (missing.length > 0) {
-  log.warn('⚠ Missing packages detected:');
-  missing.forEach(pkg => log.plain(`  • ${pkg}`));
-  // ... prompt to install
-}
-```
-
----
-
-## Approach 3: Run ESLint 🟢 BONUS
-
-If the project has ESLint configured:
-
-```typescript
-export async function runESLint(cwd: string): Promise<string[]> {
-  const result = await executeBash('npx eslint . --format json', { cwd });
-  
-  if (result.exitCode === 0) {
-    return [];
-  }
-  
-  try {
-    const eslintOutput = JSON.parse(result.stdout);
-    const missingPackages = new Set<string>();
-    
-    eslintOutput.forEach((file: any) => {
-      file.messages.forEach((msg: any) => {
-        // ESLint rule: import/no-unresolved
-        if (msg.ruleId === 'import/no-unresolved') {
-          const match = msg.message.match(/Unable to resolve path to module '([^']+)'/);
-          if (match) {
-            const packageName = extractPackageName(match[1]);
-            if (packageName) {
-              missingPackages.add(packageName);
-            }
-          }
-        }
-      });
-    });
-    
-    return Array.from(missingPackages);
-  } catch (error) {
-    return [];
-  }
-}
-```
-
----
-
-## Recommended Strategy: Hybrid Approach
-
-### Step 1: Try TypeScript (Most Accurate)
-```typescript
-const typeCheckResult = await runTypeCheck(paths.cwd);
-if (typeCheckResult.missingPackages.length > 0) {
-  return typeCheckResult.missingPackages;
-}
-```
-
-### Step 2: Fallback to Import Parsing
-```typescript
-if (!typeCheckResult.success && typeCheckResult.missingPackages.length === 0) {
-  // TypeScript failed or not available, try parsing
-  const imports = await extractImportsFromFiles(copiedFiles);
-  const missing = await findMissingPackages(imports, paths.cwd);
-  return missing;
-}
-```
-
-### Step 3: Use Recipe as Source of Truth
-```typescript
-// If detection fails, fall back to recipe.json
-if (manifest.dependencies?.npm) {
-  return Object.keys(manifest.dependencies.npm);
-}
-```
-
----
-
-## Complete Flow
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│                  DEPENDENCY DETECTION FLOW                       │
-└─────────────────────────────────────────────────────────────────┘
-
-Step 1: Install Feature Files
-┌──────────────────────────────────────────────────────────────┐
-│  $ vf add charts                                             │
-│  ✓ Files copied: 17                                          │
-└──────────────────────────────────────────────────────────────┘
-                            │
-                            ▼
-Step 2: Run Type Check
-┌──────────────────────────────────────────────────────────────┐
-│  $ pnpm tsc --noEmit                                         │
-│                                                               │
-│  Output:                                                      │
-│  error TS2307: Cannot find module 'react-native-chart-kit'  │
-│  error TS2307: Cannot find module 'react-native-svg'        │
-└──────────────────────────────────────────────────────────────┘
-                            │
-                            ▼
-Step 3: Parse Errors
-┌──────────────────────────────────────────────────────────────┐
-│  Detected missing packages:                                  │
-│  • react-native-chart-kit                                    │
-│  • react-native-svg                                          │
-└──────────────────────────────────────────────────────────────┘
-                            │
-                            ▼
-Step 4: Check Recipe for Versions
-┌──────────────────────────────────────────────────────────────┐
-│  recipe.json has:                                            │
-│  {                                                            │
-│    "dependencies": {                                         │
-│      "npm": {                                                │
-│        "react-native-chart-kit": "^6.12.0",                 │
-│        "react-native-svg": "^13.9.0"                         │
-│      }                                                       │
-│    }                                                         │
-│  }                                                           │
-│                                                               │
-│  Use these versions ✓                                        │
-└──────────────────────────────────────────────────────────────┘
-                            │
-                            ▼
-Step 5: Prompt User
-┌──────────────────────────────────────────────────────────────┐
-│  ⚠ Missing packages detected:                                │
-│    • react-native-chart-kit@^6.12.0                          │
-│    • react-native-svg@^13.9.0                                │
-│                                                               │
-│  📦 Install with:                                            │
-│    pnpm add react-native-chart-kit@^6.12.0 react-native-svg@^13.9.0
-│                                                               │
-│  Install missing packages now? (Y/n): _                      │
-└──────────────────────────────────────────────────────────────┘
-                            │
-                            ▼
-Step 6: Install Packages
-┌──────────────────────────────────────────────────────────────┐
-│  $ pnpm add react-native-chart-kit@^6.12.0 react-native-svg@^13.9.0
-│  ✓ Packages installed                                        │
-└──────────────────────────────────────────────────────────────┘
-                            │
-                            ▼
-Step 7: Verify
-┌──────────────────────────────────────────────────────────────┐
-│  $ pnpm tsc --noEmit                                         │
-│  ✓ No errors                                                 │
-│  ✓ All dependencies resolved!                                │
-└──────────────────────────────────────────────────────────────┘
-```
-
----
-
-## Advantages of This Approach
-
-1. **Automatic Detection** - No need to manually specify in recipe.json
-2. **Accurate** - TypeScript knows exactly what's missing
-3. **Version Aware** - Can still use recipe.json for specific versions
-4. **Fallback** - Import parsing if TypeScript not available
-5. **Verification** - Can re-run type check after install to confirm
-
-## Disadvantages
-
-1. **Slower** - Type checking takes 5-30 seconds
-2. **Requires TypeScript** - Not all projects have it
-3. **False Positives** - Might detect unrelated errors
-4. **Version Guessing** - If not in recipe.json, defaults to 'latest'
-
----
-
-## Recommendation
-
-**Use BOTH approaches:**
-
-1. **Recipe.json as primary** (fast, explicit, version-controlled)
-2. **Type checking as verification** (catch missing deps in recipe.json)
-
-```typescript
-// After copying files
-
-// 1. Check recipe.json first
-if (manifest.dependencies?.npm) {
-  const recipeDeps = manifest.dependencies.npm;
-  // Show and install these
-}
-
-// 2. Run type check to verify
-const typeCheckResult = await runTypeCheck(paths.cwd);
-if (typeCheckResult.missingPackages.length > 0) {
-  log.warn('⚠ Additional missing packages detected:');
-  // Show packages not in recipe.json
-  const additional = typeCheckResult.missingPackages.filter(
-    pkg => !recipeDeps[pkg]
-  );
-  
-  if (additional.length > 0) {
-    log.warn('These packages are missing from recipe.json:');
-    additional.forEach(pkg => log.plain(`  • ${pkg}`));
-    log.info('Consider updating the recipe to include these.');
-  }
-}
-```
-
-This gives us:
-- ✅ Fast installation (recipe.json)
-- ✅ Verification (type check)
-- ✅ Catches recipe mistakes
-- ✅ Best of both worlds