chore[react-devtools]: add global for native and use it to fork backe…

…nd 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.

.eslintrc.js

@@ -496,6 +496,7 @@ module.exports = {
         __IS_CHROME__: 'readonly',
         __IS_FIREFOX__: 'readonly',
         __IS_EDGE__: 'readonly',
+        __IS_NATIVE__: 'readonly',
         __IS_INTERNAL_VERSION__: 'readonly',
       },
     },

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}"`,

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',

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}"`,

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,

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

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 = ' (<anonymous>)';
   } else if (__IS_FIREFOX__) {
     suffix = '@unknown:0:0';

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;

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;