12-13 декабря у нас был хакатон по разработке инструментов БЭМ. Я участвовал в команде переосмысления и разработки прототипа bem-tools, напишу, что у нас получилось.

В нашей команде было 6 человек:

• Вова Гриненко (ментор команды)
• Виталий Харисов
• Андрей Кузнецов
• Илья Исупов
• Ваня Воищев
• Миша Баранов

Решили, что bem-tools надо делать по архитектуре «минимальное ядро + плагины». Ядро не умеет ничего, кроме общей обвязки про CLI, поиска локально или глобально установленных пакетов bem-tools-something и запуска указанной пользователем команды.

Собственно, так и получилось. Весь код ядра умещается на один экран и, кажется, развивать тут дальше нечего.

Плагин предоставляет JS API, которое ничего не знает про CLI (файл index.js в корне) и CLI интерфейс (файл cli.js). Это позволяет рассматривать каждый плагин, как отдельный пакет, который можно использовать независимо от всех остальных.

Мы успели сделать минимальные версии bem-tools-init, bem-tools-make, bem-tools-create и bem-tools-find. А так же вспомогательные bem-fs-scheme и bem-config. Миша Баранов делал плагин для IntelliJ IDEA для создания БЭМ-сущностей из интерфейса IDE.

Как это обычно бывает после хакатона, всё в сыром состоянии, использовать в работе это всё пока нельзя, но зато можно успеть повлиять на API и помочь нам с доработками.

Обо всём этом ниже подробнее.

Скачиваем bem-tools:

npm i bem/bem-tools#WIP
bem

Если всё прошло успешно, после запуска bem увидим:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem [OPTIONS] [ARGS]


Options:
  -h, --help : Help
  -v, --version : Version

Установим команду init:

npm i bem-incubator/bem-tools-init

Запускаем ещё раз bem и видим, что появилась команда init:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem COMMAND [OPTIONS] [ARGS]
  bem [OPTIONS] [ARGS]

Commands:
  init : Init

Options:
  -h, --help : Help
  -v, --version : Version

Запуск bem init my-test-project создаст my-test-project и в ней файл bemconf.json с содержимым

{
   "root": true
}

Это маркер корня проекта, будет использоваться другими командами для поиска настроек проекта.

Для работы с конфигом сделали простую библиотеку bem-config (https://github.com/bem-incubator/bem-config/) и накидали примерную структуру файла конфигурации. Файл конфигурации ищется в текущей директории и выше до корня. Используется ближайший найденный, также к нему добавляется ~/.bemconf.json.

Хотим, чтобы команда init была более умной, например, могла помимо пустого проекта создать заготовку по шаблону. Как вариант, клонировала project-stub. Сейчас это пример минимального плагина, можно использовать его для написания своего.

Следующая не менее минималистичная команда — make:

npm i bem-incubator/bem-tools-make

Просто вызывает enb :)

Ещё мы сделали прототип команды create:

npm i bem-incubator/bem-tools-create

Она поддерживает, как «классический» синтаксис bem-tools:

bem create -b b1 -t css -t js -l .
bem create -b b2 -t css -t js -l .

так и более простой:

bem create {b1,b2}.{css,js}

Есть шаблоны для технологий по умолчанию. Можно задать свои в конфиге, получаемом через bem-config. Они могут быть локальными для уровня, для проекта или браться из конфига пользователя.

Для построения имён БЭМ-сущностей используется bem-naming, для путей на файловой системе — bem-fs-scheme (пока реализована только nested схема, но легко можно добавить другие). И то, и другое можно задать в файле конфигурации.

Есть ещё что доделывать, постепенно доработаем и выпустим в рамках bem-tools 2.0.

Андрей Кузнецов и Илья Исупов написали прототип команды find (https://github.com/bem-incubator/bem-tools-find/), которая позволяет искать БЭМ-сущности и показывать их в разном виде.

Например, нам нужно найти все файлы про модификатор type для блока input:

bem find -b input -m type
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

или то же самое, но в виде дерева:

bem find -b input -m type -v tree
tree
└─┬ /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks
  └─┬ input
    └─┬ _type
      ├─┬ password
      │ ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
      │ └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
      └─┬ search
        ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
        └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

Миша Баранов делал плагин для Intellij IDEA (WebStorm, PhpStorm, etc), который будет позволять создавать БЭМ-сущности из контекстного меню (https://github.com/bem-incubator/bem-tools-intellj-plugin).

Плагин предоставляет только интерфейсную обвязку для встраивания в контекстное меню и показа диалога пользовательского ввода, а потом всё что ввёл пользователь передаёт bem create, который уже и делает всю основную работу.

Что же дальше? А дальше --Новый год-- у нас есть хитрый план: довести всё перечисленное до рабочего состояния, покрыть тестами и написать документацию. А потом... не останавливаться на достигнутом, а реализовать ещё bem rm, bem cp, bem mv, а там, глядишь, и сообщество подтянется со своими плагинами. ;)