Bem React Versions Save

Features

• don't pass mod props to component (6ce126c)
• simple mods optimization in compose (60c2ee7)

BREAKING CHANGES

• changed compose order for simple mods, classnames -> classname in simple mods

Bug Fixes

• composeU - deep union for properties (0569438)

Bug Fixes

• di: resolve #551 issue (c4491a4)

Bug Fixes

• di: fixes a way to extends components (629b2a5)

Performance Improvements

• di: improving performance (469966f)

Added human-readable errors when component cannot be extended.

Add support for extends base components from registry:

import { Registry, withRegistry } from '@bem-react/di'
import { AppDesktop, registryId } from './App@desktop'

const expRegistry = new Registry({ id: registryId })

// extends original Header
expRegistry.extends('Header', BaseHeader => props => (
  <BaseHeader height={200} color={red} />
)))

const AppDesktopExp = withRegistry(expRegistry)(AppDesktop)

Add method for fill registry:

const registry = new Registry({ id: 'registry' })

registry.fill({ Header, Footer })

Performance Improvements

• core: cache all invariants (1ea5053)
• core: improve code performance (9798fda)

Result benchmarks:

withBemMod()::before x 62,362,328 ops/sec ±1.44% (84 runs sampled)
withBemMod()::after x 51,807,779 ops/sec ±1.80% (82 runs sampled)

withBemMod()()::before x 18,712,829 ops/sec ±1.75% (86 runs sampled)
withBemMod()()::after x 746,465 ops/sec ±0.96% (88 runs sampled)

withBemMod()()()::before x 98,460 ops/sec ±1.14% (87 runs sampled)
withBemMod()()()::after x 119,919 ops/sec ±1.11% (85 runs sampled)

BemMod matching mod::before x 104,261 ops/sec ±1.01% (85 runs sampled)
BemMod matching mod::after x 226,921 ops/sec ±2.80% (84 runs sampled)

BemMod mismatching mod::before x 207,367 ops/sec ±1.63% (81 runs sampled)
BemMod mismatching mod::after x 583,093 ops/sec ±0.99% (86 runs sampled)

@bem-react/[email protected]

Breaking changes

• set inverted flag by default and rename it to "overridable" https://github.com/bem/bem-react/commit/957a0fe0a42a7da2a6dcb5850adc25ac71b6caf4

@bem-react/[email protected]

Breaking changes

• compose and composeU instead of conditional compose https://github.com/bem/bem-react/commit/e45bf1a5a28db654b4cece32fc5d70ef1f90d9bb https://github.com/bem/bem-react/commit/f2ce2d391cef4d48626dae16aea320a6cd4dbb47

Features

Typed registries for components

From now you don't need to pass interface as generic with get method. See the new short API:

const compositorRegistry = new Registry({ id: 'Compositor' });
const Element: React.SFC<ICommonProps> = () => <span>content</span>;

interface ICompositorRegistry {
    Element: React.ComponentType<ICommonProps>;
}

compositorRegistry.set('Element', Element);

const CompositorPresenter: React.SFC<ICommonProps> = () => (
    <ComponentRegistryConsumer id="Compositor">
        {({ Element }: ICompositorRegistry) => <Element/>}
    </ComponentRegistryConsumer>
);

const Compositor = withRegistry(compositorRegistry)(CompositorPresenter);

Element is typed in render prop!

Partially registries merging

From now you don't need to override all entities in component registry. Replace only what you need to replace:

const compositorRegistry = new Registry({ id: 'Compositor', inverted: true });
const Element1: React.SFC<ICommonProps> = () => <span>content</span>;
const Element2: React.SFC<ICommonProps> = () => <span>extra</span>;

const overridedCompositorRegistry = new Registry({ id: 'Compositor' });
const OverridedElement: React.SFC<ICommonProps> = () => <span>overrided</span>;

interface ICompositorRegistry {
    Element1: React.ComponentType<ICommonProps>;
    Element2: React.ComponentType<ICommonProps>;
}

compositorRegistry.set('Element1', Element1);
compositorRegistry.set('Element2', Element2);
overridedCompositorRegistry.set('Element1', OverridedElement);

const CompositorPresenter: React.SFC<ICommonProps> = () => (
    <ComponentRegistryConsumer id="Compositor">
        {({ Element1, Element2 }: ICompositorRegistry) => (
            <>
                <Element1/>
                <Element2/>
            </>
         )}
    </ComponentRegistryConsumer>
);

const Compositor = withRegistry(compositorRegistry)(CompositorPresenter);
const OverridedCompositor = withRegistry(overridedCompositorRegistry)(Compositor);

Check more cases in specs!

PR: https://github.com/bem/bem-react/pull/384