Add hermes-transform infra

This adds `hermes-transform` as a dependency for scripts to allow us to run some codemods updating tests.

If this turns out useful, there's obviously more that can be done to the script, but as these internal codemods
are pretty one-off, I'm also okay to keep it fairly rough.

The included codemod is a starting point to convert tests to `crateRoot`. Due to many different patterns in tests, this does just the following:
- convert `it` and `expect` calls that contain `ReactDOM.render` to the async variant, so `await` can be used inside.
- convert `ReactDOM.render(el, container)` to `root.render(el)`. Note that this does not create `root` and that needs to be updated manually.

Author: kassens

package.json

@@ -70,6 +70,7 @@
     "gzip-size": "^5.1.1",
     "hermes-eslint": "^0.18.2",
     "hermes-parser": "^0.18.2",
+    "hermes-transform": "^0.18.2",
     "jest": "^29.4.2",
     "jest-cli": "^29.4.2",
     "jest-diff": "^29.4.2",
@@ -130,6 +131,7 @@
     "download-build-for-head": "node ./scripts/release/download-experimental-build.js --commit=$(git rev-parse HEAD)",
     "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build --type=node react/index react-dom/index react-dom/src/server react-dom/test-utils scheduler/index react/jsx-runtime react/jsx-dev-runtime",
     "check-release-dependencies": "node ./scripts/release/check-release-dependencies",
