CtrlK
BlogDocsLog inGet started
Tessl Logo

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

utilities.mddocs/

AST Analysis Utilities

Comprehensive collection of utilities for React component and TypeScript/Flow analysis, providing low-level AST manipulation functions.

Capabilities

Utility Namespaces

Core utility namespaces for different types of AST analysis.

namespace utils {
  /** JSDoc parsing and manipulation utilities */
  namespace docblock;
  /** Expression conversion utilities */
  namespace expressionTo;
  /** Flow type utility functions */
  namespace flowUtilityTypes;
  /** AST traversal utilities */
  namespace traverse;
}

Docblock Utilities

JSDoc comment parsing and manipulation functions.

namespace docblock {
  /** Parse JSDoc comment blocks into structured data */
  function parse(docblock: string): JSDocInfo;
  
  /** Extract docblock comment from AST node */
  function getDocblock(path: NodePath): string | null;
  
  /** Format docblock text with proper indentation */
  function format(docblock: string): string;
}

interface JSDocInfo {
  description?: string;
  tags: JSDocTag[];
}

interface JSDocTag {
  tag: string;
  name?: string;
  type?: string;
  description?: string;
}

Expression Conversion Utilities

Functions for converting AST expressions to different formats.

namespace expressionTo {
  /** Convert AST expression to string representation */
  function toString(path: NodePath): string;
  
  /** Convert AST expression to JavaScript value */
  function toValue(path: NodePath): unknown;
  
  /** Convert AST expression to type descriptor */
  function toType(path: NodePath): TypeDescriptor;
}

Flow Type Utilities

Utilities specific to Flow type analysis.

namespace flowUtilityTypes {
  /** Check if type annotation is a Flow utility type */
  function isUtilityType(path: NodePath): boolean;
  
  /** Extract utility type information */
  function getUtilityTypeInfo(path: NodePath): UtilityTypeInfo;
}

interface UtilityTypeInfo {
  name: string;
  parameters: TypeDescriptor[];
}

Traversal Utilities

AST traversal and navigation functions.

namespace traverse {
  /** Shallow visitor that ignores nested scopes */
  const shallowIgnoreVisitors: VisitorMap;
  
  /** Find all nodes matching a predicate */
  function findAll(
    path: NodePath, 
    predicate: (path: NodePath) => boolean
  ): NodePath[];
  
  /** Find first node matching a predicate */
  function findFirst(
    path: NodePath, 
    predicate: (path: NodePath) => boolean
  ): NodePath | null;
}

Type Analysis Functions

Functions for extracting and analyzing type information.

/** Extract Flow type information from AST nodes */
function getFlowType(path: NodePath): TypeDescriptor<FunctionSignatureType> | null;

/** Extract TypeScript type information from AST nodes */
function getTSType(path: NodePath): TypeDescriptor<TSFunctionSignatureType> | null;

/** Get type annotation from various AST node types */
function getTypeAnnotation(path: NodePath): NodePath | null;

/** Extract type identifier from type annotations */
function getTypeIdentifier(path: NodePath): string | null;

/** Get generic type parameters from functions or classes */
function getTypeParameters(path: NodePath): TypeParameters | null;

Component Analysis Functions

Functions for analyzing React component patterns.

/** Check if AST node represents a React component class */
function isReactComponentClass(path: NodePath): boolean;

/** Check if AST node represents a stateless component */
function isStatelessComponent(path: NodePath): boolean;

/** Check if method belongs to a React component */  
function isReactComponentMethod(path: NodePath): boolean;

/** Check if call expression is React.createElement */
function isReactCreateElementCall(path: NodePath): boolean;

/** Check if call expression is React.createClass */
function isReactCreateClassCall(path: NodePath): boolean;

/** Check if call expression is React.forwardRef */
function isReactForwardRefCall(path: NodePath): boolean;

/** Check if call expression is React.cloneElement */
function isReactCloneElementCall(path: NodePath): boolean;

/** Check if reference points to React builtin */
function isReactBuiltinReference(path: NodePath): boolean;

Member Access Functions

Functions for analyzing object and class members.

/** Get all members of a class or object */
function getMembers(path: NodePath): NodePath[];

/** Get class member value by name */
function getClassMemberValuePath(path: NodePath, name: string): NodePath | null;

/** Get member expression root identifier */
function getMemberExpressionRoot(path: NodePath): NodePath | null;

/** Get member expression value path */
function getMemberExpressionValuePath(path: NodePath, name: string): NodePath | null;

/** Get general member value path with type support */
function getMemberValuePath(path: NodePath, name: string): NodePath | null;

/** Check if definition type is supported for member extraction */
function isSupportedDefinitionType(path: NodePath): boolean;

Property Analysis Functions

Functions for analyzing object properties and their values.

/** Get property name, handling computed properties */
function getPropertyName(path: NodePath): string | null;

/** Get property value path from object expressions */
function getPropertyValuePath(path: NodePath, name: string): NodePath | null;

