babel-plugin-bem
v0.3.0
Published
[![NPM version](https://img.shields.io/npm/v/babel-plugin-bem.svg?style=flat)](https://www.npmjs.org/package/babel-plugin-bem)
Downloads
5
Readme
babel-plugin-bem
A Babel plugin for BEM methodology.
The plugin helps tranform JS written in ES2015 (formally ES6) to YModules module system, that is used inside bem-core library.
Examples
1. Simple module
// dom.js
import $ from 'bem:jquery';
export default { /* ... */ };
will be tranformed to
// dom.js
modules.define('dom', ['jquery'], function(provide, $) {
provide({ /* ... */ });
});
2. A module with BEM entity
// button.js
import bemDom from 'bem:i-bem-dom';
export default bemDom.declBlock('button', {
onSetMod : {
/* ... */
}
});
tranforms to
// button.js
module.define('button', ['i-bem-dom'], function(provide, bemDom) {
provide(bemDom.declBlock(this.name, {
onSetMod : {
/* ... */
}
}));
});
3. A module with modified BEM block
// button_type_link.js
import Button from 'bem:button';
export default Button.declMod({ modName : 'type', modVal : 'link' }, {
onSetMod : {
/* ... */
}
});
tranforms to
// button_type_link.js
module.define('button', function(provide, Button) {
provide(Button.declMod({ modName : 'type', modVal : 'link' }, {
onSetMod : {
/* ... */
}
}));
});
4. A module with async providing
// jquery.js
import asyncProvide from 'ym:provide';
import loader from 'bem:loader__js';
import cfg from 'bem:jquery__config';
doProvide = preserveGlobal => {
asyncProvide(preserveGlobal? jQuery : jQuery.noConflict(true));
}
typeof jQuery !== 'undefined'?
doProvide(true) :
loader(cfg.url, doProvide);
tranforms to
// jquery.js
modules.define(
'jquery',
['loader__js', 'jquery__config'],
function(provide, loader, cfg) {
function doProvide(preserveGlobal) {
provide(preserveGlobal? jQuery : jQuery.noConflict(true));
}
typeof jQuery !== 'undefined'?
doProvide(true) :
loader(cfg.url, doProvide);
});
License
Code and documentation copyright 2015 YANDEX LLC. Code released under the Mozilla Public License 2.0.