react-doctor-cli-dev 1.0.9 → 1.0.12

package/shared/src/schemas.ts

@@ -0,0 +1,136 @@
+// ─────────────────────────────────────────────────────────────
+// STATIC ANALYSIS TYPES
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * A single issue found in a React component by the static analyzer.
+ */
+export interface ComponentIssue {
+  id: string;                              // e.g. "large-component-App.tsx-12"
+  component: string;                       // e.g. "UserDashboard"
+  file: string;                            // file path
+  line: number;                            // line number where issue was found
+  column?: number;                         // column number (optional)
+  severity: "critical" | "warning" | "info";
+  message: string;                         // what's wrong
+  suggestion: string;                      // how to fix it
+}
+
+/**
+ * Full report produced by the Static Analyzer.
+ * Saved to: core/reports/staticreport.json
+ */
+export interface StaticReport {
+  timestamp: string;
+  componentCount: number;
+  filesAnalyzed: number;
+  filesFailed: number;
+  issues: ComponentIssue[];
+  grade: string;
+}
+
+// ─────────────────────────────────────────────────────────────
+// RUNTIME PROFILER TYPES
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * The 5 Core Web Vitals collected by the web-vitals library.
+ * All timing values are in milliseconds except CLS (a score).
+ *
+ * LCP  — Largest Contentful Paint   → good: < 2500ms
+ * FCP  — First Contentful Paint     → good: < 1800ms
+ * CLS  — Cumulative Layout Shift    → good: < 0.1
+ * INP  — Interaction to Next Paint  → good: < 200ms
+ * TTFB — Time to First Byte         → good: < 800ms
+ */
+export interface WebVitals {
+  lcp: number;
+  fcp: number;
+  cls: number;
+  inp: number;
+  ttfb: number;
+}
+
+/**
+ * System-level resource stats collected via Puppeteer and
+ * the browser's native Performance API.
+ *
+ * domNodes:    number of HTML elements in the page
+ * jsHeapMB:    JavaScript heap memory used (MB as string with 2 decimals)
+ * payloadMB:   total network payload transferred (MB as string)
+ * topOffender: the single heaviest file downloaded — name and size in MB
+ */
+export interface SystemStats {
+  domNodes: number;
+  jsHeapMB: string;
+  payloadMB: string;
+  topOffender: {
+    name: string;
+    size: number;
+  } | null;
+}
+
+/**
+ * Full runtime profiling report for a single route.
+ * Saved to: core/reports/runtimereport.json
+ *
+ * metrics:         the 5 core web vitals
+ * rerenders:       how many times each component re-rendered
+ *                  key = component name, value = render count
+ *                  e.g. { "UserDashboard": 12, "Button": 3 }
+ * commitDurations: how long each React commit took in ms
+ *                  a commit = one full render + reconcile + paint cycle
+ *                  e.g. [4.2, 1.1, 8.7]
+ * renderTime:      total time from navigation start to networkidle0 in ms
+ * stats:           system-level resource usage
+ * deviceType:      which device preset was used for this audit
+ */
+export interface RuntimeReport {
+  timestamp: string;
+  url: string;
+  deviceType: "desktop" | "mobile";
+  metrics: WebVitals;
+  rerenders: Record<string, number>;
+  commitDurations: number[];
+  renderTime: number;
+  stats: SystemStats;
+}
+
+// ─────────────────────────────────────────────────────────────
+// RULE ENGINE TYPES
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * A suggestion produced by the Rule Engine after reading
+ * both the static and runtime reports.
+ *
+ * Example:
+ *   IF LCP > 2500 AND component uses <img> without lazy loading
+ *   THEN suggest: "Use lazy loading for images in Home.tsx"
+ */
+export interface Suggestion {
+  id: string;
+  title: string;
+  description: string;
+  severity: "critical" | "warning" | "info";
+  affectedComponent?: string;
+  fix: string;
+}
+
+// ─────────────────────────────────────────────────────────────
+// FINAL COMBINED REPORT
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * The complete report that the Report Compiler builds by merging
+ * static analysis + runtime profiling + rule engine suggestions.
+ * This is what gets sent to the backend API and shown in the dashboard.
+ */
+export interface FinalReport {
+  projectName: string;
+  analyzedAt: string;
+  static: StaticReport;
+  runtime: Record<string, RuntimeReport>;  // keyed by route: "/" | "/about" | etc.
+  suggestions: Suggestion[];
+  performanceScore: number;                // 0–100
+}

