{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install remark-typescript-code-import"],"cli":null},"imports":["import remarkTypescriptCodeImport from 'remark-typescript-code-import';","import { remark } from 'remark';","import remarkDirective from 'remark-directive';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}