MDX Runtime Executor

Overview

Build a system that compiles MDX content on a server and executes it in a separate process, simulating a server-compile/client-execute architecture.

Requirements

Create a Node.js application with two main components:

1. Compilation Service (compiler.js)

Create a module that:

• Accepts MDX source code as a string
• Compiles it to a format suitable for deferred execution
• Returns the compiled code that can be transferred and executed elsewhere
• Handles both synchronous and asynchronous compilation

2. Execution Service (executor.js)

Create a module that:

• Accepts pre-compiled code from the compilation service
• Executes the compiled code with proper JSX runtime support
• Returns the rendered module with its default export and any named exports
• Handles both synchronous and asynchronous execution

3. Integration (index.js)

Create a main entry point that:

• Demonstrates the full compilation-then-execution workflow
• Compiles sample MDX content using the compilation service
• Passes the compiled code to the execution service
• Renders the resulting component and displays the output

Sample MDX Content

Your solution should successfully handle the following MDX content:

export const title = "Hello World"

# Welcome

This is a **simple** MDX document.

<div className="custom">Custom JSX content</div>

Test Cases

Test 1: Basic Compilation and Execution { .test }

File: executor.test.js

Test that MDX content can be compiled and then executed:

// Should compile MDX to executable format
const mdxSource = '# Hello\n\nThis is **MDX**.';
const compiled = await compileForExecution(mdxSource);

// Should execute the compiled code
const result = await executeCompiled(compiled);

// Should have a default export (the component)
assert(result.default !== undefined);
assert(typeof result.default === 'function');

Test 2: Synchronous Execution { .test }

File: executor.test.js

Test that synchronous compilation and execution works:

const mdxSource = 'export const value = 42\n\n# Test';
const compiled = compileForExecutionSync(mdxSource);
const result = executeCompiledSync(compiled);

// Should preserve named exports
assert(result.value === 42);

Test 3: Named Exports Preservation { .test }

File: executor.test.js

Test that named exports from MDX are accessible after execution:

const mdxSource = 'export const author = "Alice"\n\n# Article';
const compiled = await compileForExecution(mdxSource);
const result = await executeCompiled(compiled);

// Named exports should be accessible
assert(result.author === "Alice");

Dependencies { .dependencies }

@mdx-js/mdx { .dependency }

Provides MDX compilation and runtime execution capabilities.

react { .dependency }

Provides JSX runtime support required for MDX execution.

Constraints

• Use the appropriate compilation format for deferred execution
• Ensure JSX runtime is properly provided during execution
• Handle both async and sync execution paths
• Do not use evaluate or evaluateSync functions - the goal is to separate compilation from execution

Deliverables

• compiler.js: Compilation service
• executor.js: Execution service
• index.js: Integration example
• executor.test.js: Test suite