React Component Mining Codemod

A mining codemod that scans your React codebase and tracks prop usage across components. It collects metrics without modifying any code.

What It Does

Scans all React/JSX files (.tsx, .ts, .jsx, .js), excluding test files
Identifies component usages (PascalCase elements; skips built-in HTML elements like div, span)
Extracts all props into a normalized shape per usage (value-agnostic; groups by prop + value type):
- Boolean shorthand (primary) → primary=true
- String literal (size="lg") → size=<literal>
- Dynamic expression (size={x}) → size=<dynamic>
- Spread ({...props}) → ...spread
Tracks each component usage with:
- component — Component name (e.g. Button, Card.Header)
- shape — Value-agnostic prop shape (e.g. primary=true|size=<literal>); groups by prop + value type
- shapeWithValues — Value-inclusive prop shape (e.g. primary=true|size="lg"); groups by exact prop combinations
- file — Source file path
- hasDynamic — Whether any prop has a dynamic value
- shape_risk — Risk score for spread usage (ternary with mismatched object shapes, non-object spreads, props spread)
- perf_risk — Risk score for inline values that may cause re-renders (object/array/function literals, new Map/Set/Date/RegExp, bonus for on*, render, children, etc., and memo-wrapped components)
- debug_risk — Risk score for non-deterministic or environment-dependent values (Math.random, Date.now, new Date(), window.location, document.cookie, localStorage, sessionStorage)
- definition_path — File path where the component is defined (only for local and external kinds; omitted when unresolved, e.g. import from external packages)
- is_design_system — Whether the component is defined under the design_system_path (when provided)

Usage

Run via workflow (recommended)

bash

Parameters

design_system_path — File path or glob pattern for Design System component definitions (e.g. packages/ui/src/** or src/design-system/). Components defined under this path are tracked for is_design_system. Leave empty to track all components.

Output

This is a mining codemod — it does not change files. The workflow uses semantic_analysis: workspace so that definition_path resolves cross-file imports (e.g. Button from @calcom/ui → packages/ui/components/button/...). It emits metrics via prop-usage that you can aggregate to answer questions like:

Which components use which prop patterns? (group by shape — value-agnostic)
Which exact prop combinations are most common? (group by shapeWithValues)
Where is a specific prop pattern used across the codebase?
How many usages have dynamic props vs literal-only?
Which usages have high shape_risk, perf_risk, or debug_risk?
Which design system components are least used? (filter by is_design_system=true)

Registry

Ready to contribute?

react-component-mining

Run locally