Enable Metro caching

Summary:
Enabling Metro cache for dev mode. For release builds we reset the cache.

Cache is used for faster compilation in dev mode for both main and renderer bundles, as well as for plugins.

Currently we have few side effects based on env vars, so cache is invalidated when they are changed. Also the cache is invalidated when transformations are changed (changed code, bumped dependency etc). Also added a script to reset the cache if something is going wrong.

Reviewed By: mweststrate

Differential Revision: D20691464

fbshipit-source-id: 478947d438bd3090f052dbfa6ad5c649523ecacb

desktop/babel-transformer/src/fb-stubs.ts

@@ -18,7 +18,7 @@ const requireFromFolder = (folder: string, path: string) =>
   new RegExp(folder + '/[A-Za-z0-9.-_]+(.js)?$', 'g').test(path);
 
 module.exports = () => ({
-  name: 'replace-dynamic-requires',
+  name: 'replace-fb-stubs',
   visitor: {
     CallExpression(path: NodePath<CallExpression>, state: any) {
       if (

desktop/babel-transformer/src/flipper-env.ts

@@ -0,0 +1,44 @@
+/**
+ * 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
+ */
+
+/**
+ * There are some env vars which affect transformations, so the Metro/Babel cache should be invalidated when at least one of them changed.
+ * They are used in get-cache-key.ts for cache key generation.
+ */
+type FlipperEnvVars = {
+  FLIPPER_HEADLESS?: string;
+  FLIPPER_FB?: string;
+  FLIPPER_TEST_RUNNER?: string;
+  FLIPPER_ELECTRON_VERSION?: string;
+  NODE_ENV?: string;
+};
+
+const flipperEnv = new Proxy(
+  {
+    FLIPPER_HEADLESS: undefined,
+    FLIPPER_FB: undefined,
+    FLIPPER_TEST_RUNNER: undefined,
+    FLIPPER_ELECTRON_VERSION: undefined,
+    NODE_ENV: undefined,
+  } as FlipperEnvVars,
+  {
+    get: function (obj, prop) {
+      if (typeof prop === 'string') {
+        return process.env[prop];
+      } else {
+        return (obj as any)[prop];
+      }
+    },
+    set: function () {
+      throw new Error('flipperEnv is read-only');
+    },
+  },
+);
+
+export default flipperEnv;

desktop/babel-transformer/src/get-cache-key.ts

@@ -7,9 +7,39 @@
  * @format
  */
 
-// Disable caching of babel transforms all together. We haven't found a good
-// way to cache our transforms, as they rely on side effects like env vars or
-// the existence of folders in the file system.
-export default function getCacheKey() {
-  return Math.random().toString(36);
+/**
+ * There are some env vars which affect transformations, so the Metro/Babel cache should be invalidated when at least one of them changed.
+ *
+ * If any issues found with such approach, we can fallback to the implementation which always invalidates caches, but also makes bundling significantly slower:
+ * export default function getCacheKey() { return Math.random().toString(36); }
+ */
+
+import {default as flipperEnv} from './flipper-env';
+import fs from 'fs-extra';
+import path from 'path';
+
+let baseHash = '';
+const tsbuildinfoPath = path.resolve(__dirname, '..', 'tsconfig.tsbuildinfo');
+const packageJsonPath = path.resolve(__dirname, '..', 'package.json');
+if (fs.pathExistsSync(tsbuildinfoPath)) {
+  /**
+   * tsconfig.tsbuildinfo is changed each time TS incremental build detects changes and rebuilds the package,
+   * so we can use its modification date as cache key to invalidate the cache each time when babel transformations changed.
+   */
+  baseHash = fs.lstatSync(tsbuildinfoPath).ctime.toUTCString();
+} else if (fs.pathExistsSync(packageJsonPath)) {
+  /**
+   * tsconfig.tsbuildinfo will not exist in case if the package is installed from npm rather than built locally.
+   * In such case we should use version of npm package as hash key to invalidate the cache after updates.
+   */
+  baseHash = fs.readJsonSync(packageJsonPath).version;
+}
+
+export default function getCacheKey() {
+  return [
+    baseHash,
+    ...Object.entries(flipperEnv)
+      .sort(([name1, _value1], [name2, _value2]) => name1.localeCompare(name2))
+      .map(([name, value]) => `${name}=${value}`),
+  ].join('|');
 }

desktop/babel-transformer/src/transform-app.ts

@@ -9,6 +9,7 @@
 
 import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
+import {default as flipperEnv} from './flipper-env';
 
 module.exports = {
   transform,
@@ -26,10 +27,10 @@ function transform({
 }) {
   const presets = [require('@babel/preset-react')];
   const plugins = [];
-  if (process.env.FLIPPER_FB) {
+  if (flipperEnv.FLIPPER_FB) {
     plugins.push(require('./fb-stubs'));
   }
-  if (process.env.BUILD_HEADLESS) {
+  if (flipperEnv.FLIPPER_HEADLESS) {
     plugins.push(require('./electron-stubs'));
   }
   plugins.push(require('./electron-requires'));

desktop/babel-transformer/src/transform-jest.ts

@@ -9,6 +9,7 @@
 
 import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
+import {default as flipperEnv} from './flipper-env';
 
 module.exports = {
   transform,
@@ -26,10 +27,10 @@ function transform({
 }) {
   const presets = [require('@babel/preset-react')];
   const plugins = [];
-  if (process.env.FLIPPER_FB) {
+  if (flipperEnv.FLIPPER_FB) {
     plugins.push(require('./fb-stubs'));
   }
-  if (process.env.BUILD_HEADLESS) {
+  if (flipperEnv.FLIPPER_HEADLESS) {
     plugins.push(require('./electron-stubs'));
   }
   plugins.push(require('./import-react'));

desktop/babel-transformer/src/transform-main.ts

@@ -9,6 +9,7 @@
 
 import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
+import {default as flipperEnv} from './flipper-env';
 
 module.exports = {
   transform,
@@ -27,11 +28,11 @@ function transform({
   const presets = [
     [
       require('@babel/preset-env'),
-      {targets: {electron: process.env.FLIPPER_ELECTRON_VERSION}},
+      {targets: {electron: flipperEnv.FLIPPER_ELECTRON_VERSION}},
     ],
   ];
   const plugins = [];
-  if (process.env.FLIPPER_FB) {
+  if (flipperEnv.FLIPPER_FB) {
     plugins.push(require('./fb-stubs'));
   }
   plugins.push(require('./electron-requires-main'));

desktop/babel-transformer/src/transform-plugin.ts

@@ -8,6 +8,7 @@
  */
 
 import {default as doTransform} from './transform';
+import {default as flipperEnv} from './flipper-env';
 
 export default function transform({
   filename,
@@ -24,10 +25,10 @@ export default function transform({
 }) {
   presets = presets ?? [require('@babel/preset-react')];
   plugins = plugins ?? [];
-  if (process.env.FLIPPER_FB) {
+  if (flipperEnv.FLIPPER_FB) {
     plugins.push(require('./fb-stubs'));
   }
-  if (process.env.BUILD_HEADLESS) {
+  if (flipperEnv.FLIPPER_HEADLESS) {
     plugins.push(require('./electron-stubs'));
   }
   plugins.push(require('./electron-requires'));

desktop/babel-transformer/src/transform.ts

@@ -10,6 +10,7 @@
 import {default as generate} from '@babel/generator';
 import {parse} from '@babel/parser';
 import {transformFromAstSync} from '@babel/core';
+import {default as flipperEnv} from './flipper-env';
 
 export default function transform({
   filename,
@@ -77,7 +78,7 @@ export default function transform({
     plugins,
     presets,
     sourceMaps: true,
-    retainLines: !!options.isTestRunner,
+    retainLines: !!flipperEnv.FLIPPER_TEST_RUNNER,
   });
   if (!transformed) {
     throw new Error('Failed to transform');
@@ -88,7 +89,7 @@ export default function transform({
       filename,
       sourceFileName: filename,
       sourceMaps: true,
-      retainLines: !!options.isTestRunner,
+      retainLines: !!flipperEnv.FLIPPER_TEST_RUNNER,
     },
     src,
   );