CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mdx-js--mdx

MDX compiler that transforms MDX documents into JavaScript

Overall
score

97%

Overview
Eval results
Files

processor.mddocs/

Processor Creation

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.

Capabilities

CreateProcessor Function

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))
);

Configuration

ProcessorOptions Interface

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;
}

Plugin System

Plugin Types

The processor supports three plugin phases:

type PluggableList = Array<Pluggable>;
type Pluggable = Plugin | [Plugin, ...Parameters<Plugin>] | Preset;

Remark Plugins (Markdown phase):

  • Process the markdown AST (mdast)
  • Examples: remark-gfm, remark-toc, remark-breaks

Rehype Plugins (HTML phase):

  • Process the HTML AST (hast)
  • Examples: rehype-highlight, rehype-slug, rehype-autolink-headings

Recma Plugins (JavaScript phase):

  • Process the JavaScript AST (esast)
  • Examples: Custom code transformations, import rewriting

Plugin Configuration Examples

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
      };
    }
  ]
});

Advanced Usage

Custom Pipeline Creation

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);

Format-Specific Processing

// 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'
});

Runtime Configuration

// 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'
});

Processor Instance Methods

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;
}

Error Handling

Processor creation and usage can throw errors for:

  • Invalid options: Deprecated or unsupported configuration
  • Plugin errors: Failed plugin loading or execution
  • Format conflicts: Using 'detect' format with createProcessor
  • Processing errors: Syntax or transformation failures
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--mdx

docs

compilation.md

evaluation.md

index.md

processor.md

tile.json