A library to extract information from React components for documentation generation.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Core parsing functionality for extracting React component documentation from source code using Babel AST analysis.
The primary function for parsing React component source code and extracting documentation.
/**
* Parse the source code and scan for react components based on the config
* The default resolvers look for exported react components.
* By default all handlers are applied, covering all possible use cases.
* The default importer is the fs-importer that resolves files using Node.js resolution.
*/
function parse(src: Buffer | string, config?: Config): Documentation[];Usage Examples:
import { parse } from "react-docgen";
// Basic parsing with default configuration
const componentCode = `
export default function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
`;
const documentation = parse(componentCode);
// Parsing with custom configuration
const docs = parse(componentCode, {
handlers: [/* custom handlers */],
resolver: /* custom resolver */,
filename: '/path/to/component.jsx'
});The structured documentation object returned by the parser.
interface Documentation {
/** Child context types defined by the component */
childContext?: Record<string, PropDescriptor>;
/** Array of HOC or mixin names this component composes */
composes?: string[];
/** Context types consumed by the component */
context?: Record<string, PropDescriptor>;
/** Component description from JSDoc comments */
description?: string;
/** Display name of the component */
displayName?: string;
/** Array of component methods with their signatures */
methods?: MethodDescriptor[];
/** Component props with type information and descriptions */
props?: Record<string, PropDescriptor>;
}React-docgen provides specific error types for different parsing scenarios.
enum ERROR_CODES {
MISSING_DEFINITION = 'ERR_REACTDOCGEN_MISSING_DEFINITION',
MULTIPLE_DEFINITIONS = 'ERR_REACTDOCGEN_MULTIPLE_DEFINITIONS'
}Usage Example:
import { parse, ERROR_CODES } from "react-docgen";
try {
const docs = parse(sourceCode);
} catch (error) {
// Errors thrown during parsing are standard Error objects
// Check error message to determine error type
console.error("Parsing failed:", error.message);
}Pre-configured collections of handlers, resolvers, and importers for common use cases.
/** Collection of all available built-in handlers */
const builtinHandlers: {
componentDocblockHandler: Handler;
componentMethodsHandler: Handler;
componentMethodsJsDocHandler: Handler;
defaultPropsHandler: Handler;
displayNameHandler: Handler;
codeTypeHandler: Handler;
propDocblockHandler: Handler;
propTypeCompositionHandler: Handler;
propTypeHandler: Handler;
contextTypeHandler: Handler;
childContextTypeHandler: Handler;
};
/** Collection of all available built-in resolvers */
const builtinResolvers: {
FindAllDefinitionsResolver: ResolverClass;
FindAnnotatedDefinitionsResolver: ResolverClass;
FindExportedDefinitionsResolver: ResolverClass;
ChainResolver: ResolverClass;
};
/** Collection of all available built-in importers */
const builtinImporters: {
fsImporter: Importer;
ignoreImporter: Importer;
};
/** Default set of handlers used by the parser */
const defaultHandlers: Handler[];Internal file state management during parsing and import resolution.
class FileState {
/** Parse method for handling imports and module resolution */
parse: (src: string, config: Config) => Documentation[];
/** Import method for resolving module dependencies */
import: (path: ImportPath, name: string) => NodePath | null;
}Core type definitions used throughout the parsing system.
interface PropDescriptor {
/** PropType information extracted from prop-types */
type?: PropTypeDescriptor;
/** Flow type information when available */
flowType?: TypeDescriptor<FunctionSignatureType>;
/** TypeScript type information when available */
tsType?: TypeDescriptor<TSFunctionSignatureType>;
/** Whether the prop is required */
required?: boolean;
/** Default value if specified */
defaultValue?: DefaultValueDescriptor;
/** JSDoc description of the prop */
description?: string;
}
interface MethodDescriptor {
/** Method name */
name: string;
/** JSDoc description */
description?: string | null;
/** Raw JSDoc comment block */
docblock: string | null;
/** Method modifiers (async, static, etc.) */
modifiers: MethodModifier[];
/** Method parameters */
params: MethodParameter[];
/** Return type information */
returns: MethodReturn | null;
}
interface MethodParameter {
/** Parameter name */
name: string;
/** Parameter description from JSDoc */
description?: string;
/** Whether parameter is optional */
optional: boolean;
/** Parameter type information */
type?: TypeDescriptor<FunctionSignatureType> | null;
}
type MethodModifier = 'async' | 'generator' | 'get' | 'set' | 'static';
interface DefaultValueDescriptor {
/** The default value */
value: unknown;
/** Whether the value was computed or literal */
computed: boolean;
}Install with Tessl CLI
npx tessl i tessl/npm-react-docgen