📝 A remark plugin to import code from typescript files

npm install -D remark-directive remark-typescript-code-import

import remarkTypescriptCodeImport from 'remark-typescript-code-import';
// or
// const remarkTypescriptCodeImport = require('remark-typescript-code-import').default;

See Using plugins for more instructions in the official documentation.

For example, given a file named example.mdx with the following contents:

::typescript{file="./Component.tsx#ComponentProps"}

and Component.tsx

type ComponentProps = {
  propA: string;
}

function Component(props: ComponentProps) {
  ...
}

The following script:

import { remark } from 'remark';
import path from 'node:path';
import remarkDirectivePlugin from 'remark-directive';
import { read } from 'to-vfile';

const result = await remark()
  .use(remarkDirectivePlugin)
  .use(remarkTypescriptCodeImport)
  .process(await read('example.md'));

console.log(result.toString());

yields:

```tsx
type ComponentProps = {
  propA: string;
};
```

The file path is relative to the markdown file path. You can use <rootDir> at the start of the path to import files relatively from the rootDir:

::typescript{file="<rootDir>/Button.tsx#ButtonComponent"}

It supports multiple files and types

::typescript{file="./Button.tsx#ButtonComponent,ButtonProps ./Chip.tsx#ChipComponent,ChipProps"}

• directiveName: string: The directive name. Defaults to component-docs.
• fileAttributeName: string: The attribute name for file path. Defaults to file.
• rootDir: string: Change what <rootDir> refers to. Defaults to process.cwd().

After installing dependencies with npm install, the tests can be run with: npm test

Rippling People Center Inc. Apache 2.0