vibefast-cli 0.1.3 → 0.2.0

package/AUTO-DETECT-DEPS.md

@@ -0,0 +1,607 @@
+# 🔍 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

package/CHANGELOG.md

@@ -0,0 +1,86 @@
+# Changelog
+
+All notable changes to VibeFast CLI will be documented in this file.
+
+## [0.2.0] - 2024-11-13
+
+### Added
+- **Interactive Confirmation**: CLI now asks before overwriting existing files
+- **Package Dependency Display**: Shows required packages with `npx expo install` command
+- **Modification Detection**: Warns before deleting files you've modified
+- **Manual Steps Display**: Shows setup instructions for services (Sentry, PostHog, etc.)
+- **Status Command**: New `vf status` command to show installed features
+- **Checklist Command**: New `vf checklist <feature>` command to show manual setup steps
+- **File Hashing**: SHA-256 hashing for integrity checking
+- **Auto-Migration**: Automatically migrates old journal format to new format
+- **Automation Flags**: Added `--yes` flag for CI/CD and `--force` flag to skip prompts
+- **Comprehensive Tests**: 34 unit tests covering all core functionality
+
+### Improved
+- **Error Messages**: User-friendly error messages with clear actionable solutions
+- **Support Contact**: All error messages include support@vibefast.pro
+- **CI/CD Compatibility**: Detects non-interactive environments and behaves appropriately
+- **Performance**: Optimized file hashing (skips binary files, processes in batches)
+- **Documentation**: Comprehensive documentation and examples
+
+### Changed
+- **Package Management**: Now uses `npx expo install` for native apps (no version management needed)
+- **Journal Format**: Updated to store file hashes (auto-migrates old format)
+
+### Fixed
+- Files being overwritten without confirmation
+- No warning when deleting modified files
+- Missing package installation information
+- Generic error messages
+
+## [0.1.4] - 2024-11-11
+
+### Added
+- Initial release
+- Basic `vf add` and `vf remove` commands
+- Authentication with `vf login` and `vf logout`
+- Device management with `vf devices`
+- Repository validation with `vf doctor`
+- Feature listing with `vf list`
+- Navigation injection
+- Watermarking
+- Journal tracking
+
+### Security
+- Path security with directory traversal prevention
+- Token storage in user home directory
+- HTTPS-only communication
+- Input validation
+
+---
+
+## Upgrade Guide
+
+### From 0.1.x to 0.2.0
+
+No breaking changes! The CLI will automatically migrate your journal to the new format.
+
+**New Features You Can Use:**
+```bash
+# Check what's installed
+vf status
+
+# See manual setup steps
+vf checklist sentry
+
+# Use automation flags
+vf add charts --yes
+vf remove charts --force
+```
+
+**Improved Error Messages:**
+The CLI now provides much clearer error messages with actionable solutions.
+
+---
+
+## Support
+
+For issues or questions:
+- Email: support@vibefast.pro
+- GitHub: https://github.com/vibefast/vibefast-cli/issues
+- Website: https://vibefast.pro