v5.1.0: Improved mix behaviour

Related: bem/bem-core#805

+15 test cases
–1 bug

Fixed (degradation)

1. bemhtml should duplicate block class if mix several block with mods to elem in the same block.

Because block class must have for mix block with mods to block elem.

Example:

({
    block: 'b',
    content: {
        elem: 'e',
        mix: [
            { block: 'b', mods: { m1: 'v1' } },
            { block: 'b', mods: { m2: 'v2' } }
        ]
    }
});

4.3.4 result:

<div class="b"><div class="b__e b b_m1_v1 b b_m2_v2"></div></div>

demo

5.0.0 result:

<div class="b"><div class="b__e b b"></div></div>

demo;

5.1.0 result:

<div class="b"><div class="b__e b b_m1_v1 b b_m2_v2"></div></div>

Improved

2. bemhtml should not duplicate block class if mix is the same block with mods.

({
    block: 'b',
    mix: [
        { block: 'b', mods: { m1: 'v1' } },
        { block: 'b', mods: { m2: 'v2' } }
    ]
});

4.3.4 result:

<div class="b b b_m1_v1 b b_m2_v2"></div>

demo

5.0.0 result:

<div class="b b b_m1_v1 b b_m2_v2"></div>

demo

5.1.0 result:

<div class="b b_m1_v1 b_m2_v2"></div>

3. bemhtml should not duplicate elem class if mix is the same elem.

Weird case, but for completeness why not to check it

({
    block: 'b',
    elem: 'e',
    mix: { elem: 'e' }
});

4.3.4 result:

<div class="b__e b__e"></div>

demo

5.0.0 result:

<div class="b__e b__e"></div>

demo

5.1.0 result:

<div class="b__e"></div>

4. bemhtml should not duplicate elem class if mix is the same block elem.

Weird case, but for completeness why not to check it.

({
    block: 'b',
    elem: 'e',
    mix: { block: 'b', elem: 'e' }
});

4.3.4 result:

<div class="b__e b__e"></div>

demo

5.0.0 result:

<div class="b__e b__e"></div>

demo

5.1.0 result:

<div class="b__e"></div>

5. bemhtml should not duplicate elem class if mix the same elem to elem in block.

Weird case, but for completeness why not to check it.

({
    block: 'b',
    content: {
        elem: 'e',
        mix: { elem: 'e' }
    }
});

4.3.4 result:

<div class="b"><div class="b__e b__e"></div></div>

demo

5.0.0 result:

<div class="b"><div class="b__e b__e"></div></div>

demo

5.1.0 result:

<div class="b"><div class="b__e"></div></div>

6. bemhtml should not duplicate elem class if mix is the same block elem with elemMods.

({
    block: 'b',
    elem: 'e',
    mix: { elem: 'e', elemMods: { modname: 'modval' } }
});

4.3.4 result:

<div class="b__e b__e b__e_modname_modval"></div>

demo

5.0.0 result:

<div class="b__e b__e b__e_modname_modval"></div>

demo

5.1.0 result:

<div class="b__e b__e_modname_modval"></div>

7. bemhtml should not duplicate block elem elemMods class

({
    block: 'b',
    elem: 'e',
    mix: { block: 'b', elem: 'e', elemMods: { modname: 'modval' } }
});

4.3.4 result:

<div class="b__e b__e b__e_modname_modval"></div>

demo

5.0.0 result:

<div class="b__e b__e b__e_modname_modval"></div>

demo

5.1.0 result:

<div class="b__e b__e_modname_modval"></div>

“Who cares” cases (zero cost but enjoyable)

Weird cases, but for completeness why not to check it.

8. bemhtml should duplicate block mods class if mix is the same block with mods.

But who cares? It’s pretty rare case.
To fix this we need to compare each key/value pairs. It’s too expensive.
I believe that developers should not want to do this.

({
    block: 'b',
    mods: { m: 'v' },
    mix: { block: 'b', mods: { m: 'v' } }
});

4.3.4 result:

<div class="b b_m_v b b_m_v"></div>

demo

5.0.0 result:

<div class="b b_m_v b b_m_v"></div>

demo

5.1.0 result:

<div class="b b_m_v b_m_v"></div>

9. bemhtml should duplicate elem elemMod class

({
    block: 'b',
    content: {
        elem: 'e',
        elemMods: { modname: 'modval' },
        mix: { elem: 'e', elemMods: { modname: 'modval' } }
    }
});

But who cares? It’s pretty rare case.
To fix this we need to compare each key/value pairs. It’s too expensive.
I believe that developers should not want to do this.

4.3.4 result:

<div class="b">
    <div class="b__e b__e_modname_modval b__e b__e_modname_modval"></div>
</div>

demo

5.0.0 result:

<div class="b">
    <div class="b__e b__e_modname_modval b__e b__e_modname_modval"></div>
</div>

demo

5.1.0 result:

<div class="b">
    <div class="b__e b__e_modname_modval b__e_modname_modval"></div>
</div>