Install

npm i -S @yummies/yummies

Overview

Like BEM methodology and using React? How about that:

1import Yummies from '@yummies/yummies';
2
3class MyComponent extends Yummies.Component {
4    constructor() {
5        this.state = {
6            test: null
7        };
8    }
9
10    render() {
11        return {
12            block: 'my-component',
13            mods: {
14                test: this.state.test
15            },
16            content: {
17                elem: 'input',
18                tag: 'input',
19                mods: {
20                    type: 'search'
21                },
22                mix: {
23                    block: 'my-another-component',
24                    elem: 'input'
25                },
26                props: {
27                    placeholder: 'search'
28                }
29            }
30        };
31    }
32}
33
34const MyComponentFactory = Yummies.createFactory(MyComponent);
35
36Yummies.render(MyComponentFactory(), document.body);

BEM

Similar to BEMJSON:

block <string>

Block name.

elem <string>

Element name. Understands current block context so no need to repeat block inside nested elements.

mods <object>

• block + mods – block modifiers
• elem + mods – element modifiers

Can be shorthanded with true as modifier value.

mix <array|object>

Mix additional className(s) from another BEM entity(ies).

tag <string>

HTML tag, div by default.

content <*>

Any possible content such as strings, arrays, BEMJSON, React Elements, …

Inheritance

Already knows about BEM Levels of definition? Good, because we have it as "Layers" – checkout babel-plugin-yummies – multilayer components inheritance for Yummies.

API

Patched methods

The following React Top-Level API methods are patched to support the new format:

render()

1Yummies.render({ block: 'my-component' }, document.body);

renderToString()

1Yummies.renderToString({ block: 'my-component' });

renderToStaticMarkup()

1Yummies.renderToStaticMarkup({ block: 'my-component' });

createElement()

1Yummies.createElement({ block: 'my-component' });

1Yummies.createElement(class extends Yummies.Component { … });

createFactory()

1Yummies.createFactory(class extends Yummies.Component { … });

Additional helpers

yummify(<class>)

Patch class (extended from Yummies.Component) render() method to support BEMJSON.

buildClassName(<object>)

Build className string from BEMJSON object.

1Yummies.buildClassName({ block: 'my-component', elem: 'title' });

yummifyChain(<array>)

Collect all the inherited classes chain and return a ReactElement Factory. See babel-plugin-yummies for more details.

1Yummies.yummify([ … ]);

yummifyChainRaw(<array>)

Collect all the inherited classes chain and return a resulted Class Factory. See babel-plugin-yummies for more details.

1Yummies.yummifyRaw([ … ]);

Babel environment

There are couple of things worth noticing if you use babel.

Since 1.x.x babel-runtime is not included anymore and we inline all helpers. We do it in case to support IE9-10. It may insignificantly increase bundle size, but other than that everything should work fine even if you use babel-runtime in your application.

If you need to support IE9-10, you should include on spec.protoToAssign into optional in your .babelrc. This will fix some inheritance incompatibility issues. If you don't need IE9-10, no additional moves required.

Old browsers support

Please note that IE8 is supported only in 0.x.x legacy branch. Starting from 1.x.x only IE9 and higher are supported. We are going to keep updating a legacy branch in parallel for some time (until IE8 would not become history).