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

scripts/build-release.js

@@ -15,6 +15,7 @@ const cp = require('promisify-child-process');
 const {
   buildFolder,
   compile,
+  compileMain,
   die,
   compileDefaultPlugins,
   getVersionNumber,
@@ -168,6 +169,7 @@ function downloadIcons(buildFolder) {
   const dir = await buildFolder();
   // eslint-disable-next-line no-console
   console.log('Created build directory', dir);
+  await compileMain();
   copyStaticFolder(dir);
   await downloadIcons(dir);
   await compileDefaultPlugins(path.join(dir, 'defaultPlugins'));

scripts/build-utils.js

@@ -46,9 +46,7 @@ function compileDefaultPlugins(defaultPluginDir, skipAll = false) {
 }
 
 function compile(buildFolder, entry) {
-  // eslint-disable-next-line no-console
-  console.log('Building main bundle', entry);
-
+  console.log(`⚙️  Compiling renderer bundle...`);
   const projectRoots = path.join(__dirname, '..');
   return Metro.runBuild(
     {
@@ -77,7 +75,46 @@ function compile(buildFolder, entry) {
       entry,
       out: path.join(buildFolder, 'bundle.js'),
     },
-  ).catch(die);
+  )
+    .then(() => console.log('✅  Compiled renderer bundle.'))
+    .catch(die);
+}
+
+async function compileMain() {
+  console.log(`⚙️  Compiling main bundle...`);
+  try {
+    const staticDir = path.resolve(__dirname, '..', 'static');
+    const config = Object.assign({}, await Metro.loadConfig(), {
+      reporter: {update: () => {}},
+      projectRoot: staticDir,
+      watchFolders: [staticDir],
+      transformer: {
+        babelTransformerPath: path.join(
+          __dirname,
+          '..',
+          'static',
+          'transforms',
+          'index.js',
+        ),
+      },
+      resolver: {
+        sourceExts: ['tsx', 'ts', 'js'],
+        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      },
+    });
+    await Metro.runBuild(config, {
+      platform: 'web',
+      entry: path.join(staticDir, 'main.js'),
+      out: path.join(staticDir, 'main.bundle.js'),
+      dev: false,
+      minify: false,
+      sourceMap: true,
+      resetCache: true,
+    });
+    console.log('✅  Compiled main bundle.');
+  } catch (err) {
+    die(err);
+  }
 }
 
 function buildFolder() {
@@ -114,6 +151,7 @@ function genMercurialRevision() {
 module.exports = {
   buildFolder,
   compile,
+  compileMain,
   die,
   compileDefaultPlugins,
   getVersionNumber,

scripts/start-dev-server.js

@@ -17,6 +17,7 @@ const Convert = require('ansi-to-html');
 const chalk = require('chalk');
 const http = require('http');
 const path = require('path');
+const {compileMain} = require('./build-utils');
 const Metro = require('../static/node_modules/metro');
 const MetroResolver = require('../static/node_modules/metro-resolver');
 const fs = require('fs');
@@ -245,6 +246,7 @@ function outputScreen(socket) {
   const socket = await addWebsocket(server);
   await startMetroServer(app);
   outputScreen(socket);
+  await compileMain();
   shutdownElectron = launchElectron({
     devServerURL: `http://localhost:${port}`,
     bundleURL: `http://localhost:${port}/src/init.bundle`,