API
The resolve method to supplement the declaration missing entities.
Important: It takes into account the order dependencies of BEM-entities.
resolve(decl, deps) -> decl
Object[] decl — list of BEM-entities. Each item is object. See, bem-naming.
Object[] deps — list of dependencies between BEM-entities.
Example:
var deps = require('bem-deps'),
decl = [
{ block: 'A' },
{ block: 'B' }
],
myDeps = [
{
entity: { block: 'A' },
dependOn: [
{
entity: { block: 'B' },
order: 'dependenceBeforeDependants'
},
{
entity: { block: 'C' }
}
]
}
];
var res = deps.resolve(decl, myDeps);
console.log(res);
/*
{
entities: [{ block: 'B' }, { block: 'A' }, { block: 'C' }],
dependOn: []
}
*/Terms
Common dependencies - dependencies where one entity depends on another entity, without taking in account specific techsResolve common dependencies - resolve dependencies without specifying any techUnordered dependencies - dependencies which ordering is not specified explicitly. (i.e. order param is not set)Ordered dependencies - dependencies which ordering specified explicitly (i.e. order param is being set)
Deps Format
Each item of deps list is Object.
Object entity — BEM-entity that is dependent on other
Object[] dependOn — list of BEM-entities of which depends on entity
Example:
{
entity: { block: 'A' },
dependOn: [
{ entity: { block: 'B' } },
{ entity: { block: 'C' } }
]
}This means that the block A depends on blocks B and C.
Techs
Constraints can be not only between the BEM-entities but also between technologies.
resolve(decl, deps, { tech: 'css' })Example:
Tech -> Block
{
entity: { block: 'A' },
tech: 'css',
dependOn: [
{ entity: { block: 'B' } }
]
}This means that the css tech of block A depends on all techs of block B.
Example:
Tech -> Tech
{
entity: { block: 'A' },
tech: 'js',
dependOn: [
{
entity: { block: 'B' },
tech: 'js'
}
]
}This means that the js tech of block A depends on js tech of block B.
Deps By Techs
For cases when the technology is dependent on other technology in result will be add dependOn field. Each item of dependOn is object with tech and entities filed.
Example:
var myDeps = {
entity: { block: 'A' },
tech: 'js',
dependOn: [
{
entity: [{ block: 'B' }],
tech: 'bemhtml'
}
]
};
var res = resolve(decl, deps, { tech: 'js' });
console.log(res);
/*
{
entities: [{ block: 'A' }],
dependOn: [
{
tech: bemhtml,
entities: [{ block: 'B' }]
}
]
}
*/Order
Depending provides information about the order:
dependenceBeforeDependants — BEM-entity may require that the other BEM-entity will be before it.false — BEM-entity may expect that the other BEM-entity will be before or after it.
Example:
{
entity: { block: 'A' },
tech: 'js',
dependOn: [
{
entity: { block: 'B' },
order: 'dependenceBeforeDependants'
}
]
}This means that the block A depends on of block B and require that B will be before A.
Priority
Rule 1: Try to keep the order of declaration.
Example:
Declaration: A, B, C
Dependency graph: B <- E (with order: dependenceBeforeDependants)
Expected result: A, E, B, C
Rule 2: Try to keep the natural order for BEM-entities with same block scope (block and its mods, elems and their mods):
- block before others BEM-entities
- elem after block
- block mod after block
- elem mod after elem
- key-val mod after boolean mod
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent