offbyt 1.0.0

package/lib/utils/apiClientGenerator.js

@@ -0,0 +1,242 @@
+/**
+ * Frontend API Client Generator
+ * Generates API client files in frontend (src/api/*.js)
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Generate API client files for each resource
+ */
+export function generateApiClients(projectPath, resources) {
+  const apiDir = path.join(projectPath, 'src', 'api');
+  
+  // Create api directory if it doesn't exist
+  if (!fs.existsSync(apiDir)) {
+    fs.mkdirSync(apiDir, { recursive: true });
+  }
+
+  // Detect if project uses Vite
+  const isVite = detectVite(projectPath);
+
+  const generatedFiles = [];
+
+  // Generate a client file for each resource
+  for (const resource of resources) {
+    const fileName = `${resource.singular}.js`;
+    const filePath = path.join(apiDir, fileName);
+    
+    const clientCode = generateClientCode(resource, isVite);
+    fs.writeFileSync(filePath, clientCode, 'utf8');
+    
+    generatedFiles.push(`src/api/${fileName}`);
+  }
+
+  // Generate index.js to export all clients
+  const indexPath = path.join(apiDir, 'index.js');
+  const indexCode = generateIndexCode(resources);
+  fs.writeFileSync(indexPath, indexCode, 'utf8');
+  generatedFiles.push('src/api/index.js');
+
+  return generatedFiles;
+}
+
+/**
+ * Detect if project uses Vite
+ */
+function detectVite(projectPath) {
+  try {
+    const packageJsonPath = path.join(projectPath, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+      const deps = packageJson.dependencies || {};
+      const devDeps = packageJson.devDependencies || {};
+      
+      if (deps.vite || devDeps.vite) {
+        return true;
+      }
+    }
+    
+    const viteConfigFiles = ['vite.config.js', 'vite.config.ts', 'vite.config.mjs', 'vite.config.cjs'];
+    return viteConfigFiles.some((file) => fs.existsSync(path.join(projectPath, file)));
+  } catch (error) {
+    return false;
+  }
+}
+
+/**
+ * Generate client code for a resource
+ */
+function generateClientCode(resource, isVite = false) {
+  const resourceName = resource.name;
+  const singular = resource.singular;
+  const capitalizedSingular = capitalize(singular);
+  
+  const envVar = isVite ? 'import.meta.env.VITE_API_URL' : 'process.env.REACT_APP_API_URL';
+  const fallbackUrl = "'http://localhost:5000'";
+
+  return `/**
+ * API Client for ${capitalizedSingular}
+ * Auto-generated by offbyt
+ */
+
+const API_BASE_URL = ${envVar} || ${fallbackUrl};
+
+/**
+ * Get all ${resourceName}
+ */
+export const getAll${capitalize(resourceName)} = async (params = {}) => {
+  const query = new URLSearchParams(params).toString();
+  const url = \`\${API_BASE_URL}/api/${resourceName}\${query ? '?' + query : ''}\`;
+  
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(\`Failed to fetch ${resourceName}\`);
+  }
+
+  return response.json();
+};
+
+/**
+ * Get single ${singular} by ID
+ */
+export const get${capitalizedSingular}ById = async (id) => {
+  const url = \`\${API_BASE_URL}/api/${resourceName}/\${id}\`;
+  
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(\`Failed to fetch ${singular}\`);
+  }
+
+  return response.json();
+};
+
+/**
+ * Create new ${singular}
+ */
+export const create${capitalizedSingular} = async (data) => {
+  const url = \`\${API_BASE_URL}/api/${resourceName}\`;
+  
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(data)
+  });
+
+  if (!response.ok) {
+    throw new Error(\`Failed to create ${singular}\`);
+  }
+
+  return response.json();
+};
+
+/**
+ * Update ${singular} (partial update)
+ */
+export const update${capitalizedSingular} = async (id, data) => {
+  const url = \`\${API_BASE_URL}/api/${resourceName}/\${id}\`;
+  
+  const response = await fetch(url, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(data)
+  });
+
+  if (!response.ok) {
+    throw new Error(\`Failed to update ${singular}\`);
+  }
+
+  return response.json();
+};
+
+/**
+ * Delete ${singular}
+ */
+export const delete${capitalizedSingular} = async (id) => {
+  const url = \`\${API_BASE_URL}/api/${resourceName}/\${id}\`;
+  
+  const response = await fetch(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(\`Failed to delete ${singular}\`);
+  }
+
+  return response.json();
+};
+
+export default {
+  getAll${capitalize(resourceName)},
+  get${capitalizedSingular}ById,
+  create${capitalizedSingular},
+  update${capitalizedSingular},
+  delete${capitalizedSingular}
+};
+`;
+}
+
+/**
+ * Generate index.js that exports all clients
+ */
+function generateIndexCode(resources) {
+  let code = `/**
+ * API Clients Index
+ * Auto-generated by offbyt
+ */
+
+`;
+
+  // Import all clients
+  for (const resource of resources) {
+    code += `import ${resource.singular}API from './${resource.singular}.js';\n`;
+  }
+
+  code += '\n';
+
+  // Export all
+  code += 'export {\n';
+  for (const resource of resources) {
+    code += `  ${resource.singular}API,\n`;
+  }
+  code += '};\n\n';
+
+  // Default export
+  code += 'export default {\n';
+  for (const resource of resources) {
+    code += `  ${resource.singular}: ${resource.singular}API,\n`;
+  }
+  code += '};\n';
+
+  return code;
+}
+
+/**
+ * Capitalize first letter
+ */
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export default { generateApiClients };
+

