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

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});
 }

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});
 }

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});
 }

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});
 }

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
+    plugins: isTypeScript ? tsParsePluins : jsParsePlugins,
-      ? [
-          'jsx',
-          'typescript',
-          'classProperties',
-          'optionalChaining',
-          'nullishCoalescingOperator',
-        ]
-      : [
-          'jsx',
-          ['flow', {all: true}],
-          'classProperties',
-          'objectRestSpread',
-          'optionalChaining',
-          'nullishCoalescingOperator',
-        ],
     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,

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({