Skip to content
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

Jump to bottom

[Fresh] Support DevTools v3 #17840

Closed
wants to merge 2 commits into from
Closed

[Fresh] Support DevTools v3 #17840

wants to merge 2 commits into from

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Jan 14, 2020

I haven't verified but I think this would fix the issue we've seen with the old version of the global hook.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 14, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 14, 2020 •
edited

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3af7ef5:

Sandbox Source
jovial-panini-32nsy Configuration

@sizebot
Copy link

sizebot commented Jan 14, 2020 •
edited

Details of bundled changes.

Comparing: 3bd6adc...3af7ef5

react-refresh

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-refresh-runtime.development.js +1.6% +1.4% 19.13 KB 19.44 KB 5.71 KB 5.78 KB NODE_DEV
react-refresh-runtime.production.min.js 0.0% 🔺+0.4% 368 B 368 B 263 B 264 B NODE_PROD
react-refresh-babel.development.js 0.0% 0.0% 24.06 KB 24.06 KB 5.49 KB 5.49 KB NODE_DEV
react-refresh-babel.production.min.js 0.0% 🔺+0.1% 7.19 KB 7.19 KB 2.57 KB 2.57 KB NODE_PROD

Size changes (stable)

Generated by 🚫 dangerJS against 3af7ef5

@sizebot
Copy link

sizebot commented Jan 14, 2020 •
edited

Details of bundled changes.

Comparing: 3bd6adc...3af7ef5

react-refresh

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-refresh-babel.development.js 0.0% 0.0% 24.07 KB 24.07 KB 5.5 KB 5.5 KB NODE_DEV
react-refresh-babel.production.min.js 0.0% 0.0% 7.2 KB 7.2 KB 2.58 KB 2.58 KB NODE_PROD
ReactFreshRuntime-dev.js +1.6% +1.3% 19.21 KB 19.51 KB 5.7 KB 5.77 KB FB_WWW_DEV
react-refresh-runtime.development.js +1.6% +1.4% 19.14 KB 19.45 KB 5.71 KB 5.79 KB NODE_DEV
react-refresh-runtime.production.min.js 0.0% 🔺+0.7% 381 B 381 B 271 B 273 B NODE_PROD

Size changes (experimental)

Generated by 🚫 dangerJS against 3af7ef5

@gaearon gaearon requested a review from bvaughn January 14, 2020 22:10
bvaughn
bvaughn reviewed Jan 14, 2020
View reviewed changes
packages/react-refresh/src/ReactFreshRuntime.js
@@ -472,7 +472,8 @@ export function injectIntoGlobalHook(globalObject: any): void {
// Do the same for any already injected roots.
// This is useful if ReactDOM has already been initialized.
// https://github.com/facebook/react/issues/17626
hook.renderers.forEach((injected, id) => {
const renderers = hook.renderers || hook._renderers; // DevTools v4 || v3
renderers.forEach((injected, id) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In v4, renderers is a Map but in v3 _renderers is an Object. So .forEach() wouldn't work on v3. You'd need to do a different loop for v3.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I admire your diligence.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

bvaughn
bvaughn approved these changes Jan 14, 2020
View reviewed changes
Copy link
Contributor

@bvaughn bvaughn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems okay? ¯\_(ツ)_/¯

@mudssrali
Copy link

@gaearon can possible hook._renderers === undefined ?

@gaearon
Copy link
Collaborator Author

gaearon commented Jan 15, 2020

Yes, != null checks for that.

@mudssrali
Copy link

Yes, != null checks for that.

JavaScript is so fishy... thanks I learned that undefined == null returns true and undefined === null returns false

jamesgeorge007
jamesgeorge007 reviewed Jan 23, 2020
View reviewed changes
packages/react-refresh/src/ReactFreshRuntime.js
@@ -472,7 +472,18 @@ export function injectIntoGlobalHook(globalObject: any): void {
// Do the same for any already injected roots.
// This is useful if ReactDOM has already been initialized.
// https://github.com/facebook/react/issues/17626
hook.renderers.forEach((injected, id) => {
let renderers = hook.renderers;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
let renderers = hook.renderers;
let { renderers } = hook;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a big fan of destructuring assignment approach. The former code snippet appears kinda redundant atleast IMO.

@gaearon
Copy link
Collaborator Author

gaearon commented Jan 23, 2020

Flow want something. I'll get back to this maybe.

@gaearon gaearon closed this Feb 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jamesgeorge007 jamesgeorge007 jamesgeorge007 left review comments

@bvaughn bvaughn bvaughn approved these changes

@3imed-jaberi 3imed-jaberi 3imed-jaberi approved these changes

Assignees
No one assigned
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@gaearon @sizebot @mudssrali @bvaughn @jamesgeorge007 @3imed-jaberi @facebook-github-bot