[RN72][skip-ci] Update Babel config for monorepo setup

Summary:
In the next diff, we update ESLint, which necessitates replacing the deprecated `babel-eslint` with the new `@babel/eslint-parser`.

The new `@babel/eslint-parser` appears to break `yarn eslint:fix` from the repo root, since it can't find a Babel config file.

To address this, I had to update our Babel config to work from the root. Some relevant docs I had to read:

- https://babeljs.io/docs/config-files#project-wide-configuration
- https://babeljs.io/docs/config-files#file-relative-configuration
- https://babeljs.io/docs/config-files#monorepos
- https://babeljs.io/docs/options#babelrcroots

In short, Babel's docs recommend that for a monorepo setup, you use a single `babel.config.cjs` file in the root, and then specify `.babelrc.cjs` files for individual workspaces. However, this didn't work with Jest, which was ignoring the `.babelrc.cjs` files. This is [documented](jestjs/jest#8365) in [issues](jestjs/jest#10017) on [the](jestjs/jest#10256) Jest repo, but there are no official solutions. To get around this, I ended up also specifying `babel.config.cjs` files for the individual workspaces, that simply reference the `.babelrc.cjs` files.

Depends on D10536

Test Plan: In combination with the next diff, run `yarn eslint:fix` from the repo root

Reviewers: atul

Reviewed By: atul

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D10537

Author: Ashoat

lib/babel.config.cjs renamed to babel.config.cjs

@@ -7,7 +7,6 @@ module.exports = {
     '@babel/plugin-proposal-nullish-coalescing-operator',
     ['@babel/plugin-transform-runtime', { useESModules: true }],
   ],
-
   env: {
     test: {
       presets: [
@@ -22,4 +21,5 @@ module.exports = {
       ],
     },
   },
+  babelrcRoots: ['.', 'keyserver', 'web', 'native', 'desktop', 'landing'],
 };

desktop/babel.config.cjs renamed to desktop/.babelrc.cjs

@@ -0,0 +1,35 @@
+module.exports = {
+  presets: ['@babel/preset-react', '@babel/preset-flow'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    ['@babel/plugin-transform-runtime', { useESModules: true }],
+  ],
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current',
+            },
+          },
+        ],
+      ],
+      plugins: [
+        // Replace the import.meta object in the Jest testing environment.
+        // This allows Jest to understand import.meta.url in rust-node-addon.
+        [
+          'babel-plugin-transform-import-meta',
+          {
+            replaceWith: '({ url: __filename })',
+          },
+        ],
+      ],
+    },
+  },
+};

keyserver/.babelrc.cjs

@@ -163,7 +163,7 @@ RUN cd keyserver && bash/docker-update-geoip.sh
 # These are needed for babel-build-comm-config
 COPY --chown=comm keyserver/src keyserver/src
 COPY --chown=comm keyserver/bash/source-nvm.sh keyserver/bash/source-nvm.sh
-COPY --chown=comm keyserver/babel.config.cjs keyserver/babel.config.cjs
+COPY --chown=comm keyserver/.babelrc.cjs keyserver/.babelrc.cjs
 
 COPY --chown=comm lib lib/
 

keyserver/Dockerfile

@@ -1,35 +1,2 @@
-module.exports = {
-  presets: ['@babel/preset-react', '@babel/preset-flow'],
-  plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-    ['@babel/plugin-transform-runtime', { useESModules: true }],
-  ],
-  env: {
-    test: {
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            targets: {
-              node: 'current',
-            },
-          },
-        ],
-      ],
-      plugins: [
-        // Replace the import.meta object in the Jest testing environment.
-        // This allows Jest to understand import.meta.url in rust-node-addon.
-        [
-          'babel-plugin-transform-import-meta',
-          {
-            replaceWith: '({ url: __filename })',
-          },
-        ],
-      ],
-    },
-  },
-};
+const config = require('./.babelrc.cjs');
+module.exports = config;

keyserver/babel.config.cjs

@@ -7,8 +7,8 @@
   "main": "dist/keyserver",
   "scripts": {
     "clean": "rm -rf dist/ && rm -rf node_modules/ && mkdir dist",
-    "babel-build-comm-config": ". bash/source-nvm.sh && yarn --silent babel src/lib/utils/comm-config.js --out-dir dist/lib/utils/ --config-file ./babel.config.cjs",
-    "babel-build": ". bash/source-nvm.sh && yarn --silent babel src/ --out-dir dist/ --config-file ./babel.config.cjs --verbose --ignore 'src/landing/flow-typed','src/landing/node_modules','src/landing/package.json','src/lib/flow-typed','src/lib/node_modules','src/lib/package.json','src/web/flow-typed','src/web/node_modules','src/web/package.json','src/web/dist','src/web/webpack.config.js','src/web/account-bar.react.js','src/web/app.react.js','src/web/calendar','src/web/chat','src/web/flow','src/web/loading-indicator.react.js','src/web/modals','src/web/root.js','src/web/router-history.js','src/web/script.js','src/web/selectors/chat-selectors.js','src/web/selectors/entry-selectors.js','src/web/splash','src/web/vector-utils.js','src/web/vectors.react.js'",
+    "babel-build-comm-config": ". bash/source-nvm.sh && yarn --silent babel src/lib/utils/comm-config.js --out-dir dist/lib/utils/ --config-file ./.babelrc.cjs",
+    "babel-build": ". bash/source-nvm.sh && yarn --silent babel src/ --out-dir dist/ --config-file ./.babelrc.cjs --verbose --ignore 'src/landing/flow-typed','src/landing/node_modules','src/landing/package.json','src/lib/flow-typed','src/lib/node_modules','src/lib/package.json','src/web/flow-typed','src/web/node_modules','src/web/package.json','src/web/dist','src/web/webpack.config.js','src/web/account-bar.react.js','src/web/app.react.js','src/web/calendar','src/web/chat','src/web/flow','src/web/loading-indicator.react.js','src/web/modals','src/web/root.js','src/web/router-history.js','src/web/script.js','src/web/selectors/chat-selectors.js','src/web/selectors/entry-selectors.js','src/web/splash','src/web/vector-utils.js','src/web/vectors.react.js'",
     "rsync": "rsync -rLpmuv --exclude '*/package.json' --exclude '*/node_modules/*' --include '*.json' --include '*.cjs' --include '*.node' --exclude '*.*' src/ dist/",
     "prod-build": "yarn babel-build && yarn rsync",
     "prod": "KEYSERVER=true node --trace-warnings --loader=./loader.mjs dist/keyserver",
@@ -102,7 +102,7 @@
       "<rootDir>/src"
     ],
     "transform": {
-      "\\.js$": "babel-jest"
+      "\\.js$": ["babel-jest", { "rootMode": "upward" }]
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!@babel/runtime)"

keyserver/package.json

@@ -7,7 +7,7 @@ const {
   createNodeServerRenderingConfig,
 } = require('lib/webpack/shared.cjs');
 
-const babelConfig = require('./babel.config.cjs');
+const babelConfig = require('./.babelrc.cjs');
 
 const baseBrowserConfig = {
   entry: {

landing/babel.config.cjs renamed to landing/.babelrc.cjs

@@ -67,7 +67,7 @@
   },
   "jest": {
     "transform": {
-      "\\.js$": "babel-jest"
+      "\\.js$": ["babel-jest", { "rootMode": "upward" }]
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!@babel/runtime)"

landing/webpack.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    'transform-remove-strict-mode',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    // react-native-reanimated must be last
+    'react-native-reanimated/plugin',
+  ],
+  env: {
+    production: {
+      plugins: ['transform-remove-console'],
+    },
+  },
+};