package/lib/utils/apiScanner.js

@@ -0,0 +1,95 @@
+/**
+ * API Scanner - Detects backend routes from route files
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { globSync } from 'glob';
+
+/**
+ * Scan backend routes from route files
+ */
+export async function scanBackendRoutes(backendPath) {
+  const routes = [];
+  const seen = new Set();
+  
+  // Find all route files
+  const routeFiles = globSync('routes/**/*.js', { 
+    cwd: backendPath,
+    absolute: true
+  });
+
+  for (const file of routeFiles) {
+    try {
+      const content = fs.readFileSync(file, 'utf8');
+      const detectedRoutes = extractRoutesFromFile(content, file);
+      for (const route of detectedRoutes) {
+        const key = `${route.method}:${route.path}`;
+        if (!seen.has(key)) {
+          seen.add(key);
+          routes.push(route);
+        }
+      }
+    } catch (error) {
+      // Ignore file read errors
+    }
+  }
+
+  return routes;
+}
+
+/**
+ * Extract routes from a route file
+ */
+function extractRoutesFromFile(content, filePath) {
+  const routes = [];
+  const fileName = path.basename(filePath, '.js');
+  
+  // Detect base resource from filename (e.g., auth.routes.js -> auth)
+  const resourceName = fileName.replace('.routes', '');
+  
+  // Regex patterns to detect Express routes
+  const routePatterns = [
+    /router\.(get|post|put|patch|delete)\s*\(\s*['"`]([^'"`]+)['"`]/gi,
+    /app\.(get|post|put|patch|delete)\s*\(\s*['"`]([^'"`]+)['"`]/gi
+  ];
+
+  for (const pattern of routePatterns) {
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+      const method = match[1].toUpperCase();
+      const routePath = buildApiRoutePath(resourceName, match[2]);
+
+      routes.push({
+        method,
+        path: routePath,
+        file: path.basename(filePath)
+      });
+    }
+  }
+
+  return routes;
+}
+
+function buildApiRoutePath(resourceName, routePath) {
+  const normalizedRoute = normalizePath(routePath);
+  const basePath = normalizePath(`/api/${resourceName}`);
+
+  if (normalizedRoute === '/') return basePath;
+  return normalizePath(`${basePath}${normalizedRoute}`);
+}
+
+function normalizePath(routePath) {
+  if (!routePath) return '/';
+
+  let normalized = String(routePath)
+    .trim()
+    .replace(/\/+/g, '/');
+
+  if (!normalized.startsWith('/')) normalized = `/${normalized}`;
+  if (normalized.length > 1) normalized = normalized.replace(/\/+$/g, '');
+
+  return normalized;
+}
+
+export default { scanBackendRoutes };

package/lib/utils/codeInjector.js

@@ -0,0 +1,350 @@
+/**
+ * Frontend Code Injector
+ * Injects API calls into frontend code where resources are used
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { globSync } from 'glob';
+
+/**
+ * Inject API calls into frontend files
+ */
+export function injectApiCalls(projectPath, resources) {
+  const injectedFiles = [];
+  const files = getFrontendFiles(projectPath);
+
+  for (const file of files) {
+    try {
+      const fullPath = path.join(projectPath, file);
+      let content = fs.readFileSync(fullPath, 'utf8');
+      let modified = false;
+
+      for (const resource of resources) {
+        // Check if this file uses this resource
+        if (usesResource(content, resource)) {
+          const result = injectForResource(content, resource);
+          if (result.modified) {
+            content = result.content;
+            modified = true;
+          }
+        }
+      }
+
+      if (modified) {
+        fs.writeFileSync(fullPath, content, 'utf8');
+        injectedFiles.push(file);
+      }
+    } catch (error) {
+      // Ignore errors
+    }
+  }
+
+  return injectedFiles;
+}
+
+function getFrontendFiles(projectPath) {
+  const patterns = [
+    'src/**/*.{js,jsx,ts,tsx}',
+    'src/pages/**/*.{js,jsx,ts,tsx}',
+    'src/components/**/*.{js,jsx,ts,tsx}',
+  ];
+
+  const files = new Set();
+  for (const pattern of patterns) {
+    const found = globSync(pattern, { nodir: true, cwd: projectPath });
+    for (const file of found) {
+      files.add(file);
+    }
+  }
+
+  return [...files];
+}
+
+/**
+ * Check if file uses a resource
+ */
+function usesResource(content, resource) {
+  const varName = resource.name;
+  const setterName = `set${capitalize(varName)}`;
+  const statePattern = new RegExp(`\\[\\s*${varName}\\s*,\\s*${setterName}\\s*\\]\\s*=\\s*useState\\(`, 'g');
+  if (statePattern.test(content)) return true;
+
+  return false;
+}
+
+/**
+ * Inject API calls for a specific resource
+ */
+function injectForResource(content, resource) {
+  let modified = false;
+  let nextContent = content;
+
+  const resourceName = resource.name;
+  const singular = resource.singular || resourceName.slice(0, -1);
+  const capitalSingular = capitalize(singular);
+  const capitalResource = capitalize(resourceName);
+
+  const importResult = ensureUseEffectImport(nextContent);
+  nextContent = importResult.content;
+  modified = modified || importResult.changed;
+
+  const apiUrlResult = ensureApiUrlConstant(nextContent);
+  nextContent = apiUrlResult.content;
+  modified = modified || apiUrlResult.changed;
+
+  const stateInitResult = normalizeStateArray(nextContent, resourceName, capitalResource);
+  nextContent = stateInitResult.content;
+  modified = modified || stateInitResult.changed;
+
+  const fetchFunctionName = `fetch${capitalResource}`;
+
+  const fetchFnResult = ensureFetchFunction(nextContent, resourceName, capitalResource, fetchFunctionName);
+  nextContent = fetchFnResult.content;
+  modified = modified || fetchFnResult.changed;
+
+  const effectResult = ensureFetchEffect(nextContent, fetchFunctionName, resourceName, capitalResource);
+  nextContent = effectResult.content;
+  modified = modified || effectResult.changed;
+
+  const createResult = replaceCreateHandler(nextContent, {
+    resourceName,
+    singular,
+    capitalSingular,
+    fetchFunctionName,
+  });
+  nextContent = createResult.content;
+  modified = modified || createResult.changed;
+
+  const deleteResult = replaceDeleteHandler(nextContent, {
+    resourceName,
+    singular,
+    capitalSingular,
+    fetchFunctionName,
+  });
+  nextContent = deleteResult.content;
+  modified = modified || deleteResult.changed;
+
+  const jsxResult = ensureMongoIdsInJsx(nextContent, capitalSingular);
+  nextContent = jsxResult.content;
+  modified = modified || jsxResult.changed;
+
+  return { content: nextContent, modified };
+}
+
+function ensureUseEffectImport(content) {
+  if (/\buseEffect\b/.test(content)) {
+    return { content, changed: false };
+  }
+
+  const reactNamedImport = /import\s+\{([^}]*)\}\s+from\s+['"]react['"];?/;
+  if (reactNamedImport.test(content)) {
+    const next = content.replace(reactNamedImport, (_, names) => {
+      const cleaned = names
+        .split(',')
+        .map(name => name.trim())
+        .filter(Boolean);
+      if (!cleaned.includes('useEffect')) {
+        cleaned.push('useEffect');
+      }
+      return `import { ${cleaned.join(', ')} } from 'react';`;
+    });
+    return { content: next, changed: next !== content };
+  }
+
+  return { content, changed: false };
+}
+
+function ensureApiUrlConstant(content) {
+  if (/\b(API_URL|BACKEND_URL)\b/.test(content)) {
+    return { content, changed: false };
+  }
+
+  const importMatches = [...content.matchAll(/^import.*$/gm)];
+  if (importMatches.length === 0) {
+    return { content, changed: false };
+  }
+
+  const lastImport = importMatches[importMatches.length - 1];
+  const insertPos = lastImport.index + lastImport[0].length;
+  const next = `${content.slice(0, insertPos)}\n\nconst API_URL = 'http://localhost:5000/api';${content.slice(insertPos)}`;
+  return { content: next, changed: true };
+}
+
+function normalizeStateArray(content, resourceName, capitalResource) {
+  const stateRegex = new RegExp(`(const\\s+\\[\\s*${resourceName}\\s*,\\s*set${capitalResource}\\s*\\]\\s*=\\s*useState\\()([\\s\\S]*?)(\\)\\s*;?)`);
+  const match = content.match(stateRegex);
+  if (!match) return { content, changed: false };
+
+  const currentValue = match[2].trim();
+  if (currentValue === '[]') return { content, changed: false };
+
+  const next = content.replace(stateRegex, `$1[]$3`);
+  return { content: next, changed: next !== content };
+}
+
+function ensureFetchFunction(content, resourceName, capitalResource, fetchFunctionName) {
+  if (new RegExp(`const\\s+${fetchFunctionName}\\s*=\\s*async`).test(content)) {
+    return { content, changed: false };
+  }
+
+  const stateRegex = new RegExp(`const\\s+\\[\\s*${resourceName}\\s*,\\s*set${capitalResource}\\s*\\]\\s*=\\s*useState\\([^)]*\\)\\s*;?`);
+  const stateMatch = content.match(stateRegex);
+  if (!stateMatch) {
+    return { content, changed: false };
+  }
+
+  const insertPos = content.indexOf(stateMatch[0]) + stateMatch[0].length;
+  const snippet = `\n\n  const ${fetchFunctionName} = async () => {\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}\`);\n      const payload = await res.json();\n      set${capitalResource}(payload.data || []);\n    } catch (error) {\n      console.error('Error fetching ${resourceName}:', error);\n    }\n  };`;
+
+  const next = `${content.slice(0, insertPos)}${snippet}${content.slice(insertPos)}`;
+  return { content: next, changed: true };
+}
+
+function ensureFetchEffect(content, fetchFunctionName, resourceName, capitalResource) {
+  const effectRegex = new RegExp(`useEffect\\(\\(\\)\\s*=>\\s*\\{\\s*${fetchFunctionName}\\(\\);?\\s*\\},\\s*\\[\\s*\\]\\s*\\);?`, 'm');
+  if (effectRegex.test(content)) {
+    return { content, changed: false };
+  }
+
+  const fetchFnRegex = new RegExp(`const\\s+${fetchFunctionName}\\s*=\\s*async[\\s\\S]*?\\n\\s*};`);
+  const fetchMatch = content.match(fetchFnRegex);
+
+  const effectSnippet = `\n\n  useEffect(() => {\n    ${fetchFunctionName}();\n  }, []);`;
+
+  if (fetchMatch) {
+    const insertPos = content.indexOf(fetchMatch[0]) + fetchMatch[0].length;
+    const next = `${content.slice(0, insertPos)}${effectSnippet}${content.slice(insertPos)}`;
+    return { content: next, changed: true };
+  }
+
+  const stateRegex = new RegExp(`const\\s+\\[\\s*${resourceName}\\s*,\\s*set${capitalResource}\\s*\\]\\s*=\\s*useState\\([^)]*\\)\\s*;?`);
+  const stateMatch = content.match(stateRegex);
+  if (!stateMatch) {
+    return { content, changed: false };
+  }
+
+  const insertPos = content.indexOf(stateMatch[0]) + stateMatch[0].length;
+  const next = `${content.slice(0, insertPos)}${effectSnippet}${content.slice(insertPos)}`;
+  return { content: next, changed: true };
+}
+
+function replaceCreateHandler(content, ctx) {
+  const { resourceName, singular, capitalSingular, fetchFunctionName } = ctx;
+  const functionName = `handle${capitalSingular}Submit`;
+  const block = findConstArrowFunction(content, functionName);
+  if (!block) {
+    return { content, changed: false };
+  }
+
+  const currentBlock = content.slice(block.start, block.end);
+  if (/method:\s*['"]POST['"]/.test(currentBlock)) {
+    return { content, changed: false };
+  }
+
+  const newStateName = `new${capitalSingular}`;
+  const setNewStateName = `setNew${capitalSingular}`;
+  const initialStateLiteral = extractInitialStateLiteral(content, newStateName, setNewStateName) || '{}';
+  const nonEmptyGuard = buildNonEmptyGuard(newStateName, initialStateLiteral);
+
+  const replacement = `const ${functionName} = async (e) => {\n    e.preventDefault();\n    ${nonEmptyGuard}\n\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}\`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(${newStateName}),\n      });\n\n      if (res.ok) {\n        await ${fetchFunctionName}();\n        ${setNewStateName}(${initialStateLiteral});\n      }\n    } catch (error) {\n      console.error('Error adding ${singular}:', error);\n    }\n  };\n\n`;
+
+  const next = `${content.slice(0, block.start)}${replacement}${content.slice(block.end)}`;
+  return { content: next, changed: true };
+}
+
+function replaceDeleteHandler(content, ctx) {
+  const { resourceName, singular, capitalSingular, fetchFunctionName } = ctx;
+  const functionName = `delete${capitalSingular}`;
+  const block = findConstArrowFunction(content, functionName);
+  if (!block) {
+    return { content, changed: false };
+  }
+
+  const currentBlock = content.slice(block.start, block.end);
+  if (/method:\s*['"]DELETE['"]/.test(currentBlock)) {
+    return { content, changed: false };
+  }
+
+  const replacement = `const ${functionName} = async (id) => {\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}/\${id}\`, {\n        method: 'DELETE',\n      });\n\n      if (res.ok) {\n        await ${fetchFunctionName}();\n      }\n    } catch (error) {\n      console.error('Error deleting ${singular}:', error);\n    }\n  };\n\n`;
+
+  const next = `${content.slice(0, block.start)}${replacement}${content.slice(block.end)}`;
+  return { content: next, changed: true };
+}
+
+function ensureMongoIdsInJsx(content, capitalSingular) {
+  let next = content;
+  let changed = false;
+
+  const keyReplaced = next.replace(/key=\{(\w+)\.id\}/g, 'key={$1._id}');
+  if (keyReplaced !== next) {
+    next = keyReplaced;
+    changed = true;
+  }
+
+  const deleteCallPattern = new RegExp(`onClick=\\{\\(\\)\\s*=>\\s*delete${capitalSingular}\\((\\w+)\\.id\\)\\}`, 'g');
+  const clickReplaced = next.replace(deleteCallPattern, `onClick={() => delete${capitalSingular}($1._id)}`);
+  if (clickReplaced !== next) {
+    next = clickReplaced;
+    changed = true;
+  }
+
+  return { content: next, changed };
+}
+
+function extractInitialStateLiteral(content, stateName, setterName) {
+  const regex = new RegExp(`const\\s+\\[\\s*${stateName}\\s*,\\s*${setterName}\\s*\\]\\s*=\\s*useState\\((\\{[\\s\\S]*?\\})\\)`);
+  const match = content.match(regex);
+  return match ? match[1] : null;
+}
+
+function buildNonEmptyGuard(stateName, objectLiteral) {
+  const keys = [...objectLiteral.matchAll(/([A-Za-z_][A-Za-z0-9_]*)\s*:/g)].map(m => m[1]);
+  if (keys.length === 0) {
+    return `if (!${stateName}) return;`;
+  }
+
+  const checks = keys.map(key => `!${stateName}.${key}`).join(' || ');
+  return `if (${checks}) return;`;
+}
+
+function findConstArrowFunction(content, functionName) {
+  const startRegex = new RegExp(`const\\s+${functionName}\\s*=\\s*(?:async\\s*)?\\([^)]*\\)\\s*=>\\s*\\{`);
+  const startMatch = startRegex.exec(content);
+  if (!startMatch) return null;
+
+  const braceStart = content.indexOf('{', startMatch.index);
+  if (braceStart === -1) return null;
+
+  let depth = 0;
+  let end = -1;
+  for (let i = braceStart; i < content.length; i++) {
+    const char = content[i];
+    if (char === '{') depth++;
+    if (char === '}') {
+      depth--;
+      if (depth === 0) {
+        end = i + 1;
+        break;
+      }
+    }
+  }
+
+  if (end === -1) return null;
+
+  while (end < content.length && /[;\s]/.test(content[end])) {
+    end++;
+  }
+
+  return { start: startMatch.index, end };
+}
+
+/**
+ * Capitalize string
+ */
+function capitalize(str) {
+  if (!str) return '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export default { injectApiCalls };