@yummies/yummies v2.1.1
Install
npm i -S @yummies/yummies
Overview
Like BEM methodology and using React? How about that:
import Yummies from '@yummies/yummies';
class MyComponent extends Yummies.Component {
constructor() {
this.state = {
test: null
};
}
render() {
return {
block: 'my-component',
mods: {
test: this.state.test
},
content: {
elem: 'input',
tag: 'input',
mods: {
type: 'search'
},
mix: {
block: 'my-another-component',
elem: 'input'
},
props: {
placeholder: 'search'
}
}
};
}
}
const MyComponentFactory = Yummies.createFactory(MyComponent);
Yummies.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 modifierselem
+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()
Yummies.render({ block: 'my-component' }, document.body);
renderToString()
Yummies.renderToString({ block: 'my-component' });
renderToStaticMarkup()
Yummies.renderToStaticMarkup({ block: 'my-component' });
createElement()
Yummies.createElement({ block: 'my-component' });
Yummies.createElement(class extends Yummies.Component { … });
createFactory()
Yummies.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.
Yummies.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.
Yummies.yummify([ … ]);
yummifyChainRaw(<array>)
Collect all the inherited classes chain and return a resulted Class Factory. See babel-plugin-yummies for more details.
Yummies.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).
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago