This PR sets up a Roblox plugin that re-implements the React developer extension

We cannot use the existing extensions (like the chrome or firefox extensions) because Roblox does not have a socket API, so it cannot communicate with them. That is why I built this plugin.

The goal was to get the profiler working, so the "components" tab is not implemented.

Notes

• this is a very experimental plugin
• the flamegraph view does not translate super well into Roblox, so I've made an attempt at something that looks alright
• so far, I tested this on a minuscule React tree, I have not idea what it looks like on some real React project. I expect the flamegraph to look particularly funny
• to view the changes in a commit, open the settings and hit the button to enable changes recording, it is disabled by default
• settings are not saved (annoying a little because if you want commit changes you have to enable them all the time) but they could definitely be
• the plugin only works in Run mode, so it will show up after you press the 'Play' button. It could be made to also work in edit mode, it will just need a different setup (and proper reloading capability)

How to test it out

You will need the plugin and a few modification in your code before you render your root.

Build the plugin

rojo build packages/roblox-devtools-plugin -o react-lua-devtools.rbxm

Roblox setup

Here is an example of how to setup the devtools inside Roblox:

-- make sure to set the `__PROFILE__` global to true
_G.__PROFILE__ = true
_G.__DEV__ = true
local Packages = ...
-- require the ReactDevtools package
local _ReactDevTools = require(Packages.ReactDevtools)
local React = require(Packages.React)
local ReactRoblox = require(Packages.ReactRoblox)
-- I have not fully figured out how to make sure everything is properly wired so that 
-- the devtools are properly hooked up because rendering, so it appears that some 
-- kind of delay is needed for the extension to properly work
task.wait(1)
local container = Instance.new("Folder")
container.Name = "ReactContainer"
container.Parent = script.Parent.Parent.PlayerGui
local root = ReactRoblox.createRoot(container)
-- render your component here!
root:render(React.createElement(YourComponent))

Screenshot of the extension

image