chore[react-devtools]: add global for native and use it to fork backend implementation (#30533)
Adding `__IS_NATIVE__` global, which will be used for forking backend implementation. Will only be set to `true` for `react-devtools-core` package, which is used by `react-native`. Ideally, we should name it `react-devtools-native`, and keep `react-devtools-core` as host-agnostic. With this change, the next release of `react-devtools-core` should append component stack as Error object, not as string, and should add `(<anonymous>)` suffix to component stack frames.
Ruslan Lesiutin committed
Aug 2, 2024 at 10:51 UTC
8269d55d2325fc382b5e1cf120119130d11f2e94
9 files changed
+9
-2
.eslintrc.js
+1
@@ -496,6 +496,7 @@ module.exports = {
496
__IS_CHROME__: 'readonly',
497
__IS_FIREFOX__: 'readonly',
498
__IS_EDGE__: 'readonly',
499
+ __IS_NATIVE__: 'readonly',
500
__IS_INTERNAL_VERSION__: 'readonly',
501
},
502
},
packages/react-devtools-core/webpack.backend.js
+1
@@ -71,6 +71,7 @@ module.exports = {
71
__IS_FIREFOX__: false,
72
__IS_CHROME__: false,
73
__IS_EDGE__: false,
74
+ __IS_NATIVE__: true,
75
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
76
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
77
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
packages/react-devtools-extensions/webpack.backend.js
+1
@@ -77,6 +77,7 @@ module.exports = {
77
__IS_CHROME__: IS_CHROME,
78
__IS_FIREFOX__: IS_FIREFOX,
79
__IS_EDGE__: IS_EDGE,
80
+ __IS_NATIVE__: false,
81
}),
82
new Webpack.SourceMapDevToolPlugin({
83
filename: '[file].map',
packages/react-devtools-extensions/webpack.config.js
+1
@@ -112,6 +112,7 @@ module.exports = {
112
__IS_CHROME__: IS_CHROME,
113
__IS_FIREFOX__: IS_FIREFOX,
114
__IS_EDGE__: IS_EDGE,
115
+ __IS_NATIVE__: false,
116
__IS_INTERNAL_VERSION__: IS_INTERNAL_VERSION,
117
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
118
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
packages/react-devtools-inline/webpack.config.js
+1
@@ -77,6 +77,7 @@ module.exports = {
77
__IS_CHROME__: false,
78
__IS_FIREFOX__: false,
79
__IS_EDGE__: false,
80
+ __IS_NATIVE__: false,
81
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
82
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
83
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
packages/react-devtools-shared/src/backend/console.js
+1
-1
@@ -294,7 +294,7 @@ export function patch({
294
// formatting. Otherwise it is left alone. So we prefix it. Otherwise we just override it
295
// to our own stack.
296
fakeError.stack =
297
- __IS_CHROME__ || __IS_EDGE__
297
+ __IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__
298
? (enableOwnerStacks
299
? 'Error Stack:'
300
: 'Error Component Stack:') + componentStack
packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
+1
-1
@@ -30,7 +30,7 @@ export function describeBuiltInComponentFrame(name: string): string {
30
}
31
}
32
let suffix = '';
33
- if (__IS_CHROME__ || __IS_EDGE__) {
33
+ if (__IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__) {
34
suffix = ' (<anonymous>)';
35
} else if (__IS_FIREFOX__) {
36
suffix = '@unknown:0:0';
scripts/flow/react-devtools.js
+1
@@ -15,3 +15,4 @@ declare const __TEST__: boolean;
15
declare const __IS_FIREFOX__: boolean;
16
declare const __IS_CHROME__: boolean;
17
declare const __IS_EDGE__: boolean;
18
+declare const __IS_NATIVE__: boolean;
scripts/jest/devtools/setupEnv.js
+1
@@ -14,6 +14,7 @@ global.__TEST__ = true;
14
global.__IS_FIREFOX__ = false;
15
global.__IS_CHROME__ = false;
16
global.__IS_EDGE__ = false;
17
+global.__IS_NATIVE__ = false;
18
19
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
20