Ccodemod

codemod/mine-react-components

Read-only React component inventory for Insights dashboards across JavaScript and TypeScript codebases

reactcomponent-inventoryinsightsmetricsanalysis
Public
0 executions

Run locally

npx codemod @codemod/mine-react-components

@codemod/mine-react-components

Read-only React component inventory for Insights dashboards.

Installation

bash

Usage

This package scans .js, .jsx, .ts, and .tsx source files and emits metrics for React component definitions. It does not rewrite source files.

Default workflow step: detect-react-components

Included files:

  • **/*.{js,jsx,ts,tsx}

Default exclusions:

  • **/node_modules/**
  • **/dist/**
  • **/build/**
  • **/coverage/**
  • **/.next/**
  • **/out/**
  • **/storybook-static/**
  • **/__generated__/**
  • **/generated/**
  • **/*.generated.*

Detection heuristics:

  • PascalCase function declarations that return JSX
  • PascalCase arrow functions assigned to identifiers that return JSX
  • PascalCase function expressions assigned to identifiers that return JSX
  • Class components extending React.Component, Component, React.PureComponent, or PureComponent with a render() method that returns JSX
  • Wrapped component declarations such as memo(...), forwardRef(...), React.memo(...), React.forwardRef(...), and other wrapper calls when the wrapped value resolves to a JSX-returning component

Preserve and no-op cases:

  • Lowercase helpers without a wrapped component shape are ignored
  • Hooks such as useThing are ignored unless they are defined through a wrapped component declaration like memo(...)
  • Utilities and classes without React inheritance are ignored

Metrics

Workflow step name: detect-react-components

Metric: react-component-definition

Cardinality keys:

  • componentName: Component identifier, or anonymous when no safe name is available
  • componentKind: function, arrow-function, function-expression, class, memo, forwardRef, or wrapped
  • exported: true or false
  • defaultExport: true or false
  • fileExtension: js, jsx, ts, or tsx

Insights Queries

Example package-source query:

json

Example widgets:

  1. Total React components
json
  1. Components by kind
json
  1. Components by repository
json
  1. Components by directory depth 2
json
  1. Exported vs non-exported components
json
  1. Components by file extension
json

Development

bash

License

MIT

Ready to contribute?

Build your own codemod and share it with the community.