Maak een remark-plugin om MDX-leestijd te extraheren

Remark is een krachtige markdown-processor die kan worden gebruikt om aangepaste plug-ins te maken om markdown-inhoud te transformeren. Bij het parsen van markdown-bestanden met remark wordt de inhoud omgezet in een abstracte syntaxisboom (AST) die kan worden gemanipuleerd met behulp van plug-ins.

Voor een betere gebruikerservaring is het gebruikelijk om de geschatte leestijd van een artikel weer te geven. In deze gids maken we een remark-plugin om de leestijdgegevens uit een MDX-bestand te halen en beschikbaar te maken bij het importeren van het MDX-bestand als een ES-module.

Aan de slag#

Laten we beginnen met het maken van een MDX-bestand:

Ervan uitgaande dat we Vite gebruiken als de bundelaar, met de officiële @mdx-js/rollup plug-in om MDX-bestanden te transformeren, zodat we het MDX-bestand als een ES-module kunnen importeren. De Vite-configuratie zou er zo uit moeten zien:

Als we het MDX-bestand als een ES-module importeren, wordt de inhoud een object met de eigenschap default die de gecompileerde JSX bevat. Bijvoorbeeld:

Zal opleveren:

Zodra we de output zoals deze hebben, kunnen we de remark-plugin maken.

Maak de remark-plugin#

Laten we eens kijken wat we moeten doen om het doel te bereiken:

1. Extraheer MDX-inhoud naar tekst voor berekening van de leestijd.
2. Bereken de leestijd.
3. Koppel de leestijdgegevens aan de MDX-inhoud, zodat deze beschikbaar zijn bij het importeren van het MDX-bestand als een ES-module.

Gelukkig zijn er al bibliotheken om ons te helpen bij de berekening van de leestijd en basis AST-bewerkingen:

• reading-time om de leestijd te berekenen.
• mdast-util-to-string om de MDX AST naar tekst te converteren.
• estree-util-value-to-estree om de leestijdgegevens naar een ESTree-knooppunt te converteren.

Als je een TypeScript-gebruiker bent, moet je mogelijk deze pakketten voor typen-definities installeren:

• @types/mdast voor MDX-hoofdknooppunttype-definities.
• unified voor plug-in type-definities.

Als we de pakketten eenmaal geïnstalleerd hebben, kunnen we beginnen met het maken van de plug-in:

Zoals we kunnen zien, haalt de plugin eenvoudig de MDX-inhoud naar tekst op en berekent de leestijd. Nu moeten we de leestijdgegevens aan de MDX-inhoud koppelen, en dat lijkt niet zo eenvoudig. Maar als we kijken naar andere geweldige bibliotheken zoals remark-mdx-frontmatter, kunnen we een manier vinden om het te doen:

Let op de type: 'mdxjsEsm' in de code hierboven. Dit is een knooppunttype dat wordt gebruikt om MDX ESM te serialiseren. De code hierboven koppelt de leestijdgegevens met de naam readingTime aan de MDX-inhoud, wat de volgende output oplevert bij het importeren van het MDX-bestand als een ES-module:

Als je de naam van de leestijdgegevens moet wijzigen, kun je de name eigenschap van het Identifier knooppunt bijwerken.

TypeScript-ondersteuning#

Om de plug-in nog gebruiksvriendelijker te maken, kunnen we een laatste hand leggen door de MDX type-definities uit te breiden:

Nu zal TypeScript bij het importeren van het MDX-bestand de readingTime eigenschap herkennen:

Conclusie#

Ik hoop dat deze gids je helpt een betere ervaring te hebben bij het werken met MDX-bestanden. Met deze remark-plugin kun je de leestijdgegevens direct gebruiken en zelfs gebruik maken van ESM-tree-shaking voor betere prestaties.