zero-bem
Minimal ES6 bem-stack implementation library.
Based, inspired and partly inherits the code from famous client-side framework
i-bem but it can work
without y-modules
, borschik
, enb
and other endemic Yandex' tools.
Installation
npm i -S zero-bem
Using
Using in runtime
Basic usage case (rehydratiing dom, adding new nodes & entities):
// const $ = require('jquery'); // document.body.innerHTML = '<div class="Wrapper"><div class="App bem-js" data-bem=\'{"Test":{"test":true}}\'>App content</div></div>'; const BEMDOM BEMHTML = ; // Init frozen DOM (came from app template) BEMDOM; // Find target block // const appBlock = BEMDOM.findEntities({ domElem: $('body'), block: 'App' }); const appBlock = ; // Find parent container const wrapperBlock = appBlock; // Try to dynamically create blocks from template const template = block: 'Demo' mix: block: 'Mixed' mods: test: 'val' js: param: 1 mods: test: true content: elem: 'Button' modName: 'id' modVal: 'action' ; // Create html from template const html = BEMHTML; // Add dom node const dom = BEMDOM; // Get bem entity const demoBlock = dom; // const mixedBlock = wrapperBlock.findChildBlock('Mixed'); const mixedBlock = demoBlock; console; // Find child const buttonElem = demoBlock; console; mixedBlock; // Remove created node & all linked & nested bem entities (Demo itself, all mixes, siblings and children) BEMDOM;
Using as modules
Suppose you have component Demo
. Then you can create some 'technologies'
modules for it in (for example) folder
src/components/Demo/:
JS runtime code (main module, which includes any other components' technology modules, as shown below) -- Demo.js:
const BEMDOM = ; ; // Include bemhtml templates; // Include styles const Demo_proto = /** @lends Demo.prototype */ /** Initialize the component event handler */ { this; console; // eslint-disable-line no-console // Emit demo event ; } ; ;
BEMHTML templates -- Demo.bemhtml:
// Adding modifiers { return this; } // Live entity true ;
Some styles if you need/want -- Demo.pcss:
.Demo
Hereafter you can use your component in other module.
You must use import component to let the webpack to know that it must to include it in the application build.
For example application main component App.js uses our Demo
:
import'components/Demo'; const App_proto = /** @lends App.prototype */ /** Initialize the app event handler */ { // Find demo block const demoBlock = this; // Do something with Demo: subscribe to events, change state, get properties, call it methods... } ; ;
NOTE: Other documentation is in progress...
Webpack configuration
You need to add webpack-zero-bemhtml-loader
as .bemhtml
files loader.
(ZEROBEM_PATH
hereafter means the location of the zero-bem
library, for
example ./node_modules/zero-bem/
or <rootDir>/node_modules/zero-bem/
etc...)
webpack.config.js
sample fragment:
const nanoBemHtmlLoaderPath = path; // Or use `require.resolve`// ...module { return // ... module: rules: // ... // bemhtml begin test: /\.?$/ exclude: /node_modules/ use: // ... // Specify loader path loader: path // Loader options options: // Allow sourcemaps (not supported now) sourceMap: sourceMaps // Add required modules to resulted code requires: // For example< we can use common configuration config: 'src/config/config' // ... // ... // bemhtmlk end // ... // module.rules end // ... ; // return end}; // module.exports end
Jest configuration
You need to add jest-transform-zero-bemhtml
as jest transform rule.
jest.config.js
sample fragment:
moduleexports = // ... transform: // ... '.+\\.(bemhtml)$': path // ... // ...;
Webpack example
Webpack minimal working example configuration included in packag in folder webpack-example.
You can run npm scripts webpack-example-server
or webpack-example-build
(or
webpack-example-build-prod
if you wish to play around production build) for
testing/experiments.
Original Yandex bem libs:
- bem/bem-core: BEM Core Library
- bem/bem-xjst: bem-xjst (eXtensible JavaScript Templates): declarative template engine for the browser and server
- bem/project-stub: deps
See also: