tessl/npm-react-docgen

A library to extract information from React components for documentation generation.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Component Resolution

Name: tessl/npm-react-docgen
Author: tessl

System for finding and identifying React component definitions within source files using AST traversal.

Capabilities

Resolver Interface

The base interface for all component resolvers.

interface ResolverClass {
  resolve: ResolverFunction;
}

type ResolverFunction = (file: FileState) => ComponentNodePath[];

type Resolver = ResolverClass | ResolverFunction;

type ComponentNodePath = NodePath<ComponentNode>;

type ComponentNode = 
  | CallExpression
  | ClassDeclaration
  | ClassExpression
  | ObjectExpression
  | StatelessComponentNode;

type StatelessComponentNode =
  | ArrowFunctionExpression
  | FunctionDeclaration
  | FunctionExpression
  | ObjectMethod;

Find Exported Definitions Resolver

Finds React components that are exported from the module.

class FindExportedDefinitionsResolver {
  constructor(options?: { limit?: number });
  resolve: (file: FileState) => ComponentNodePath[];
}

Usage Example:

import { builtinResolvers } from "react-docgen";

const resolver = new builtinResolvers.FindExportedDefinitionsResolver({ limit: 1 });
const componentPaths = resolver.resolve(fileState);

Find All Definitions Resolver

Finds all React component definitions in the file, regardless of export status.

class FindAllDefinitionsResolver {
  resolve: (file: FileState) => ComponentNodePath[];
}

Usage Example:

import { builtinResolvers } from "react-docgen";

const resolver = new builtinResolvers.FindAllDefinitionsResolver();
const allComponents = resolver.resolve(fileState);

Find Annotated Definitions Resolver

Finds React components that have specific annotations or JSDoc comments.

class FindAnnotatedDefinitionsResolver {
  resolve: (file: FileState) => ComponentNodePath[];
}

Usage Example:

import { builtinResolvers } from "react-docgen";

const resolver = new builtinResolvers.FindAnnotatedDefinitionsResolver();
const annotatedComponents = resolver.resolve(fileState);

Chain Resolver

Combines multiple resolvers with configurable chaining logic.

class ChainResolver {
  static Logic: {
    ALL: string;
    FIRST_FOUND: string;
  };
  
  constructor(
    resolvers: Resolver[], 
    options?: { chainingLogic?: string }
  );
  
  resolve: (file: FileState) => ComponentNodePath[];
}

Usage Example:

import { builtinResolvers } from "react-docgen";

const chainResolver = new builtinResolvers.ChainResolver([
  new builtinResolvers.FindExportedDefinitionsResolver({ limit: 1 }),
  new builtinResolvers.FindAnnotatedDefinitionsResolver()
], {
  chainingLogic: builtinResolvers.ChainResolver.Logic.ALL
});

const components = chainResolver.resolve(fileState);

Default Resolver Configuration

The default resolver setup used by the parser when no custom resolver is provided.

/** Default resolvers used by the parser */
const defaultResolvers: Resolver[];

/** Default resolver combining exported and annotated definition resolvers */
const defaultResolver: Resolver;

The default configuration uses:

FindExportedDefinitionsResolver with limit of 1
FindAnnotatedDefinitionsResolver as fallback
Combined using ChainResolver with ALL logic

Component Node Types

Type definitions for different kinds of React component AST nodes that resolvers can identify.

// Function-based components
type StatelessComponentNode =
  | ArrowFunctionExpression    // const Comp = () => <div />
  | FunctionDeclaration        // function Comp() { return <div />; }
  | FunctionExpression         // const Comp = function() { return <div />; }
  | ObjectMethod;              // { render() { return <div />; } }

// All component types
type ComponentNode = 
  | CallExpression             // React.createClass(), forwardRef(), memo()
  | ClassDeclaration           // class Comp extends React.Component {}
  | ClassExpression            // const Comp = class extends React.Component {}
  | ObjectExpression           // React.createClass({ render() {} })
  | StatelessComponentNode;

Resolution Process

The resolution process follows these steps:

AST Traversal: Parse the source code and traverse the AST
Pattern Matching: Identify nodes that match React component patterns
Validation: Verify that identified nodes are actual React components
Filtering: Apply resolver-specific filtering logic
Return: Provide ComponentNodePath objects for further processing

Common Component Patterns Detected:

// Export patterns
export default function MyComponent() {}
export const MyComponent = () => {};
export class MyComponent extends React.Component {}

// Named exports
export { MyComponent, AnotherComponent };

// Annotated components
/** @component */
function InternalComponent() {}

// HOC patterns
export default memo(MyComponent);
export default forwardRef(MyComponent);

Install with Tessl CLI