babel-plugin-bem

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.