Add babel plugin to @react-native/babel-preset for console.warn injection under deep react native imports (#50802)

Summary:
Pull Request resolved: #50802

The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache:

```js
module.exports = {
  presets: [['module:react-native/babel-preset', {
    "disableDeepImportWarnings": true
  }]],
};
```

Changelog:
[General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode.

For a given code:
```js
import { Image } from 'react-native';
import View from 'react-native/Libraries/Components/View/View';
const Text = require('react-native/Libraries/Text/Text');
export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';
```

The transformed output should look like:

```js
import { Image } from 'react-native';
import View from 'react-native/Libraries/Components/View/View';
const Text = require('react-native/Libraries/Text/Text');
export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';
console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View').");
console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text').");
console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug').");
```

For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894).

Reviewed By: huntie

Differential Revision: D70783145

fbshipit-source-id: ae145db6471d861099566a8faf2fbd93bd136450

Author: coado

packages/react-native-babel-preset/src/__mocks__/test-helpers.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict
+ * @oncall react_native
+ */
+
+'use strict';
+
+import type {BabelCoreOptions, EntryOptions, PluginEntry} from '@babel/core';
+
+const {transformSync} = require('@babel/core');
+const generate = require('@babel/generator').default;
+const t = require('@babel/types');
+const nullthrows = require('nullthrows');
+
+function makeTransformOptions<OptionsT: ?EntryOptions>(
+  plugins: $ReadOnlyArray<PluginEntry>,
+  options: OptionsT,
+): BabelCoreOptions {
+  return {
+    ast: true,
+    babelrc: false,
+    browserslistConfigFile: false,
+    code: false,
+    compact: true,
+    configFile: false,
+    plugins: plugins.length
+      ? plugins.map(plugin => [plugin, options])
+      : [() => ({visitor: {}})],
+    sourceType: 'module',
+    filename: 'foo.js',
+    cwd: 'path/to/project',
+  };
+}
+
+function validateOutputAst(ast: BabelNode) {
+  const seenNodes = new Set<BabelNode>();
+  t.traverseFast(nullthrows(ast), function enter(node) {
+    if (seenNodes.has(node)) {
+      throw new Error(
+        'Found a duplicate ' +
+          node.type +
+          ' node in the output, which can cause' +
+          ' undefined behavior in Babel.',
+      );
+    }
+    seenNodes.add(node);
+  });
+}
+
+function transformToAst<T: ?EntryOptions>(
+  plugins: $ReadOnlyArray<PluginEntry>,
+  code: string,
+  options: T,
+): BabelNodeFile {
+  const transformResult = transformSync(
+    code,
+    makeTransformOptions(plugins, options),
+  );
+  const ast = nullthrows(transformResult.ast);
+  validateOutputAst(ast);
+  return ast;
+}
+
+function transform(
+  code: string,
+  plugins: $ReadOnlyArray<PluginEntry>,
+  options: ?EntryOptions,
+): string {
+  return generate(transformToAst(plugins, code, options)).code;
+}
+
+exports.transform = transform;

packages/react-native-babel-preset/src/__tests__/plugin-warn-on-deep-imports-test.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+'use strict';
+
+const {transform} = require('../__mocks__/test-helpers');
+const rnDeepImportsWarningPlugin = require('../plugin-warn-on-deep-imports');
+
+jest.mock('path', () => ({
+  ...jest.requireActual('path'),
+  resolve: jest.fn((...args) => args.join('/')),
+}));
+
+test('deep esm import', () => {
+  const code = `
+    import View from 'react-native/Libraries/Components/View/View';
+    import {Text} from 'react-native';
+  `;
+
+  expect(transform(code, [rnDeepImportsWarningPlugin])).toMatchInlineSnapshot(`
+    "import View from 'react-native/Libraries/Components/View/View';
+    import { Text } from 'react-native';
+    console.warn(\\"Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View'). Source: path/to/project/foo.js 2:4\\");"
+  `);
+});
+
+test('deep cjs import', () => {
+  const code = `
+    const View = require('react-native/Libraries/Components/View/View');
+    const {Text} = require('react-native');
+  `;
+
+  expect(transform(code, [rnDeepImportsWarningPlugin])).toMatchInlineSnapshot(`
+    "const View = require('react-native/Libraries/Components/View/View');
+    const {
+      Text
+    } = require('react-native');
+    console.warn(\\"Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View'). Source: path/to/project/foo.js 2:17\\");"
+  `);
+});
+
+test('multiple deep imports', () => {
+  const code = `
+    import View from 'react-native/Libraries/Components/View/View';
+    import Text from 'react-native/Libraries/Text/Text';
+    import {Image} from 'react-native';
+  `;
+
+  expect(transform(code, [rnDeepImportsWarningPlugin])).toMatchInlineSnapshot(`
+    "import View from 'react-native/Libraries/Components/View/View';
+    import Text from 'react-native/Libraries/Text/Text';
+    import { Image } from 'react-native';
+    console.warn(\\"Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View'). Source: path/to/project/foo.js 2:4\\");
+    console.warn(\\"Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text'). Source: path/to/project/foo.js 3:4\\");"
+  `);
+});
+
+test('deep reexport', () => {
+  const code = `
+    export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';
+  `;
+
+  expect(transform(code, [rnDeepImportsWarningPlugin])).toMatchInlineSnapshot(`
+    "export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';
+    console.warn(\\"Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug'). Source: path/to/project/foo.js 2:4\\");"
+  `);
+});
+
+test('import from other package', () => {
+  const code = `
+    import {foo} from 'react-native-foo';
+  `;
+
+  expect(transform(code, [rnDeepImportsWarningPlugin])).toMatchInlineSnapshot(
+    `"import { foo } from 'react-native-foo';"`,
+  );
+});

packages/react-native-babel-preset/src/configs/main.js

@@ -13,6 +13,12 @@
 const passthroughSyntaxPlugins = require('../passthrough-syntax-plugins');
 const lazyImports = require('./lazy-imports');
 
+const EXCLUDED_FIRST_PARTY_PATHS = [
+  /[/\\]node_modules[/\\]/,
+  /[/\\]packages[/\\]react-native(?:-fantom)?[/\\]/,
+  /[/\\]packages[/\\]virtualized-lists[/\\]/,
+];
+
 function isTypeScriptSource(fileName) {
   return !!fileName && fileName.endsWith('.ts');
 }
@@ -21,6 +27,13 @@ function isTSXSource(fileName) {
   return !!fileName && fileName.endsWith('.tsx');
 }
 
+function isFirstParty(fileName) {
+  return (
+    !!fileName &&
+    !EXCLUDED_FIRST_PARTY_PATHS.some(regex => regex.test(fileName))
+  );
+}
+
 // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
 const loose = true;
 
@@ -51,6 +64,8 @@ const getPreset = (src, options) => {
   const hasClass = isNull || src.indexOf('class') !== -1;
 
   const extraPlugins = [];
+  const firstPartyPlugins = [];
+
   if (!options.useTransformReactJSXExperimental) {
     extraPlugins.push([
       require('@babel/plugin-transform-react-jsx'),
@@ -171,6 +186,10 @@ const getPreset = (src, options) => {
     ]);
   }
 
+  if (options && options.dev && !options.disableDeepImportWarnings) {
+    firstPartyPlugins.push([require('../plugin-warn-on-deep-imports.js')]);
+  }
+
   if (options && options.dev && !options.useTransformReactJSXExperimental) {
     extraPlugins.push([require('@babel/plugin-transform-react-jsx-source')]);
     extraPlugins.push([require('@babel/plugin-transform-react-jsx-self')]);
@@ -240,6 +259,10 @@ const getPreset = (src, options) => {
           ],
         ],
       },
+      {
+        test: isFirstParty,
+        plugins: firstPartyPlugins,
+      },
       {
         plugins: extraPlugins,
       },

packages/react-native-babel-preset/src/plugin-warn-on-deep-imports.js

@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+'use strict';
+
+function getWarningMessage(importPath, loc, source) {
+  const message = `Deep imports from the 'react-native' package are deprecated ('${importPath}').`;
+
+  if (source !== undefined) {
+    return `${message} Source: ${source} ${loc ? `${loc.start.line}:${loc.start.column}` : ''}`;
+  }
+
+  return message;
+}
+
+function createWarning(t, importPath, loc, source) {
+  const warningMessage = getWarningMessage(importPath, loc, source);
+
+  const warning = t.expressionStatement(
+    t.callExpression(
+      t.memberExpression(t.identifier('console'), t.identifier('warn')),
+      [t.stringLiteral(warningMessage)],
+    ),
+  );
+
+  return warning;
+}
+
+function isDeepReactNativeImport(source) {
+  const parts = source.split('/');
+  return parts.length > 1 && parts[0] === 'react-native';
+}
+
+function withLocation(node, loc) {
+  if (!node.loc) {
+    return {...node, loc};
+  }
+  return node;
+}
+
+module.exports = ({types: t}) => ({
+  name: 'warn-on-deep-imports',
+  visitor: {
+    ImportDeclaration(path, state) {
+      const source = path.node.source.value;
+
+      if (isDeepReactNativeImport(source)) {
+        const loc = path.node.loc;
+        state.import.push({source, loc});
+      }
+    },
+    CallExpression(path, state) {
+      const callee = path.get('callee');
+      const args = path.get('arguments');
+
+      if (
+        callee.isIdentifier({name: 'require'}) &&
+        args.length === 1 &&
+        args[0].isStringLiteral()
+      ) {
+        const source =
+          args[0].node.type === 'StringLiteral' ? args[0].node.value : '';
+        if (isDeepReactNativeImport(source)) {
+          const loc = path.node.loc;
+          state.require.push({source, loc});
+        }
+      }
+    },
+    ExportNamedDeclaration(path, state) {
+      const source = path.node.source;
+
+      if (source && isDeepReactNativeImport(source.value)) {
+        const loc = path.node.loc;
+        state.export.push({source: source.value, loc});
+      }
+    },
+    Program: {
+      enter(path, state) {
+        state.require = [];
+        state.import = [];
+        state.export = [];
+      },
+      exit(path, state) {
+        const {body} = path.node;
+
+        const requireWarnings = state.require.map(value =>
+          withLocation(
+            createWarning(t, value.source, value.loc, state.filename),
+            value.loc,
+          ),
+        );
+
+        const importWarnings = state.import.map(value =>
+          withLocation(
+            createWarning(t, value.source, value.loc, state.filename),
+            value.loc,
+          ),
+        );
+
+        const exportWarnings = state.export.map(value =>
+          withLocation(
+            createWarning(t, value.source, value.loc, state.filename),
+            value.loc,
+          ),
+        );
+
+        const warnings = [
+          ...requireWarnings,
+          ...importWarnings,
+          ...exportWarnings,
+        ];
+
+        body.push(...warnings);
+      },
+    },
+  },
+});