[WIP] react framework initial commit

codeflash-benchmark/codeflash_benchmark/version.py

@@ -1,2 +1,2 @@
 # These version placeholders will be replaced by uv-dynamic-versioning during build.
-__version__ = "0.3.0"
+__version__ = "0.20.1.post127.dev0+c276ff32"

codeflash/api/aiservice.py

@@ -135,6 +135,8 @@ def optimize_code(
         is_async: bool = False,
         n_candidates: int = 5,
         is_numerical_code: bool | None = None,
+        is_react_component: bool = False,
+        react_context: str | None = None,
     ) -> list[OptimizedCandidate]:
         """Optimize the given code for performance by making a request to the Django endpoint.
 
@@ -188,6 +190,12 @@ def optimize_code(
             if module_system:
                 payload["module_system"] = module_system
 
+        # React-specific fields
+        if is_react_component:
+            payload["is_react_component"] = True
+            if react_context:
+                payload["react_context"] = react_context
+
         # DEBUG: Print payload language field
         logger.debug(
             f"Sending optimize request with language='{payload['language']}' (type: {type(payload['language'])})"

codeflash/api/schemas.py

@@ -120,6 +120,10 @@ class OptimizeRequest:
     repo_name: str | None = None
     current_username: str | None = None
 
+    # === React-specific ===
+    is_react_component: bool = False
+    react_context: str = ""
+
     def to_payload(self) -> dict[str, Any]:
         """Convert to API payload dict, maintaining backward compatibility."""
         payload = {
@@ -150,6 +154,12 @@ def to_payload(self) -> dict[str, Any]:
         if self.language_info.module_system != ModuleSystem.UNKNOWN:
             payload["module_system"] = self.language_info.module_system.value
 
+        # React-specific fields
+        if self.is_react_component:
+            payload["is_react_component"] = True
+            if self.react_context:
+                payload["react_context"] = self.react_context
+
         return payload
 
 
@@ -187,6 +197,9 @@ class TestGenRequest:
     # === Metadata ===
     codeflash_version: str = ""
 
+    # === React-specific ===
+    is_react_component: bool = False
+
     def to_payload(self) -> dict[str, Any]:
         """Convert to API payload dict, maintaining backward compatibility."""
         payload = {
@@ -218,6 +231,10 @@ def to_payload(self) -> dict[str, Any]:
         if self.language_info.module_system != ModuleSystem.UNKNOWN:
             payload["module_system"] = self.language_info.module_system.value
 
+        # React-specific fields
+        if self.is_react_component:
+            payload["is_react_component"] = True
+
         return payload
 
 

codeflash/languages/base.py

@@ -93,6 +93,7 @@ class CodeContext:
     read_only_context: str = ""
     imports: list[str] = field(default_factory=list)
     language: Language = Language.PYTHON
+    react_context: str | None = None
 
 
 @dataclass

codeflash/languages/javascript/frameworks/__init__.py

@@ -0,0 +1 @@
+"""Framework detection and support for JavaScript/TypeScript projects."""

codeflash/languages/javascript/frameworks/detector.py

@@ -0,0 +1,97 @@
+"""Framework detection for JavaScript/TypeScript projects.
+
+Detects React (and potentially other frameworks) by inspecting package.json
+dependencies. Results are cached per project root.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+from dataclasses import dataclass, field
+from functools import lru_cache
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass(frozen=True)
+class FrameworkInfo:
+    """Information about the frontend framework used in a project."""
+
+    name: str  # "react", "vue", "angular", "none"
+    version: str | None = None  # e.g., "18.2.0"
+    react_version_major: int | None = None  # e.g., 18
+    has_testing_library: bool = False  # @testing-library/react installed
+    has_react_compiler: bool = False  # React 19+ compiler detected
+    dev_dependencies: frozenset[str] = field(default_factory=frozenset)
+
+
+_EMPTY_FRAMEWORK = FrameworkInfo(name="none")
+
+
+@lru_cache(maxsize=32)
+def detect_framework(project_root: Path) -> FrameworkInfo:
+    """Detect the frontend framework from package.json.
+
+    Reads dependencies and devDependencies to identify React and its ecosystem.
+    Results are cached per project root path.
+    """
+    package_json_path = project_root / "package.json"
+    if not package_json_path.exists():
+        return _EMPTY_FRAMEWORK
+
+    try:
+        package_data = json.loads(package_json_path.read_text(encoding="utf-8"))
+    except (json.JSONDecodeError, OSError) as e:
+        logger.debug("Failed to read package.json at %s: %s", package_json_path, e)
+        return _EMPTY_FRAMEWORK
+
+    deps = package_data.get("dependencies", {})
+    dev_deps = package_data.get("devDependencies", {})
+    all_deps = {**deps, **dev_deps}
+
+    # Detect React
+    react_version_str = deps.get("react") or dev_deps.get("react")
+    if not react_version_str:
+        return _EMPTY_FRAMEWORK
+
+    version = _parse_version_string(react_version_str)
+    major = _parse_major_version(version)
+
+    has_testing_library = "@testing-library/react" in all_deps
+    has_react_compiler = (
+        "babel-plugin-react-compiler" in all_deps
+        or "react-compiler-runtime" in all_deps
+        or (major is not None and major >= 19)
+    )
+
+    return FrameworkInfo(
+        name="react",
+        version=version,
+        react_version_major=major,
+        has_testing_library=has_testing_library,
+        has_react_compiler=has_react_compiler,
+        dev_dependencies=frozenset(all_deps.keys()),
+    )
+
+
+def _parse_version_string(version_spec: str) -> str | None:
+    """Extract a clean version from a semver range like ^18.2.0 or ~17.0.0."""
+    stripped = version_spec.lstrip("^~>=<! ")
+    if stripped and stripped[0].isdigit():
+        return stripped
+    return None
+
+
+def _parse_major_version(version: str | None) -> int | None:
+    """Extract major version number from a version string."""
+    if not version:
+        return None
+    try:
+        return int(version.split(".")[0])
+    except (ValueError, IndexError):
+        return None

