Support React DevTools in brahmos

[itaditya]

Opening this issue to kick start discussion about how React Devtools can be made to work with Brahmos.

@s-yadav have you looked into it before?

[ameerthehacker]

Design Plan

I have the following understanding on adding react devtools support after looking into the preact code base. Reference files from preact are

https://github.com/preactjs/preact/pull/1549/files

• The react devtool extention provides a global hook at (window).REACT_DEVTOOLS_GLOBAL_HOOK____
• We can emit events to this hook to let it know about
  • components that are mounted
  • metrics of the component (like time taken to mount and unmount)
• We need to stitch this hook into our renderer to provide all those metrics
• We should be able to remove these code from the renderer during production build
• The lesser we keep it decoupled from the renderer implementation the better it is
• Preact currently does not support the latest devtool (weird)

All the devtools related code is under src/debug. A very basic implementation has now allowed us to the detection of Brahmos by the React devtool

[s-yadav]

Few points,

• We can have logic for dev tooling under development ENV if which we can statically analyze and prune on production mode.
• As mentioned we will have all logic on src/debug/ and inside code we will be using those methods to trigger event. This will be under only DEV env.
• The order on which we should focus on implementing Dev support would be.

1. Forming component tree.
2. Displaying state, props, context.
3. Hooks
4. Profiler
5. Linking actual dom to the component hierarchy
6. Rerender component on state changes through dev tool

We will see if we need Profile before 5, 6. We can move it to last as well.