package/shared/src/types.ts

@@ -0,0 +1,137 @@
+// ─────────────────────────────────────────────────────────────
+// STATIC ANALYSIS TYPES
+// ─────────────────────────────────────────────────────────────
+
+export interface ComponentIssue {
+  id: string;
+  component: string;
+  file: string;
+  line: number;
+  column?: number;
+  severity: "critical" | "warning" | "info";
+  message: string;
+  suggestion: string;
+}
+
+export interface StaticReport {
+  timestamp: string;
+  componentCount: number;
+  filesAnalyzed: number;
+  filesFailed: number;
+  issues: ComponentIssue[];
+  grade: string;
+}
+
+// ─────────────────────────────────────────────────────────────
+// RUNTIME PROFILER TYPES
+// ─────────────────────────────────────────────────────────────
+
+export interface WebVitals {
+  lcp: number;   // Largest Contentful Paint  — good: < 2500ms
+  fcp: number;   // First Contentful Paint    — good: < 1800ms
+  cls: number;   // Cumulative Layout Shift   — good: < 0.1
+  inp: number;   // Interaction to Next Paint — good: < 200ms
+  ttfb: number;  // Time to First Byte        — good: < 800ms
+}
+
+export interface SystemStats {
+  domNodes: number;
+  jsHeapMB: string;
+  payloadMB: string;
+  topOffender: { name: string; size: number } | null;
+}
+
+/**
+ * A JS error or React console warning captured during page load.
+ *
+ * type:    "error"   — uncaught JS exception or console.error()
+ *          "warning" — console.warn() — usually React warnings like
+ *                      "Each child in a list should have a unique key"
+ *
+ * message: the full error/warning text
+ * source:  "pageerror" (uncaught exception) | "console" (console.error/warn)
+ */
+export interface PageError {
+  type: "error" | "warning";
+  message: string;
+  source: "pageerror" | "console";
+}
+
+/**
+ * A screenshot taken at a specific moment during page load.
+ *
+ * label:    human-readable name — "fcp", "lcp", "fullLoad"
+ * dataUrl:  base64-encoded PNG prefixed with "data:image/png;base64,"
+ *           Ready to use directly as an <img src="..."> in the dashboard.
+ * takenAt:  ms since navigation start when the screenshot was taken
+ */
+export interface Screenshot {
+  label: string;
+  dataUrl: string;
+  takenAt: number;
+}
+
+/**
+ * Full runtime profiling report for a single route + device combination.
+ *
+ * NEW fields added:
+ *   performanceScore  — 0–100 overall score weighted from all metrics
+ *   errors            — JS errors and React warnings captured during load
+ *   screenshots       — visual filmstrip: FCP moment, LCP moment, full load
+ *   cpuThrottling     — which CPU throttle preset was active (1 = none, 4 = slow)
+ */
+export interface RuntimeReport {
+  timestamp: string;
+  url: string;
+  deviceType: "desktop" | "mobile";
+
+  // Web vitals
+  metrics: WebVitals;
+
+  // React profiler
+  rerenders: Record<string, number>;
+  commitDurations: number[];
+  renderTime: number;
+
+  // System stats
+  stats: SystemStats;
+
+  // NEW: performance score
+  performanceScore: number;
+
+  // NEW: JS errors and console warnings
+  errors: PageError[];
+
+  // NEW: screenshots at key moments
+  screenshots: Screenshot[];
+
+  // NEW: which CPU throttle was active (1 = real speed, 4 = 4x slowdown)
+  cpuThrottling: number;
+  networkThrottle: string;
+}
+
+// ─────────────────────────────────────────────────────────────
+// RULE ENGINE TYPES
+// ─────────────────────────────────────────────────────────────
+
+export interface Suggestion {
+  id: string;
+  title: string;
+  description: string;
+  severity: "critical" | "warning" | "info";
+  affectedComponent?: string;
+  fix: string;
+}
+
+// ─────────────────────────────────────────────────────────────
+// FINAL COMBINED REPORT
+// ─────────────────────────────────────────────────────────────
+
+export interface FinalReport {
+  projectName: string;
+  analyzedAt: string;
+  static: StaticReport;
+  runtime: Record<string, RuntimeReport>;
+  suggestions: Suggestion[];
+  performanceScore: number;
+}

package/shared/tsconfig.json

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

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020"],
+    "outDir": "./dist",
+    "rootDir": "./",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "core/**/*",
+    "shared/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "cli",
+    "frontend",
+    "backend"
+  ]
+}