Typescriptify the main process code (1/N)

Summary:
As a first step I've configured bundling for the main process code using Metro. For now I haven't converted anything to ts, just made that possible.

The bundle is just produced into the "static" directory. To avoid too many changes I kept the "static" folder as it is, but probably non-static code should be moved from there.

Also installed modules from "node_modules" for the main process are not bundled to avoid potential issues with node native modules.

Reviewed By: mweststrate

Differential Revision: D19960982

fbshipit-source-id: efbd426254e2b37c913c5f5f75f042c50ccee2f3

static/transforms/__tests__/electron-process.node.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {transform} from '@babel/core';
+import electronProcess from '../electron-process';
+
+const babelOptions = {
+  ast: true,
+  plugins: [electronProcess],
+  filename: 'index.js',
+};
+
+test('transform "process.exit(0);"', () => {
+  const src = 'process.exit(0);';
+  const code = transform(src, babelOptions).code;
+  expect(code).toMatchInlineSnapshot(`"electronProcess.exit(0);"`);
+});
+
+test('transform "global.process.exit(0);"', () => {
+  const src = 'global.process.exit(0);';
+  const code = transform(src, babelOptions).code;
+  expect(code).toMatchInlineSnapshot(`"global.electronProcess.exit(0);"`);
+});
+
+test('transform "process.ENV.TEST = "true";"', () => {
+  const src = 'process.ENV.TEST = "true";';
+  const code = transform(src, babelOptions).code;
+  expect(code).toMatchInlineSnapshot(
+    `"electronProcess.ENV.TEST = \\"true\\";"`,
+  );
+});
+
+test('do not transform if process bound in an upper scope', () => {
+  const src = `
+    const process = {};
+    for (const i=0; i<10; i++) {
+      process.ENV[i] = i;
+    }
+    `;
+  const code = transform(src, babelOptions).code;
+  expect(code).toMatchInlineSnapshot(`
+    "const process = {};
+
+    for (const i = 0; i < 10; i++) {
+      process.ENV[i] = i;
+    }"
+  `);
+});
+
+test('do not transform if process bound to the current scope', () => {
+  const src = `
+    const process = {};     
+    process.ENV.TEST = "true";
+    `;
+  const code = transform(src, babelOptions).code;
+  expect(code).toMatchInlineSnapshot(`
+    "const process = {};
+    process.ENV.TEST = \\"true\\";"
+  `);
+});

static/transforms/electron-process.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+module.exports = function(babel, options) {
+  return {
+    name: 'change-process-to-electronProcess',
+    visitor: {
+      MemberExpression(path) {
+        if (
+          path.node.object.type === 'Identifier' &&
+          path.node.object.name === 'process' &&
+          !path.scope.hasBinding('process')
+        ) {
+          path.node.object.name = 'electronProcess';
+        } else if (
+          path.node.object.type === 'MemberExpression' &&
+          path.node.object.object.type === 'Identifier' &&
+          path.node.object.object.name === 'global' &&
+          path.node.object.property.type === 'Identifier' &&
+          path.node.object.property.name === 'process'
+        ) {
+          path.node.object.property.name = 'electronProcess';
+        }
+      },
+    },
+  };
+};

static/transforms/electron-requires-main.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+function isRequire(node) {
+  return (
+    node.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' &&
+    node.callee.name === 'require' &&
+    node.arguments.length === 1 &&
+    node.arguments[0].type === 'StringLiteral'
+  );
+}
+
+module.exports = function(babel, options) {
+  return {
+    name: 'change-electron-to-electronRequire-in-main',
+    visitor: {
+      CallExpression(path) {
+        if (!isRequire(path.node)) {
+          return;
+        }
+
+        const source = path.node.arguments[0].value;
+
+        if (!source.startsWith('./')) {
+          path.node.callee.name = 'electronRequire';
+        }
+      },
+    },
+  };
+};

static/transforms/electron-requires.js

@@ -78,7 +78,10 @@ module.exports = function(babel) {
 
         const source = path.node.arguments[0].value;
 
-        if (BUILTINS.includes(source)) {
+        if (
+          BUILTINS.includes(source) ||
+          BUILTINS.some(moduleName => source.startsWith(`${moduleName}/`))
+        ) {
           path.node.callee.name = 'electronRequire';
         }
 

static/transforms/index.js

@@ -12,12 +12,24 @@ const babylon = require('@babel/parser');
 const babel = require('@babel/core');
 const fs = require('fs');
 const path = require('path');
+const staticDir = path.resolve(__dirname, '..');
 
 function transform({filename, options, src}) {
-  const presets = [require('../node_modules/@babel/preset-react')];
   const isPlugin =
     options.projectRoot && !__dirname.startsWith(options.projectRoot);
-  const isTypeScript = filename.endsWith('.tsx');
+  const isMain =
+    options.projectRoot &&
+    options.projectRoot === staticDir &&
+    !options.isTestRunner;
+  const isTypeScript = filename.endsWith('.tsx') || filename.endsWith('.ts');
+  const presets = [
+    isMain
+      ? [
+          require('../node_modules/@babel/preset-env'),
+          {targets: {electron: require('electron/package.json').version}},
+        ]
+      : require('../node_modules/@babel/preset-react'),
+  ];
 
   const ast = babylon.parse(src, {
     filename,
@@ -75,11 +87,21 @@ function transform({filename, options, src}) {
     plugins.push(require('./electron-stubs.js'));
   }
   if (!options.isTestRunner) {
-    // Replacing require statements with electronRequire to prevent metro from
-    // resolving them. electronRequire are resolved during runtime by electron.
-    // As the tests are not bundled by metro and run in @jest-runner/electron,
-    // electron imports are working out of the box.
-    plugins.push(require('./electron-requires.js'));
+    if (isMain) {
+      // For the main Electron process ("static" folder), to avoid issues with
+      // native node modules, we prevent Metro from resolving any installed modules.
+      // Instead all of them are just resolved from "node_modules" as usual.
+      plugins.push(require('./electron-requires-main'));
+      // Metro bundler messes up "global.process", so we're changing all its occurrences to "global.electronProcess" instead.
+      // https://github.com/facebook/metro/blob/7e6b3114fc4a9b07a8c0dd3797b1e0c55a4c32ad/packages/metro/src/lib/getPreludeCode.js#L24
+      plugins.push(require('./electron-process'));
+    } else {
+      // Replacing require statements with electronRequire to prevent metro from
+      // resolving them. electronRequire are resolved during runtime by electron.
+      // As the tests are not bundled by metro and run in @jest-runner/electron,
+      // electron imports are working out of the box.
+      plugins.push(require('./electron-requires'));
+    }
   }
   if (isPlugin) {
     plugins.push(require('./flipper-requires.js'));
@@ -97,6 +119,7 @@ function transform({filename, options, src}) {
     plugins,
     presets,
     sourceMaps: true,
+    retainLines: !!options.isTestRunner,
   });
 
   const result = generate(
@@ -105,6 +128,7 @@ function transform({filename, options, src}) {
       filename,
       sourceFileName: filename,
       sourceMaps: true,
+      retainLines: !!options.isTestRunner,
     },
     src,
   );