{"id":15013621,"url":"https://github.com/rippling/remark-typescript-code-import","last_synced_at":"2025-04-12T05:43:19.716Z","repository":{"id":226275488,"uuid":"749284743","full_name":"Rippling/remark-typescript-code-import","owner":"Rippling","description":"A remark plugin to import code from typescript files","archived":false,"fork":false,"pushed_at":"2025-04-11T16:26:48.000Z","size":394,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T05:43:08.935Z","etag":null,"topics":["documentation","mdx","mdx-js","react","remark","typescript","unifiedjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rippling.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-28T05:28:01.000Z","updated_at":"2024-03-06T17:19:32.000Z","dependencies_parsed_at":"2024-10-14T04:00:42.168Z","dependency_job_id":"22953029-d59c-4250-b0db-2ebb94b3352b","html_url":"https://github.com/Rippling/remark-typescript-code-import","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.5,"last_synced_commit":"c9b21e2ef845ae3e5096f443150dc16eb9855203"},"previous_names":["rippling/remark-typescript-code-import"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-typescript-code-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-typescript-code-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-typescript-code-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-typescript-code-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rippling","download_url":"https://codeload.github.com/Rippling/remark-typescript-code-import/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525157,"owners_count":21118616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","mdx","mdx-js","react","remark","typescript","unifiedjs"],"created_at":"2024-09-24T19:44:34.607Z","updated_at":"2025-04-12T05:43:19.689Z","avatar_url":"https://github.com/Rippling.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `remark-typescript-code-import`\n\n📝 A remark plugin to import code from typescript files\n\n[![npm version](https://badge.fury.io/js/remark-typescript-code-import.svg)](https://badge.fury.io/js/remark-typescript-code-import)\n\n## Installation\n\n```sh\nnpm install -D remark-directive remark-typescript-code-import\n```\n\n## Setup\n\n```js\nimport remarkTypescriptCodeImport from 'remark-typescript-code-import';\n// or\n// const remarkTypescriptCodeImport = require('remark-typescript-code-import').default;\n```\n\nSee [**Using plugins**](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#using-plugins) for more instructions in the official documentation.\n\n## Usage\n\nFor example, given a file named `example.mdx` with the following contents:\n\n```md\n::typescript{file=\"./Component.tsx#ComponentProps\"}\n```\n\nand `Component.tsx`\n\n```tsx\ntype ComponentProps = {\n  propA: string;\n}\n\nfunction Component(props: ComponentProps) {\n  ...\n}\n\n```\n\nThe following script:\n\n```js\nimport { remark } from 'remark';\nimport path from 'node:path';\nimport remarkDirectivePlugin from 'remark-directive';\nimport { read } from 'to-vfile';\n\nconst result = await remark()\n  .use(remarkDirectivePlugin)\n  .use(remarkTypescriptCodeImport)\n  .process(await read('example.md'));\n\nconsole.log(result.toString());\n```\n\nyields:\n\n````md\n```tsx\ntype ComponentProps = {\n  propA: string;\n};\n```\n````\n\nThe file path is relative to the markdown file path. You can use `\u003crootDir\u003e` at the start of the path to import files relatively from the rootDir:\n\n```md\n::typescript{file=\"\u003crootDir\u003e/Button.tsx#ButtonComponent\"}\n```\n\nIt supports multiple files and types\n\n```md\n::typescript{file=\"./Button.tsx#ButtonComponent,ButtonProps ./Chip.tsx#ChipComponent,ChipProps\"}\n```\n\n## Options\n\n- `directiveName: string`: The directive name. Defaults to `component-docs`.\n- `fileAttributeName: string`: The attribute name for file path. Defaults to `file`.\n- `rootDir: string`: Change what `\u003crootDir\u003e` refers to. Defaults to `process.cwd()`.\n\n## Testing\n\nAfter installing dependencies with `npm install`, the tests can be run with: `npm test`\n\n## License\n\nRippling People Center Inc.\n[Apache 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frippling%2Fremark-typescript-code-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frippling%2Fremark-typescript-code-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frippling%2Fremark-typescript-code-import/lists"}