Una guida per creare un plugin remark per rendere disponibili i dati sul tempo di lettura durante l'importazione di file MDX come moduli ES.
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.
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.
Vediamo cosa dobbiamo fare per raggiungere l'obiettivo:
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.
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:
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.