Bem React

Набор утилит для разработки пользовательских интерфейсов по БЭМ-методологии на React. Bem React поддерживает аннотации типов TypeScript и Flow.

Описание концепции

Основая мысль — работаем через полную композицию. Работу с CSS-классами и модификаторы выражаем через HOCи, а переопределение кода по платформам и экспериментам через DI.

Необходимое от БЭМ в React

• декларативное разделение кода по модификаторам и уровням переопределения (платформам, экспериментам);

• работа с CSS-классами.

Состав пакетов

• @bem-react/classname

  • cn(block, elem?): { mods(object?): string; toString(): string; }

• @bem-react/core

  • withBemMod(cn, predicate, HOC)(Component)

• @bem-react/di

  • Registry: Map<string, React.ComponentType>

  • withRegistry(registry)(Component)

Модификатор (withBemMod) более не сможет влиять на внутреннее устройство компонента. Дополнительная функциональность должна быть выражена через управляющие компоненты сверху. А сами компоненты могут быть выражены как React.ComponentType по необходимости без каких-либо базовых БЭМ-компонентов. Подключение модификаторов не отличается от подключения любых других HOC и работает через любой compose.

Работа с CSS-классами состоит из трех этапов:

• статическое создание базового CSS-класса сущности;

• динамическое добавление CSS-классов модификаторов;

• динамическое добавление CSS-классов миксов.

Статическое создание CSS-классов выражается через функцию-хелпер (@bem-react/classname).

Динамическое добавление CSS-классов выражается через HOC (withBemMod) модификатора с единственным требованием к внешнему интерфейсу компонента в виде опционального пропса className. Модификатор определит истинность предиката и добавит дополнительный класс через пропсы к базовому классу через ту же функцию-хелпер, что используется и для статических CSS-классов.

Переопределение компонентов и их составляющих выражается через dependency injection (DI) (@bem-react/di), который реализуется на базе React.ContextAPI и множественных реестров (Registry) компонентов. Каждый компонент волен регистрировать свои зависимости в реестре и позволять переопределять их сверху, что напрямую не заложено в работу контекста, но реализуется способом резолвинга во время провайдинга нового значения контекста. По умолчанию зависимости возможно переопределять и по контексту вниз, что есть стандартный механизм работы контекста. В итоге, DI — это HOC, который провайдит реестры в контекст. Реестры могут работать в режимах проваливания и всплытия зависимостей. Это позволяет переопределять что угодно, где угодно, на любом уровне вложенности, простым дописыванием в нужный реестр.

Внести вклад

Bem React является библиотекой с открытым исходным кодом, которая находится в стадии активной разработки, а также используется внутри компании Яндекс.

Если у вас есть предложения по улучшению API, вы можете прислать Pull Request.

Если вы нашли ошибку, вы можете создать issue с описанием проблемы.

Подробное руководство по внесению изменений см. в CONTRIBUTING.md.

Лицензия

© 2018 Яндекс. Код выпущен под Mozilla Public License 2.0.