{"id":12778,"library":"remark-typescript-code-import","title":"Remark Plugin to Import TypeScript Code","description":"remark-typescript-code-import is a Remark plugin designed to extract and embed specific code snippets from TypeScript files directly into Markdown or MDX documents. It allows developers to import types, interfaces, functions, or other code blocks by referencing a file path and a specific symbol using a directive syntax (e.g., `::typescript{file=\"./Component.tsx#ComponentProps\"}`). The plugin operates within the Unified ecosystem, requiring `remark-directive` to parse custom directives. Currently at version 1.0.1, it provides TypeScript types and supports Node.js >=16. Its primary differentiator is the targeted import of TypeScript-specific constructs, making it ideal for documentation where code examples need to be synchronized with actual source files without manual copying. Releases appear to be ad-hoc based on changes and fixes rather than a strict schedule.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/Rippling/remark-typescript-code-import","tags":["javascript","code import","markdown","mdast","mdx","plugin","remark-plugin","remark","typescript"],"install":[{"cmd":"npm install remark-typescript-code-import","lang":"bash","label":"npm"},{"cmd":"yarn add remark-typescript-code-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add remark-typescript-code-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to parse the custom directives (e.g., `::typescript`) used by this plugin in Markdown/MDX files.","package":"remark-directive","optional":false}],"imports":[{"note":"This package uses a default export. For CommonJS, append `.default` to the `require` call for correct interop.","wrong":"const remarkTypescriptCodeImport = require('remark-typescript-code-import');","symbol":"remarkTypescriptCodeImport","correct":"import remarkTypescriptCodeImport from 'remark-typescript-code-import';"},{"note":"The `remark` processor is a named export from the `remark` package.","wrong":"import remark from 'remark';","symbol":"remark","correct":"import { remark } from 'remark';"},{"note":"The `remark-directive` plugin uses a default export.","symbol":"remarkDirective","correct":"import remarkDirective from 'remark-directive';"}],"quickstart":{"code":"import { remark } from 'remark';\nimport path from 'node:path';\nimport { readSync } from 'to-vfile';\nimport remarkDirective from 'remark-directive';\nimport remarkTypescriptCodeImport from 'remark-typescript-code-import';\nimport { writeFileSync, mkdirSync } from 'node:fs';\n\n// Create dummy files for the example\nmkdirSync('docs', { recursive: true });\nwriteFileSync('docs/example.md', '::typescript{file=\"./Component.tsx#ComponentProps\"}\\n::typescript{file=\"<rootDir>/src/types.ts#User\"}');\nwriteFileSync('docs/Component.tsx', 'type ComponentProps = {\\n  propA: string;\\n}\\n\\nfunction Component(props: ComponentProps) {\\n  // ...\\n}');\nmkdirSync('src', { recursive: true });\nwriteFileSync('src/types.ts', 'export type User = {\\n  id: string;\\n  name: string;\\n};');\n\nasync function processMarkdown() {\n  const result = await remark()\n    .use(remarkDirective)\n    .use(remarkTypescriptCodeImport, { rootDir: process.cwd() })\n    .process(readSync(path.join(process.cwd(), 'docs', 'example.md')));\n\n  console.log('--- Processed Markdown ---\\n');\n  console.log(String(result));\n  console.log('\\n--- End Processed Markdown ---');\n}\n\nprocessMarkdown();","lang":"typescript","description":"This quickstart demonstrates how to use the plugin with `remark` and `remark-directive` to import TypeScript code snippets into a Markdown file. It sets up example `.md` and `.tsx` files, then processes the Markdown to show the imported code blocks. It also illustrates the `rootDir` option."},"warnings":[{"fix":"Review your existing Markdown directives (e.g., `::typescript{...}`) and plugin options to align with the new naming conventions introduced in v1.0.0. Consult the changelog for specific details if migrating from `v0.x`.","message":"Version 1.0.0 introduced breaking changes related to 'naming convention fixes'. Code written for `v0.x` might require updates to directive attributes or names to function correctly.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure you install `remark-directive` (`npm install -D remark-directive`) and include it in your Remark processing chain *before* `remark-typescript-code-import`, e.g., `.use(remarkDirective).use(remarkTypescriptCodeImport)`.","message":"The `remark-typescript-code-import` plugin relies on `remark-directive` to parse its custom directives. If `remark-directive` is not installed and explicitly added to your Remark processing chain, the custom directives will not be recognized, and the plugin will not function.","severity":"gotcha","affected_versions":">=0.1.1"},{"fix":"If using `<rootDir>/` in your directives, explicitly set the `rootDir` option when configuring the plugin: `.use(remarkTypescriptCodeImport, { rootDir: path.resolve(__dirname, '../../') })` to ensure the correct base path is used for resolution.","message":"File paths for imports are relative to the Markdown file by default. When using `<rootDir>/` prefixes, the `rootDir` option must be correctly configured, or it defaults to `process.cwd()` which might not be the expected project root.","severity":"gotcha","affected_versions":">=0.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install -D remark-typescript-code-import` (or `yarn add -D remark-typescript-code-import`) and verify the import statement `import remarkTypescriptCodeImport from 'remark-typescript-code-import';` is correct.","cause":"The package `remark-typescript-code-import` has not been installed or the import path is incorrect.","error":"Error: Cannot find module 'remark-typescript-code-import'"},{"fix":"Ensure `remark-directive` is installed (`npm install -D remark-directive`) and included in your Remark usage *before* `remarkTypescriptCodeImport`: `.use(remarkDirective).use(remarkTypescriptCodeImport)`.","cause":"The `remark-directive` plugin is not active in the Remark processing chain, or it is placed after `remark-typescript-code-import`.","error":"TypeError: Unknown directive `typescript`"},{"fix":"Verify the file path is correct. If using `<rootDir>/`, ensure the `rootDir` plugin option is set to the absolute path of your project root: `.use(remarkTypescriptCodeImport, { rootDir: process.cwd() })` or a specific absolute path like `path.join(__dirname, '..')`.","cause":"The `rootDir` option is not correctly configured for paths starting with `<rootDir>/`, or the file simply does not exist at the resolved path.","error":"Error: Cannot resolve file path: <rootDir>/your-file.tsx (or similar file not found error)"}],"ecosystem":"npm"}