or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mderror-handling.mdhandlers.mdimporters.mdindex.mdparsing.mdresolvers.mdutilities.md
tile.json

tessl/npm-react-docgen

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-docgen@8.0.x

To install, run

npx @tessl/cli install tessl/npm-react-docgen@8.0.0

index.mddocs/

React-docgen

React-docgen is a comprehensive library designed to extract structured metadata from React components for documentation generation. It analyzes React component source code using Babel parsing and AST traversal to automatically discover component properties, methods, type information, and JSDoc comments.

Package Information

  • Package Name: react-docgen
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-docgen

Core Imports

import { parse } from "react-docgen";

For CommonJS:

const { parse } = require("react-docgen");

Additional imports for advanced usage:

import { 
  parse, 
  builtinHandlers, 
  builtinResolvers, 
  builtinImporters,
  utils,
  ERROR_CODES,
  makeFsImporter
} from "react-docgen";

// Type imports
import type { 
  Documentation,
  DocumentationBuilder,
  Config,
  Handler,
  Resolver,
  Importer,
  FileState,
  NodePath,
  babelTypes
} from "react-docgen";

Basic Usage

import { parse } from "react-docgen";

// Parse a React component
const componentCode = `
import React from 'react';

interface Props {
  /** The name to display */
  name: string;
  /** Whether the component is active */
  active?: boolean;
}

/**
 * A greeting component that displays a name
 */
export default function Greeting({ name, active = false }: Props) {
  return <div className={active ? 'active' : ''}>{name}</div>;
}
`;

const docs = parse(componentCode);
console.log(docs);
// Returns array of Documentation objects with props, methods, description, etc.

Architecture

React-docgen is built around several key components:

  • Parser Core: Main parsing function that orchestrates the analysis process
  • Resolver System: Finds and identifies React component definitions in source code
  • Handler System: Extracts specific information from components (props, methods, JSDoc, etc.)
  • Importer System: Resolves module imports and dependencies during analysis
  • Documentation Builder: Constructs structured documentation objects from extracted data
  • Type Analysis: Comprehensive TypeScript and Flow type extraction utilities

Capabilities

Core Parsing

Main parsing functionality for extracting React component documentation from source code.

function parse(src: Buffer | string, config?: Config): Documentation[];

interface Documentation {
  childContext?: Record<string, PropDescriptor>;
  composes?: string[];
  context?: Record<string, PropDescriptor>;
  description?: string;
  displayName?: string;
  methods?: MethodDescriptor[];
  props?: Record<string, PropDescriptor>;
}

class DocumentationBuilder {
  constructor();
  addComposes(moduleName: string): void;
  set(key: string, value: unknown): void;
  get<T>(key: string): T | null;
  getPropDescriptor(propName: string): PropDescriptor;
  getContextDescriptor(propName: string): PropDescriptor;
  getChildContextDescriptor(propName: string): PropDescriptor;
  build(): Documentation;
}

Core Parsing

Component Resolution

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

interface FindExportedDefinitionsResolver {
  resolve: (file: FileState) => ComponentNodePath[];
}

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

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

Component Resolution

Information Extraction

Handlers that extract specific types of information from React components.

type Handler = (
  documentation: Documentation,
  componentDefinition: NodePath<ComponentNode>
) => void;

Information Extraction

Module Import Resolution

System for resolving module imports and dependencies during component analysis.

type Importer = (
  path: ImportPath,
  name: string,
  file: FileState
) => NodePath | null;

Module Import Resolution

Configuration

Configuration system for customizing parsing behavior and analysis options.

interface Config {
  handlers?: Handler[];
  importer?: Importer;
  resolver?: Resolver;
  filename?: string;
  babelOptions?: TransformOptions;
}

Configuration

AST Analysis Utilities

Comprehensive collection of utilities for React component and TypeScript/Flow analysis.

// Key utility namespaces
namespace utils {
  namespace docblock;
  namespace expressionTo;
  namespace flowUtilityTypes;  
  namespace traverse;
}

AST Analysis Utilities

Error Handling

Error handling system for parsing failures and validation issues.

enum ERROR_CODES {
  MISSING_DEFINITION = 'ERR_REACTDOCGEN_MISSING_DEFINITION',
  MULTIPLE_DEFINITIONS = 'ERR_REACTDOCGEN_MULTIPLE_DEFINITIONS',
}

Error Handling

Types

interface PropDescriptor {
  type?: PropTypeDescriptor;
  flowType?: TypeDescriptor<FunctionSignatureType>;
  tsType?: TypeDescriptor<TSFunctionSignatureType>;
  required?: boolean;
  defaultValue?: DefaultValueDescriptor;
  description?: string;
}

interface MethodDescriptor {
  name: string;
  description?: string | null;
  docblock: string | null;
  modifiers: MethodModifier[];
  params: MethodParameter[];
  returns: MethodReturn | null;
}

interface MethodParameter {
  name: string;
  description?: string;
  optional: boolean;
  type?: TypeDescriptor<FunctionSignatureType> | null;
}

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

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

// Type aliases and interfaces
interface FileState {
  // Internal file state used by parsers and importers
}

type InternalConfig = Omit<Required<Config>, 'filename'>;

// Re-exported from Babel for convenience
type NodePath = import('@babel/traverse').NodePath;
type babelTypes = typeof import('@babel/types');