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

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.

Comece#

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.

Crie o plugin remark#

Vamos conferir o que precisamos fazer para atingir 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 de tempo de leitura ao conteúdo MDX, tornando-os disponíveis ao importar o arquivo MDX como um módulo ES.

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.

Suporte a TypeScript#

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:

Conclusão#

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.