MDX Source Map Generator

Overview

Build a command-line tool that compiles MDX files to JavaScript and generates source maps for debugging support. The tool should accept an MDX file path as input, compile it to JavaScript, generate a source map, and output both files.

Requirements

Input

• Accept a file path to an MDX file as a command-line argument
• Read the MDX file content from the filesystem

Compilation

• Compile the MDX file to JavaScript
• Generate a source map during compilation that maps the compiled JavaScript back to the original MDX source
• The source map should follow the standard source map format

Output

• Write the compiled JavaScript to a file with the same name but a .js extension
• Write the source map to a separate file with a .js.map extension
• Include a source map reference comment at the end of the generated JavaScript file (e.g., //# sourceMappingURL=filename.js.map)
• Print success messages indicating where the files were written

Error Handling

• If the input file doesn't exist, print an error message and exit
• If compilation fails, print the error message and exit

Test Cases { .test-cases }

Test 1: Basic MDX compilation with source map { .test-case @test }

Input file (test-input.mdx):

# Hello World

This is a test MDX file.

export const metadata = {
  title: "Test"
}

Expected behavior:

• Generates test-input.js containing compiled JavaScript
• Generates test-input.js.map containing the source map
• The .js file includes a //# sourceMappingURL=test-input.js.map comment
• The source map contains mappings to the original MDX file

Test file: src/compile-mdx.test.js { .test-file }

import { test } from 'node:test'
import assert from 'node:assert'
import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'node:fs'
import { execSync } from 'node:child_process'

test('compiles MDX file and generates source map', () => {
  // Create test input file
  const testMdx = `# Hello World

This is a test MDX file.

export const metadata = {
  title: "Test"
}
`
  writeFileSync('test-input.mdx', testMdx)

  try {
    // Run the compiler
    execSync('node src/compile-mdx.js test-input.mdx', { encoding: 'utf-8' })

    // Check that output files exist
    assert.ok(existsSync('test-input.js'), 'JavaScript file should be created')
    assert.ok(existsSync('test-input.js.map'), 'Source map file should be created')

    // Check JavaScript file content
    const jsContent = readFileSync('test-input.js', 'utf-8')
    assert.ok(jsContent.includes('//# sourceMappingURL=test-input.js.map'),
      'JavaScript file should include source map reference')

    // Check source map file content
    const sourceMap = JSON.parse(readFileSync('test-input.js.map', 'utf-8'))
    assert.ok(sourceMap.version, 'Source map should have version')
    assert.ok(sourceMap.sources, 'Source map should have sources')
    assert.ok(sourceMap.mappings, 'Source map should have mappings')
    assert.ok(sourceMap.sources.includes('test-input.mdx'),
      'Source map should reference the original MDX file')
  } finally {
    // Cleanup
    if (existsSync('test-input.mdx')) unlinkSync('test-input.mdx')
    if (existsSync('test-input.js')) unlinkSync('test-input.js')
    if (existsSync('test-input.js.map')) unlinkSync('test-input.js.map')
  }
})

Dependencies { .dependencies }

@mdx-js/mdx { .dependency }

Provides MDX compilation support with source map generation.

source-map { .dependency }

Provides the SourceMapGenerator class for creating source maps.

Implementation Notes

• The main implementation should be in src/compile-mdx.js
• Use Node.js filesystem APIs to read and write files
• Handle the command-line argument for the input file path
• Ensure proper error handling for missing files and compilation errors