Препроцессинг сокращённой записи HTML-атрибутов в CI/CD

Разработчики часто сталкиваются с необходимостью трансформации компактных шаблонов в полноценный HTML. Например, запись <div #my-div .card.info></div> должна превращаться в <div id="my-div" class="card info"></div>. Если раньше такой препроцессинг выполнялся в рантайме, то для продакшена надёжнее вынести его на этап сборки - в конвейер CI/CD. Разберём, какие инструменты помогут это реализовать.

Готовые Node.js-модули для препроцессинга

Необязательно писать парсер с нуля: существуют специализированные библиотеки, которые умеют обрабатывать подобный синтаксис. Одна из них - emmetio/implicit-closing или более популярная posthtml-expressions. Они позволяют задавать собственные правила сокращений и преобразовывать их на этапе сборки.

Использование PostHTML

PostHTML - это мощный инструмент для трансформации HTML с помощью плагинов. Для вашей задачи подойдёт плагин posthtml-attributes, который парсит атрибуты в сокращённой записи и заменяет их на стандартные. Пример конфигурации:

const posthtml = require('posthtml');
const attributes = require('posthtml-attributes');

posthtml([
  attributes({
    prefix: '#' -> 'id',
    prefix: '.' -> 'class'
  })
])
.process('
')
.then(result => console.log(result.html));
// Output: 

Такой подход легко встраивается в Gulp, Webpack или любой другой сборщик, а затем запускается в CI/CD.

Альтернативы: ANTLR или ручной парсинг

Если вам нужна максимальная гибкость и поддержка нестандартных конструкций, можно рассмотреть ANTLR. Однако для простой задачи (замена # и . на id и class) это избыточно. Достаточно регулярных выражений или простого стейт-машины. Готовые решения экономят время и уменьшают количество багов.

Дополнительные возможности (плюшки)

Многие библиотеки поддерживают настраиваемые префиксы, вложенность и даже условные атрибуты. Например, posthtml-expressions позволяет писать <div class="{isActive ? 'active' : ''}"></div> и вычислять выражения на этапе сборки. Это особенно удобно для статических генераторов.

Интеграция в CI/CD

Чтобы внедрить препроцессинг в пайплайн, добавьте шаг сборки с помощью npm-скрипта. Пример для GitHub Actions:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npm run build:html

В скрипте build:html запускается PostHTML с нужными плагинами. Результат - чистый HTML без лишних преобразований в рантайме.

Рекомендации по выбору

• Для типовых задач - PostHTML с плагинами (быстро, просто, расширяемо).
• Для сложных трансформаций - ANTLR или hand-rolled парсер на базе регулярных выражений.
• Для минимализма - самописная функция на Node.js, если синтаксис строго ограничен.

Выбор зависит от сложности вашего шаблонного языка. В большинстве случаев готовые решения покрывают потребности и легко интегрируются в CI/CD.