From b0a0b0f355b8a26516cb452cedb386f81be4eba7 Mon Sep 17 00:00:00 2001 From: Anton Nikolaev Date: Thu, 30 Apr 2020 04:25:28 -0700 Subject: [PATCH] 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 --- .../babel-transformer/src/transform-app.ts | 24 ++--- .../babel-transformer/src/transform-jest.ts | 18 ++-- .../babel-transformer/src/transform-main.ts | 26 ++--- .../babel-transformer/src/transform-plugin.ts | 25 +++-- desktop/babel-transformer/src/transform.ts | 94 ++++++++++--------- desktop/scripts/jest-transform.js | 6 +- 6 files changed, 101 insertions(+), 92 deletions(-) diff --git a/desktop/babel-transformer/src/transform-app.ts b/desktop/babel-transformer/src/transform-app.ts index cce5b3ec0..8aa3a21f5 100644 --- 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}); } diff --git a/desktop/babel-transformer/src/transform-jest.ts b/desktop/babel-transformer/src/transform-jest.ts index c71950608..73feed71f 100644 --- 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}); } diff --git a/desktop/babel-transformer/src/transform-main.ts b/desktop/babel-transformer/src/transform-main.ts index 471084a73..b06653b18 100644 --- 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}); } diff --git a/desktop/babel-transformer/src/transform-plugin.ts b/desktop/babel-transformer/src/transform-plugin.ts index 240234c7d..032eca710 100644 --- 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}); } diff --git a/desktop/babel-transformer/src/transform.ts b/desktop/babel-transformer/src/transform.ts index 452b9bcd4..96be54109 100644 --- 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, diff --git a/desktop/scripts/jest-transform.js b/desktop/scripts/jest-transform.js index d1b94b8b4..564ae23b2 100644 --- 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({