Um guia para criar um plugin remark para tornar os dados de tempo de leitura disponíveis ao importar arquivos MDX como módulos ES.
Remark é um poderoso processador de markdown que pode ser usado para criar plugins personalizados para transformar o conteúdo markdown. Ao analisar arquivos markdown com remark, o conteúdo é transformado em uma árvore de sintaxe abstrata (AST) que pode ser manipulada usando plugins.
Para uma melhor experiência do usuário, é comum exibir o tempo estimado de leitura de um artigo. Neste guia, criaremos um plugin remark para extrair os dados de tempo de leitura de um arquivo MDX e torná-los disponíveis ao importar o arquivo MDX como um módulo ES.
Vamos começar criando um arquivo MDX:
Assumindo que estamos usando Vite como o bundler, com o plugin oficial @mdx-js/rollup para transformar arquivos MDX, podemos então importar o arquivo MDX como um módulo ES. A configuração do Vite deve ser assim:
Se importarmos o arquivo MDX como um módulo ES, o conteúdo será um objeto com a propriedade default contendo o JSX compilado. Por exemplo:
Isso resultará em:
Uma vez que tivermos a saída como esta, estaremos prontos para criar o plugin remark.
Vamos conferir o que precisamos fazer para atingir o objetivo:
Felizmente, já existem bibliotecas para nos ajudar com o cálculo do tempo de leitura e operações básicas com AST:
reading-time para calcular o tempo de leitura.mdast-util-to-string para converter o AST do MDX para texto.estree-util-value-to-estree para converter os dados de tempo de leitura em um nó ESTree.Se você for um usuário de TypeScript, talvez também precise instalar esses pacotes para as definições de tipo:
@types/mdast para definições de tipo de nó raiz do MDX.unified para definições de tipo de plugin.Desde que tenhamos os pacotes instalados, podemos começar a criar o plugin:
Como podemos ver, o plugin simplesmente extrai o conteúdo do MDX para texto e calcula o tempo de leitura. Agora, precisamos anexar os dados de tempo de leitura ao conteúdo MDX, e isso não parece tão simples. Mas se dermos uma olhada em outras bibliotecas incríveis como remark-mdx-frontmatter, podemos encontrar uma maneira de fazer isso:
Observe o type: 'mdxjsEsm' no código acima. Este é um tipo de nó que é usado para serializar MDX ESM. O código acima anexa os dados de tempo de leitura usando o nome readingTime ao conteúdo MDX, o que resultará na seguinte saída ao importar o arquivo MDX como um módulo ES:
Se você precisar mudar o nome dos dados de tempo de leitura, pode atualizar a propriedade name do nó Identifier.
Para tornar o plugin ainda mais amigável para desenvolvedores, podemos dar um toque final ao expandir as definições de tipo do MDX:
Agora, ao importar o arquivo MDX, o TypeScript reconhecerá a propriedade readingTime:
Espero que este guia ajude você a ter uma melhor experiência ao trabalhar com arquivos MDX. Com este plugin remark, você pode usar diretamente os dados de tempo de leitura e até aproveitar o tree-shaking do ESM para um melhor desempenho.