Crea un plugin remark per estrarre il tempo di lettura MDX

Remark è un potente processore markdown che può essere utilizzato per creare plugin personalizzati per trasformare i contenuti markdown. Quando si analizzano i file markdown con remark, il contenuto viene trasformato in un albero di sintassi astratta (AST) che può essere manipolato utilizzando i plugin.

Per una migliore esperienza utente, è comune visualizzare il tempo di lettura stimato di un articolo. In questa guida, creeremo un plugin remark per estrarre i dati sul tempo di lettura da un file MDX e renderli disponibili durante l'importazione del file MDX come modulo ES.

Iniziare#

Iniziamo creando un file MDX:

Supponendo di utilizzare Vite come bundler, con il plugin ufficiale @mdx-js/rollup per trasformare i file MDX, possiamo quindi importare il file MDX come modulo ES. La configurazione di Vite dovrebbe essere simile a questa:

Se importiamo il file MDX come modulo ES, il contenuto sarà un oggetto con la proprietà default contenente il JSX compilato. Ad esempio:

Risulterà:

Una volta ottenuto un output di questo tipo, siamo pronti a creare il plugin remark.

Crea il plugin remark#

Vediamo cosa dobbiamo fare per raggiungere l'obiettivo:

1. Estrarre il contenuto MDX in testo per il calcolo del tempo di lettura.
2. Calcolare il tempo di lettura.
3. Allegare i dati sul tempo di lettura al contenuto MDX, rendendoli disponibili durante l'importazione del file MDX come modulo ES.

Fortunatamente, esistono già librerie che ci aiutano con il calcolo del tempo di lettura e le operazioni di base dell'AST:

• reading-time per calcolare il tempo di lettura.
• mdast-util-to-string per convertire l'AST MDX in testo.
• estree-util-value-to-estree per convertire i dati sul tempo di lettura in un nodo ESTree.

Se utilizzi TypeScript, potresti anche avere bisogno di installare questi pacchetti per le definizioni dei tipi:

• @types/mdast per le definizioni dei tipi di nodo radice MDX.
• unified per le definizioni dei tipi dei plugin.

Non appena abbiamo installato i pacchetti, possiamo iniziare a creare il plugin:

Come possiamo vedere, il plugin semplicemente estrae il contenuto MDX in testo e calcola il tempo di lettura. Ora dobbiamo allegare i dati sul tempo di lettura al contenuto MDX, e non sembra così semplice. Ma se diamo un'occhiata ad altre librerie fantastiche come remark-mdx-frontmatter, possiamo trovare un modo per farlo:

Nota il type: 'mdxjsEsm' nel codice sopra. Questo è un tipo di nodo utilizzato per serializzare MDX ESM. Il codice sopra allega i dati sul tempo di lettura usando il nome readingTime al contenuto MDX, il che produrrà il seguente output quando si importa il file MDX come modulo ES:

Se hai bisogno di cambiare il nome dei dati sul tempo di lettura, puoi aggiornare la proprietà name del nodo Identifier.

Supporto TypeScript#

Per rendere il plugin ancora più sviluppatore-friendly, possiamo fare un ultimo tocco aumentando le definizioni dei tipi MDX:

Ora, quando importi il file MDX, TypeScript riconoscerà la proprietà readingTime:

Conclusione#

Spero che questa guida ti aiuti a migliorare l'esperienza quando lavori con i file MDX. Con questo plugin remark, puoi usare direttamente i dati sul tempo di lettura e perfino sfruttare il tree-shaking di ESM per migliorare le prestazioni.