MDX compiler that transforms MDX documents into JavaScript
Overall
score
97%
Advanced processor creation for building custom MDX transformation pipelines with full control over the unified processor chain. This allows for fine-grained control over the parsing, transformation, and code generation phases.
Creates a unified processor instance configured to compile markdown or MDX to JavaScript.
/**
* Create a processor to compile markdown or MDX to JavaScript
* @param options - Optional processor configuration
* @returns Configured unified processor instance
*/
function createProcessor(options?: ProcessorOptions): Processor<Root, Program, Program, Program, string>;Usage Examples:
import { createProcessor } from "@mdx-js/mdx";
// Basic processor
const processor = createProcessor();
const result = await processor.process('# Hello World');
// Custom processor with plugins
const processor = createProcessor({
format: 'mdx',
remarkPlugins: ['remark-gfm'],
rehypePlugins: ['rehype-highlight']
});
// Process multiple files
const files = ['intro.mdx', 'guide.mdx'];
const results = await Promise.all(
files.map(file => processor.process(file))
);Comprehensive configuration options for processor creation.
interface ProcessorOptions {
/** Format of input files */
format?: 'md' | 'mdx';
/** Whether to keep JSX instead of compiling it away */
jsx?: boolean;
/** JSX runtime to use */
jsxRuntime?: 'automatic' | 'classic';
/** Where to import automatic JSX runtime from */
jsxImportSource?: string;
/** Whether to add development info and use jsxDEV */
development?: boolean;
/** Output format for generated code */
outputFormat?: 'program' | 'function-body';
/** Base URL for resolving imports and export statements */
baseUrl?: URL | string;
/** Source map generator class for debugging */
SourceMapGenerator?: typeof SourceMapGenerator;
/** Attribute name casing for HTML elements */
elementAttributeNameCase?: 'react' | 'html';
/** Style property name casing for style objects */
stylePropertyNameCase?: 'dom' | 'css';
/** Convert obsolete align attributes to CSS styles */
tableCellAlignToStyle?: boolean;
/** List of markdown file extensions */
mdExtensions?: ReadonlyArray<string>;
/** List of MDX file extensions */
mdxExtensions?: ReadonlyArray<string>;
/** Provider import source for component context */
providerImportSource?: string;
/** Remark plugins for markdown processing phase */
remarkPlugins?: PluggableList;
/** Rehype plugins for HTML processing phase */
rehypePlugins?: PluggableList;
/** Recma plugins for JavaScript generation phase */
recmaPlugins?: PluggableList;
/** Options passed to remark-rehype transformation */
remarkRehypeOptions?: RemarkRehypeOptions;
}The processor supports three plugin phases:
type PluggableList = Array<Pluggable>;
type Pluggable = Plugin | [Plugin, ...Parameters<Plugin>] | Preset;Remark Plugins (Markdown phase):
Rehype Plugins (HTML phase):
Recma Plugins (JavaScript phase):
import { createProcessor } from "@mdx-js/mdx";
// GitHub Flavored Markdown
const processor = createProcessor({
remarkPlugins: [
'remark-gfm', // Tables, strikethrough, task lists
['remark-toc', { heading: 'contents', tight: true }]
]
});
// Syntax highlighting
const processor = createProcessor({
rehypePlugins: [
['rehype-highlight', { languages: { typescript: 'ts' } }],
'rehype-slug',
['rehype-autolink-headings', { behavior: 'wrap' }]
]
});
// Custom JavaScript transformations
const processor = createProcessor({
recmaPlugins: [
function customTransform() {
return (tree) => {
// Transform JavaScript AST
};
}
]
});import { createProcessor } from "@mdx-js/mdx";
import { unified } from "unified";
// Extend processor with additional transformations
const processor = createProcessor({
format: 'mdx',
jsx: false
});
// Add custom processing steps
processor.use(function customPlugin() {
return (tree, file) => {
// Custom transformation logic
};
});
// Process with custom pipeline
const result = await processor.process(mdxContent);// Markdown-only processor
const markdownProcessor = createProcessor({
format: 'md',
jsx: false,
remarkPlugins: ['remark-gfm']
});
// MDX-specific processor
const mdxProcessor = createProcessor({
format: 'mdx',
jsx: false,
jsxRuntime: 'automatic',
providerImportSource: '@mdx-js/react'
});// Development configuration
const devProcessor = createProcessor({
development: true,
jsx: false,
jsxRuntime: 'automatic',
SourceMapGenerator: require('source-map').SourceMapGenerator
});
// Production configuration
const prodProcessor = createProcessor({
development: false,
jsx: false,
jsxRuntime: 'automatic',
outputFormat: 'program'
});The returned processor implements the unified Processor interface:
interface Processor<Root, Program, Program, Program, string> {
/** Process a file asynchronously */
process(file: Compatible): Promise<VFile>;
/** Process a file synchronously */
processSync(file: Compatible): VFile;
/** Parse input to AST */
parse(file: Compatible): Root;
/** Transform AST */
run(tree: Root, file?: VFile): Promise<Program>;
/** Compile AST to string */
stringify(tree: Program, file?: VFile): string;
/** Add a plugin */
use<T extends any[]>(plugin: Plugin<T>, ...options: T): this;
}Processor creation and usage can throw errors for:
try {
const processor = createProcessor({
format: 'mdx',
remarkPlugins: ['invalid-plugin']
});
} catch (error) {
console.error('Processor creation failed:', error.message);
}Install with Tessl CLI
npx tessl i tessl/npm-mdx-js--mdxevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10