remark-typescript-code-import
v1.0.1
Published
A remark plugin to import code from typescript files
Downloads
12,110
Readme
remark-typescript-code-import
📝 A remark plugin to import code from typescript files
Installation
npm install -D remark-directive remark-typescript-code-import
Setup
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.
Usage
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"}
Options
directiveName: string
: The directive name. Defaults tocomponent-docs
.fileAttributeName: string
: The attribute name for file path. Defaults tofile
.rootDir: string
: Change what<rootDir>
refers to. Defaults toprocess.cwd()
.
Testing
After installing dependencies with npm install
, the tests can be run with: npm test
License
Rippling People Center Inc. Apache 2.0