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

[DevTools] Remove renderer.js from extension build #26234

Merged
merged 3 commits into from
Mar 3, 2023

Conversation

mondaychen
Copy link
Contributor

@mondaychen mondaychen commented Feb 24, 2023

Summary

When looking into the compiled code of installHook.js of the extension build, I noticed that it actually includes the large attach function (from renderer.js). I don't think it was expected.
This is because hook.js imports from backend/console.js which imports from backend/renderer.js for getInternalReactConstants
A straightforward way is to extract function getInternalReactConstants. However, I think it's more simplified to just merge these two files and save the 361K renderer.js from the extension build since we have always been loading this code anyways.
I changed the execution check from __REACT_DEVTOOLS_ATTACH__ to the session storage.

How did you test this change?

Everything works normal in my local build.


@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 24, 2023
Copy link
Contributor

@tyao1 tyao1 left a comment

Choose a reason for hiding this comment

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

noice!

@mondaychen mondaychen merged commit fcf2187 into facebook:main Mar 3, 2023
github-actions bot pushed a commit that referenced this pull request Mar 3, 2023
## Summary

When looking into the compiled code of `installHook.js` of the extension
build, I noticed that it actually includes the large `attach` function
(from renderer.js). I don't think it was expected.
This is because `hook.js` imports from `backend/console.js` which
imports from `backend/renderer.js` for `getInternalReactConstants`
A straightforward way is to extract function
`getInternalReactConstants`. However, I think it's more simplified to
just merge these two files and save the 361K renderer.js from the
extension build since we have always been loading this code anyways.
I changed the execution check from `__REACT_DEVTOOLS_ATTACH__ ` to the
session storage.

## How did you test this change?

Everything works normal in my local build.

DiffTrain build for [fcf2187](fcf2187)
mondaychen added a commit that referenced this pull request Apr 6, 2023
mondaychen added a commit that referenced this pull request Apr 7, 2023
## Summary

- #26234 is reverted and replaced with a better approach 
- introduce a new global devtools variable to decouple the global hook's
dependency on backend/console.js, and add it to react-devtools-inline
and react-devtools-standalone

With this PR, I want to introduce a new principle to hook.js: we should
always be alert when editing this file and avoid importing from other
files.
In the past, we try to inline a lot of the implementation because we use
`.toString()` to inject this function from the extension (we still have
some old comments left). Although it is no longer inlined that way, it
has became now more important to keep it clean as it is a de facto
global API people are using (9.9K files contains it on Github search as
of today).


**File size change for extension:**
Before:
379K installHook.js

After:
 21K installHook.js
363K renderer.js
kassens pushed a commit to kassens/react that referenced this pull request Apr 17, 2023
…6563)

## Summary

- facebook#26234 is reverted and replaced with a better approach 
- introduce a new global devtools variable to decouple the global hook's
dependency on backend/console.js, and add it to react-devtools-inline
and react-devtools-standalone

With this PR, I want to introduce a new principle to hook.js: we should
always be alert when editing this file and avoid importing from other
files.
In the past, we try to inline a lot of the implementation because we use
`.toString()` to inject this function from the extension (we still have
some old comments left). Although it is no longer inlined that way, it
has became now more important to keep it clean as it is a de facto
global API people are using (9.9K files contains it on Github search as
of today).


**File size change for extension:**
Before:
379K installHook.js

After:
 21K installHook.js
363K renderer.js
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…6563)

## Summary

- facebook#26234 is reverted and replaced with a better approach 
- introduce a new global devtools variable to decouple the global hook's
dependency on backend/console.js, and add it to react-devtools-inline
and react-devtools-standalone

With this PR, I want to introduce a new principle to hook.js: we should
always be alert when editing this file and avoid importing from other
files.
In the past, we try to inline a lot of the implementation because we use
`.toString()` to inject this function from the extension (we still have
some old comments left). Although it is no longer inlined that way, it
has became now more important to keep it clean as it is a de facto
global API people are using (9.9K files contains it on Github search as
of today).


**File size change for extension:**
Before:
379K installHook.js

After:
 21K installHook.js
363K renderer.js
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
## Summary

- #26234 is reverted and replaced with a better approach
- introduce a new global devtools variable to decouple the global hook's
dependency on backend/console.js, and add it to react-devtools-inline
and react-devtools-standalone

With this PR, I want to introduce a new principle to hook.js: we should
always be alert when editing this file and avoid importing from other
files.
In the past, we try to inline a lot of the implementation because we use
`.toString()` to inject this function from the extension (we still have
some old comments left). Although it is no longer inlined that way, it
has became now more important to keep it clean as it is a de facto
global API people are using (9.9K files contains it on Github search as
of today).

**File size change for extension:**
Before:
379K installHook.js

After:
 21K installHook.js
363K renderer.js

DiffTrain build for commit dd53658.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants