Um guia para criar um plugin remark para disponibilizar os dados de tempo de leitura ao importar ficheiros MDX como módulos ES.
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.
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.
Vamos ver o que precisamos de fazer para alcançar o objetivo:
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.
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:
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.