Initial scope

[veged]

• [x] BEM-entities declaration
  • [x] with modifiers
  • [x] on redefinition levels
  • [x] inheritance
• [x] creating
  • [x] with JS classes
  • [x] without JS classes
• [x] html templates
  • [x] tag
  • [x] attrs
  • [x] cls
  • [x] mods
• [x] React lifecycle methods
• [x] mix
• [ ] mixin (TBD)
• [x] jsx
• [x] deps
• [x] build #2

// MyBlock.js

import Bem from 'bem:Bem';
import MyElem from 'bem:MyBlock-MyElem';
import OtherBlock from 'bem:OtherBlock';
import WrapBlock from 'bem:WrapBlock';

export default Bem.decl({
    block : 'MyBlock',
    tag : 'a', 
    mods({ disabled }) {
        return { disabled };
    },
    // ... etc. about html
    attrs({ disabled, onChange }) {
        return {
            disabled,
            onChange,
            onFocus: this.onFocus,
        }
    },

    content() { // children?
        return [
            <Bem block={this} elem="MyElem" tag="span"/>,
            <OtherBlock>{ this.props.children }</OtherBlock>,
            <Bem block="OtherBlock" elem="OtherElem" tag="span"/>,
            <MyElem .../>,
            // ...
        ]
    },

    render() {
        return WrapBlock({}, [this.__base()]);
    },

    componentWillMount,
    componentDidMount,
    componentWillReceiveProps,
    shouldComponentUpdate,
    // ... all React lifecycle methods
});

// MyBlock_myMod.js

import MyBlock from 'bem:MyBlock'

export default MyBlock.decl({
    block : 'MyBlock',
    mod : ({ myMod }) => myMod /* some predicate */, 
    tag : 'span',
    // ... any other methods will be guarded by modifier predicate
});

[qfox]

Do you mind to use bemhtml templates for vidom? https://github.com/bem/bem-xjst/pull/235

[krvital]

So, are you going to rewrite bem-core blocks like "page", "dom", "cookie" as react components? It would be great if you clarify the purpose and main idea of this repository.

[veged]

@zxqfox no, just plain React

[veged]

@krvital bem-react-* will be whole separate implementation of base modules and components on top of React — the main purpose is to bring declarative BEM way for writing code with React, with easy redefinitions by modifiers and levels (see https://en.bem.info/methodology/filesystem/ and https://en.bem.info/methodology/js/)

[dfilatov]

We have some doubts about MyBlock({ elem : 'myElem2', tag : '...', mods : {} }):

• How will it work in case of element class?
• How to render another element of the same block in case we're already within element?