{"library":"react-docgen-typescript-plugin","title":"React Docgen TypeScript Webpack Plugin","description":"react-docgen-typescript-plugin is a webpack plugin designed to automatically extract and inject TypeScript-based documentation (docgen information) for React components directly into the webpack build output. This is particularly useful for tools like Storybook that consume docgen information to generate component documentation. The current stable version is `1.0.8`. The package appears to follow a frequent bug-fix release cadence, with minor updates addressing specific issues or dependency bumps, as evidenced by the recent v1.0.x patches. Its key differentiator is its seamless integration into the webpack build process, providing a 'fire-and-forget' solution for generating React component props documentation from TypeScript types, contrasting with loaders that might require more explicit configuration per file. It supports both Webpack 4 and 5 and allows for fine-grained control over `tsconfig.json` paths, compiler options, and file inclusion/exclusion.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-docgen-typescript-plugin"],"cli":null},"imports":["import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';","import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';\n\nnew ReactDocgenTypescriptPlugin({ tsconfigPath: './tsconfig.dev.json' });","import ts from 'typescript';\n\nnew ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import path from 'path';\nimport webpack from 'webpack';\nimport ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';\nimport ts from 'typescript';\n\nconst config: webpack.Configuration = {\n  mode: 'development',\n  entry: './src/index.tsx',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js', '.jsx'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(ts|tsx)$/,\n        loader: 'ts-loader',\n        exclude: /node_modules/,\n      },\n    ],\n  },\n  plugins: [\n    // Initializes the plugin with default options, loading the root tsconfig.json\n    new ReactDocgenTypescriptPlugin(),\n    // Alternatively, specify a custom tsconfig path\n    // new ReactDocgenTypescriptPlugin({ tsconfigPath: './tsconfig.build.json' }),\n    // Or pass specific TypeScript compiler options directly\n    // new ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } }),\n  ],\n};\n\nexport default config;\n","lang":"typescript","description":"This quickstart demonstrates how to integrate `react-docgen-typescript-plugin` into a basic webpack configuration for a TypeScript React project. It shows how to import the plugin and add it to the webpack `plugins` array, using its default settings which automatically pick up your root `tsconfig.json`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}