Crear un plugin de remark para extraer el tiempo de lectura de MDX

Remark es un procesador de markdown poderoso que se puede usar para crear plugins personalizados para transformar el contenido markdown. Al analizar archivos markdown con remark, el contenido se transforma en un árbol de sintaxis abstracta (AST) que se puede manipular usando plugins.

Para mejorar la experiencia del usuario, es común mostrar el tiempo de lectura estimado de un artículo. En esta guía, crearemos un plugin de remark para extraer los datos de tiempo de lectura de un archivo MDX y hacerlos disponibles al importar el archivo MDX como un módulo ES.

Comenzar#

Empecemos creando un archivo MDX:

Suponiendo que estamos usando Vite como el empaquetador, con el plugin oficial @mdx-js/rollup para transformar archivos MDX, de esta forma podemos importar el archivo MDX como un módulo ES. La configuración de Vite debería verse así:

Si importamos el archivo MDX como un módulo ES, el contenido será un objeto con la propiedad default que contiene el JSX compilado. Por ejemplo:

Producirá:

Una vez que tengamos una salida como esta, estamos listos para crear el plugin de remark.

Crear el plugin de remark#

Veamos qué necesitamos hacer para lograr el objetivo:

1. Extraer el contenido de MDX a texto para el cálculo del tiempo de lectura.
2. Calcular el tiempo de lectura.
3. Adjuntar los datos de tiempo de lectura al contenido de MDX, hacerlos disponibles al importar el archivo MDX como un módulo ES.

Afortunadamente, ya existen librerías que nos ayudan con el cálculo del tiempo de lectura y las operaciones básicas del AST:

• reading-time para calcular el tiempo de lectura.
• mdast-util-to-string para convertir el AST de MDX en texto.
• estree-util-value-to-estree para convertir los datos de tiempo de lectura en un nodo ESTree.

Si eres usuario de TypeScript, también puedes necesitar instalar estos paquetes para definiciones de tipos:

• @types/mdast para definiciones de tipos del nodo raíz de MDX.
• unified para definiciones de tipos de plugins.

Siempre que tengamos los paquetes instalados, podemos comenzar a crear el plugin:

Como podemos ver, el plugin simplemente extrae el contenido de MDX a texto y calcula el tiempo de lectura. Ahora necesitamos adjuntar los datos de tiempo de lectura al contenido de MDX, y no parece tan sencillo. Pero si echamos un vistazo a otras librerías geniales como remark-mdx-frontmatter, podemos encontrar una forma de hacerlo:

Ten en cuenta el type: 'mdxjsEsm' en el código anterior. Este es un tipo de nodo que se utiliza para serializar MDX ESM. El código anterior adjunta los datos de tiempo de lectura usando el nombre readingTime al contenido de MDX, lo que producirá la siguiente salida al importar el archivo MDX como un módulo ES:

Si necesitas cambiar el nombre de los datos del tiempo de lectura, puedes actualizar la propiedad name del nodo Identifier.

Soporte para TypeScript#

Para hacer que el plugin sea aún más amigable para los desarrolladores, podemos dar un último toque ampliando las definiciones de tipos de MDX:

Ahora, al importar el archivo MDX, TypeScript reconocerá la propiedad readingTime:

Conclusión#

Espero que esta guía te ayude a tener una mejor experiencia al trabajar con archivos MDX. Con este plugin de remark, puedes usar los datos de tiempo de lectura directamente e incluso aprovechar el tree-shaking de ESM para un mejor rendimiento.