https://github.com/bem/babel-plugin-bem
Babel plugin BEM
https://github.com/bem/babel-plugin-bem
Last synced: about 1 year ago
JSON representation
Babel plugin BEM
- Host: GitHub
- URL: https://github.com/bem/babel-plugin-bem
- Owner: bem
- License: other
- Created: 2015-08-07T10:13:53.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-11-18T13:37:25.000Z (over 10 years ago)
- Last Synced: 2025-03-20T19:17:50.883Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 6
- Watchers: 25
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# babel-plugin-bem
[](https://www.npmjs.org/package/babel-plugin-bem)
A [Babel](https://babeljs.io/) plugin for [BEM](https://bem.info) methodology.
The plugin helps tranform JS written in ES2015 (formally ES6) to [YModules](https://bem.info/tools/bem/modules/) module
system, that is used inside [bem-core](https://bem.info/libs/bem-core/) library.
## Examples
### 1. Simple module
~~~js
// dom.js
import $ from 'bem:jquery';
export default { /* ... */ };
~~~
will be tranformed to
~~~js
// dom.js
modules.define('dom', ['jquery'], function(provide, $) {
provide({ /* ... */ });
});
~~~
### 2. A module with BEM entity
~~~js
// button.js
import bemDom from 'bem:i-bem-dom';
export default bemDom.declBlock('button', {
onSetMod : {
/* ... */
}
});
~~~
tranforms to
~~~js
// button.js
module.define('button', ['i-bem-dom'], function(provide, bemDom) {
provide(bemDom.declBlock(this.name, {
onSetMod : {
/* ... */
}
}));
});
~~~
### 3. A module with modified BEM block
~~~js
// button_type_link.js
import Button from 'bem:button';
export default Button.declMod({ modName : 'type', modVal : 'link' }, {
onSetMod : {
/* ... */
}
});
~~~
tranforms to
~~~js
// button_type_link.js
module.define('button', function(provide, Button) {
provide(Button.declMod({ modName : 'type', modVal : 'link' }, {
onSetMod : {
/* ... */
}
}));
});
~~~
### 4. A module with async providing
~~~js
// 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
~~~js
// 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](LICENSE.txt).