Skapa ett remark-plugin för att extrahera MDX-lästid

Remark är en kraftfull markdown-processor som kan användas för att skapa anpassade plugin för att transformera markdown-innehåll. När man analyserar markdown-filer med remark, omvandlas innehållet till ett abstrakt syntaxträ (AST) som kan manipuleras med hjälp av plugin.

För en bättre användarupplevelse är det vanligt att visa den uppskattade lästiden för en artikel. I denna guide kommer vi att skapa ett remark-plugin för att extrahera lästidens data från en MDX-fil och göra den tillgänglig när du importerar MDX-filen som en ES-modul.

Kom igång#

Låt oss börja med att skapa en MDX-fil:

Förutsatt att vi använder Vite som bundler, med den officiella @mdx-js/rollup-plugin för att omvandla MDX-filer, kan vi således importera MDX-filen som en ES-modul. Vite-konfigurationen bör se ut så här:

Om vi importerar MDX-filen som en ES-modul, kommer innehållet att vara ett objekt med default-egenskapen som innehåller den kompilerade JSX. Till exempel:

Kommer att resultera i:

När vi har utdata som detta, är vi redo att skapa remark-plugin.

Skapa remark-plugin#

Låt oss kolla vad vi behöver göra för att uppnå målet:

1. Extrahera MDX-innehåll till text för att beräkna lästid.
2. Beräkna lästiden.
3. Bifoga lästidens data till MDX-innehållet, och gör den tillgänglig vid import av MDX-filen som en ES-modul.

Lyckligtvis finns det redan bibliotek som hjälper oss med beräkningen av lästiden och grundläggande AST-operationer:

• reading-time för att beräkna lästiden.
• mdast-util-to-string för att konvertera MDX AST till text.
• estree-util-value-to-estree för att konvertera lästidens data till en ESTree-nod.

Om du är en TypeScript-användare kan du också behöva installera dessa paket för typdefinitioner:

• @types/mdast för typdefinitioner för MDX-rotnoder.
• unified för plugin-typedefinitioner.

Så länge vi har paketen installerade kan vi börja skapa plugin:

Som vi kan se, extraherar plugin helt enkelt MDX-innehållet till text och beräknar lästiden. Nu behöver vi bifoga lästidens data till MDX-innehållet, och det ser inte så enkelt ut. Men om vi tittar på andra fantastiska bibliotek som remark-mdx-frontmatter kan vi hitta ett sätt att göra det:

Notera type: 'mdxjsEsm' i koden ovan. Detta är en nodtyp som används för att serialisera MDX ESM. Koden ovan bifogar lästidens data med namnet readingTime till MDX-innehållet, vilket ger följande utdata vid import av MDX-filen som en ES-modul:

Om du behöver ändra namnet på lästidens data kan du uppdatera name-egenskapen för Identifier-noden.

TypeScript-stöd#

För att göra plugin ännu mer utvecklarvänlig kan vi göra en sista touch genom att förstärka MDX-typdefinitionerna:

Nu, när du importerar MDX-filen, kommer TypeScript att känna igen readingTime-egenskapen:

Slutsats#

Jag hoppas att denna guide hjälper dig att få en bättre upplevelse när du arbetar med MDX-filer. Med detta remark-plugin kan du använda lästidens data direkt och till och med utnyttja ESM-trädskakning för bättre prestanda.