Move transforms to build-types (#50982)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50982

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D73667539

fbshipit-source-id: dc9ab6f3efef17f8ffd58a854363b39a31ec59d7

scripts/build-types/transforms/__tests__/removeReactNativeImports-test.js

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+const removeReactNativeImports = require('../removeReactNativeImports.js');
+const babel = require('@babel/core');
+
+async function translate(code: string): Promise<string> {
+  const result = await babel.transformAsync(code, {
+    plugins: ['@babel/plugin-syntax-typescript', removeReactNativeImports],
+  });
+
+  return result.code;
+}
+
+describe('removeReactNativeImports', () => {
+  test('should remove import and remove suffix', async () => {
+    const code = `
+      import {View as View_2} from 'react-native';
+      const Foo = View_2;
+      export default Foo;
+    `;
+    const result = await translate(code);
+    expect(result).toMatchInlineSnapshot(`
+      "const Foo = View;
+      export default Foo;"
+    `);
+  });
+
+  test('should remove import and decrease suffix', async () => {
+    const code = `
+      import {View as View_3} from 'react-native';
+      const Foo = View_3;
+      export default Foo;
+    `;
+    const result = await translate(code);
+    expect(result).toMatchInlineSnapshot(`
+      "const Foo = View_2;
+      export default Foo;"
+    `);
+  });
+});

scripts/build-types/transforms/removeReactNativeImports.js

@@ -0,0 +1,63 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import type {PluginObj} from '@babel/core';
+
+import * as t from '@babel/types';
+
+// When @microsoft/api-extractor bundles @virtualized-list types into the
+// rollup, it does so preserving the imports from react-native. This casues
+// the type duplication under aliased names. I.e. View_2 instead of View.
+// This plugin removes the imports from react-native and updates references
+// to the aliased names.
+const visitor: PluginObj<mixed> = {
+  visitor: {
+    Program(path) {
+      path.traverse({
+        ImportDeclaration(importPath) {
+          const source = importPath.node.source.value;
+
+          if (source === 'react-native') {
+            const specifiers = importPath.node.specifiers;
+
+            specifiers.forEach(specifier => {
+              if (t.isImportSpecifier(specifier)) {
+                const localName = specifier.local.name;
+                const match = localName.match(/(\w+)_(\d+)/);
+
+                if (match) {
+                  const aliasName = match[1];
+                  const aliasIndex = Number(match[2]) - 1;
+                  const newName =
+                    aliasIndex === 1 ? aliasName : `${aliasName}_${aliasIndex}`;
+
+                  const binding = importPath.scope.getBinding(localName);
+                  if (binding) {
+                    binding.referencePaths.forEach(referencePath => {
+                      // $FlowExpectedError[prop-missing]
+                      // $FlowExpectedError[incompatible-type]
+                      referencePath.node.name = newName;
+                    });
+                    binding.identifier.name = newName;
+                  }
+                }
+              }
+            });
+
+            importPath.remove();
+          }
+        },
+      });
+    },
+  },
+};
+
+module.exports = visitor;

scripts/build-types/transforms/replaceDefaultExportName.js

@@ -11,7 +11,7 @@
 
 import type {PluginObj} from '@babel/core';
 
-function createReplaceDefaultExportName(filePath: string): PluginObj<mixed> {
+function createDefaultExportNameReplacer(filePath: string): PluginObj<mixed> {
   return {
     visitor: {
       Identifier(node) {
@@ -29,4 +29,4 @@ function createReplaceDefaultExportName(filePath: string): PluginObj<mixed> {
   };
 }
 
-module.exports = createReplaceDefaultExportName;
+module.exports = createDefaultExportNameReplacer;

scripts/build-types/translateSourceFile.js

@@ -14,7 +14,7 @@ import type {ParseResult} from 'hermes-transform/dist/transform/parse';
 import type {TransformASTResult} from 'hermes-transform/dist/transform/transformAST';
 
 const getDependencies = require('./resolution/getDependencies');
-const createReplaceDefaultExportName = require('./transforms/replaceDefaultExportName');
+const createDefaultExportNameReplacer = require('./transforms/replaceDefaultExportName');
 const babel = require('@babel/core');
 const translate = require('flow-api-translator');
 const {parse, print} = require('hermes-transform');
@@ -107,11 +107,14 @@ async function applyPostTransforms(
   source: string,
   filePath: string,
 ): Promise<string> {
+  const fileName = filePath.split('/').pop() ?? '';
+  const fileNameWithoutExt = fileName.split('.')[0];
+
   const result = await babel.transformAsync(source, {
     plugins: [
       '@babel/plugin-syntax-typescript',
       ...postTransforms,
-      createReplaceDefaultExportName(filePath),
+      createDefaultExportNameReplacer(fileNameWithoutExt),
     ],
   });