Needless Patchouli Manufacture

    babel-plugin-bem

    0.3.0 • Public • Published

    babel-plugin-bem

    NPM version

    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.

    Keywords

    none

    Install

    npm i babel-plugin-bem

    DownloadsWeekly Downloads

    18

    Version

    0.3.0

    License

    MPL-2.0

    Last publish

    Collaborators

    • dfilatov
    • varankinv
    • veged