Criar um plugin remark para extrair o tempo de leitura do MDX

O Remark é um processador de markdown poderoso que pode ser usado para criar plugins personalizados para transformar conteúdo markdown. Ao analisar ficheiros markdown com o remark, o conteúdo é transformado numa árvore de sintaxe abstrata (AST) que pode ser manipulada usando plugins.

Para uma melhor experiência do utilizador, é comum exibir o tempo de leitura estimado de um artigo. Neste guia, vamos criar um plugin remark para extrair os dados de tempo de leitura de um ficheiro MDX e disponibilizá-los ao importar o ficheiro MDX como um módulo ES.

Começar#

Vamos começar por criar um ficheiro MDX:

Assumindo que estamos a usar Vite como o bundler, com o plugin oficial @mdx-js/rollup para transformar ficheiros MDX, podemos então importar o ficheiro MDX como um módulo ES. A configuração do Vite deverá ser assim:

Se importarmos o ficheiro MDX como um módulo ES, o conteúdo será um objeto com a propriedade default contendo o JSX compilado. Por exemplo:

Irá resultar em:

Assim que tivermos uma saída como esta, estaremos prontos para criar o plugin remark.

Criar o plugin remark#

Vamos ver o que precisamos de fazer para alcançar o objetivo:

1. Extrair o conteúdo do MDX para texto para o cálculo do tempo de leitura.
2. Calcular o tempo de leitura.
3. Anexar os dados do tempo de leitura ao conteúdo do MDX, tornando-os disponíveis ao importar o ficheiro MDX como um módulo ES.

Felizmente, já existem bibliotecas que nos ajudam no cálculo do tempo de leitura e operações básicas de AST:

• reading-time para calcular o tempo de leitura.
• mdast-util-to-string para converter o AST do MDX em texto.
• estree-util-value-to-estree para converter os dados de tempo de leitura num nó ESTree.

Se és um utilizador de TypeScript, também podes precisar de instalar estes pacotes para definições de tipos:

• @types/mdast para definições de tipos do nó raiz do MDX.
• unified para definições de tipos de plugins.

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 do MDX, e isso parece não ser tão direto. Mas, se olharmos para outras bibliotecas incríveis como remark-mdx-frontmatter, podemos encontrar uma maneira de o fazer:

Note 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 do MDX, que resultará na seguinte saída ao importar o ficheiro MDX como um módulo ES:

Se precisares de alterar o nome dos dados de tempo de leitura, podes atualizar a propriedade name do nó Identifier.

Suporte a TypeScript#

Para tornar o plugin ainda mais amigável ao desenvolvedor, podemos fazer um último ajuste ao aumentar as definições de tipo do MDX:

Agora, ao importar o ficheiro MDX, o TypeScript reconhecerá a propriedade readingTime:

Conclusão#

Espero que este guia te ajude a ter uma melhor experiência ao trabalhar com ficheiros MDX. Com este plugin remark, podes usar os dados de tempo de leitura diretamente e até aproveitar o tree-shaking do ESM para um melhor desempenho.