@react-state-map/core

Core parsing and graph building library for React State Map.

This package provides the static analysis engine that parses React codebases and builds component graphs with state flow information.

Installation

npm install @react-state-map/core

Usage

import { ReactParser, serializeGraph, GraphAnalyzer } from '@react-state-map/core';

// Parse a React project
const parser = new ReactParser({
  rootDir: './src',
  drillingThreshold: 3,
  exclude: ['**/node_modules/**', '**/dist/**'],
  include: ['**/*.tsx', '**/*.jsx'],
});

const result = parser.parse();

// Serialize the graph for visualization
const graph = serializeGraph(result.graph);

// Analyze the graph
const analyzer = new GraphAnalyzer(result.graph);
const summary = analyzer.getSummary();

console.log(`Components: ${summary.components.totalComponents}`);
console.log(`State nodes: ${summary.state.totalStateNodes}`);
console.log(`Edges: ${summary.flow.totalEdges}`);

Features

• Static Analysis: Parses React components without executing code
• State Detection: Finds useState, useReducer, useContext, Redux, Zustand, and custom hooks
• Graph Building: Constructs a complete dependency graph of state flow
• Prop Drilling Detection: Identifies props passed through too many layers
• Context Boundaries: Maps React Context provider/consumer relationships

For Most Users

If you just want to visualize your React state flow, use the CLI instead:

npx @react-state-map/cli ./src

Or install the VS Code extension.

License

MIT