BEMJSON как модель данных
Решение
Представлять содержимое и вёрстку страницы типизированным деревом BEMJSON. Движок nu применяет к дереву шаблоны и сериализует результат в HTML.
Контекст
Промежуточная модель определяет, как сочетаются шаблоны, как компилятор проверяет их входные данные и где выполняется экранирование. Для контента Markdown и вёрстки страницы nuckty нужна общая модель блоков.
Альтернативы
Строковые шаблоны. Такие движки, как Nunjucks, поддерживают экранирование и наследование шаблонов; в Nunjucks автоматическое экранирование включено по умолчанию. Они подходят для статических сайтов, но для селекторов nu и просмотра дерева строковый результат пришлось бы дополнить отдельной структурной моделью.
JSX. JSX позволяет описывать типизированные компоненты и сам по себе не требует рантайма в браузере. Это допустимая альтернатива, но для переопределения шаблонов nuckty использует селекторы именованных блоков, элементов и модификаторов.
HTML непосредственно из Markdown. Компилятор Markdown → HTML упрощает обработку контента. Однако к его результату нельзя применить БЭМ-селекторы без разбора HTML или сохранения отдельного дерева.
Аргумент
BemNode описывает структуру узла и данные для шаблонов. BEMTree — рекурсивное объединение узлов, текста, массивов и пустых позиций. Шаблоны nu могут заменить или обернуть узел до сериализации; готовое дерево доступно через render(tree, { templates, output: 'bemjson' }).
Один рендерер обрабатывает контент Markdown и блоки документа. В текущей стадии HTML содержимое сначала преобразуется в HTML, затем передаётся обработчику документа как узел raw. Общая модель рендеринга не означает, что вся страница остаётся одним деревом до окончательной сериализации.
Сериализатор централизует экранирование текста и атрибутов и минимизацию HTML. Автор шаблона по-прежнему отвечает за допустимую структуру HTML и доверенный источник raw.
Последствия
Шаблоны работают с данными вместо склеивания разметки. Декларации блоков определяют, какие шаблоны и ассеты загружаются.
props доступно шаблонам, но само поле не сериализуется в HTML. Шаблоны могут вывести его значения; подробнее — в руководстве по модели данных. Оно может содержать, например, Map: обычный JSON.stringify не сохраняет его записи, поэтому для сериализации дерева без потерь может понадобиться собственное преобразование. raw выводится без экранирования и минимизации. Двухпроходный рендеринг позволяет получить готовое дерево независимо от его представления в HTML.