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

Configuration

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

Configuration system for customizing parsing behavior and analysis options in react-docgen.

Capabilities

Config Interface

The main configuration interface for customizing the parsing process.

interface Config {
  /** Array of handlers to process component information */
  handlers?: Handler[];
  /** Importer for resolving module dependencies */
  importer?: Importer;
  /** Resolver for finding component definitions */
  resolver?: Resolver;
  /** Filename for the code being parsed (affects import resolution) */
  filename?: string;
  /** Babel parser configuration options */
  babelOptions?: TransformOptions;
}

Internal Configuration Type

The internal configuration type used by the parser after applying defaults.

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

Note: Configuration objects are automatically processed by the parse function. You don't need to call any configuration factory functions directly.

Default Configuration

Default configuration values used when options are not specified.

/** Default array of handlers covering all common use cases */
const defaultHandlers: Handler[];

/** Default resolver for finding exported and annotated components */
const defaultResolver: Resolver;

/** Default importer using filesystem resolution */
const defaultImporter: Importer;

Default Handler Stack:

propTypeHandler - Extract PropTypes definitions
contextTypeHandler - Extract context types
childContextTypeHandler - Extract child context types
propTypeCompositionHandler - Handle prop composition patterns
propDocblockHandler - Extract prop JSDoc comments
codeTypeHandler - Extract TypeScript/Flow type information
defaultPropsHandler - Extract default prop values
componentDocblockHandler - Extract component JSDoc comments
displayNameHandler - Extract component display names
componentMethodsHandler - Extract component methods
componentMethodsJsDocHandler - Extract method JSDoc comments

Handler Configuration

Customizing the information extraction process with custom handlers.

import { parse, defaultHandlers, Handler } from "react-docgen";

// Using subset of default handlers
const docs = parse(sourceCode, {
  handlers: [
    propTypeHandler,
    displayNameHandler,
    componentDocblockHandler
  ]
});

// Adding custom handlers to defaults
const customHandler: Handler = (documentation, componentDefinition) => {
  // Custom extraction logic
};

const docsWithCustom = parse(sourceCode, {
  handlers: [...defaultHandlers, customHandler]
});

Resolver Configuration

Customizing component discovery with different resolver strategies.

import { 
  parse, 
  builtinResolvers
} from "react-docgen";

// Find all components in file
const docs = parse(sourceCode, {
  resolver: new builtinResolvers.FindAllDefinitionsResolver()
});

// Find only exported components with limit
const exportedDocs = parse(sourceCode, {
  resolver: new builtinResolvers.FindExportedDefinitionsResolver({ limit: 1 })
});

// Chain multiple resolvers
const chainedDocs = parse(sourceCode, {
  resolver: new builtinResolvers.ChainResolver([
    new builtinResolvers.FindExportedDefinitionsResolver({ limit: 1 }),
    new builtinResolvers.FindAllDefinitionsResolver()
  ], { chainingLogic: builtinResolvers.ChainResolver.Logic.FIRST_FOUND })
});

Importer Configuration

Customizing module import resolution behavior.

import { 
  parse, 
  fsImporter, 
  ignoreImporter, 
  makeFsImporter 
} from "react-docgen";

// Ignore all imports (browser-safe)
const docs = parse(sourceCode, {
  importer: ignoreImporter
});

// Custom filesystem importer
const customImporter = makeFsImporter({
  extensions: ['.tsx', '.ts', '.jsx', '.js'],
  preserveSymlinks: false
});

const docsWithCustomImporter = parse(sourceCode, {
  importer: customImporter,
  filename: '/path/to/component.tsx'
});

Babel Configuration

Customizing the Babel parser options for different syntax support.

import { parse } from "react-docgen";

const docs = parse(sourceCode, {
  babelOptions: {
    // Parser options
    parserOpts: {
      plugins: [
        'jsx',
        'typescript',
        'decorators-legacy',
        'classProperties'
      ]
    },
    // Transform options  
    presets: [
      '@babel/preset-typescript',
      '@babel/preset-react'
    ]
  }
});

Filename Configuration

Setting the filename affects import resolution and error reporting.

import { parse } from "react-docgen";

// With filename for proper import resolution
const docs = parse(sourceCode, {
  filename: '/absolute/path/to/Component.tsx'
});

// Relative filename (relative to babelOptions.cwd)
const docsRelative = parse(sourceCode, {
  filename: 'src/Component.tsx',
  babelOptions: {
    cwd: '/project/root'
  }
});

Complete Configuration Example

Comprehensive configuration example showing all options.

import { 
  parse,
  defaultHandlers,
  builtinResolvers,
  makeFsImporter,
  Handler
} from "react-docgen";

// Custom handler for extracting additional metadata
const customMetadataHandler: Handler = (documentation, componentDefinition) => {
  // Extract custom metadata from JSDoc tags
  const comments = getJSDocComments(componentDefinition);
  const metadata = extractCustomTags(comments);
  documentation.set('customMetadata', metadata);
};

// Complete configuration
const docs = parse(sourceCode, {
  // Handler configuration
  handlers: [
    ...defaultHandlers,
    customMetadataHandler
  ],
  
  // Resolver configuration
  resolver: new builtinResolvers.FindExportedDefinitionsResolver({ 
    limit: 1 
  }),
  
  // Importer configuration
  importer: makeFsImporter({
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs'],
    preserveSymlinks: false
  }),
  
  // File context
  filename: '/absolute/path/to/component.tsx',
  
  // Babel configuration
  babelOptions: {
    parserOpts: {
      plugins: [
        'jsx',
        'typescript', 
        'decorators-legacy',
        'classProperties',
        'objectRestSpread',
        'functionBind'
      ]
    },
    presets: [
      ['@babel/preset-typescript', { 
        isTSX: true, 
        allExtensions: true 
      }],
      '@babel/preset-react'
    ]
  }
});

Environment-Specific Configuration

Different configurations for different environments.

import { defaultHandlers, builtinResolvers, builtinImporters } from "react-docgen";
// Node.js environment (full features)
const nodeConfig = {
  handlers: defaultHandlers,
  importer: builtinImporters.fsImporter,
  // Uses default resolver (exported from config, not directly available)
};

// Browser environment (limited imports)
const browserConfig = {
  handlers: defaultHandlers,
  importer: builtinImporters.ignoreImporter, // No filesystem access
  // Uses default resolver
};

// Testing environment (find all components)
const testConfig = {
  handlers: defaultHandlers,
  importer: builtinImporters.ignoreImporter,
  resolver: new builtinResolvers.FindAllDefinitionsResolver() // Find everything
};