Usando MDX

Compile MDX com o unifast para usar expressões JSX e statements de import dentro do Markdown, renderizados com React ou outros runtimes JSX.

O MDX permite que você use expressões JSX e statements de import dentro do Markdown. O unifast compila MDX para módulos JavaScript que podem ser renderizados com React ou outros runtimes JSX.

Instalação

Uso Básico

import { compile } from "@unifast/node";

const source = `
# Hello

<Counter initial={0} />

export const meta = { title: "My Page" };
`;

const result = compile(source, { inputKind: "mdx" });
// result.output is a JavaScript module string

Como o MDX Funciona

O MDX estende o Markdown com duas capacidades:

  1. Expressões JSX - Use componentes inline com seu conteúdo.

  2. Imports/exports ESM - Importe componentes e exporte metadados.

O compilador processa MDX nestes passos:

MDX source
  → Parse (Markdown + JSX + ESM)
  → MdAst with JSX/ESM nodes
  → Lower to HAst
  → Emit as JavaScript module

A saída é um módulo JavaScript com uma função de export padrão que aceita uma prop components para injeção de componentes.

Usando com React

import { compile } from "@unifast/node";
import { compileToReact } from "@unifast/react";

const source = `# Hello\n\nThis is **MDX**.`;

const result = compile(source, { inputKind: "mdx" });
const Component = compileToReact(result);

// Render in your React app
<Component components={{ h1: MyHeading }} />

Frontmatter no MDX

Combine MDX com o plugin de frontmatter para extrair metadados:

import { compile, frontmatter } from "@unifast/node";

const source = `---
title: My Article
author: Jane
---

# {frontmatter.title}

Written by {frontmatter.author}.
`;

const result = compile(source, {
  inputKind: "mdx",
  plugins: [frontmatter()],
});

console.log(result.frontmatter);
// { title: "My Article", author: "Jane" }

Veja Também