Babel transformations refactoring

Summary: Just a small refactoring to only create array with plugins once. This should make transformations a bit faster as all these methods are called many times for each file in the project. Reviewed By: passy Differential Revision: D21308498 fbshipit-source-id: 0ed47f13cebfebd2992817caa207dc55f1dbeb0a
2020-04-30 04:25:28 -07:00
parent c21ccedf14
commit b0a0b0f355
6 changed files with 101 additions and 92 deletions
--- a/desktop/babel-transformer/src/transform-app.ts
+++ b/desktop/babel-transformer/src/transform-app.ts
@@ -11,6 +11,19 @@ import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
 import {default as flipperEnv} from './flipper-env';

+const presets = [require('@babel/preset-react')];
+const plugins = [
+  require('./electron-requires'),
+  require('./import-react'),
+  require('./app-flipper-requires'),
+];
+if (flipperEnv.FLIPPER_HEADLESS) {
+  plugins.unshift(require('./electron-stubs'));
+}
+if (flipperEnv.FLIPPER_FB) {
+  plugins.unshift(require('./fb-stubs'));
+}
+
 module.exports = {
  transform,
  getCacheKey,
@@ -25,16 +38,5 @@ function transform({
  options: any;
  src: string;
 }) {
-  const presets = [require('@babel/preset-react')];
-  const plugins = [];
-  if (flipperEnv.FLIPPER_FB) {
-    plugins.push(require('./fb-stubs'));
-  }
-  if (flipperEnv.FLIPPER_HEADLESS) {
-    plugins.push(require('./electron-stubs'));
-  }
-  plugins.push(require('./electron-requires'));
-  plugins.push(require('./import-react'));
-  plugins.push(require('./app-flipper-requires'));
  return doTransform({filename, options, src, presets, plugins});
 }
--- a/desktop/babel-transformer/src/transform-jest.ts
+++ b/desktop/babel-transformer/src/transform-jest.ts
@@ -11,6 +11,15 @@ import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
 import {default as flipperEnv} from './flipper-env';

+const presets = [require('@babel/preset-react')];
+const plugins = [require('./import-react')];
+if (flipperEnv.FLIPPER_HEADLESS) {
+  plugins.unshift(require('./electron-stubs'));
+}
+if (flipperEnv.FLIPPER_FB) {
+  plugins.unshift(require('./fb-stubs'));
+}
+
 module.exports = {
  transform,
  getCacheKey,
@@ -25,14 +34,5 @@ function transform({
  options: any;
  src: string;
 }) {
-  const presets = [require('@babel/preset-react')];
-  const plugins = [];
-  if (flipperEnv.FLIPPER_FB) {
-    plugins.push(require('./fb-stubs'));
-  }
-  if (flipperEnv.FLIPPER_HEADLESS) {
-    plugins.push(require('./electron-stubs'));
-  }
-  plugins.push(require('./import-react'));
  return doTransform({filename, options, src, presets, plugins});
 }
--- a/desktop/babel-transformer/src/transform-main.ts
+++ b/desktop/babel-transformer/src/transform-main.ts
@@ -11,6 +11,20 @@ import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
 import {default as flipperEnv} from './flipper-env';

+const presets = [
+  [
+    require('@babel/preset-env'),
+    {targets: {electron: flipperEnv.FLIPPER_ELECTRON_VERSION}},
+  ],
+];
+const plugins = [
+  require('./electron-requires-main'),
+  require('./electron-process'),
+];
+if (flipperEnv.FLIPPER_FB) {
+  plugins.unshift(require('./fb-stubs'));
+}
+
 module.exports = {
  transform,
  getCacheKey,
@@ -25,17 +39,5 @@ function transform({
  options: any;
  src: string;
 }) {
-  const presets = [
-    [
-      require('@babel/preset-env'),
-      {targets: {electron: flipperEnv.FLIPPER_ELECTRON_VERSION}},
-    ],
-  ];
-  const plugins = [];
-  if (flipperEnv.FLIPPER_FB) {
-    plugins.push(require('./fb-stubs'));
-  }
-  plugins.push(require('./electron-requires-main'));
-  plugins.push(require('./electron-process'));
  return doTransform({filename, options, src, presets, plugins});
 }
--- a/desktop/babel-transformer/src/transform-plugin.ts
+++ b/desktop/babel-transformer/src/transform-plugin.ts
@@ -10,28 +10,25 @@
 import {default as doTransform} from './transform';
 import {default as flipperEnv} from './flipper-env';

+const presets = [require('@babel/preset-react')];
+const plugins = [
+  require('./electron-requires'),
+  require('./plugin-flipper-requires'),
+];
+if (flipperEnv.FLIPPER_HEADLESS) {
+  plugins.unshift(require('./electron-stubs'));
+}
+if (flipperEnv.FLIPPER_FB) {
+  plugins.unshift(require('./fb-stubs'));
+}
 export default function transform({
  filename,
  options,
  src,
-  presets,
-  plugins,
 }: {
  filename: string;
  options: any;
  src: string;
-  presets?: any[];
-  plugins?: any[];
 }) {
-  presets = presets ?? [require('@babel/preset-react')];
-  plugins = plugins ?? [];
-  if (flipperEnv.FLIPPER_FB) {
-    plugins.push(require('./fb-stubs'));
-  }
-  if (flipperEnv.FLIPPER_HEADLESS) {
-    plugins.push(require('./electron-stubs'));
-  }
-  plugins.push(require('./electron-requires'));
-  plugins.push(require('./plugin-flipper-requires'));
  return doTransform({filename, options, src, presets, plugins});
 }
--- a/desktop/babel-transformer/src/transform.ts
+++ b/desktop/babel-transformer/src/transform.ts
@@ -8,11 +8,56 @@
 */

 import {default as generate} from '@babel/generator';
-import {parse} from '@babel/parser';
+import {parse, ParserPlugin} from '@babel/parser';
 import {transformFromAstSync} from '@babel/core';
 import {default as flipperEnv} from './flipper-env';
 import {resolve} from 'path';

+const jsParsePlugins: ParserPlugin[] = [
+  'jsx',
+  ['flow', {all: true}],
+  'classProperties',
+  'objectRestSpread',
+  'optionalChaining',
+  'nullishCoalescingOperator',
+];
+const tsParsePluins: ParserPlugin[] = [
+  'jsx',
+  'typescript',
+  'classProperties',
+  'optionalChaining',
+  'nullishCoalescingOperator',
+];
+const commonJsPlugin = [
+  require('@babel/plugin-transform-modules-commonjs'),
+  {
+    strictMode: false,
+  },
+];
+const classPropertiesPlugin = require('@babel/plugin-proposal-class-properties');
+const optionalChainingPlugin = require('@babel/plugin-proposal-optional-chaining');
+const coalescingOperatorPlugin = require('@babel/plugin-proposal-nullish-coalescing-operator');
+const objectRestSpreadPlugin = require('@babel/plugin-proposal-object-rest-spread');
+const flowStripTypesPlugin = require('@babel/plugin-transform-flow-strip-types');
+const dynamicRequiresPlugin = require('./dynamic-requires');
+const typeScriptPlugin = require('@babel/plugin-transform-typescript');
+const tsTransformPlugins = [
+  typeScriptPlugin,
+  classPropertiesPlugin,
+  commonJsPlugin,
+  optionalChainingPlugin,
+  coalescingOperatorPlugin,
+];
+const jsTransformPlugins = [
+  commonJsPlugin,
+  objectRestSpreadPlugin,
+  classPropertiesPlugin,
+  flowStripTypesPlugin,
+  optionalChainingPlugin,
+  coalescingOperatorPlugin,
+  dynamicRequiresPlugin,
+];
+
 export default function transform({
  filename,
  options,
@@ -30,49 +75,9 @@ export default function transform({
  presets = presets ?? [require('@babel/preset-react')];
  plugins = plugins ?? [];
  const isTypeScript = filename.endsWith('.tsx') || filename.endsWith('.ts');
-  const commonJs = [
-    require('@babel/plugin-transform-modules-commonjs'),
-    {
-      strictMode: false,
-    },
-  ];
-  if (!isTypeScript) {
-    plugins.unshift(
-      commonJs,
-      require('@babel/plugin-proposal-object-rest-spread'),
-      require('@babel/plugin-proposal-class-properties'),
-      require('@babel/plugin-transform-flow-strip-types'),
-      require('@babel/plugin-proposal-optional-chaining'),
-      require('@babel/plugin-proposal-nullish-coalescing-operator'),
-      require('./dynamic-requires'),
-    );
-  } else {
-    plugins.unshift(
-      require('@babel/plugin-transform-typescript'),
-      require('@babel/plugin-proposal-class-properties'),
-      commonJs,
-      require('@babel/plugin-proposal-optional-chaining'),
-      require('@babel/plugin-proposal-nullish-coalescing-operator'),
-    );
-  }
  const ast = parse(src, {
    sourceFilename: filename,
-    plugins: isTypeScript
-      ? [
-          'jsx',
-          'typescript',
-          'classProperties',
-          'optionalChaining',
-          'nullishCoalescingOperator',
-        ]
-      : [
-          'jsx',
-          ['flow', {all: true}],
-          'classProperties',
-          'objectRestSpread',
-          'optionalChaining',
-          'nullishCoalescingOperator',
-        ],
+    plugins: isTypeScript ? tsParsePluins : jsParsePlugins,
    sourceType: 'module',
  });
  const transformed = transformFromAstSync(ast, src, {
@@ -83,7 +88,10 @@ export default function transform({
    compact: false,
    root: options.projectRoot,
    filename,
-    plugins,
+    plugins: [
+      ...(isTypeScript ? tsTransformPlugins : jsTransformPlugins),
+      ...plugins,
+    ],
    presets,
    sourceMaps: true,
    retainLines: !!flipperEnv.FLIPPER_TEST_RUNNER,
--- a/desktop/scripts/jest-transform.js
+++ b/desktop/scripts/jest-transform.js
@@ -7,16 +7,16 @@
 * @format
 */

-// eslint-disable-next-line import/no-unresolved
-const {transform} = require('../babel-transformer/lib/transform-jest');
 const isFB = require('./isFB');

 if (isFB && process.env.FLIPPER_FB === undefined) {
  process.env.FLIPPER_FB = 'true';
 }
-
 process.env.FLIPPER_TEST_RUNNER = 'true';

+// eslint-disable-next-line import/no-unresolved
+const {transform} = require('../babel-transformer/lib/transform-jest');
+
 module.exports = {
  process(src, filename, config, options) {
    return transform({