/** Get name or value from various AST node types */
function getNameOrValue(path: NodePath): string | null;

/** Get parameter name from function parameters */
function getParameterName(path: NodePath): string | null;

/** Prefix used for computed property names */
const COMPUTED_PREFIX: string;

Resolution Functions

Functions for resolving references and values in the AST.

/** Resolve AST path to its actual value */
function resolveToValue(path: NodePath): NodePath;

/** Resolve to module reference */
function resolveToModule(path: NodePath): string | null;

/** Resolve export declarations to their definitions */
function resolveExportDeclaration(path: NodePath): NodePath[];

/** Resolve function definition to its return value */
function resolveFunctionDefinitionToReturnValue(path: NodePath): NodePath | null;

/** Resolve generic type annotations */
function resolveGenericTypeAnnotation(path: NodePath): NodePath | null;

/** Resolve Higher-Order Component patterns */
function resolveHOC(path: NodePath): NodePath | null;

/** Resolve object pattern properties to values */
function resolveObjectPatternPropertyToValue(path: NodePath, key: string): NodePath | null;

/** Resolve object keys to array of strings */
function resolveObjectKeysToArray(path: NodePath): string[] | null;

/** Resolve object to array of property names */
function resolveObjectToNameArray(path: NodePath): string[] | null;

/** Resolve object values to array */
function resolveObjectValuesToArray(path: NodePath): NodePath[] | null;

Validation Functions

Functions for validating and checking AST node properties.

/** Check if assignment is destructuring pattern */
function isDestructuringAssignment(path: NodePath): boolean;

/** Check if assignment is exports or module.exports */
function isExportsOrModuleAssignment(path: NodePath): boolean;

/** Check if node is import specifier */
function isImportSpecifier(path: NodePath): boolean;

/** Check if PropType is required */
function isRequiredPropType(path: NodePath): boolean;

/** Check if Flow type is unreachable */
function isUnreachableFlowType(path: NodePath): boolean;

/** Check if module name refers to React */
function isReactModuleName(name: string): boolean;

Processing Functions

Functions for processing and transforming documentation data.

/** Normalize class definitions for consistent analysis */
function normalizeClassDefinition(path: NodePath): NodePath;

/** Parse JSDoc comments into structured data */
function parseJsDoc(docblock: string): JSDocInfo;

/** Post-process documentation for cleanup and validation */
function postProcessDocumentation(documentation: Documentation): Documentation;

/** Print AST values in readable format */
function printValue(path: NodePath): string;

/** Set property description from JSDoc */
function setPropDescription(prop: PropDescriptor, docblock: string): void;

Method Analysis Functions

Functions for analyzing component methods and their signatures.

/** Extract method documentation including parameters and return types */
function getMethodDocumentation(path: MethodNodePath): MethodDescriptor;

/** Find function return statement paths */
function findFunctionReturn(path: NodePath): NodePath[];

type MethodNodePath = NodePath<
  | ArrowFunctionExpression
  | FunctionExpression
  | FunctionDeclaration
  | ObjectMethod
  | ClassMethod
>;

PropType Analysis Functions

Functions for analyzing PropTypes and prop-related patterns.

/** Extract PropType information from AST nodes */
function getPropType(path: NodePath): PropTypeDescriptor | null;

/** Extract types from React component prop interfaces */
function getTypeFromReactComponent(path: NodePath): TypeDescriptor | null;

/** Apply function to all type properties */
function applyToTypeProperties(
  type: TypeDescriptor,
  callback: (property: TypeProperty) => void
): void;

Type Parameters Interface

Interface for generic type parameter information.

interface TypeParameters {
  /** Names of type parameters */
  names: string[];
  /** Constraints for each type parameter */
  constraints: (TypeDescriptor | null)[];
  /** Default types for each type parameter */
  defaults: (TypeDescriptor | null)[];
}

Usage Examples

Type Analysis:

import { utils } from "react-docgen";

// Extract TypeScript type information
const tsType = utils.getTSType(propPath);

// Get type annotation from various sources
const annotation = utils.getTypeAnnotation(componentPath);

// Check if component is React class
if (utils.isReactComponentClass(classPath)) {
  // Analyze class component
}

Member Analysis:

// Get all class members
const members = utils.getMembers(classPath);

// Get specific property value
const propTypes = utils.getClassMemberValuePath(classPath, 'propTypes');

// Get property name (handles computed properties)
const propName = utils.getPropertyName(propertyPath);

Resolution:

// Resolve reference to actual value
const resolved = utils.resolveToValue(referencePath);

// Resolve export to definition
const definitions = utils.resolveExportDeclaration(exportPath);

// Resolve HOC patterns
const innerComponent = utils.resolveHOC(hocPath);

Install with Tessl CLI

npx tessl i tessl/npm-react-docgen

docs

configuration.md

error-handling.md

handlers.md

importers.md

index.md

parsing.md

resolvers.md

utilities.md

tile.json