{"library":"remark-mdx-react-docgen-typescript","title":"MDX React Docgen Typescript Remark Plugin","description":"remark-mdx-react-docgen-typescript is a Remark plugin designed to integrate `react-docgen-typescript` functionality directly into MDX documents. It allows developers to automatically extract and display TypeScript React component documentation within their MDX content using a directive syntax (e.g., `::component-docs{file=\"./Component.tsx\"}`). The plugin processes MDX files, identifies these directives, and replaces them with JSX `<ComponentDocs>` elements containing `propsData` derived from the specified React component files. The current stable version is 1.0.1. Its release cadence appears to be ad-hoc, with recent updates in late 2023. Key differentiators include its tight integration with the `unified` and `remark` ecosystems, specifically for MDX, and its ability to leverage `react-docgen-typescript` for type-aware documentation generation, making it suitable for monorepos or design systems that use TypeScript and MDX for documentation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install remark-mdx-react-docgen-typescript"],"cli":null},"imports":["import remarkReactDocgen from 'remark-mdx-react-docgen-typescript';","const remarkReactDocgen = require('remark-mdx-react-docgen-typescript').default;","import type { Options } from 'remark-mdx-react-docgen-typescript';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { readFile } from 'node:fs/promises';\nimport { compile } from '@mdx-js/mdx';\nimport remarkDirective from 'remark-directive';\nimport remarkReactDocgen from 'remark-mdx-react-docgen-typescript';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\n// Create a dummy Component.tsx for demonstration purposes\nconst componentCode = `\n/**\n * A simple example component.\n * @param greeting The greeting message.\n */\nexport function MyComponent({ greeting }: { greeting: string }) {\n  return <div>{greeting}, World!</div>;\n};\n`;\n\n// In a real scenario, this would be a file on disk.\n// For quickstart, we'll simulate the MDX and component content.\nconst mdxContent = `\n# My Component Documentation\n\nThis is an example of documenting MyComponent:\n\n::component-docs{file=\"./MyComponent.tsx\" greeting=\"Hello from MDX\"}\n`;\n\n// Simulate writing the component file (optional, for direct execution)\n// In a real project, MyComponent.tsx would exist alongside your MDX.\n// For this quickstart, we'll compile the MDX assuming MyComponent.tsx exists\n// or is mocked during compilation.\n\n// To run this, you'd typically have MyComponent.tsx in the same directory\n// as your MDX file. For a self-contained example:\n// await fs.promises.writeFile(path.join(__dirname, 'MyComponent.tsx'), componentCode);\n\nasync function compileMdxWithDocgen() {\n  try {\n    // Assuming 'MyComponent.tsx' is available where your MDX points.\n    // For this example, we'll configure rootDir to point to __dirname\n    // and ensure react-docgen-typescript can find the component.\n    const { contents } = await compile(mdxContent, {\n      jsx: true,\n      remarkPlugins: [\n        remarkDirective,\n        [remarkReactDocgen, { rootDir: __dirname, reactDocGenOptions: { tsConfigPath: path.join(__dirname, 'tsconfig.json') } }]\n      ],\n    });\n    console.log(contents);\n  } catch (error) {\n    console.error('MDX Compilation Error:', error);\n  }\n}\n\n// A tsconfig.json is often required for react-docgen-typescript\n// Example content for tsconfig.json:\n// {\"compilerOptions\": {\"jsx\": \"react\", \"module\": \"esnext\", \"target\": \"esnext\", \"esModuleInterop\": true, \"skipLibCheck\": true}}\n// Ensure it exists in __dirname for this example to work with a real file.\n\ncompileMdxWithDocgen();","lang":"typescript","description":"This quickstart demonstrates how to set up `remark-mdx-react-docgen-typescript` with `@mdx-js/mdx` to process an MDX file containing a `::component-docs` directive. It shows the necessary imports for `remark-directive` and the docgen plugin, then compiles the MDX, illustrating how component documentation is extracted and inserted as JSX props into a `<ComponentDocs>` component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}