BemCell

Representation of identifier of a part of BEM entity.

Install

$ npm install --save @bem/cell

Usage

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', elem: 'text', mod: { name: 'theme', val: 'simple' } }),
    tech: 'css',
    layer: 'common'
});

cell.entity; // ➜ BemEntityName { block: 'button', elem: 'text' }
cell.tech;   // css
cell.layer;  // common
cell.id;     // button__text@common.css

cell.block;  // → button
cell.elem;   // → text
cell.mod;    // → { name: 'theme', val: 'simple' }

API

• constructor(obj)
• entity
• tech
• layer
• id
• toString()
• valueOf()
• toJSON()
• isEqual(cell)
• isBemCell(cell)
• create(object)

constructor(obj)

Parameter	Type	Description
obj.entity	BemEntityName	Representation of entity name
obj.tech	string	Tech of cell
obj.layer	string	Layer of cell

entity

Returns the name of entity.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', elem: 'text' })
});

cell.entity; // ➜ BemEntityName { block: 'button', elem: 'text' }

tech

Returns the tech of cell.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', elem: 'text' }),
    tech: 'css'
});

cell.tech; // ➜ css

layer

Returns the layer of this cell.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
   entity: new BemEntityName({ block: 'button', elem: 'text' }),
   layer: 'desktop'
});

cell.layer; // ➜ desktop

id

Returns the identifier of this cell.

Important: should only be used to determine uniqueness of cell.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', elem: 'text' }),
    tech: 'css',
    layer: 'desktop'
});

cell.id; // ➜ "button__text@desktop.css"

toString()

Returns a string representing this cell.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');
const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', mod: 'focused' }),
    tech: 'css',
    layer: 'desktop'
});

cell.toString(); // button_focused@desktop.css

valueOf()

Returns an object representing this cell.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');
const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', mod: 'focused' }),
    tech: 'css',
    layer: 'desktop'
});

cell.valueOf();

// ➜ { entity: { block: 'button', mod: { name: 'focused', value: true } }, tech: 'css', layer: 'desktop' }

toJSON()

Returns an object for JSON.stringify() purpose.

isEqual(cell)

Determines whether specified cell is deep equal to cell or not.

Parameter	Type	Description
cell	BemCell	The cell to compare.

const BemCell = require('@bem/cell');
const buttonCell1 = BemCell.create({ block: 'button', tech: 'css', layer: 'desktop' });
const buttonCell2 = BemCell.create({ block: 'button', tech: 'css', layer: 'desktop' });
const inputCell = BemCell.create({ block: 'input', tech: 'css', layer: 'common' });

buttonCell1.isEqual(buttonCell2); // true
buttonCell1.isEqual(inputCell); // false

#isBemCell(cell)

Determines whether specified cell is instance of BemCell.

Parameter	Type	Description
cell	BemCell	The cell to check.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'button', elem: 'text' })
});

BemCell.isBemCell(cell); // true
BemCell.isBemCell({}); // false

#create(object)

Creates BemCell instance by any object representation.

Helper for sugar-free simplicity.

Parameter	Type	Description
object	object	Representation of entity name.

Passed Object could have fields for BemEntityName and cell itself:

Object field	Type	Description
block	string	The block name of entity.
elem	string	The element name of entity.
mod	string, object	The modifier of entity. If specified value is string then it will be equivalent to { name: string, val: true }.
val	string	The modifier value of entity. Used if mod is a string.
mod.name	string	The modifier name of entity.
mod.val	*	The modifier value of entity.
modName	string	The modifier name of entity. Used if mod.name wasn't specified.
modVal	*	The modifier value of entity. Used if neither mod.val nor val were not specified.
tech	string	Technology of cell.
layer	string	Layer of cell.

const BemCell = require('@bem/cell');

BemCell.create({ block: 'my-button', mod: 'theme', val: 'red', tech: 'css', layer: 'common' });
BemCell.create({ block: 'my-button', modName: 'theme', modVal: 'red', tech: 'css', layer: 'common' });
BemCell.create({ entity: { block: 'my-button', modName: 'theme', modVal: 'red' }, tech: 'css' }); // valueOf() format
// → BemCell { entity: { block: 'my-button', mod: { name: 'theme', val: 'red' } }, tech: 'css', layer: 'common' }

Debuggability

In Node.js, console.log() calls util.inspect() on each argument without a formatting placeholder.

BemCell has inspect() method to get custom string representation of the object.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'input', mod: 'available' }),
    tech: 'css'
});

console.log(cell);

// ➜ BemCell { entity: { block: 'input', mod: { name: 'available' } }, tech: 'css' }

You can also convert BemCell object to a string.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'input', mod: 'available' }),
    tech: 'css'
});

console.log(`cell: ${cell}`);

// ➜ cell: input_available.css

Also BemCell has toJSON method to support JSON.stringify() behaviour.

const BemCell = require('@bem/cell');
const BemEntityName = require('@bem/entity-name');

const cell = new BemCell({
    entity: new BemEntityName({ block: 'input', mod: 'available' }),
    tech: 'css'
});

console.log(JSON.stringify(cell));

// ➜ {"entity":{"block":"input","mod":{"name":"available","val":true}},"tech":"css"}

Deprecation

Deprecation is performed with depd To silencing deprecation warnings from being output simply use this. Details

NO_DEPRECATION=@bem/cell node app.js

License

Code and documentation © 2016 YANDEX LLC. Code released under the Mozilla Public License 2.0.