react-doctor-cli-dev 1.0.0

package/backend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon --exec ts-node src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "better-sqlite3": "^12.10.0",
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "helmet": "^8.2.0"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.9.1",
+    "nodemon": "^3.1.14",
+    "ts-node": "^10.9.2",
+    "typescript": "^6.0.3"
+  }
+}

package/backend/src/db.ts

@@ -0,0 +1,24 @@
+
+import Database from "better-sqlite3";
+import path from "path";
+import fs from "fs";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const dbPath = process.env.DB_PATH || "./data/reports.db";
+fs.mkdirSync(path.dirname(dbPath), { recursive: true });
+const db = new Database(dbPath);
+db.exec(`
+CREATE TABLE IF NOT EXISTS reports (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    project TEXT NOT NULL,
+    score INTEGER NOT NULL,
+    grade TEXT NOT NULL,
+    analyzed_at TEXT NOT NULL,
+    created_at TEXT NOT NULL DEFAULT (datetime('now')),
+    payload TEXT NOT NULL
+);
+`);
+
+export default db;

package/backend/src/index.ts

@@ -0,0 +1,49 @@
+import express, { Request, Response, NextFunction } from 'express';
+import cors from 'cors';
+import helmet from 'helmet';
+import dotenv from 'dotenv';
+import reportRoutes from './routes/reports';
+import db from './db';
+
+dotenv.config();
+
+// Debug: Check if API_KEY is loaded
+console.log(`[Debug] API_KEY loaded: ${process.env.API_KEY ? '✓' : '✗'}`);
+console.log(`[Debug] API_KEY value: ${process.env.API_KEY || 'NOT SET'}`);
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// ─── SECURITY AND PARSING MIDDLEWARE ──────────────────────────────────────────
+app.use(helmet()); // adds security headers
+app.use(cors());   // allows dashboard to call the API
+app.use(express.json({ limit: '50mb' })); // reports can be large (screenshots)
+
+// ─── ROUTES ───────────────────────────────────────────────────────────────────
+// Use only ONE path (plural is REST convention)
+app.use('/api/reports', reportRoutes);
+
+// ─── HEALTH CHECK - NO AUTH, USED TO VERIFY SERVER IS UP ──────────────────────
+app.get('/health', (_req: Request, res: Response) => {
+  res.json({ 
+    status: 'ok', 
+    timestamp: new Date().toISOString() 
+  });
+});
+
+
+// ─── 404 HANDLER ──────────────────────────────────────────────────────────────
+app.use((req: Request, res: Response) => {
+  res.status(404).json({ message: 'Route not found' });
+});
+
+// ─── GLOBAL ERROR HANDLER ─────────────────────────────────────────────────────
+app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
+  console.error(err.stack);
+  res.status(500).json({ message: 'Internal Server Error' });
+});
+
+// ─── START THE SERVER ─────────────────────────────────────────────────────────
+app.listen(PORT, () => {
+  console.log(`React Doctor backend running on http://localhost:${PORT}`);
+});

package/backend/src/middleware/auth.ts

@@ -0,0 +1,21 @@
+import { Request, Response, NextFunction } from "express";
+
+export function requireApiKey(
+  req: Request,
+  res: Response,
+  next: NextFunction
+): void {
+  const keyHeader = req.headers["x-api-key"];
+  const key = Array.isArray(keyHeader) ? keyHeader[0] : keyHeader;
+  const expectedKey = process.env.API_KEY?.trim();
+  
+  // Debug log
+  console.log(`[Auth] Received: "${key}", Expected: "${expectedKey}"`);
+  
+  if (!key || key.trim() !== expectedKey) {
+    console.warn(`[Auth] API key mismatch!`);
+    res.status(401).json({ error: "Unauthorized — invalid or missing API key" });
+    return;
+  }
+  next();
+}

package/backend/src/routes/reports.ts

