Allow *real* children

[treshugart]

trafficstars

If any specified children are real DOM nodes, they should be converted to virtual DOM nodes.

[matthewrobb]

Just because I haven't been as invested in this edge and because I am extremely interested in it could you possibly give a quick explanation of what you mean by this? Would the resulting vdom node use the actual dom nodes as their backing node or would you use the nodes passed to seed new vdom create calls?

[treshugart]

@matthewrobb Hmm, in trying to explain the rationale, it doesn't really fit this use case. Yet, maybe. I wanted to have a place to do this https://gist.github.com/treshugart/e19c2be255448cd31d261f2e8db2127c#file-example-js-L8, but that feels like the only use case I can come up with.

Would the resulting vdom node use the actual dom nodes as their backing node or would you use the nodes passed to seed new vdom create calls?

I don't think any vDOM libs have the ability to specify a backing node, so it would have to be used to seed vdom nodes. In the process you'd lose even listeners since there's no standardised way to get them.

Ideas welcome, but if there's no need for this now, I may just close it.

[treshugart]

Of course, something like markdown that generates html could then be converted to nodes and then pushed though this, this generating a virtual tree from html. In fact, just being able to generate tree from html and converting it to vdom for any vdom library would be useful, imo.

[matthewrobb]

Man... I need to find it but I swear there's a way to tap into and control a components backing node. It might have been old and no longer possible but if it is possible it would be slick.

If not I wonder how server rendered react might be able to be utilized to take existing Dom nodes and hydrate them into vdom....

[matthewrobb]

Check this method out: https://github.com/ryanseddon/react-frame-component/blob/master/src/Frame.jsx#L118

[matthewrobb]

@treshugart Okay after research I think it may be entirely possible to add dom node instances using ReactDOM.render() so long as they all have data-reactid attributes added to them. React will think it's inflating a server-rendered node tree and try to patch them in. I haven't tested this but it seems like it ought to work. I think something really magical could be worked out here, thoughts?

[treshugart]

Iiiiinteresting. This definitely looks promising. If you're feeling adventurous, feel free to have a go. I'll try and mess around with it soon, too :)

[matthewrobb]

@treshugart Okay haven't had a ton of time but still doing some digging as thoughts come to me. There's some promise in what's going on here: https://github.com/facebook/react/blob/cb6da8e922c426dfae11a5da159ff9e8e176ce59/src/renderers/dom/stack/client/ReactMount.js#L524

    var shouldReuseMarkup =
      containerHasReactMarkup &&
      !prevComponent &&
      !containerHasNonRootReactChild;
    var component = ReactMount._renderNewRootComponent(
      nextWrappedElement,
      container,
      shouldReuseMarkup,
      nextContext,
      callback
    )._renderedComponent.getPublicInstance();
    return component;
  },