+    "codemod": "flow-node scripts/codemod/index.js",
     "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js"
   },
   "resolutions": {

scripts/codemod/index.js

@@ -0,0 +1,200 @@
+/**
+ * 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
+ */
+
+import type {ESNode, CallExpression} from 'hermes-estree';
+import type {TransformContext} from 'hermes-transform';
+
+const {transform, t} = require('hermes-transform');
+const {SimpleTraverser} = require('hermes-parser');
+const Glob = require('glob');
+const {readFileSync, writeFileSync} = require('fs');
+const Prettier = require('prettier');
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+function containsReactDOMRenderCall(func: ESNode): boolean {
+  if (
+    func.type !== 'ArrowFunctionExpression' &&
+    func.type !== 'FunctionExpression'
+  ) {
+    throw new Error('expected a function');
+  }
+  let result = false;
+  SimpleTraverser.traverse(func.body, {
+    enter(node: ESNode) {
+      if (
+        node.type === 'CallExpression' &&
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.type === 'Identifier' &&
+        node.callee.object.name === 'ReactDOM' &&
+        node.callee.property.type === 'Identifier' &&
+        node.callee.property.name === 'render'
+      ) {
+        result = true;
+        throw SimpleTraverser.Break;
+      }
+    },
+    leave() {},
+  });
+  return result;
+}
+
+function updateItToAsync(context: TransformContext) {
+  return {
+    CallExpression(node: CallExpression) {
+      if (
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'it' &&
+        node.arguments.length === 2
+      ) {
+        const fn = node.arguments[1];
+        if (
+          fn.type !== 'ArrowFunctionExpression' &&
+          fn.type !== 'FunctionExpression'
+        ) {
+          throw new Error('expected a function as argument to it()');
+        }
+        if (containsReactDOMRenderCall(fn)) {
+          context.replaceNode(
+            fn,
+            t.ArrowFunctionExpression({
+              params: [],
+              body: fn.body,
+              async: true,
+            }),
+          );
+        }
+      }
+    },
+  };
+}
+
+function updateExpectToAsync(context: TransformContext) {
+  return {
+    CallExpression(node: CallExpression) {
+      if (
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.type === 'CallExpression' &&
+        node.callee.object.callee.type === 'Identifier' &&
+        node.callee.object.callee.name === 'expect' &&
+        node.callee.object.arguments.length === 1 &&
+        (node.callee.object.arguments[0].type === 'ArrowFunctionExpression' ||
+          node.callee.object.arguments[0].type === 'FunctionExpression') &&
+        containsReactDOMRenderCall(node.callee.object.arguments[0])
+      ) {
+        const cloned = context.deepCloneNode(node);
+        // $FlowFixMe
+        cloned.callee.object.arguments[0] = t.ArrowFunctionExpression({
+          params: [],
+          body: t.BlockStatement({
+            // $FlowFixMe
+            body: [cloned.callee.object.arguments[0].body],
+          }),
+          async: true,
+        });
+        context.replaceNode(
+          node,
+          t.AwaitExpression({
+            argument: cloned,
+          }),
+        );
+      }
+    },
+  };
+}
+
+function replaceReactDOMRender(context: TransformContext) {
+  return {
+    CallExpression(node: CallExpression) {
+      if (
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.type === 'Identifier' &&
+        node.callee.object.name === 'ReactDOM' &&
+        node.callee.property.type === 'Identifier' &&
+        node.callee.property.name === 'render'
+      ) {
+        const renderRoot = t.CallExpression({
+          callee: t.MemberExpression({
+            object: t.Identifier({name: 'root'}),
+            property: t.Identifier({name: 'render'}),
+            computed: false,
+          }),
+          arguments: [node.arguments[0]],
+        });
+        context.replaceNode(
+          node,
+          t.AwaitExpression({
+            argument: t.CallExpression({
+              callee: t.Identifier({name: 'act'}),
+              arguments: [
+                t.ArrowFunctionExpression({
+                  async: false,
+                  params: [],
+                  body: t.BlockStatement({
+                    body: [
+                      t.ExpressionStatement({
+                        expression: renderRoot,
+                      }),
+                    ],
+                  }),
+                }),
+              ],
+            }),
+          }),
+        );
+      }
+    },
+  };
+}
+
+const visitors = [
+  updateItToAsync,
+  updateExpectToAsync,
+  replaceReactDOMRender,
+  //
+];
+
+async function transformFile(filename: string) {
+  const originalCode = readFileSync(filename, 'utf8');
+  const prettierConfig = await Prettier.resolveConfig(filename);
+  let transformedCode = originalCode;
+  for (const createVisitors of visitors) {
+    transformedCode = await transform(
+      transformedCode,
+      createVisitors,
+      prettierConfig,
+    );
+  }
+  if (originalCode !== transformedCode) {
+    writeFileSync(filename, transformedCode, 'utf8');
+    return true;
+  }
+  return false;
+}
+
+async function main(args: $ReadOnlyArray<string>) {
+  if (args.length !== 1) {
+    console.error('Usage: yarn codemod <PATTERN>');
+    process.exit(1);
+  }
+  const files = Glob.sync(args[0]);
+  let updatedCount = 0;
+  for (const file of files) {
+    const updated = await transformFile(file);
+    if (updated) {
+      updatedCount++;
+      console.log(`updated ${file}`);
+    }
+  }
+  console.log(`${files.length} processed, ${updatedCount} updated`);
+}
+
+main(process.argv.slice(2)).catch(err => {
+  console.error('Error while transforming:', err);
+});

scripts/shared/pathsByLanguageVersion.js

@@ -20,6 +20,7 @@ const esNextPaths = [
   'packages/react-interactions/**/*.js',
   'packages/shared/**/*.js',
   // Shims and Flow environment
+  'scripts/codemod/*.js',
   'scripts/flow/*.js',
   'scripts/rollup/shims/**/*.js',
 ];

yarn.lock

@@ -7860,6 +7860,11 @@ flow-bin@^0.226.0:
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.226.0.tgz#b245847b749ab20756ef74c91d96619f68d18430"
   integrity sha512-q8hXSRhZ+I14jS0KGDDsPYCvPufvBexk6nJXSOsSP6DgCuXbvCOByWhsXRAjPtmXKmO8v9RKSJm1kRaWaf0fZw==
 
+flow-enums-runtime@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/flow-enums-runtime/-/flow-enums-runtime-0.0.6.tgz#5bb0cd1b0a3e471330f4d109039b7eba5cb3e787"
+  integrity sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw==
+
 flow-remove-types@^2.226.0:
   version "2.226.0"
   resolved "https://registry.yarnpkg.com/flow-remove-types/-/flow-remove-types-2.226.0.tgz#08ff7e195137ce43042e11bfa04303184971dac2"
@@ -8593,7 +8598,7 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hermes-eslint@^0.18.2:
+hermes-eslint@0.18.2, hermes-eslint@^0.18.2:
   version "0.18.2"
   resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.18.2.tgz#af09ea1700eb32502caf135b181ffed6091ccb72"
   integrity sha512-FWKVoHyHaXRjOfjoTgoc4OTkC+KThYdhLFyggoXIYLMDHF9hkg5yHSih3cyK3hT73te6+aaGHePzwaOai69uoA==
@@ -8614,6 +8619,18 @@ hermes-parser@0.18.2, hermes-parser@^0.18.2:
   dependencies:
     hermes-estree "0.18.2"
 
+hermes-transform@^0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/hermes-transform/-/hermes-transform-0.18.2.tgz#ab0dbf586b76980dadc2b396ee7936b206cc1904"
+  integrity sha512-cM5J6cnC/9d7mIjUeUzv2/3nmGjbevA3FemPjevgWG5udEIhlJB5z5zwcrkVdp16W/Q6bVJdaT1pc4LPmlzsCA==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    esquery "^1.4.0"
+    flow-enums-runtime "^0.0.6"
+    hermes-eslint "0.18.2"
+    hermes-estree "0.18.2"
+    hermes-parser "0.18.2"
+
 homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"