Руководство по созданию плагина remark, чтобы данные о времени чтения были доступны при импорте файлов MDX как модулей ES.
Remark — это мощный процессор markdown, который можно использовать для создания пользовательских плагинов для преобразования содержимого markdown. При разборе markdown-файлов с помощью remark содержимое преобразуется в абстрактное синтаксическое дерево (AST), которое можно манипулировать с помощью плагинов.
Для лучшего пользовательского опыта обычно отображают предполагаемое время чтения статьи. В этом руководстве мы создадим плагин remark для извлечения данных о времени чтения из файла MDX и сделаем их доступными при импорте файла MDX как модуля ES.
Начнем с создания файла MDX:
Предполагая, что мы используем Vite как сборщик с официальным плагином @mdx-js/rollup для преобразования файлов MDX, таким образом, мы можем импортировать файл MDX как модуль ES. Конфигурация Vite должна выглядеть следующим образом:
Если мы импортируем файл MDX как модуль ES, содержимое будет объектом с свойством default, содержащим скомпилированный JSX. Например:
Результатом будет:
Как только мы получим такой результат, мы готовы создать плагин remark.
Давайте посмотрим, что нам нужно сделать для достижения цели:
К счастью, уже есть библиотеки, которые помогут нам с расчетом времени чтения и базовыми операциями с 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.
Чтобы сделать плагин еще более удобным для разработчиков, мы можем сделать последний штрих, дополнив определения типов MDX:
Теперь при импорте файла MDX TypeScript распознает свойство readingTime:
Надеюсь, это руководство поможет вам получить больше удовольствия от работы с файлами MDX. С этим плагином remark вы можете использовать данные о времени чтения напрямую и даже воспользоваться tree-shaking модулей ES для повышения производительности.