Créer un plugin remark pour extraire le temps de lecture d'un fichier MDX

Remark est un puissant processeur de markdown qui peut être utilisé pour créer des plugins personnalisés pour transformer le contenu markdown. Lors du traitement des fichiers markdown avec remark, le contenu est transformé en un arbre de syntaxe abstraite (AST) qui peut être manipulé à l'aide de plugins.

Pour une meilleure expérience utilisateur, il est courant d'afficher le temps de lecture estimé d'un article. Dans ce guide, nous allons créer un plugin remark pour extraire les données de temps de lecture d'un fichier MDX et les rendre disponibles lors de l'importation du fichier MDX en tant que module ES.

Commencer#

Commençons par créer un fichier MDX :

En supposant que nous utilisons Vite en tant que bundler, avec le plugin officiel @mdx-js/rollup pour transformer les fichiers MDX, nous pouvons donc importer le fichier MDX en tant que module ES. La configuration de Vite devrait ressembler à ceci :

Si nous importons le fichier MDX en tant que module ES, le contenu sera un objet avec la propriété default contenant le JSX compilé. Par exemple :

Cela donnera :

Une fois que nous avons cette sortie, nous sommes prêts à créer le plugin remark.

Créer le plugin remark#

Voyons ce que nous devons faire pour atteindre notre objectif :

1. Extraire le contenu MDX en texte pour le calcul du temps de lecture.
2. Calculer le temps de lecture.
3. Attacher les données de temps de lecture au contenu MDX, les rendre disponibles lors de l'importation du fichier MDX en tant que module ES.

Heureusement, il existe déjà des bibliothèques pour nous aider avec le calcul du temps de lecture et les opérations AST de base :

• reading-time pour calculer le temps de lecture.
• mdast-util-to-string pour convertir l'AST MDX en texte.
• estree-util-value-to-estree pour convertir les données de temps de lecture en un nœud ESTree.

Si vous êtes un utilisateur de TypeScript, vous devrez peut-être également installer ces packages pour les définitions de types :

• @types/mdast pour les définitions de types de nœuds racine MDX.
• unified pour les définitions de types de plugins.

Dès que nous avons installé les packages, nous pouvons commencer à créer le plugin :

Comme nous pouvons le voir, le plugin extrait simplement le contenu MDX en texte et calcule le temps de lecture. Maintenant, nous devons attacher les données de temps de lecture au contenu MDX, et cela semble ne pas être si simple. Mais si nous jetons un œil aux autres bibliothèques géniales comme remark-mdx-frontmatter, nous pouvons trouver une façon de le faire :

Notez le type: 'mdxjsEsm' dans le code ci-dessus. Il s'agit d'un type de nœud utilisé pour sérialiser le ESM MDX. Le code ci-dessus attache les données de temps de lecture en utilisant le nom readingTime au contenu MDX, ce qui donnera la sortie suivante lors de l'importation du fichier MDX en tant que module ES :

Si vous avez besoin de changer le nom des données de temps de lecture, vous pouvez mettre à jour la propriété name du nœud Identifier.

Support TypeScript#

Pour rendre le plugin encore plus convivial pour les développeurs, nous pouvons ajouter une dernière touche en augmentant les définitions de types MDX :

Maintenant, lors de l'importation du fichier MDX, TypeScript reconnaîtra la propriété readingTime :

Conclusion#

J'espère que ce guide vous aidera à améliorer votre expérience lorsque vous travaillez avec des fichiers MDX. Avec ce plugin remark, vous pouvez utiliser directement les données de temps de lecture et même tirer parti du tree-shaking ESM pour de meilleures performances.