@@ -0,0 +1,110 @@
+
+import { Router, Request, Response, RequestHandler } from "express";
+import db from "../db";
+import { requireApiKey } from "../middleware/auth";
+ 
+const router = Router();
+ 
+
+router.get("/", (req: Request, res: Response) => {
+  try {
+    const rows = db.prepare(`
+      SELECT id, project, score, grade, analyzed_at, created_at
+      FROM reports
+      ORDER BY created_at DESC
+      LIMIT 50
+    `).all() as any[];
+ 
+    res.json({ count: rows.length, reports: rows });
+  } catch (err: any) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+ 
+
+router.get("/project/:name", (req: Request, res: Response) => {
+  try {
+    const rows = db.prepare(`
+      SELECT id, project, score, grade, analyzed_at, created_at
+      FROM reports
+      WHERE project = ?
+      ORDER BY created_at DESC
+    `).all(req.params.name) as any[];
+ 
+    res.json({
+      project: req.params.name,
+      count: rows.length,
+      reports: rows,
+    });
+  } catch (err: any) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+ 
+// ==========================================
+// Endpoint 1: POST /api/report/upload
+// يستقبل التقرير من الـ CLI ويتحقق منه ثم يحفظه
+// ==========================================
+router.post("/upload", requireApiKey as RequestHandler, (req: Request, res: Response) => {
+  try {
+    const report = req.body;
+ 
+    // التحقق من وجود الحقول الإلزامية الثلاثة
+    if (!report || !report.projectName || !report.analyzedAt || report.performanceScore === undefined) {
+      res.status(400).json({ error: "Invalid report — missing required fields" });
+      return;
+    }
+ 
+    const grade = report.static?.grade ?? "N/A";
+ 
+    // تجهيز استعلام الإدخال لـ SQLite
+    const stmt = db.prepare(`
+      INSERT INTO reports (project, score, grade, analyzed_at, payload)
+      VALUES (?, ?, ?, ?, ?)
+    `);
+ 
+    // تنفيذ الاستعلام وحفظ جسم التقرير كـ string
+    const result = stmt.run(
+      report.projectName,
+      report.performanceScore,
+      grade,
+      report.analyzedAt,
+      JSON.stringify(report)
+    );
+ 
+    res.status(201).json({
+      message: "Report saved successfully",
+      id: result.lastInsertRowid,
+    });
+  } catch (err: any) {
+    console.error("Upload error:", err.message);
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+ 
+router.get("/:id", (req: Request, res: Response) => {
+  try {
+    const row = db.prepare(
+      "SELECT * FROM reports WHERE id = ?"
+    ).get(req.params.id) as any;
+ 
+    if (!row) {
+      res.status(404).json({ error: "Report not found" });
+      return;
+    }
+ 
+    res.json({
+      id: row.id,
+      project: row.project,
+      score: row.score,
+      grade: row.grade,
+      analyzedAt: row.analyzed_at,
+      createdAt: row.created_at,
+      report: JSON.parse(row.payload),
+    });
+  } catch (err: any) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+ 
+export default router;

package/backend/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
+}

package/cli/bin/react-doctor.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+"use strict";
+
+const [major] = process.versions.node.split(".").map(Number);
+if (major < 18) {
+  console.error(
+    "\n  ❌  React Doctor requires Node.js 18 or higher.\n" +
+    `     You are running Node.js ${process.versions.node}.\n` +
+    "     Please upgrade: https://nodejs.org\n"
+  );
+  process.exit(1);
+}
+
+require(
+  require.resolve("ts-node", { paths: [__dirname] })
+).register({
+  transpileOnly: true,
+  skipIgnore: true,
+  compilerOptions: {
+    target: "ES2020",
+    lib: ["ES2020"],
+    module: "commonjs",
+    esModuleInterop: true,
+    allowSyntheticDefaultImports: true,
+  },
+});
+
+require("../dist/index.js");

package/cli/dist/commands/analyze.js

@@ -0,0 +1,125 @@
+"use strict";
+// ─────────────────────────────────────────────────────────────
+// cli/src/commands/analyze.ts
+//
+// react-doctor analyze <projectPath>
+//
+// Runs the Static Analyzer only — no browser needed, fast.
+// Reads JSX/TSX source files, runs all 9 detectors, and
+// saves staticreport.json to .react-doctor/
+//
+// Use this when:
+//   - You want a quick code quality check
+//   - You don't have Chrome installed
+//   - You only care about code patterns, not runtime metrics
+//
+// Use "react-doctor full" when you want everything.
+// ─────────────────────────────────────────────────────────────
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerAnalyzeCommand = registerAnalyzeCommand;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const chalk_1 = __importDefault(require("chalk"));
+const ui_1 = require("../ui");
+const full_1 = require("./full");
+function getCoreModule(relativePath) {
+    return require(path_1.default.resolve(__dirname, "..", "..", "..", "core", relativePath));
+}
+// ─────────────────────────────────────────────────────────────
+// REGISTER COMMAND
+// ─────────────────────────────────────────────────────────────
+function registerAnalyzeCommand(program) {
+    program
+        .command("analyze")
+        .description("Run static code analysis only (no browser required)")
+        .argument("[projectPath]", "Path to the React project (defaults to current directory)", process.cwd())
+        .option("--full", "After static analysis, also run the runtime profiler and rule engine", false)
+        .option("--no-banner", "Skip the banner")
+        .action(async (projectPath, options) => {
+        // If --full flag is passed, delegate to the full command
+        // which runs the complete pipeline
+        if (options.full) {
+            await (0, full_1.runFullCommand)(projectPath, { noBanner: options.noBanner });
+            return;
+        }
+        const resolvedPath = path_1.default.resolve(projectPath);
+        if (!options.noBanner)
+            (0, ui_1.printBanner)();
+        // ── Validate project ────────────────────────────────────
+        if (!fs_1.default.existsSync(path_1.default.join(resolvedPath, "package.json"))) {
+            (0, ui_1.printFail)(`No package.json found at: ${resolvedPath}\n\n` +
+                `  Pass the path to your React project:\n` +
+                `  react-doctor analyze ./my-react-app`);
+            process.exit(1);
+        }
+        (0, ui_1.printSection)("Static Analysis");
+        (0, ui_1.printInfo)("Project", resolvedPath);
+        console.log();
+        // ── Run the static analyzer ─────────────────────────────
+        const spin = (0, ui_1.spinner)("Scanning JSX/TSX source files...");
+        try {
+            const { FileScanner } = getCoreModule("static-ana/static/scanner");
+            const { StaticAnalyzer } = getCoreModule("static-ana/static/analyzer");
+            const scanner = new FileScanner();
+            const analyzer = new StaticAnalyzer();
+            const files = await scanner.findFiles(resolvedPath);
+            spin.text = `  Analyzing ${files.length} file(s)...`;
+            const report = await analyzer.analyze(files);
+            // Save to .react-doctor/
+            const outputDir = path_1.default.join(resolvedPath, ".react-doctor");
+            fs_1.default.mkdirSync(outputDir, { recursive: true });
+            fs_1.default.writeFileSync(path_1.default.join(outputDir, "staticreport.json"), JSON.stringify(report, null, 2));
+            spin.succeed(chalk_1.default.green(`Analysis complete — ${files.length} file(s) scanned`));
+            // ── Results summary ─────────────────────────────────────
+            (0, ui_1.printSection)("Results");
+            const total = report.issues?.length ?? 0;
+            const critical = report.issues?.filter((i) => i.severity === "critical").length ?? 0;
+            const warnings = report.issues?.filter((i) => i.severity === "warning").length ?? 0;
+            const infos = report.issues?.filter((i) => i.severity === "info").length ?? 0;
+            (0, ui_1.printResult)("Files analyzed", String(report.filesAnalyzed ?? 0), "info");
+            (0, ui_1.printResult)("Components", String(report.componentCount ?? 0), "info");
+            (0, ui_1.printResult)("Total issues", String(total), total > 0 ? "warn" : "good");
+            (0, ui_1.printResult)("Critical", String(critical), critical > 0 ? "poor" : "good");
+            (0, ui_1.printResult)("Warnings", String(warnings), warnings > 0 ? "warn" : "good");
+            (0, ui_1.printResult)("Info", String(infos), "info");
+            (0, ui_1.printResult)("Health grade", report.grade ?? "N/A", "info");
+            // ── Detailed issues (top 10) ────────────────────────────
+            if (total > 0) {
+                (0, ui_1.printSection)("Issues Found");
+                const sorted = [...(report.issues ?? [])].sort((a, b) => {
+                    const order = { critical: 0, warning: 1, info: 2 };
+                    return (order[a.severity] ?? 3) - (order[b.severity] ?? 3);
+                });
+                sorted.slice(0, 10).forEach((issue) => {
+                    const icon = (0, ui_1.severityIcon)(issue.severity);
+                    console.log(`  ${icon}  ${chalk_1.default.bold(issue.component ?? "Unknown")}`);
+                    console.log(`       ${chalk_1.default.gray(issue.file + ":" + issue.line)}`);
+                    console.log(`       ${issue.message}`);
+                    console.log(`       ${chalk_1.default.cyan("→")} ${issue.suggestion}`);
+                    console.log();
+                });
+                if (total > 10) {
+                    console.log(chalk_1.default.gray(`  ... and ${total - 10} more. See the full report:\n`));
+                    console.log(chalk_1.default.cyan(`  ${path_1.default.join(resolvedPath, ".react-doctor", "staticreport.json")}\n`));
+                }
+            }
+            else {
+                console.log(chalk_1.default.green("  ✅  No issues found — your code looks great!\n"));
+            }
+            (0, ui_1.printResult)("Report saved", path_1.default.join(resolvedPath, ".react-doctor", "staticreport.json"), "info");
+            console.log();
+            (0, ui_1.printDone)("Static analysis finished.");
+            console.log(chalk_1.default.gray("  Tip: run ") +
+                chalk_1.default.cyan("react-doctor full ./") +
+                chalk_1.default.gray(" to also measure runtime performance.\n"));
+        }
+        catch (err) {
+            spin.fail(chalk_1.default.red("Static analysis failed"));
+            console.log(chalk_1.default.red(`\n  ${err.message}\n`));
+            process.exit(1);
+        }
+    });
+}