bem-xjst

Декларативный шаблонизатор

Отличительные черты

Шаблоны расширяемы: их можно переопределить или доопределить

Вы можете переопределить или расширить шаблоны отвечающие за генерацию отдельных частей вывода: HTML-тега, HTML-атрибутов или содержимого узла. Например:

block('link')({ tag: 'span' });
// Этот шаблон определяет тег для всех блоков `link`.
// Режим `tag` может быть переопределен по произвольному условию.

block('link').match((node, ctx) => ctx.url)({ tag: 'a' });
// Этот шаблон определяет тег `a` только в случае если в блоке `link` есть поле `url`.
// Иначе тег будет `span`, как определено в предыдущем шаблоне.

Соответствие шаблону (pattern matching)

Для каждого узла входного дерева данных шаблонизатор проверяет условие на соответствие шаблону.

block('list')({ tag: 'ul' });
block('item')({ tag: 'li' });

Для каждого блока list выполнится шаблон про тег ul. Для каждого блока item — шаблон про тег li.

Например для входных данных:

{
  block: 'list',
  content: [
    {
      block: 'item',
      content: {
          block: 'list',
          content: [
              { block: 'item', content: 'CSS' },
              { block: 'item', content: 'HTML' }
          ]
      }
    },
    {
      block: 'item',
      content: {
          block: 'list',
          content: [
              { block: 'item', content: 'JS' }
          ]
      }
    }
  ]
}

Результат шаблонизации:

<ul class="list">
    <li class="item">
        <ul class="list">
            <li class="item">CSS</li>
            <li class="item">HTML</li>
        </ul>
    </li>
    <li class="item">
        <ul class="list">
            <li class="item">JS</li>
        </ul>
    </li>
</ul>

Использовать декларативные шаблоны так же просто как и CSS для HTML.

Автоматический обход входных данных

По предыдущему примеру вы могли заметить, что bem-xjst автоматически обходит входные данные заглядывая в поле content.

Рендеринг по умолчанию

Встроенное поведение позволяет вам рендерить данные без шаблонов. Для данных из примера выше вы получите вот такой результат по умолчанию:

<div class="list">
    <div class="item">
        <div class="list">
            <div class="item">CSS</div>
            <div class="item">HTML</div>
        </div>
    </div>
    <div class="item">
        <div class="list">
            <div class="item">JS</div>
        </div>
    </div>
</div>

Как видите, большую часть работы шаблонизатор сделал за вас. Осталось только добавить несколько шаблонов для тегов и ваш HTML будет выглядеть вполне прилично.

Чистый JS

Шаблонизатор и сами шаблоны используют чистый JavaScript, что позволяет вам использовать всю мощь JS-инфраструктуры: автоматические валидаторы кода и инструменты вроде JSHint/ESLint.

Работает на клиенте и сервере

Вы можете использовать bem-xjst в любом браузере или на любой виртуальной машине JavaScript. Мы поддерживаем Node.js v0.10 и выше.

Подробности

Читайте документацию:

1. О bem-xjst
2. Быстрый старт
3. API: использование, сигнатура и описание методов
4. Формат входных данных: BEMJSON
5. Шаблоны: синтаксис
6. Шаблоны: контекст
7. Runtime: как выбираются и применяются шаблоны

Попробуйте

Online-песочница

Online demo позволяет вам делится ссылкой на примеры шаблонов и входных данных.

Установка npm пакета

Вам потребуется Node.js v0.10 или старше и npm.

npm install bem-xjst

Скопируйте пример из документации или смотрите простой пример в репозитории. Затем прочитайте документацию и начинайте экспериментировать с шаблонизатором.

bem-xjst используется в продакшене?

Да. Проекты компаний Яндекс и Альфа-Банк, а так же оперсорс проекты основанные на bem-core и bem-components, которые тоже используют bem-xjst.

Тест на производительность

См. readme.

Runtime линтер

См. readme.

Статический линтер и автоматическая миграция шаблонов

См. readme.

Ссылки

• Документация на bem.info
• Changelog и описание релизов
• Гайд для контрибьюторов
• Онлайн демо (you can share code snippets)
• Twitter аккаунт: @bemxjst
• Гайд по миграции для всех мажорных версий