bemjson-to-jsx

Transforms BEMJSON objects to JSX markup.

Install

$ npm install --save bemjson-to-jsx

Usage

const bemjsonToJSX = require('bemjson-to-jsx')();

var bemjson = {
    block: 'button2',
    mods: { theme: 'normal', size: 'm' },
    text: 'hello world'
};

var jsxTree = bemjsonToJSX.process(bemjson);

console.log(jsxTree.JSX);
// → "<Button2 theme={'normal'} size={'m'} text={'hello world'}/>"

Options

isNameSpacedElems

isNameSpacedElems Change generation of JSX Class

true — Block.Elem
false — BlockElem ( default )

const bemjsonToJSX = require('bemjson-to-jsx')({ isNameSpacedElems: true });

var bemjson = {
    block: 'button2',
    elem: 'text'
    text: 'hello world'
};

var jsxTree = bemjsonToJSX.process(bemjson);

console.log(jsxTree.JSX);
// → "<Button2.Text text={'hello world'}/>"

useSimpleComponent

useSimpleComponent Is flag to enable <Bem /> components in JSX. Check bem-react-core, for more information about Bem Simple Component.

true — enables
false — ( default )

By default all components rendered as they has class defined somewhere.

const bemjsonToJSX = require('bemjson-to-jsx')({ useSimpleComponent: false });

var bemjson = {
    block: 'button2',
    text: 'hello world'
};

var jsxTree = bemjsonToJSX.process(bemjson);

console.log(jsxTree.JSX);
// → "<Button2 text={'hello world'}/>"

Enabling <Bem />, components that have block or block & elem fields turns to <Bem /> components. If bemsjon of components does'n t contain block or block & elem field, we treat them as simple JSX — <div />, <span />, <button /> and so on.

const bemjsonToJSX = require('bemjson-to-jsx')({ useSimpleComponent: true });

var bemjson = {
    tag: 'span',
    content: [
        { block: 'button2', text: 'hello' },
        { block: 'textinput', text: 'world' }
    ]
};

var jsxTree = bemjsonToJSX.process(bemjson);

console.log(jsxTree.JSX);
// → "<span>
//      <Bem block="button2" text="hello"/>
//      <Bem block="textinput" text="world"/>
//   </span>"

knownComponents

For enabling <Bem /> on some components. Provide Array of [bem-entity](https://www.npmjs.com/package/@bem/sdk.entity-name) to knownComponents. Then known entities will be components and unkown will be . These option also enables useSimpleComponent = true`.

[BemEntity] — array of known entities. Also could be single BemEntity.

const BemEntity = require('@bem/sdk.entity-name');

const bemjsonToJSX = require('bemjson-to-jsx')({
    knownComponents: BemEntity.create({ block: 'button2' })
});

var bemjson = {
    tag: 'span',
    content: [

        // button2 is known
        { block: 'button2', text: 'hello' },

        // textinput would be <Bem />
        { block: 'textinput', text: 'world' }
    ]
};

var jsxTree = bemjsonToJSX.process(bemjson);

console.log(jsxTree.JSX);
// → "<span>
//      <Button2 text="hello"/>
//      <Bem block="textinput" text="world"/>
//   </span>"