Short syntax for simple modes

[qfox]

Before:

block('a').tag()('span')

After:

block('a')({ tag: 'span' })

Before:

block('a')(
    tag()('span'),
    addMix()({ block: 'x' }),
    mods()({ mod: 'val' }),
    content()(function() {
        return ['Vobla: ', this.ctx.name];
    })
});

After:

block('a')({
    tag: 'span',
    addMix: { block: 'x' },
    mods: { mod: 'val' },
    content() {
        return ['Vobla: ', this.ctx.name];
    }
});

Complex cases gonna be like this.

Before:

block('a')(
    tag()('a'),
    match(function() { return this.bla }).tag()('span')
);

After:

block('a')(
    { tag: 'a' },
    match(function() { return this.bla })({
        tag: 'span'
    })
);

Some cases gonna be only in old syntax:

block('a').tag()(
    'span',
    match(function() { })('a')
)

[miripiruni]

Before:

block('button').match(function() { return this._attachButton; })(
    tag()('span'),

    match(function() { return !!this._disabled; })
        .mix()({ mods: { disabled: 'yes' } }),

    def()(function() {
        return applyNext({
            _name: this.ctx.name || 'attachment',
            _id: this.ctx.id || this.generateId(),
            _textId: 'text' + this._id,
            _tabindex: this.ctx.tabindex
        });
    }),

    attrs()({}), // принудительно сбрасываем все атрибуты

    content()(function() {
        var p = applyNext(),
            a = {
                block: 'attach',
                elem: 'control',
                attrs: this.ctx.controlAttrs
            };

        return [p, a];
    }),

    elem('text').attrs()(function() {
        var a = applyNext() || {};
        a.id = this._textId;
        a['aria-hidden'] = true;
        return a;
    })
);

After:

block('button').match(function() { return this._attachButton; })(
    {
        tag: 'span',

        def: function() {
            return applyNext({
                _name: this.ctx.name || 'attachment',
                _id: this.ctx.id || this.generateId(),
                _textId: 'text' + this._id,
                _tabindex: this.ctx.tabindex
            });
        },

        attrs: {}, // принудительно сбрасываем все атрибуты

        content: function() {
            return [
                applyNext(),
                {
                    block: 'attach',
                    elem: 'control',
                    attrs: this.ctx.controlAttrs
                }
            ];
         }
    },

    elem('text')({
        attrs: function() {
            var a = applyNext() || {};
            a.id = this._textId;
            a['aria-hidden'] = true;
            return a;
        }),

    match(function() { return !!this._disabled; })({
        mix: { mods: { disabled: 'yes' } }
    })
);

@veged @zxqfox @arikon @tadatuta it’s real template from islands. Many combinations with compositions and chains, many objects literals. The result is very difficult to read and maintain.

[veged]

The result is very difficult to read and maintain.

I can't agree ;-)

[qfox]

After (using all existing features in 8.x):

block('button').match(n => n._attachButton)(
    {
        tag: 'span',

        def() {
            return applyNext({
                _name: this.ctx.name || 'attachment',
                _id: this.ctx.id || this.generateId(),
                _textId: 'text' + this._id,
                _tabindex: this.ctx.tabindex
            });
        },

        attrs: {}, // принудительно сбрасываем все атрибуты

        appendContent() {
            return {
                    block: 'attach',
                    elem: 'control',
                    attrs: this.ctx.controlAttrs
            };
         }
    },

    elem('text')({
        addAttrs() {
            return {id: this._textId, 'aria-hidden': true};
        },

        match(n => n._disabled)({
            mix: { mods: { disabled: 'yes' } } // Is this `{block: ?, mods: {disabled: 'yes'}}` ?
        })
    })
);

It has much less noise.

[tenorok]

Such syntax is most clear in my opinion.
It's similar to the standard syntax of classes, object literal and i-bem in the end. It will be good highlighted in the editor and not to be confused developers. By the way, the possibility of different grouping of modes is unnecessary, because leads to many various syntax in project and big meaningless difference in commits.

[miripiruni]

I have been trying to program such shortcuts.

In general, my changes is:

1. If last part of chain contain Object then try to iterate by it’s keys.
2. All keys will be modes and values will be template bodies.

Example 1:

with shortcut:

block('b')({ tag: 'a' })

without shortcut:

block('b').tag()('a')

Example 2:

with shortcut:

block('b')( mix()('mixed'), { tag: 'a' } )

without shortcut:

block('b')( mix()('mixed'), tag()('a') )

Now we have such templates:

block('b').addMods()({ first: 'yes' })

Current version just add modifier first_yes to b. But according new rule, bem-xjst will be compile such template as mode first witch returns 'yes'.

There is two way to do:

1. Prohibit object literals as returning value. And use object literals only as templates shortcuts. It’s major changes.
2. Allow shortcuts only after block subpredicate. block('b')( { /* object literal here */ } ). According life experience that nobody uses anonymous mode (mode with out name). I’m not sure if it’s possible, but it looks more good than major changes.
3. What other way?

[veged]

I suggest 2'. — «Break chain on "mode" subpredicate and do not allow shortcuts further.»

[miripiruni]

• bem-xjst@8.9.0
• enb-bemxjst@8.10.0

And also already in Turbo!