Add reload and profile to react-devtools-inline

[Jack-Works]

Summary

This "attach" function is necessary to support the reload & profile function, but it is not accessible from the react-devtools-inline package.

How did you test this change?

I patched my node_modules to expose this function. It works for me.

[hoxyq]

This "attach" function is necessary to support the reload & profile function

Yes, but only if you do all the necessary steps for reloading and start profiling on the application side.

Is there a way for react-devtools-inline to control all of this flow? I believe there is more to it, inline version should set __REACT_DEVTOOLS_ATTACH__ global on the target to allow React DevTools hook inject before the app loads: https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/hook.js#L350-L356

I haven't explored if this is currently blocked by something, but I would prefer this approach over exporting attach.

[Jack-Works]

Yes, but only if you do all the necessary steps for reloading and start profiling on the application side.

yes, I did that by setting sessionStorage.

Is there a way for react-devtools-inline to control all of this flow? I believe there is more to it, inline version should set REACT_DEVTOOLS_ATTACH global on the target to allow React DevTools hook inject before the app loads:

if react-devtools-inline detects sessionStorage and set attach on the global, it works for me but I'm not sure if it work for others.

[hoxyq]

if react-devtools-inline detects sessionStorage and set attach on the global, it works for me but I'm not sure if it work for others.

Can you test it with react-devtools-shell package, where we are mounting inline version of the DevTools? If that works, I think we can ship it.

I can help you with double-checking these changes a bit later.

[Jack-Works]

if react-devtools-inline detects sessionStorage and set attach on the global, it works for me but I'm not sure if it work for others.

Can you test it with react-devtools-shell package, where we are mounting inline version of the DevTools? If that works, I think we can ship it.

I can help you with double-checking these changes a bit later.

I don't know what I need to test, it just re-exports a function...

if you're interested, this is the workaround I currently using. If this function is exported, I can do it myself instead of patch package.

[hoxyq]

I don't know what I need to test, it just re-exports a function...

Sorry if I wasn't clear. Instead of just re-exporting attach here, can you try setting __REACT_DEVTOOLS_ATTACH__ global on the target and test this solution in react-devtools-shell?

if you're interested, this is the workaround I currently using. If this function is exported, I can do it myself instead of patch package.

I think we should have this patch in DevTools, this is the solution I am looking for. If everything is fine, then just update the PR, I can test it later and have it merged.

[Jack-Works]

hi @hoxyq please take a look!

[Jack-Works]

That's interesting but contains more changes. I will try to do it later.

[Jack-Works]

hi @hoxyq please take a look thanks. I believe this package is experimental so I bring some breaking changes to support reload and profile.

[Jack-Works]

I changed it according to your review, but it became less fit our use case (I need to manually destroy and create store & dev tools because I cannot refresh the page).

[hoxyq]

I need to manually destroy and create store & dev tools because I cannot refresh the page

Why not just reloading the whole page? Backend is injected in the page's context and it should be able to reload it with window.location.reload

[Jack-Works]

I need to manually destroy and create store & dev tools because I cannot refresh the page

Why not just reloading the whole page? Backend is injected in the page's context and it should be able to reload it with window.location.reload

I cannot refresh the front-end (DevTools). Backend (app) is ok

[hoxyq]

I need to manually destroy and create store & dev tools because I cannot refresh the page

Why not just reloading the whole page? Backend is injected in the page's context and it should be able to reload it with window.location.reload

I cannot refresh the front-end (DevTools). Backend (app) is ok

Can you share more on your setup? Is frontend running in a different context / page?

[Jack-Works]

Can you share more on your setup? Is frontend running in a different context / page?

Yes. Our setup is a Web Extension, therefore it cannot use the official React Devtools (web extensions cannot debug each other). I have integrated react-devtools-inline and made it work like how react-devtools-extension works.

[hoxyq]

Can you share more on your setup? Is frontend running in a different context / page?

Yes. Our setup is a Web Extension, therefore it cannot use the official React Devtools (web extensions cannot debug each other). I have integrated react-devtools-inline and made it work like how react-devtools-extension works.

Why have you chosen inline version of the DevTools and not building something on top of core package?

Anyways, with this setup it will require more than what I've mentioned before and yes, you would need to reload the frontend as well or make it resetting the store.

The scope of this feature is much bigger now, I can help with reviewing the changes, but can't really spend much time digging into this right now, as I am going on PTO next week.

My requirements would be:

• No changes in react-devtools-shell, since this is the primary way of using react-devtools-inline, when both frontend and backend are in the same document, but in different frames.
• Remove reload callback from the frontend. Can you try making it similar as much as possible to the implementation of this feature for the browser extension?

[Jack-Works]

Why have you chosen inline version of the DevTools and not building something on top of core package?

I'll try that. I cannot recall if I tried the core package before. I'll back to this PR after I try that.

[Jack-Works]

Why have you chosen inline version of the DevTools and not building something on top of core package?

Hi @hoxyq, I looked at the core package and found it impossible to use in our environment.

That package is too opinioned, the backend can only run in NodeJS, not the browser.

Here is what I found:

1. core/backend uses WebSocket to connect the frontend, but we cannot create a WebSocket server inside the browser. It's possible to duck-type a fake WebSocket interface but it is annoying.
2. core/standalone cannot run in the browser. It creates a WebSocket server and spawns new processes to open an editor.

I think my current changes are necessary to let it work in our environment, but I think it would be better to publish react-devtools-shared on npm directly so I don't need to hack around the inline package.

[hoxyq]

Why have you chosen inline version of the DevTools and not building something on top of core package?

Hi @hoxyq, I looked at the core package and found it impossible to use in our environment.

That package is too opinioned, the backend can only run in NodeJS, not the browser.

Here is what I found:

1. core/backend uses WebSocket to connect the frontend, but we cannot create a WebSocket server inside the browser. It's possible to duck-type a fake WebSocket interface but it is annoying.
2. core/standalone cannot run in the browser. It creates a WebSocket server and spawns new processes to open an editor.

I think my current changes are necessary to let it work in our environment, but I think it would be better to publish react-devtools-shared on npm directly so I don't need to hack around the inline package.

Thanks for the explanation. I will be back in a few days, hopefully will get you unblocked on this.

[hoxyq]

Similar attempt: https://github.com/facebook/react/pull/27978

[github-actions[bot]]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[Jack-Works]

bump