using "react-render-html" module to create element children property

[digital-flowers]

when creating react element the getChildren method result to the error "If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons." i could solve this issue using the "react-render-html" module that create react elements from html string.

[PixelsCommander]

Looks great, I ll review early this week

[PixelsCommander]

@kof What do you think about this one?

[kof]

It doesn't justify the use case here, react-render-html brings a whole bunch of dependencies inlcuding a full featurered html parser ....

[PixelsCommander]

@digital-flowers could you elaborate on use case you found?

[digital-flowers]

yes, i just have registered 2 web components and i use the first one as a child to the other one for example
<post-card theme="dark"><user icon="..." name="..."></user></post-card>
your module automatically throw the error "If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons."

[PixelsCommander]

@kof , @kulor does it make sense for you?

[kof]

Why do you want to render one react component inside of another react component via custom elements? You can render the second one directly using react. You will definitely have an overhead even if we make it work.

[digital-flowers]

yes i agree, actually i don't use this library now maybe i will recheck it later but i have some experience in web components and react this is why i like the idea of this project and i can see the future would be for such a thing. anw if you think about it there is unlimited use cases where you need to pass element as a child of another element take for example
polymer framework
https://elements.polymer-project.org/elements/paper-radio-group
grommet ui
https://grommet.github.io/docs/chart

[digital-flowers]

i mean at least you don't need to show any javascript error and let the developer to use this.props.children see https://facebook.github.io/react/docs/multiple-components.html#children

[kulor]

TLDR; I like this suggestion but feel it carries baggage to this simple library and I have a open question about how it'd recursively render custom elements.

Disclosure, this issue's one close to my heart (#56).

Using ReactiveElements in anger (on thread.com) I've found a workaround solution of using regular span children with custom attributes to declaratively define repeating data. This comes with issues like having to manually parse child nodes and extract the values from them which feels unclean & non-idiomatic React.

The mind-funk situation I have with nested children is should they be React Elements that are parsed by the parent node or should they go through the ReactiveElements > React render flow and be returned to the parent before the parent is invoked. Given my usage I still feel there should be a more elegant way.

I've created a mini tradeoff table to try and rationalise my thoughts on both efforts (ignoring for now the idea of solely relying on props).

	a). Native React	b). ReactiveElements rendered, passed to parent
Example	<parent><Child prop={foo} /></parent>	<parent><child data-prop="foo"></parent>
Pros	Clear understanding of boundaries (barring the parent, children will all be in React)	Inert code, won't have side effects in browsers/editors
Cons	Hard to reason how you'd import dependent modules, variables etc in React context	Expensive to compute each child node through RE and pass children back to parent

Having been fairly involved in the Web Components scene, I prefer the b option as:

• It's how you'd expect to compose modules in HTML
• You don't have to worry about the "Source code" in your HTML that's yet to be parsed and could throw up spurious issues.

I like @digital-flowers's suggestion which plays off b but share the concern that it'd bring a lot of bloat and possibly introduce performance implications but feel it would be worth it if you knew what you were aware of the implications. I haven't done any experiments to see how much this PR would increase the size of this library, I'd love to know if someone's able to calculate this?

Another concern with this PR and use case combo is how would react-render-html know how to render a custom element (e.g. <user ...>)? There's no examples in their docs or tests. In my mind you'd have to rely on using ReactiveElements interface (registerReact) to keep consistent.

[digital-flowers]

@kulor thanks, this is exactly what i want to explain, i think the idea of web components is to extend html core tag library witch will isolate component development from application development where the web component developer can create the component and application developer can use it as if it is a simple html tag, now if you think in term of html standard web component (html tag) can have it is properties values from tag attributes or from tag inner body, i know it has side effects but if you want this project to reach it is core value i believe this is very important feature to cover of course you don't have to use react-render-html and as @kulor said it is more about creating standard more than code implementation

[PixelsCommander]

@digital-flowers Could you estimate impact on library`s footprint size?

[jackfranklin]

@digital-flowers I'm going to close this due to the lack of activity on it, but feel free to comment or open a new issue if you still want to chat about it :)