provide react constructors to the deep of templates

[awinogradov]

// ./src/components/button/button.bemhtml.js
block('button')(
    tag()(function() {
        return require('./button.js');
    })
);

[Guria]

Would be great to find a better way to do it. It should work on consumer side too. Eg, trying to mix existing react-component with own elem.

[nik-kor]

we were thinking about passing deps hash, e.g.

   template.apply({
      block: 'b1',
      deps: {
         'b2': require('../b1/b1')
      }
   }

And in vidom match it

[awinogradov]

@Guria why first is bad?

[Guria]

as consumer I want to use bemjson in own components

function SplitPane (props) {
  return bemreact({
    block: 'SplitPane',
    content: [
      { elem: 'Panel' },
      { elem: 'Resizer', attrs: { onResize: (e) => {} } }, // here I want component from './Resizer'
      { elem: 'Panel' },
    ]
  })
}

block('SplitPane').elem('Resizer')(
    tag()(function() {
        return require('./Resizer'); // r u sirius?
    })
)

Or maybe I missing smth here?

[awinogradov]

Why not:

function Panel (props) {
  return bemreact({
    block: 'Panel',
    content: [
      { elem: 'Panel' },
      { elem: 'Resizer', content: require('./Resizer') }, // here I want component from './Resizer'
      { elem: 'Panel' },
    ]
  })
}

[Guria]

I want a mix, I really don't need extra wrapper div here

[Guria]

BTW, Resizer is just div that provides smart handlers. It has no own classes, attrs, etc and it is stateless.

[awinogradov]

Ok, another one;)

function Panel (props) {
  return bemreact({
    block: 'Panel',
    content: [
      { elem: 'Panel' },
      <Resizer mix={this.bem.elem('panel')}/>, // here I want component from './Resizer'
      { elem: 'Panel' },
    ]
  })
}

POC for this https://github.com/awinogradov/react-components/blob/master/src/core/bem/bem.js#L13

[Guria]

OK, much better now and seems to solve a problem. PS: it will look slightly different then:

class SplitPane extends BEM {
  render () {
    return bemreact({
      block: 'SplitPane',
      content: [
        { elem: 'Panel' },
        <Resizer className={this.bem.elem('Panel')} />, // let suppose that Resizer is 3rd party and don't know `mix`
        { elem: 'Panel' },
      ]
    })
  }
}

[awinogradov]

yes, why not) you are right

[Guria]

OK, So why we suggest to use xjst tag way in lib itself?

[awinogradov]

Answer in the title of this issue)

[Guria]

okay, have to smoke it a little

[awinogradov]

Now this is best and simplest way. Maybe we'll find the better way in the future. But not now.

[awinogradov]

continued here #6