Component with children

[rrag]

Looked at the docs and the source too and I could not understand if a Widget registered via

t7.registerComponent({
  "Widget": MyWidget
});

can have children?, like so

t7`
  <div>
    <header>
      <Widget welcome="Hello world">
        <p>children go here</p>
        <p>children go here</p>
      </Widget>
    </header>
  </div>
`;

[trueadm]

Hi rrag,

Thank you for this, you pointed out a bug that should now be resolved in the master branch. Can you let me know if this now fixes your issue (in React it should be picked up as this.props.children within a component).

[rrag]

I am still not clear. I saw the diff. It would be very useful if you can update the Readme and examples to show a Component with children, and Component with other Components as children.

Some context to why I am interested in this A project that I am working on using React creates a few hundred SVG elements. zoom and drag actions are not very responsive when the number of SVG DOM elements are more than a few hundred, and I am looking to other virtual dom based libraries to see if they can improve any better.

Components are key to making a complex application manageable and my lib is full of components containing other components

[trueadm]

I've added an example of nested React components and their children. I also added that example to the readme.

https://github.com/trueadm/t7/blob/master/examples/react-complex-components.html

Although, going by what you're saying, SVG really isn't the best path for such cases (animating hundreds of SVG elements is never going to be performant). What is your use case for so many SVGs? t7 isn't a virtual DOM library either, it's simply a middle-man for virtual DOM libraries and their "templates". I'd recommend looking into canvas/WebGL based tools for high performant scenarios where you'd need to drag and drop hundreds of elements smoothly.

[rrag]

Thanks for the example. I am exploring cito as a potential alternative, to React, I understand that t7 is not vdom, but a helper for creating templates.

The project I am working on is react-stockcharts, The problem can be seen [here](http://rrag.github.io/react-stockcharts/documentation.html#/Lots of data), when you zoom so you get more elements on the page and then do some drag action.

[trueadm]

This is very interesting. I've recently done quite a bit of work for charts (in particular candlestick charts for trading data). After a large evaluation on the market, we found canvas based solutions to be far more performant (even more so on tablet and mobile). I envisage SVG2 will bring with it many performance enhancements, but what you're experiencing would be the same even if you wrote it all in Vanilla JS without any form of framework behind it.

[rrag]

Yeah, I had come to the same conclusion, but was exploring any other last ditch attempts to make it faster, the convenience of styling with css is just hard to beat.

Any case thanks for your example. Closing this now.