Создание плагина remark для извлечения времени чтения MDX

Remark — это мощный процессор markdown, который можно использовать для создания пользовательских плагинов для преобразования содержимого markdown. При разборе markdown-файлов с помощью remark содержимое преобразуется в абстрактное синтаксическое дерево (AST), которое можно манипулировать с помощью плагинов.

Для лучшего пользовательского опыта обычно отображают предполагаемое время чтения статьи. В этом руководстве мы создадим плагин remark для извлечения данных о времени чтения из файла MDX и сделаем их доступными при импорте файла MDX как модуля ES.

Начнем#

Начнем с создания файла MDX:

Предполагая, что мы используем Vite как сборщик с официальным плагином @mdx-js/rollup для преобразования файлов MDX, таким образом, мы можем импортировать файл MDX как модуль ES. Конфигурация Vite должна выглядеть следующим образом:

Если мы импортируем файл MDX как модуль ES, содержимое будет объектом с свойством default, содержащим скомпилированный JSX. Например:

Результатом будет:

Как только мы получим такой результат, мы готовы создать плагин remark.

Создание плагина remark#

Давайте посмотрим, что нам нужно сделать для достижения цели:

1. Извлечь содержимое MDX для расчета времени чтения.
2. Рассчитать время чтения.
3. Присоединить данные о времени чтения к содержимому MDX и сделать их доступными при импорте файла MDX как модуля ES.

К счастью, уже есть библиотеки, которые помогут нам с расчетом времени чтения и базовыми операциями с AST:

• reading-time для расчета времени чтения.
• mdast-util-to-string для преобразования AST MDX в текст.
• estree-util-value-to-estree для преобразования данных времени чтения в узел ESTree.

Если вы пользователь TypeScript, вам также может понадобиться установка этих пакетов для определения типов:

• @types/mdast для определения типов корневого узла MDX.
• unified для определения типов плагинов.

Как только мы установим пакеты, можно начинать создавать плагин:

Как мы видим, плагин просто извлекает содержимое MDX в текст и рассчитывает время чтения. Теперь нам нужно присоединить данные о времени чтения к содержимому MDX, и это не выглядит столь очевидным. Но если мы взглянем на другие замечательные библиотеки, такие как remark-mdx-frontmatter, мы можем найти способ сделать это:

Обратите внимание на type: 'mdxjsEsm' в коде выше. Это тип узла, который используется для сериализации MDX ESM. Код выше присоединяет данные о времени чтения с именем readingTime к содержимому MDX, что даст следующий результат при импорте файла MDX как модуля ES:

Если вам нужно изменить имя данных о времени чтения, вы можете обновить свойство name узла Identifier.

Поддержка TypeScript#

Чтобы сделать плагин еще более удобным для разработчиков, мы можем сделать последний штрих, дополнив определения типов MDX:

Теперь при импорте файла MDX TypeScript распознает свойство readingTime:

Заключение#

Надеюсь, это руководство поможет вам получить больше удовольствия от работы с файлами MDX. С этим плагином remark вы можете использовать данные о времени чтения напрямую и даже воспользоваться tree-shaking модулей ES для повышения производительности.