ReactPropType Extractor Webpack Plugin

A webpack plugin that extracts TypeScript component prop types at build time. This plugin analyzes your React components and generates a structured representation of their prop types, which can be useful for documentation, runtime type checking, or component validation.

Features

• Extracts prop types from React functional components
• Supports wrapped components (memo, forwardRef)
• Handles various TypeScript types:
  • Primitive types (string, number, boolean)
  • Union types
  • Enum literals
  • Object types
  • Built-in types
  • React-specific types
• Provides recursive type analysis
• Excludes test and story files automatically

Installation

1npm install --save-dev @vymo/reactprops-type-extractor
2yarn add -D @vymo/reactprops-type-extractor

Usage

In your webpack configuration:

1const ReactPropsTypeExtractor = require("@vymo/reactprops-type-extractor");
2
3module.exports = {
4  // ... other webpack config
5  plugins: [
6    new ReactPropsTypeExtractor({
7      sourceDir: "src",
8      tsConfigPath: "tsconfig.json",
9      debug: false,
10    }),
11  ],
12};

Accessing Props in Code

The extracted prop types are available in your code through the global variable COMPONENT_PROPS. This variable contains the structured representation of all component prop types:

1// Access props for a specific component
2const buttonProps = COMPONENT_PROPS.Button;
3console.log(buttonProps);

Configuration Options

Option	Type	Default	Description
sourceDir	string	required	The source directory containing your TypeScript/React components
tsConfigPath	string	'tsconfig.json'	Path to your TypeScript configuration file
debug	boolean	false	Enable debug logging for the plugin
generateJson	boolean	false	will generate JSON file componentProps.json at root folder containing extracted prop types

Output Format

The plugin extracts prop types in the following format:

1interface PropType {
2  name: string; // Name of the prop
3  type: string; // Type of the prop
4  required: boolean; // Whether the prop is required
5  options?: string[]; // Available options for enum-literals
6  children?: PropType[]; // Nested prop types for objects
7}

Type Categories

• primitive: Basic types like string, number, boolean
• object: Complex object types with nested properties
• enum-literal: String or number literal unions
• union: Union types that don't resolve to enum-literals
• array: Array types
• tuple: Tuple types
• function: Function types
• unknown: Types that couldn't be resolved

Example Output

For a component like:

1interface ButtonProps {
2  variant: "primary" | "secondary";
3  size?: "small" | "medium" | "large";
4  onClick: () => void;
5  disabled?: boolean;
6}
7
8const Button: React.FC<ButtonProps> = ({
9  variant,
10  size,
11  onClick,
12  disabled,
13}) => {
14  // ... component implementation
15};

The plugin will generate:

1{
2  "Button": {
3    "variant": {
4      "name": "variant",
5      "type": "enum-literal",
6      "required": true,
7      "options": ["primary", "secondary"]
8    },
9    "size": {
10      "name": "size",
11      "type": "enum-literal",
12      "required": false,
13      "options": ["small", "medium", "large"]
14    },
15    "onClick": {
16      "name": "onClick",
17      "type": "() => void",
18      "required": true
19    },
20    "disabled": {
21      "name": "disabled",
22      "type": "boolean",
23      "required": false
24    }
25  }
26}

Notes

• The plugin automatically excludes .stories.tsx, .test.tsx, and .spec.tsx files
• Type information is extracted at build time and made available through webpack's DefinePlugin
• Circular type references are handled to prevent infinite recursion
• React-specific types are simplified (e.g., React.ReactNode becomes ReactNode)

Contributing

We welcome contributions to improve the ReactPropsType Extractor plugin! Here's how you can help:

Development Setup

1. Clone the repository
2. Install dependencies:

   1npm install

3. Create a new branch for your changes:

   1git checkout -b feature/your-feature-name

Making Changes

1. Make sure your code follows our coding standards:

   • Keep the code modular and maintainable
   • Add comments for complex logic

2. Testing:

   • Add test cases for new features or bug fixes
   • Run existing tests to ensure nothing is broken:

     1npm test

   • Test the plugin with different types of React components
   • Verify output matches expected type definitions

3. Documentation:

   • Update README.md for any new features or changes
   • Document any breaking changes

Bug Reports

When submitting bug reports, please include:

• Plugin version
• Webpack version
• TypeScript version
• Minimal reproduction repository
• Expected vs actual behavior
• Error messages or stack traces