BemCell

Representation of identifier of a part of BEM entity.

BEM Cell consists of the BEM entity name, technology and layer.

Install

$ npm install --save @bem/sdk.cell

Usage

const BemCell = require('@bem/sdk.cell');
const BemEntityName = require('@bem/sdk.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;     // [email protected]

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 BEM entity name obj.tech | string | Tech of cell obj.layer | string | Layer of cell

entity

Returns the BEM entity name of this cell.

const BemCell = require('@bem/sdk.cell');
const BemEntityName = require('@bem/sdk.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 this cell.

const BemCell = require('@bem/sdk.cell');
const BemEntityName = require('@bem/sdk.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/sdk.cell');
const BemEntityName = require('@bem/sdk.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/sdk.cell');
const BemEntityName = require('@bem/sdk.entity-name');

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

cell.id; // ➜ "[email protected]"

toString()

Returns a string representing this cell.

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

cell.toString(); // [email protected]

valueOf()

Returns an object representing this cell.

const BemCell = require('@bem/sdk.cell');
const BemEntityName = require('@bem/sdk.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/sdk.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/sdk.cell');
const BemEntityName = require('@bem/sdk.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. Deprecated modVal | * | The modifier value of entity. Used if neither mod.val nor val were not specified. Deprecated tech | string | Technology of cell. layer | string | Layer of cell.

const BemCell = require('@bem/sdk.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/sdk.cell');
const BemEntityName = require('@bem/sdk.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/sdk.cell');
const BemEntityName = require('@bem/sdk.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/sdk.cell');
const BemEntityName = require('@bem/sdk.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/sdk.cell node app.js

License

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