Войти с помощью github
Форум /

Задача миграции проектных шаблонов

Чтобы мигрировать проектные шаблоны, нужно для начала четко формализовать то, что нужно исправить.

Список правок был составлен на основе гайдов по миграции и примечаний к релизам, которые я делал весь 2016 год.

Приведу еще раз все необходимые шаги для последовательной миграции шаблонов с bem-xjst v1.x до v8.x здесь.

bem-xjst v1.x → v2.x

  • def() режим должен возвращать хоть что-то.
  • все поля шаблонизатора доступные ранее в this._ теперь переехали просто в this.
  • нет больше mode('') (режима с пустым именем), используйте def().
  • подпредикат block(…) теперь обязателен для всех шаблонов.
  • this._str больше не существует.
  • изменилось поведение apply('modeName').
  • результат вызова режима tag() теперь имеет приоритет над полем tag из BEMJSON-а.

bem-xjst v2.x → v3.x

  • apply.call(BEMJSON) нужно исправить на apply(BEMJSON).

bem-xjst v3.x → v4.x

  • block('b').wrap()(function() { … }) вместо block('b').wrap().def()(function() { return applyCtx({ … }); }).

bem-xjst v4.x → v5.x

  • Необходимо заменить elemMatch(argument) на elem('*').match(function() { ... }). elemMatch() упразднен.
  • Поведение полей mods и elemMods в BEMJSON изменено. bem-xjst больше не будет воспринимать mods как elemMods.
  • API изменено: require('bem-xjst') теперь возвращает два движка bemhtml и bemtree. Просто замените require('bem-xjst') на require('bem-xjst').bemhtml.

bem-xjst v5.x → v6.x

  • результат вызова режима tag() теперь имеет приоритет над полем tag из BEMJSON-а.

bem-xjst v6.x → v7.x

  • this.isArray() устарел, используем Array.isArray().
  • once() устарел и выпилен, используем просто def().
  • Теперь bem-xjst для сравнения значения модификатора из подпредиката шаблона и из BEMJSON-а предварительно приведет значение из BEMJSON-а к строке. Это может вызвать несоответствие поведения с версией v6.x. Поэтому считаем хорошей практикой, когда значения модификаторов — строка. Пример, результат которого можно сравнить в v6.x и v7.x
  • Опционально: v6.x по умолчанию генерила закрывающие слеши у одиночных тегов. В v7.x это поведение отменено и она по умолчанию генерит HTML а не XHTML. Чтобы вернуть закрывающие слеши можно воспользоваться опцией bem-xjst xhtml: true.

bem-xjst v7.x → v8.x

  • Для обратной совместимости необходимо заменить режимы mix() на addMix(), attrs() на addAttrs(), js() на addJs().

Автомигратор

В связи с этим длинным хвостом технологических долгов я сделал автомигратор шаблонов и статический линтер.

Автомигратор доступен в bem-xjst v7.x и v8.x (актуальные версии) и умеет править код проектных шаблонов так, чтобы он начал соответствовать указанной мажорной версии.

Под капотом обычный jscodeshift и тесты на трансформации кода. Если появятся какие-либо вопросы после прочтения документации создавайте issue в репозитории шаблонизатора.

Статический линтер

Кроме того, вы можете запускать статические проверки для ваших шаблонов и включить их (наравне с runtime проверками) в ваш процесс разработки.

Эти линтеры помогут отловить всякое безумие в коде шаблонов и в схеме BEMJSON, кроме того станут отличным каналом для передачи сообщений от шаблонизатора до его пользователей.