bem / babel-plugin-bem

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.

babel-plugin-bem's Issues

Support for custom module name

E.g.

// jquery__event_type_pointer.js
import $ from 'bem:jquery';

export default function() {
    // ···
};

export const __bemName = 'jquery';

should be transpiled to

// jquery__event_type_pointer.js
module.define('jquery', function(provide, $) {
    // ···
});

Multiple exports

export default 1;
export let x = 2;
export const y = 3;
export function z () {};

Any ideas how to export these?

Does ym should support something like __esModule?
Like babel does:

Object.defineProperty(exports, "__esModule", {
  value: true
});

Crossnamespace imports proposal

import _ from 'lodash';
import $ from 'bem:jquery';

export default { _, $ };

→

var _ = require('lodash');
modules.define('...', ['jquery'], function (provide, $) {
  provide({_: _, $: $});
});

Compile files without `export` to `modules.require`

Update to Babel 6

Because science, of course!

See babel plugin handbook for references: https://github.com/thejameskyle/babel-plugin-handbook

Why bem not ym?

Why bem, not ym? Like import from modular system ymodules...

Example:
common.blocks/user/_admin/user_admin.js

/**
 * @module user <- Module name for modules.define
 *                 The solution for loader_type_js and user_admin cases
 */
import { declMod } from 'ym:user';
import Button from 'ym:button';
import loaderJs from 'ym:loader_type_js';

export default declMod(....)

common.blocks/loader/_type/loader_type_js.js

/**
 * @module loader_type_js
 */
export default (url) => { ... };

@zxqfox @veged

Backward compatibility for `modules.*`

Async export proposal (4)

A module with async proviton

Current:

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);

Suggested:

import loader from 'bem:loader__js';
import cfg from 'bem:jquery__config';

let G = typeof window === 'undefined'? window : global;

// async function with name provide should be resolved by ym
export default async function provide() {
  if (G.jQuery) return G.jQuery;
  await loader(cfg.url);
  return G.jQuery.noConflict(true);
};

Profits: no need to add ym: namespace. Looks more pretty.

Update status project to Description

Update status project to Description:

-Babel plugin BEM
+Babel plugin BEM (deprecated experiment follow upstream https://github.com/bem/bem-react-core)