Use React Injection mechanism instead of monkey-patching

[Izzimach]

Right now there is some monkey-patching of React to replace DOM-specific code with THREE-specific code. However, React has certain "Injection" hooks that would do the same thing in a more appropriate manner. So the monkey-patch should be replaced by use of React injection.

The default React lib automagically applies some default injection via ReactDefaultInjection.js so the new code would have to bypass default React loading and provide injection similar to that of ReactDefaultInjection with certain parts replaced by react-three friendly code.

For future reference to myself for later:

• Default injection is called in both ReactDOM.js and ReactDOMServer.js so I need new versions of those that call our custom injection
• Need a new copy of React.js that then includes the user-defined versions of ReactDOM.js and ReactDOMServer.js

For 0.15 the DOM stuff may get totally separated (it isn't in 0.14) so this will have to be re-visited, but by then hopefully it will be a little easier to manage.

[poshaughnessy]

I'm hoping to try to understand this better (especially as I'm giving another talk about React & Three.js tomorrow!). Please may I ask: how do other libraries handle this? Like react-art and react-canvas? Do they use the injection technique you described above?

Also: is the best place to learn more about this to look through the React source code, would you say?

Thanks!

[Izzimach]

AFAIK many libraries don't handle this. The bug this was meant to fix is pretty rare and only shows up if in very specific use cases. This bug originally came up when I used react-pixi with clojurescript. After fixing it in react-pixi I patched react-three the same way. In most cases you can probably get away without monkey patching.

Regarding injection you can look at react-blessed which does injection with 0.14. In fact, they had the same problem with replaceNodeWithMarkupByID that react-three had: Yomguithereal/react-blessed#5

[oveddan]

Is this the reason the react dev tools don't work in the examples?

[Izzimach]

This isn't related to dev tool problems, no. In-browser React dev tools appear to assume that every React element is a DOM element and throw exceptions when they're not. I guess you would have to patch the dev tools to get them working perfectly with react-three.