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.

Sign up for GitHub

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

chore[react-devtools]: add global for native and use it to fork backend implementation #30533

Merged
merged 1 commit into from
Aug 2, 2024
Merged

chore[react-devtools]: add global for native and use it to fork backend implementation #30533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,6 +496,7 @@ module.exports = {
__IS_CHROME__: 'readonly',
__IS_FIREFOX__: 'readonly',
__IS_EDGE__: 'readonly',
__IS_NATIVE__: 'readonly',
__IS_INTERNAL_VERSION__: 'readonly',
},
},
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-core/webpack.backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ module.exports = {
__IS_FIREFOX__: false,
__IS_CHROME__: false,
__IS_EDGE__: false,
__IS_NATIVE__: true,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Does this not conflict with the idea that react-devtools is also usable in mobile browsers or Safari? Or is react-devtools not using the version of react-devtools-core/backend that was built with this config?

Copy link
Contributor Author

@hoxyq hoxyq Aug 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

packages/react-devtools is a frontend-only package and is only using standalone from packages/react-devtools-core. This webpack config is for backend file.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Isn't react-devtools importing from react-devtools-core/backend (

react/packages/react-devtools/index.js

Line 10 in 9cdf8a9

const {connectToDevTools} = require('react-devtools-core/backend');
)? I guess this is safe now but isn't it possible that we start bundling RN specific code that breaks module evaluation?

Copy link
Contributor Author

@hoxyq hoxyq Aug 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Oh wow, I think this is out of date and should be removed. This file should not be used, because by default bin.js is going to start an electron session with React DevTools frontend.

react/packages/react-devtools/package.json

Lines 11 to 13 in 06d0b89

"bin": {
"react-devtools": "./bin.js"
},

'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ module.exports = {
__IS_CHROME__: IS_CHROME,
__IS_FIREFOX__: IS_FIREFOX,
__IS_EDGE__: IS_EDGE,
__IS_NATIVE__: false,
}),
new Webpack.SourceMapDevToolPlugin({
filename: '[file].map',
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ module.exports = {
__IS_CHROME__: IS_CHROME,
__IS_FIREFOX__: IS_FIREFOX,
__IS_EDGE__: IS_EDGE,
__IS_NATIVE__: false,
__IS_INTERNAL_VERSION__: IS_INTERNAL_VERSION,
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-inline/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ module.exports = {
__IS_CHROME__: false,
__IS_FIREFOX__: false,
__IS_EDGE__: false,
__IS_NATIVE__: false,
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ export function patch({
// formatting. Otherwise it is left alone. So we prefix it. Otherwise we just override it
// to our own stack.
fakeError.stack =
__IS_CHROME__ || __IS_EDGE__
__IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__
? (enableOwnerStacks
? 'Error Stack:'
: 'Error Component Stack:') + componentStack
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function describeBuiltInComponentFrame(name: string): string {
}
}
let suffix = '';
if (__IS_CHROME__ || __IS_EDGE__) {
if (__IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__) {
suffix = ' (<anonymous>)';
} else if (__IS_FIREFOX__) {
suffix = '@unknown:0:0';
Expand Down
1 change: 1 addition & 0 deletions scripts/flow/react-devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@ declare const __TEST__: boolean;
declare const __IS_FIREFOX__: boolean;
declare const __IS_CHROME__: boolean;
declare const __IS_EDGE__: boolean;
declare const __IS_NATIVE__: boolean;
1 change: 1 addition & 0 deletions scripts/jest/devtools/setupEnv.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ global.__TEST__ = true;
global.__IS_FIREFOX__ = false;
global.__IS_CHROME__ = false;
global.__IS_EDGE__ = false;
global.__IS_NATIVE__ = false;

const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;

Expand Down
Loading