-
Notifications
You must be signed in to change notification settings - Fork 46.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded #27323
Merged
hoxyq
merged 1 commit into
facebook:main
from
hoxyq:devtools/refactor-react-detection-logic
Sep 1, 2023
Merged
refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded #27323
hoxyq
merged 1 commit into
facebook:main
from
hoxyq:devtools/refactor-react-detection-logic
Sep 1, 2023
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ling if react is loaded
facebook-github-bot
added
CLA Signed
React Core Team
Opened by a member of the React Core Team
labels
Sep 1, 2023
gsathya
approved these changes
Sep 1, 2023
hoxyq
added a commit
that referenced
this pull request
Sep 5, 2023
This is a patch version to fix some bugs in a previous internal release. I am expecting this one also to be internal-only, need to make sure that extension is stable in Chrome. Some changes and improvements are expected for Firefox, though, before going public. * refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [#27336](#27336)) * refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [#27323](#27323)) * fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [#27320](#27320))
acdlite
added a commit
to acdlite/next.js
that referenced
this pull request
Sep 14, 2023
React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
acdlite
added a commit
to acdlite/next.js
that referenced
this pull request
Sep 14, 2023
React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
acdlite
added a commit
to acdlite/next.js
that referenced
this pull request
Sep 14, 2023
React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
kodiakhq bot
pushed a commit
to vercel/next.js
that referenced
this pull request
Sep 14, 2023
### React upstream changes: - facebook/react#27374 - facebook/react#27369 - facebook/react#27372 - facebook/react#27371 - facebook/react#27370 - facebook/react#27321 - facebook/react#27368 - facebook/react#27367 - facebook/react#27366 - facebook/react#27360 - facebook/react#27361 - facebook/react#27357 - facebook/react#27359 - facebook/react#27358 - facebook/react#27330 - facebook/react#27347 - facebook/react#27307 - facebook/react#27346 - facebook/react#27342 - facebook/react#27340 - facebook/react#27328 - facebook/react#27327 - facebook/react#27325 - facebook/react#27337 - facebook/react#27336 - facebook/react#27323 - facebook/react#27320 - facebook/react#27317 - facebook/react#27318 - facebook/react#27316 - facebook/react#27313 - facebook/react#27309 - facebook/react#27302 - facebook/react#27297 - facebook/react#27295 - facebook/react#27305 - facebook/react#27215 - facebook/react#27304 - facebook/react#27067 - facebook/react#27179 - facebook/react#27278 - facebook/react#27277 - facebook/react#27282 - facebook/react#27230 - facebook/react#27260 - facebook/react#27270 - facebook/react#27273 - facebook/react#27268 - facebook/react#27269
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…ing if react is loaded (facebook#27323) `chrome.devtools.inspectedWindow.eval` is asynchronous, so using it in `setInterval` is a mistake. Sometimes this results into mounting React DevTools twice, and user sees errors about duplicated fibers in store. With these changes, `executeIfReactHasLoaded` executed recursively with a threshold (in case if page doesn't have react). Although we minimize the risk of mounting DevTools twice here, this approach is not the best way to have this problem solved. Dumping some thoughts and ideas that I've tried, but which are out of the scope for this release, because they can be too risky and time-consuming. Potential changes: - Have 2 content scripts: - One `prepareInjection` to notify service worker on renderer attached - One which runs on `document_idle` to finalize check, in case if there is no react - Service worker will notify devtools page that it is ready to mount React DevTools panels or should show that there is no React to be found - Extension port from devtools page should be persistent and connected when `main.js` is executed - Might require refactoring the logic of how we connect devtools and proxy ports Some corner cases: - Navigating to restricted pages, like `chrome://<something>` and back - When react is lazily loaded, like in an attached iframe, or just opened modal - In-tab navigation with pre-cached pages, I think only Chrome does it - Firefox is still on manifest v2 and it doesn't allow running content scripts in ExecutionWorld.MAIN, so it requires a different approach
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
This is a patch version to fix some bugs in a previous internal release. I am expecting this one also to be internal-only, need to make sure that extension is stable in Chrome. Some changes and improvements are expected for Firefox, though, before going public. * refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [facebook#27336](facebook#27336)) * refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [facebook#27323](facebook#27323)) * fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [facebook#27320](facebook#27320))
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
…ing if react is loaded (#27323) `chrome.devtools.inspectedWindow.eval` is asynchronous, so using it in `setInterval` is a mistake. Sometimes this results into mounting React DevTools twice, and user sees errors about duplicated fibers in store. With these changes, `executeIfReactHasLoaded` executed recursively with a threshold (in case if page doesn't have react). Although we minimize the risk of mounting DevTools twice here, this approach is not the best way to have this problem solved. Dumping some thoughts and ideas that I've tried, but which are out of the scope for this release, because they can be too risky and time-consuming. Potential changes: - Have 2 content scripts: - One `prepareInjection` to notify service worker on renderer attached - One which runs on `document_idle` to finalize check, in case if there is no react - Service worker will notify devtools page that it is ready to mount React DevTools panels or should show that there is no React to be found - Extension port from devtools page should be persistent and connected when `main.js` is executed - Might require refactoring the logic of how we connect devtools and proxy ports Some corner cases: - Navigating to restricted pages, like `chrome://<something>` and back - When react is lazily loaded, like in an attached iframe, or just opened modal - In-tab navigation with pre-cached pages, I think only Chrome does it - Firefox is still on manifest v2 and it doesn't allow running content scripts in ExecutionWorld.MAIN, so it requires a different approach DiffTrain build for commit 9b4f847.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
chrome.devtools.inspectedWindow.eval
is asynchronous, so using it insetInterval
is a mistake.Sometimes this results into mounting React DevTools twice, and user sees errors about duplicated fibers in store.
With these changes,
executeIfReactHasLoaded
executed recursively with a threshold (in case if page doesn't have react).Although we minimize the risk of mounting DevTools twice here, this approach is not the best way to have this problem solved. Dumping some thoughts and ideas that I've tried, but which are out of the scope for this release, because they can be too risky and time-consuming.
Potential changes:
prepareInjection
to notify service worker on renderer attacheddocument_idle
to finalize check, in case if there is no reactmain.js
is executedSome corner cases:
chrome://<something>
and back