(di) bem-react: паттерны использования

Форум /

Вопрос 1: Вроде DI штука понятная, но пока не понятны паттерны её использования. В частности одна из фичь, про которую говорят — дешёвые эксперименты. Но чтобы эксперименты были максимально дешёвыми (через di), то получается, что во всех блоках нужно отказаться от "классических" импортов и всё делать через di? (чтобы при приходе эксперимента не нужно было переписывать блок на di)

Вопрос 1.1: Где должен храниться код/реестры экспериментов? Внутри компонентов или лежать где-то рядом с компонентами?

Вопрос 1.2: Как правильно накатывать реестры и использовать версии экспериментов?

Вопрос 2: Следующее... В di правильно будет в качестве registry.id указывать имя блока или можно указывать и модификатор?

// ProductCard
new Registry({ id : 'ProductCard' })

ProductCard.registry/desktop.js
ProductCard.registry/mobile.js

// Product/_layout
new Registry({ id : 'ProductCard_layout_grid' })

ProductCard_layout_grid.registry/desktop.js
ProductCard_layout_grid.registry/mobile.js

@awinogradov @tadatuta

5 years ago

awinogradov

во всех блоках нужно отказаться от "классических" импортов и всё делать через di

Нет. Не зачем так делать. Не верю я в то, что вся ф-ть должна быть экспериментальной. Нет ничего плохого в том, чтобы на время эксперимента пойти и отвязать нужную часть через реестр. А после проведения эксперимента вернуть всё обратно.

Где должен храниться код/реестры экспериментов?

Завист от предназначения реестра. Но в общем случае рядом с компонентом. Например, мы делаем так:

Block/
    Block.registry/
        desktop.ts
        touch-phone.ts
    Block.tsx

Как правильно накатывать реестры и использовать версии экспериментов?

В целом это записит от ситуации. Но общее рекомендации примерно такие.

components/
    Block/
        Block.registry/
            desktop.tsx
        Block@desktop.tsx > withRegistry(blockRegistry/* базовый из текущей директории */)(BlockPresenter)

components/Block/Block.registry/desktop.tsx

import { Registry } from '@bem-react/di';
import { cn } from '@bem-react/classname';

const cnBlock = cn('Block');

export const blockRegistry = new Registry({ id: cnBlock(), inverted: true });

blockRegistry.set(cnBlock('Elem'), () => <span />);

import { cn } from '@bem-react/classname';
import { withRegistry, RegistryConsumer } from '@bem-react/di';

import { blockRegistry } from './Block.registry/desktop';

const cnBlock = cn('Block');

const BlockPresenter = () => (
    <div>
        <RegistryConsumer>
            {registries => {
                 const registry = registries[cnBlock()];
                 const Elem = registry.get(cnBlock('Elem'));

                 return <Elem />;
            }}
        </RegistryConsumer>
    </div>
);

export const Block = withRegistry(blockRegistry)(BlockPresenter);

experiments/
    myExpName/
        components/
            Block/
                 Block.registry/
                     desktop.ts
                 Block@desktop.tsx > withRegistry(/* экспериментальный из текущей директории */)(Block /* импорт с базового уровня */)

experiments/myExpName/components/Block/Block.registry/desktop.tsx

import { Registry } from '@bem-react/di';
import { cn } from '@bem-react/classname';

const cnBlock = cn('Block');

export const blockExpRegistry = new Registry({ id: cnBlock() });

blockRegistry.set(cnBlock('Elem'), () => <a />);

import { Block } from '../../components/Block/Block';
import { withRegistry } from '@bem-react/di';

import { blockExpRegistry } from './Block.registry/desktop';

export const Block = withRegistry(blockExpRegistry)(Block);

В di правильно будет в качестве registry.id указывать имя блока или можно указывать и модификатор?

Зависит от того, что ты хранишь в реестре. Реестр это просто Map. Ничего не мешает туда класть и модификаторы. Поэтому это на твое усмотрение. Реестр всего лишь инструмент.

Чтобы оставлять комментарии, необходимо авторизоваться.