Inject react-art renderer into react-devtools

[yunchancho]

Now a days, I am creating something using react-art.
However, I have suffered difficulties to debug my components based on react-art.
Because current react-art renderer isn't injected to react-devtools.
So I have made react-art be injected to devtools, and checked it works well in the browsers.

Could you review this my PR?
And let me know if I should do something for this PR to be accepted.

[pull-bot]

Details of bundled changes.

Comparing: 2a2ef7e...78e092b

react-art

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-art.development.js	+1.7%	+1.9%	427.11 KB	434.44 KB	96.47 KB	98.35 KB	UMD_DEV
react-art.production.min.js	🔺+2.0%	🔺+2.2%	83.25 KB	84.9 KB	25.75 KB	26.31 KB	UMD_PROD
react-art.development.js	+2.0%	+2.3%	359.63 KB	366.96 KB	79.41 KB	81.27 KB	NODE_DEV
react-art.production.min.js	🔺+3.4%	🔺+3.6%	48.23 KB	49.89 KB	15.15 KB	15.69 KB	NODE_PROD
ReactART-dev.js	+2.2%	+2.5%	349.71 KB	357.31 KB	74.25 KB	76.14 KB	FB_WWW_DEV
ReactART-prod.js	🔺+2.6%	🔺+3.6%	148.93 KB	152.82 KB	25.42 KB	26.34 KB	FB_WWW_PROD

Generated by 🚫 dangerJS

[gaearon]

Does this work better than just () => null?

My impression is we only use this feature in DevTools to highlight components from DOM nodes. But ART's host instances are not DOM nodes. So we'd never make use of this.

Am I wrong? Is there any situation where ART actually does use DOM nodes (e.g. SVG mode?) In that case, can we make this code work by actually finding the fiber for an SVG node?

[yunchancho]

@gaearon Thanks for your review. If an user sets art mode to SVG, React ART renderer creates DOM nodes for SVG. So I think that 'ref' attribute of React ART's component(e.g. Surface, Group) needs to be presented on react-devtools for debugging. The lines that you said above exists for this. In other words, that lines make react-devtools find the fiber for an DOM node of SVG.

[gaearon]

I still don't understand how this works. Can you explain?

instance in your code is not going to be a DOM node. It's going to be an ART object. So your getClosestInstanceFromNode implementation will give an ART object to DevTools. DevTools doesn't know what to do with those — it expects DOM nodes.

Can you explain how this implementation is useful?

[yunchancho]

@gaearon  I was a little misunderstanding about code line above . As you said, any instance from ReactART is not DOM node. I will remove ReactARTComponentTree.js file and change the line to findFiberByHostInstance: () => null.

[yunchancho]

@gaearon I have updated this commit to remove unnecessary code.