remark-mdx-react-docgen-typescript

import { readFile } from 'node:fs/promises'; import { compile } from '@mdx-js/mdx'; import remarkDirective from 'remark-directive'; import remarkReactDocgen from 'remark-mdx-react-docgen-typescript'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); // Create a dummy Component.tsx for demonstration purposes const componentCode = ` /** * A simple example component. * @param greeting The greeting message. */ export function MyComponent({ greeting }: { greeting: string }) { return <div>{greeting}, World!</div>; }; `; // In a real scenario, this would be a file on disk. // For quickstart, we'll simulate the MDX and component content. const mdxContent = ` # My Component Documentation This is an example of documenting MyComponent: ::component-docs{file="./MyComponent.tsx" greeting="Hello from MDX"} `; // Simulate writing the component file (optional, for direct execution) // In a real project, MyComponent.tsx would exist alongside your MDX. // For this quickstart, we'll compile the MDX assuming MyComponent.tsx exists // or is mocked during compilation. // To run this, you'd typically have MyComponent.tsx in the same directory // as your MDX file. For a self-contained example: // await fs.promises.writeFile(path.join(__dirname, 'MyComponent.tsx'), componentCode); async function compileMdxWithDocgen() { try { // Assuming 'MyComponent.tsx' is available where your MDX points. // For this example, we'll configure rootDir to point to __dirname // and ensure react-docgen-typescript can find the component. const { contents } = await compile(mdxContent, { jsx: true, remarkPlugins: [ remarkDirective, [remarkReactDocgen, { rootDir: __dirname, reactDocGenOptions: { tsConfigPath: path.join(__dirname, 'tsconfig.json') } }] ], }); console.log(contents); } catch (error) { console.error('MDX Compilation Error:', error); } } // A tsconfig.json is often required for react-docgen-typescript // Example content for tsconfig.json: // {"compilerOptions": {"jsx": "react", "module": "esnext", "target": "esnext", "esModuleInterop": true, "skipLibCheck": true}} // Ensure it exists in __dirname for this example to work with a real file. compileMdxWithDocgen();