From 8269d55d2325fc382b5e1cf120119130d11f2e94 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Fri, 2 Aug 2024 10:51:15 +0100 Subject: [PATCH] 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 `()` suffix to component stack frames. --- .eslintrc.js | 1 + packages/react-devtools-core/webpack.backend.js | 1 + packages/react-devtools-extensions/webpack.backend.js | 1 + packages/react-devtools-extensions/webpack.config.js | 1 + packages/react-devtools-inline/webpack.config.js | 1 + packages/react-devtools-shared/src/backend/console.js | 2 +- .../src/backend/shared/DevToolsComponentStackFrame.js | 2 +- scripts/flow/react-devtools.js | 1 + scripts/jest/devtools/setupEnv.js | 1 + 9 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4e43b19e7b..ed134392a9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -496,6 +496,7 @@ module.exports = { __IS_CHROME__: 'readonly', __IS_FIREFOX__: 'readonly', __IS_EDGE__: 'readonly', + __IS_NATIVE__: 'readonly', __IS_INTERNAL_VERSION__: 'readonly', }, }, diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js index 7efd5b0b5b..32d4fadcb5 100644 --- a/packages/react-devtools-core/webpack.backend.js +++ b/packages/react-devtools-core/webpack.backend.js @@ -71,6 +71,7 @@ module.exports = { __IS_FIREFOX__: false, __IS_CHROME__: false, __IS_EDGE__: false, + __IS_NATIVE__: true, 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js index a8069184a4..effa6cc330 100644 --- a/packages/react-devtools-extensions/webpack.backend.js +++ b/packages/react-devtools-extensions/webpack.backend.js @@ -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', diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index aef6e93742..81bf4a1c52 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -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}"`, diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js index 7b153bbc13..3a92dff1f2 100644 --- a/packages/react-devtools-inline/webpack.config.js +++ b/packages/react-devtools-inline/webpack.config.js @@ -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, diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 42b08a7205..93725c4428 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -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 diff --git a/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js index ea895f201d..840a298869 100644 --- a/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js +++ b/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js @@ -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 = ' ()'; } else if (__IS_FIREFOX__) { suffix = '@unknown:0:0'; diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js index 2b2d6b38be..4e5fe0db1c 100644 --- a/scripts/flow/react-devtools.js +++ b/scripts/flow/react-devtools.js @@ -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; diff --git a/scripts/jest/devtools/setupEnv.js b/scripts/jest/devtools/setupEnv.js index a782bb493e..a797c09514 100644 --- a/scripts/jest/devtools/setupEnv.js +++ b/scripts/jest/devtools/setupEnv.js @@ -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;