BEM entity name representation.
$ npm install --save @bem/entity-name
const BemEntityName = require('@bem/entity-name');
const entityName = new BemEntityName({ block: 'button', elem: 'text' });
entityName.block; // button
entityName.elem; // text
entityName.mod; // undefined
entityName.id; // button__elem
entityName.type; // elem
entityName.isEqual(new BemEntityName({ block: 'button' })); // false
entityName.isEqual(new BemEntityName({ block: 'button', elem: 'text' })); // trueBEM entities can be defined with a help of JS object with the following fields:
block— a block name. The field is required because only a block exists as an independent BEM entityelem— an element name.mod— a modifier.
The modifier consists of a pair of fields mod.name and mod.val. This means that the field mod.val without mod.name has no meaning.
Example:
const BemEntityName = require('@bem/entity-name');
// The modifier of block
new BemEntityName({
block: 'button',
mod: { name 'view', val: 'action' }
});
// Not valid modifier
new BemEntityName({
block: 'block',
mod: { val: 'action' }
});To describe the simple modifier, field mod.val must be specified as true.
Example:
// Boolean modifier of a block
new BemEntityName({
block: 'button',
mod: { name: 'focused', val: true }
});
// Shorthand for the boolean modifier of a block
new BemEntityName({
block: 'button',
mod: 'focused'
});- constructor({ block, elem, mod })
- block
- elem
- mod
- id
- type
- isSimpleMod()
- isEqual(entityName)
- toString()
- valueOf()
- toJSON()
- #isBemEntityName(entityName)
- #create(object)
| Parameter | 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 }. Optional. |
mod.name |
string |
The modifier name of entity. |
mod.val |
string, true |
The modifier value of entity. Optional. |
The name of block to which this entity belongs.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button' });
name.block; // buttonThe element name of this entity.
If entity is not element or modifier of element then returns empty string.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', elem: 'text' });
name.elem; // textThe modifier of this entity.
Important: If entity is not a modifier then returns undefined.
const BemEntityName = require('@bem/entity-name');
const blockName = new BemEntityName({ block: 'button' });
const modName = new BemEntityName({ block: 'button', mod: 'disabled' });
modName.mod; // { name: 'disabled', val: true }
blockName.mod; // undefinedThe id for this entity.
Important: should only be used to determine uniqueness of entity.
If you want to get string representation in accordance with the provisions naming convention you should use bem-naming package.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', mod: 'disabled' });
name.id; // button_disabledThe type for this entity.
Possible values: block, elem, blockMod, elemMod.
const BemEntityName = require('@bem/entity-name');
const elemName = new BemEntityName({ block: 'button', elem: 'text' });
const modName = new BemEntityName({ block: 'menu', elem: 'item', mod: 'current' });
elemName.type; // elem
modName.type; // elemModDetermines whether modifier simple or not.
const BemEntityName = require('@bem/entity-name');
const modName = new BemEntityName({ block: 'button', mod: { name: 'theme' } });
const modVal = new BemEntityName({ block: 'button', mod: { name: 'theme', val: 'normal' } });
modName.isSimpleMod(); // true
modVal.isSimpleMod(); // false
### isEqual(entityName)
Parameter | Type | Description
-------------|-----------------|-----------------------
`entityName` | `BemEntityName` | The entity to compare.
Determines whether specified entity is the deepEqual entity.
```js
const BemEntityName = require('@bem/entity-name');
const inputName = new BemEntityName({ block: 'input' });
const buttonName = new BemEntityName({ block: 'button' });
inputName.isEqual(buttonName); // false
buttonName.isEqual(buttonName); // trueReturns string representing the entity name.
Important: if you want to get string representation in accordance with the provisions naming convention you should use bem-naming package.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', mod: 'focused' });
name.toString(); // button_focusedReturns object representing the entity name.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', mod: 'focused' });
name.valueOf();
// ➜ { block: 'button', mod: { name: 'focused', value: true } }Returns object for JSON.stringify() purposes.
Determines whether specified entity is an instance of BemEntityName.
| Parameter | Type | Description |
|---|---|---|
entityName |
BemEntityName |
The entity to check. |
const BemEntityName = require('@bem/entity-name');
const entityName = new BemEntityName({ block: 'input' });
BemEntityName.isBemEntityName(entityName); // true
BemEntityName.isBemEntityName({ block: 'button' }); // falseCreates BemEntityName instance by any object representation.
Helper for sugar-free simplicity.
| Parameter | Type | Description |
|---|---|---|
object |
object |
Representation of entity name. |
Passed Object could have the common field names for entities:
| Object field | Type | Description |
|---|---|---|
block |
string |
The block name of entity. |
elem |
string |
The element name of entity. Optional. |
mod |
string, object |
The modifier of entity. If specified value is string then it will be equivalent to { name: string, val: true }. Optional. |
val |
string |
The modifier value of entity. Used if mod is a string. Optional. |
mod.name |
string |
The modifier name of entity. Optional. |
mod.val |
string, true |
The modifier value of entity. Optional. |
modName |
string |
The modifier name of entity. Used if mod.name wasn't specified. Optional. |
modVal |
string, true |
The modifier value of entity. Used if neither mod.val nor val were not specified. Optional. |
const BemEntityName = require('@bem/entity-name');
BemEntityName.create({ block: 'my-button', mod: 'theme', val: 'red' });
BemEntityName.create({ block: 'my-button', modName: 'theme', modVal: 'red' });
// ➜ BemEntityName { block: 'my-button', mod: { name: 'theme', val: 'red' } }
BemEntityName.create({ block: 'my-button', mod: 'focused' });
// ➜ BemEntityName { block: 'my-button', mod: { name: 'focused', val: true } }In Node.js, console.log() calls util.inspect() on each argument without a formatting placeholder.
BemEntityName has inspect() method to get custom string representation of the object.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'input', mod: 'available' });
console.log(name);
// ➜ BemEntityName { block: 'input', mod: { name: 'available' } }You can also convert BemEntityName object to string.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'input', mod: 'available' });
console.log(`name: ${name}`);
// ➜ name: input_availableAlso BemEntityName has toJSON method to support JSON.stringify() behaviour.
const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'input', mod: 'available' });
console.log(JSON.stringify(name));
// ➜ {"block":"input","mod":{"name":"available","val":true}}Code and documentation © 2016 YANDEX LLC. Code released under the Mozilla Public License 2.0.