https://github.com/rippling/remark-typescript-code-import
A remark plugin to import code from typescript files
https://github.com/rippling/remark-typescript-code-import
documentation mdx mdx-js react remark typescript unifiedjs
Last synced: about 1 year ago
JSON representation
A remark plugin to import code from typescript files
- Host: GitHub
- URL: https://github.com/rippling/remark-typescript-code-import
- Owner: Rippling
- License: apache-2.0
- Created: 2024-01-28T05:28:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T16:26:48.000Z (about 1 year ago)
- Last Synced: 2025-04-12T05:43:08.935Z (about 1 year ago)
- Topics: documentation, mdx, mdx-js, react, remark, typescript, unifiedjs
- Language: TypeScript
- Homepage:
- Size: 385 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `remark-typescript-code-import`
📝 A remark plugin to import code from typescript files
[](https://badge.fury.io/js/remark-typescript-code-import)
## Installation
```sh
npm install -D remark-directive remark-typescript-code-import
```
## Setup
```js
import remarkTypescriptCodeImport from 'remark-typescript-code-import';
// or
// const remarkTypescriptCodeImport = require('remark-typescript-code-import').default;
```
See [**Using plugins**](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#using-plugins) for more instructions in the official documentation.
## Usage
For example, given a file named `example.mdx` with the following contents:
```md
::typescript{file="./Component.tsx#ComponentProps"}
```
and `Component.tsx`
```tsx
type ComponentProps = {
propA: string;
}
function Component(props: ComponentProps) {
...
}
```
The following script:
```js
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:
````md
```tsx
type ComponentProps = {
propA: string;
};
```
````
The file path is relative to the markdown file path. You can use `` at the start of the path to import files relatively from the rootDir:
```md
::typescript{file="/Button.tsx#ButtonComponent"}
```
It supports multiple files and types
```md
::typescript{file="./Button.tsx#ButtonComponent,ButtonProps ./Chip.tsx#ChipComponent,ChipProps"}
```
## Options
- `directiveName: string`: The directive name. Defaults to `component-docs`.
- `fileAttributeName: string`: The attribute name for file path. Defaults to `file`.
- `rootDir: string`: Change what `` refers to. Defaults to `process.cwd()`.
## Testing
After installing dependencies with `npm install`, the tests can be run with: `npm test`
## License
Rippling People Center Inc.
[Apache 2.0](LICENSE)