codeflash/languages/javascript/frameworks/react/__init__.py

@@ -0,0 +1 @@
+"""React framework support for component discovery, profiling, and optimization."""

codeflash/languages/javascript/frameworks/react/analyzer.py

@@ -0,0 +1,159 @@
+"""Static analysis for React optimization opportunities.
+
+Detects common performance anti-patterns in React components:
+- Inline object/array creation in JSX props
+- Functions defined inside render body (missing useCallback)
+- Expensive computations without useMemo
+- Components receiving referentially unstable props
+"""
+
+from __future__ import annotations
+
+import re
+from dataclasses import dataclass
+from enum import Enum
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from codeflash.languages.javascript.frameworks.react.discovery import ReactComponentInfo
+
+
+class OpportunitySeverity(str, Enum):
+    HIGH = "high"
+    MEDIUM = "medium"
+    LOW = "low"
+
+
+class OpportunityType(str, Enum):
+    INLINE_OBJECT_PROP = "inline_object_prop"
+    INLINE_ARRAY_PROP = "inline_array_prop"
+    MISSING_USECALLBACK = "missing_usecallback"
+    MISSING_USEMEMO = "missing_usememo"
+    MISSING_REACT_MEMO = "missing_react_memo"
+    UNSTABLE_REFERENCE = "unstable_reference"
+
+
+@dataclass(frozen=True)
+class OptimizationOpportunity:
+    """A detected optimization opportunity in a React component."""
+
+    type: OpportunityType
+    line: int
+    description: str
+    severity: OpportunitySeverity
+
+
+# Patterns for expensive operations inside render body
+EXPENSIVE_OPS_RE = re.compile(r"\.(filter|map|sort|reduce|flatMap|find|findIndex|every|some)\s*\(")
+INLINE_OBJECT_IN_JSX_RE = re.compile(r"=\{\s*\{")  # ={{ ... }} in JSX
+INLINE_ARRAY_IN_JSX_RE = re.compile(r"=\{\s*\[")  # ={[ ... ]} in JSX
+FUNCTION_DEF_RE = re.compile(
+    r"(?:const|let|var)\s+\w+\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_]\w*)\s*=>"
+    r"|function\s+\w+\s*\("
+)
+USECALLBACK_RE = re.compile(r"\buseCallback\s*\(")
+USEMEMO_RE = re.compile(r"\buseMemo\s*\(")
+
+
+def detect_optimization_opportunities(source: str, component_info: ReactComponentInfo) -> list[OptimizationOpportunity]:
+    """Detect optimization opportunities in a React component."""
+    opportunities: list[OptimizationOpportunity] = []
+    lines = source.splitlines()
+
+    # Only analyze the component's own lines
+    start = component_info.start_line - 1
+    end = min(component_info.end_line, len(lines))
+    component_lines = lines[start:end]
+    component_source = "\n".join(component_lines)
+
+    # Check for inline objects in JSX props
+    _detect_inline_props(component_lines, start, opportunities)
+
+    # Check for functions defined in render body without useCallback
+    _detect_missing_usecallback(component_source, component_lines, start, opportunities)
+
+    # Check for expensive computations without useMemo
+    _detect_missing_usememo(component_source, component_lines, start, opportunities)
+
+    # Check if component should be wrapped in React.memo
+    if not component_info.is_memoized:
+        opportunities.append(
+            OptimizationOpportunity(
+                type=OpportunityType.MISSING_REACT_MEMO,
+                line=component_info.start_line,
+                description=f"Component '{component_info.function_name}' is not wrapped in React.memo(). "
+                "If it receives stable props, wrapping can prevent unnecessary re-renders.",
+                severity=OpportunitySeverity.MEDIUM,
+            )
+        )
+
+    return opportunities
+
+
+def _detect_inline_props(lines: list[str], offset: int, opportunities: list[OptimizationOpportunity]) -> None:
+    """Detect inline object/array literals in JSX prop positions."""
+    for i, line in enumerate(lines):
+        line_num = offset + i + 1
+        if INLINE_OBJECT_IN_JSX_RE.search(line):
+            opportunities.append(
+                OptimizationOpportunity(
+                    type=OpportunityType.INLINE_OBJECT_PROP,
+                    line=line_num,
+                    description="Inline object literal in JSX prop creates a new reference on every render. "
+                    "Extract to useMemo or a module-level constant.",
+                    severity=OpportunitySeverity.HIGH,
+                )
+            )
+        if INLINE_ARRAY_IN_JSX_RE.search(line):
+            opportunities.append(
+                OptimizationOpportunity(
+                    type=OpportunityType.INLINE_ARRAY_PROP,
+                    line=line_num,
+                    description="Inline array literal in JSX prop creates a new reference on every render. "
+                    "Extract to useMemo or a module-level constant.",
+                    severity=OpportunitySeverity.HIGH,
+                )
+            )
+
+
+def _detect_missing_usecallback(
+    component_source: str, lines: list[str], offset: int, opportunities: list[OptimizationOpportunity]
+) -> None:
+    """Detect arrow functions or function expressions that could use useCallback."""
+    has_usecallback = bool(USECALLBACK_RE.search(component_source))
+
+    for i, line in enumerate(lines):
+        line_num = offset + i + 1
+        stripped = line.strip()
+        # Look for arrow function or function expression definitions inside the component
+        if FUNCTION_DEF_RE.search(stripped) and "useCallback" not in stripped and "useMemo" not in stripped:
+            # Skip if the component already uses useCallback extensively
+            if not has_usecallback:
+                opportunities.append(
+                    OptimizationOpportunity(
+                        type=OpportunityType.MISSING_USECALLBACK,
+                        line=line_num,
+                        description="Function defined inside render body creates a new reference on every render. "
+                        "Wrap with useCallback() if passed as a prop to child components.",
+                        severity=OpportunitySeverity.MEDIUM,
+                    )
+                )
+
+
+def _detect_missing_usememo(
+    component_source: str, lines: list[str], offset: int, opportunities: list[OptimizationOpportunity]
+) -> None:
+    """Detect expensive computations that could benefit from useMemo."""
+    for i, line in enumerate(lines):
+        line_num = offset + i + 1
+        stripped = line.strip()
+        if EXPENSIVE_OPS_RE.search(stripped) and "useMemo" not in stripped:
+            opportunities.append(
+                OptimizationOpportunity(
+                    type=OpportunityType.MISSING_USEMEMO,
+                    line=line_num,
+                    description="Expensive array operation in render body runs on every render. "
+                    "Wrap with useMemo() and specify dependencies.",
+                    severity=OpportunitySeverity.HIGH,
+                )
+            )