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, а там, глядишь, и сообщество подтянется со своими плагинами. ;)
