Migrate plugin bundling to esbuild

Summary: With esbuild bundling all plugins takes a couple of seconds instead of 3-5 minutes with metro. As a result, we can stop including plugins into Flipper's bundle for development and always bundle them separately. It reduces complexity of our build pipeline and makes the dev build work more like our prod build. It also allows us to stop bundling flipper-server code and just compile it instead.

Reviewed By: lblasa

Differential Revision: D39262048

fbshipit-source-id: c4da0f2ea2807015d98e0d070349c39b2118e189

desktop/pkg-lib/package.json

@@ -9,6 +9,7 @@
   "license": "MIT",
   "bugs": "https://github.com/facebook/flipper/issues",
   "dependencies": {
+    "esbuild": "^0.15.7",
     "flipper-babel-transformer": "0.0.0",
     "flipper-plugin-lib": "0.0.0",
     "fs-extra": "^10.1.0",

desktop/pkg-lib/src/runBuild.tsx

@@ -7,125 +7,47 @@
  * @format
  */
 
-import Metro from 'metro';
-import getWatchFolders from './getWatchFolders';
 import path from 'path';
 import fs from 'fs-extra';
 import {getInstalledPluginDetails} from 'flipper-plugin-lib';
-import {FileStore} from 'metro-cache';
+import {build} from 'esbuild';
-import stripSourceMapComment from './stripSourceMap';
-import os from 'os';
 
-let metroDir: string | undefined;
+interface RunBuildConfig {
-const metroDirPromise = getMetroDir().then((dir) => (metroDir = dir));
-
-// We need to include metro-runtime to the watched folders list because it contains modules which are included into the final bundle.
-async function getMetroDir() {
-  let dir = __dirname;
-  while (true) {
-    const dirToCheck = path.join(dir, 'node_modules', 'metro-runtime');
-    if (await fs.pathExists(dirToCheck)) return dirToCheck;
-    const nextDir = path.dirname(dir);
-    if (!nextDir || nextDir === '' || nextDir === dir) {
-      break;
-    }
-    dir = nextDir;
-  }
-  return __dirname;
-}
-
-interface RunMetroConfig {
   pluginDir: string;
-  baseConfig: any;
   entry: string;
   out: string;
   dev: boolean;
-  sourceMapPath?: string;
+  node?: boolean;
-  babelTransformerPath: string;
 }
 
-async function runMetro({
+async function runBuild({pluginDir, entry, out, dev, node}: RunBuildConfig) {
-  pluginDir,
+  await build({
-  baseConfig,
+    entryPoints: [path.join(pluginDir, entry)],
-  entry,
+    bundle: true,
-  out,
+    outfile: out,
-  dev,
+    platform: node ? 'node' : 'browser',
-  sourceMapPath,
+    format: 'cjs',
-  babelTransformerPath,
+    // This list should match `dispatcher/plugins.tsx` and `builtInModules` in `desktop/.eslintrc.js`
-}: RunMetroConfig) {
+    external: [
-  const config = Object.assign({}, baseConfig, {
+      'flipper-plugin',
-    reporter: {update: () => {}},
+      'flipper',
-    projectRoot: pluginDir,
+      'react',
-    watchFolders: [metroDir || (await metroDirPromise)].concat(
+      'react-dom',
-      await getWatchFolders(pluginDir),
+      'react-dom/client',
-    ),
+      'react-is',
-    serializer: {
+      'antd',
-      ...baseConfig.serializer,
+      'immer',
-      getRunModuleStatement: (moduleID: string) =>
+      '@emotion/styled',
-        `module.exports = global.__r(${moduleID});`,
+      '@ant-design/icons',
-    },
+      // It is an optional dependency for rollup that we use in react-devtools
-    transformer: {
+      'fsevents',
-      ...baseConfig.transformer,
-      babelTransformerPath,
-      minifierPath: require.resolve('metro-minify-terser'),
-      minifierConfig: {
-        // see: https://www.npmjs.com/package/terser
-        keep_fnames: true,
-        module: true,
-        warnings: true,
-        mangle: false,
-        compress: false,
-      },
-    },
-    resolver: {
-      ...baseConfig.resolver,
-      resolverMainFields: ['flipperBundlerEntry', 'module', 'main'],
-      sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json', 'mjs', 'cjs'],
-      blacklistRE: /\.native\.js$/,
-    },
-    cacheStores: [
-      new FileStore({
-        root:
-          process.env.FLIPPER_METRO_CACHE ??
-          path.join(os.tmpdir(), 'metro-cache'),
-      }),
     ],
-  });
+    sourcemap: 'external',
-  const sourceMapUrl = out.replace(/\.js$/, '.map');
-  const sourceMap = dev || !!sourceMapPath;
-  await Metro.runBuild(config, {
-    dev,
-    sourceMap,
-    sourceMapUrl,
     minify: !dev,
-    inlineSourceMap: dev,
-    resetCache: false,
-    entry,
-    out,
   });
-  if (sourceMap && !dev) {
-    await stripSourceMapComment(out);
-  }
-  if (
-    sourceMapPath &&
-    path.resolve(sourceMapPath) !== path.resolve(sourceMapUrl)
-  ) {
-    console.log(`Moving plugin sourcemap to ${sourceMapPath}`);
-    await fs.ensureDir(path.dirname(sourceMapPath));
-    await fs.move(sourceMapUrl, sourceMapPath, {overwrite: true});
-  }
 }
 
-type Options = {
+export default async function bundlePlugin(pluginDir: string, dev: boolean) {
-  sourceMapPath?: string | undefined;
-  sourceMapPathServerAddOn?: string | undefined;
-};
-
-export default async function bundlePlugin(
-  pluginDir: string,
-  dev: boolean,
-  options?: Options,
-) {
   const stat = await fs.lstat(pluginDir);
   if (!stat.isDirectory()) {
     throw new Error(`Plugin source ${pluginDir} is not a directory.`);
@@ -137,19 +59,22 @@ export default async function bundlePlugin(
     );
   }
   const plugin = await getInstalledPluginDetails(pluginDir);
-  const baseConfig = await Metro.loadConfig();
 
-  const bundleConfigs: RunMetroConfig[] = [];
+  if (typeof plugin.deprecated === 'string') {
+    console.warn(
+      `Skip bundling plugin source ${pluginDir} is deprecated: ${plugin.deprecated}`,
+    );
+    return;
+  }
+
+  const bundleConfigs: RunBuildConfig[] = [];
 
   await fs.ensureDir(path.dirname(plugin.entry));
   bundleConfigs.push({
     pluginDir,
-    baseConfig,
     entry: plugin.source,
     out: plugin.entry,
     dev,
-    sourceMapPath: options?.sourceMapPath,
-    babelTransformerPath: require.resolve('flipper-babel-transformer'),
   });
 
   if (
@@ -160,16 +85,12 @@ export default async function bundlePlugin(
     await fs.ensureDir(path.dirname(plugin.serverAddOnEntry));
     bundleConfigs.push({
       pluginDir,
-      baseConfig,
       entry: plugin.serverAddOnSource,
       out: plugin.serverAddOnEntry,
       dev,
-      sourceMapPath: options?.sourceMapPathServerAddOn,
+      node: true,
-      babelTransformerPath: require.resolve(
-        'flipper-babel-transformer/lib/transform-server-add-on',
-      ),
     });
   }
 
-  await Promise.all(bundleConfigs.map((config) => runMetro(config)));
+  await Promise.all(bundleConfigs.map((config) => runBuild(config)));
 }

desktop/scripts/build-plugin.tsx

@@ -54,17 +54,6 @@ const argv = yargs
       type: 'string',
       alias: 'ou',
     },
-    'output-sourcemap': {
-      description: 'File path for the sourcemap to be written. Optional.',
-      type: 'string',
-      alias: 'os',
-    },
-    'output-sourcemap-server-addon': {
-      description:
-        'File path for the server add-on sourcemap to be written. Optional.',
-      type: 'string',
-      alias: 'os',
-    },
   })
   .help()
   .parse(process.argv.slice(1));
@@ -76,14 +65,9 @@ async function buildPlugin() {
   const outputFileArg = argv.output;
   const outputUnpackedArg = argv['output-unpacked'];
   const minFlipperVersion = argv['min-flipper-version'];
-  const outputSourcemapArg = argv['output-sourcemap'];
-  const outputSourcemapServerAddOnArg = argv['output-sourcemap-server-addon'];
   const packageJsonPath = path.join(pluginDir, 'package.json');
   const packageJsonOverridePath = path.join(pluginDir, 'fb', 'package.json');
-  await runBuild(pluginDir, false, {
+  await runBuild(pluginDir, false);
-    sourceMapPath: outputSourcemapArg,
-    sourceMapPathServerAddOn: outputSourcemapServerAddOnArg,
-  });
   const checksum = await computePackageChecksum(pluginDir);
   if (previousChecksum !== checksum && argv.version) {
     console.log(`Plugin changed. Packaging new version ${argv.version}...`);

desktop/yarn.lock

@@ -2337,6 +2337,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@esbuild/linux-loong64@0.15.7":
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz#1ec4af4a16c554cbd402cc557ccdd874e3f7be53"
+  integrity sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -6620,6 +6625,133 @@ es6-error@^4.1.1:
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
   integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
 
+esbuild-android-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.7.tgz#a521604d8c4c6befc7affedc897df8ccde189bea"
+  integrity sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==
+
+esbuild-android-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.7.tgz#307b81f1088bf1e81dfe5f3d1d63a2d2a2e3e68e"
+  integrity sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==
+
+esbuild-darwin-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.7.tgz#270117b0c4ec6bcbc5cf3a297a7d11954f007e11"
+  integrity sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==
+
+esbuild-darwin-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.7.tgz#97851eacd11dacb7719713602e3319e16202fc77"
+  integrity sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==
+
+esbuild-freebsd-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.7.tgz#1de15ffaf5ae916aa925800aa6d02579960dd8c4"
+  integrity sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==
+
+esbuild-freebsd-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.7.tgz#0f160dbf5c9a31a1d8dd87acbbcb1a04b7031594"
+  integrity sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==
+
+esbuild-linux-32@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.7.tgz#422eb853370a5e40bdce8b39525380de11ccadec"
+  integrity sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==
+
+esbuild-linux-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.7.tgz#f89c468453bb3194b14f19dc32e0b99612e81d2b"
+  integrity sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==
+
+esbuild-linux-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.7.tgz#68a79d6eb5e032efb9168a0f340ccfd33d6350a1"
+  integrity sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==
+
+esbuild-linux-arm@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.7.tgz#2b7c784d0b3339878013dfa82bf5eaf82c7ce7d3"
+  integrity sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==
+
+esbuild-linux-mips64le@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.7.tgz#bb8330a50b14aa84673816cb63cc6c8b9beb62cc"
+  integrity sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==
+
+esbuild-linux-ppc64le@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.7.tgz#52544e7fa992811eb996674090d0bc41f067a14b"
+  integrity sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==
+
+esbuild-linux-riscv64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.7.tgz#a43ae60697992b957e454cbb622f7ee5297e8159"
+  integrity sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==
+
+esbuild-linux-s390x@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.7.tgz#8c76a125dd10a84c166294d77416caaf5e1c7b64"
+  integrity sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==
+
+esbuild-netbsd-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.7.tgz#19b2e75449d7d9c32b5d8a222bac2f1e0c3b08fd"
+  integrity sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==
+
+esbuild-openbsd-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.7.tgz#1357b2bf72fd037d9150e751420a1fe4c8618ad7"
+  integrity sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==
+
+esbuild-sunos-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.7.tgz#87ab2c604592a9c3c763e72969da0d72bcde91d2"
+  integrity sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==
+
+esbuild-windows-32@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.7.tgz#c81e688c0457665a8d463a669e5bf60870323e99"
+  integrity sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==
+
+esbuild-windows-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.7.tgz#2421d1ae34b0561a9d6767346b381961266c4eff"
+  integrity sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==
+
+esbuild-windows-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.7.tgz#7d5e9e060a7b454cb2f57f84a3f3c23c8f30b7d2"
+  integrity sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==
+
+esbuild@^0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.7.tgz#8a1f1aff58671a3199dd24df95314122fc1ddee8"
+  integrity sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.15.7"
+    esbuild-android-64 "0.15.7"
+    esbuild-android-arm64 "0.15.7"
+    esbuild-darwin-64 "0.15.7"
+    esbuild-darwin-arm64 "0.15.7"
+    esbuild-freebsd-64 "0.15.7"
+    esbuild-freebsd-arm64 "0.15.7"
+    esbuild-linux-32 "0.15.7"
+    esbuild-linux-64 "0.15.7"
+    esbuild-linux-arm "0.15.7"
+    esbuild-linux-arm64 "0.15.7"
+    esbuild-linux-mips64le "0.15.7"
+    esbuild-linux-ppc64le "0.15.7"
+    esbuild-linux-riscv64 "0.15.7"
+    esbuild-linux-s390x "0.15.7"
+    esbuild-netbsd-64 "0.15.7"
+    esbuild-openbsd-64 "0.15.7"
+    esbuild-sunos-64 "0.15.7"
+    esbuild-windows-32 "0.15.7"
+    esbuild-windows-64 "0.15.7"
+    esbuild-windows-arm64 "0.15.7"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"