Skip to content

Roadmap

Arclens development is organized in phases. This page summarizes progress from roadmap.md at the repository root.

  • Parse a single TS file
  • Read import declarations
  • Read exports
  • Understand AST traversal

Goal: extract architecture from code.

  • Detect React components
  • Detect hooks
  • Detect contexts
  • Detect services
  • Detect utilities

Goal: connect code together.

  • Imports
  • Uses (hook calls)
  • Renders (JSX)
  • Calls (general function call graph)
  • Exports

Goal: generate graph data.

  • Build nodes
  • Build edges
  • Export JSON (slim export + pre-layout)

Goal: explore architecture.

  • React Flow viewer
  • Dagre / grid layout (CLI pre-layout + viewer fallback)
  • Search (subgraph mode for large graphs)
  • Node details panel
  • Highlight dependencies (selection dimming + path from entry)
  • Folder / module clustering
  • Fit / focus on selected node
  • Save & restore viewport
  • CLI insights in sidebar
  • Entry-point shortcut (“From entry”)
  • Helper lines when dragging nodes
  • Node toolbar (focus, copy name, copy path)
  • Draggable / resizable floating panels
  • Component props in details panel

Goal: generate engineering insights.

  • Circular dependency detection
  • Orphan detection
  • Highly coupled modules
  • Largest components
  • Most imported / referenced modules (report + top connections)
  • Rules of Hooks violations
  • Component / hook naming hints
  • Monorepo support
  • Git integration
  • AI explanations
  • Impact analysis (--focus is a start; full impact UI pending)
  • Architecture scoring
  • Prop-flow edges (who passes what to whom)
  • Incremental analyze / watch perf

Based on open roadmap items, likely next investments include:

  1. Service detection and richer module typing
  2. Circular dependency and coupling insights
  3. npm publish workflow (arclens analyze + bundled view command)
  4. Watch performance for incremental re-analysis

Contributions welcome, see CONTRIBUTING.md in the repo root.