Move desktop-related code to "desktop" subfolder (#872)

Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/872
Move all the JS code related to desktop app to "desktop" subfolder.

The structure of "desktop" folder:
- `src` - JS code of Flipper desktop app executing in Electron Renderer (Chrome) process. This folder also contains all the Flipper plugins in subfolder "src/plugins".
- `static` - JS code of Flipper desktop app bootstrapping executing in Electron Main (Node.js) process
- `pkg` - Flipper packaging lib and CLI tool
- `doctor` - Flipper diagnostics lib and CLI tool
- `scripts` - Build scripts for Flipper desktop app
- `headless` - Headless version of Flipper app
- `headless-tests` - Integration tests running agains Flipper headless version

Reviewed By: passy

Differential Revision: D20249304

fbshipit-source-id: 9a51c63b51b92b758a02fc8ebf7d3d116770efe9

desktop/scripts/build-headless.ts

@@ -0,0 +1,121 @@
+/**
+ * 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 fs from 'fs';
+import path from 'path';
+import lineReplace from 'line-replace';
+import yazl from 'yazl';
+const {exec: createBinary} = require('pkg');
+import {
+  buildFolder,
+  compile,
+  compileDefaultPlugins,
+  getVersionNumber,
+  genMercurialRevision,
+} from './build-utils';
+
+const PLUGINS_FOLDER_NAME = 'plugins';
+
+function preludeBundle(
+  dir: string,
+  versionNumber: string,
+  buildRevision: string | null,
+) {
+  const revisionStr =
+    buildRevision == null ? '' : `global.__REVISION__="${buildRevision}";`;
+  return new Promise(resolve =>
+    lineReplace({
+      file: path.join(dir, 'bundle.js'),
+      line: 1,
+      text: `var __DEV__=false; global.electronRequire = require; global.performance = require("perf_hooks").performance;global.__VERSION__="${versionNumber}";${revisionStr}`,
+      addNewLine: true,
+      callback: resolve,
+    }),
+  );
+}
+
+async function createZip(buildDir: string, distDir: string, targets: string[]) {
+  return new Promise(resolve => {
+    const zip = new yazl.ZipFile();
+
+    // add binaries for each target
+    targets.forEach(target => {
+      const binary = `flipper-${target === 'mac' ? 'macos' : target}`;
+      zip.addFile(path.join(buildDir, binary), binary);
+    });
+
+    // add plugins
+    const pluginDir = path.join(buildDir, PLUGINS_FOLDER_NAME);
+    fs.readdirSync(pluginDir).forEach(file => {
+      zip.addFile(
+        path.join(pluginDir, file),
+        path.join(PLUGINS_FOLDER_NAME, file),
+      );
+    });
+
+    // write zip file
+    zip.outputStream
+      .pipe(fs.createWriteStream(path.join(distDir, 'Flipper-headless.zip')))
+      .on('close', resolve);
+    zip.end();
+  });
+}
+
+(async () => {
+  const targets: {mac?: string; linux?: string; win?: string} = {};
+  let platformPostfix: string = '';
+  if (process.argv.indexOf('--mac') > -1) {
+    targets.mac = 'node10-macos-x64';
+    platformPostfix = '-macos';
+  }
+  if (process.argv.indexOf('--linux') > -1) {
+    targets.linux = 'node10-linux-x64';
+    platformPostfix = '-linux';
+  }
+  if (process.argv.indexOf('--win') > -1) {
+    targets.win = 'node10-win-x64';
+    platformPostfix = '-win';
+  }
+  const length = Object.keys(targets).length;
+  if (length === 0) {
+    throw new Error('No targets specified. eg. --mac, --win, or --linux');
+  } else if (length > 1) {
+    // platformPostfix is automatically added by pkg
+    platformPostfix = '';
+  }
+  // Compiling all plugins takes a long time. Use this flag for quicker
+  // developement iteration by not including any plugins.
+  const skipPlugins = process.argv.indexOf('--no-plugins') > -1;
+
+  process.env.BUILD_HEADLESS = 'true';
+  const buildDir = await buildFolder();
+  const distDir = path.join(__dirname, '..', '..', 'dist');
+  // eslint-disable-next-line no-console
+  console.log('Created build directory', buildDir);
+  await compile(buildDir, path.join(__dirname, '..', 'headless', 'index.tsx'));
+  const versionNumber = getVersionNumber();
+  const buildRevision = await genMercurialRevision();
+  await preludeBundle(buildDir, versionNumber, buildRevision);
+  await compileDefaultPlugins(
+    path.join(buildDir, PLUGINS_FOLDER_NAME),
+    skipPlugins,
+  );
+  await createBinary([
+    path.join(buildDir, 'bundle.js'),
+    '--output',
+    path.join(buildDir, `flipper${platformPostfix}`),
+    '--targets',
+    Object.values(targets).join(','),
+    '--debug',
+  ]);
+  await createZip(buildDir, distDir, Object.keys(targets));
+  // eslint-disable-next-line no-console
+  console.log('✨  Done');
+  process.exit();
+})();

desktop/scripts/build-release.ts

@@ -0,0 +1,194 @@
+/**
+ * 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 path from 'path';
+import fs from 'fs-extra';
+import {Platform, Arch, ElectronDownloadOptions, build} from 'electron-builder';
+import {spawn} from 'promisify-child-process';
+import {
+  buildFolder,
+  compile,
+  compileMain,
+  die,
+  compileDefaultPlugins,
+  getVersionNumber,
+  genMercurialRevision,
+} from './build-utils';
+import fetch from 'node-fetch';
+import {getIcons, buildLocalIconPath, getIconURL} from '../src/utils/icons';
+
+function generateManifest(versionNumber: string) {
+  const filePath = path.join(__dirname, '..', '..', 'dist');
+  if (!fs.existsSync(filePath)) {
+    fs.mkdirSync(filePath);
+  }
+  fs.writeFileSync(
+    path.join(__dirname, '..', '..', 'dist', 'manifest.json'),
+    JSON.stringify({
+      package: 'com.facebook.sonar',
+      version_name: versionNumber,
+    }),
+  );
+}
+
+function modifyPackageManifest(
+  buildFolder: string,
+  versionNumber: string,
+  hgRevision: string | null,
+) {
+  // eslint-disable-next-line no-console
+  console.log('Creating package.json manifest');
+  const manifest = require('../package.json');
+  const manifestStatic = require('../static/package.json');
+
+  // The manifest's dependencies are bundled with the final app by
+  // electron-builder. We want to bundle the dependencies from the static-folder
+  // because all dependencies from the root-folder are already bundled by metro.
+  manifest.dependencies = manifestStatic.dependencies;
+  manifest.main = 'index.js';
+  manifest.version = versionNumber;
+  if (hgRevision != null) {
+    manifest.revision = hgRevision;
+  }
+  fs.writeFileSync(
+    path.join(buildFolder, 'package.json'),
+    JSON.stringify(manifest, null, '  '),
+  );
+}
+
+async function buildDist(buildFolder: string) {
+  const targetsRaw: Map<Platform, Map<Arch, string[]>>[] = [];
+  const postBuildCallbacks: (() => void)[] = [];
+
+  if (process.argv.indexOf('--mac') > -1) {
+    targetsRaw.push(Platform.MAC.createTarget(['dir']));
+    // You can build mac apps on Linux but can't build dmgs, so we separate those.
+    if (process.argv.indexOf('--mac-dmg') > -1) {
+      targetsRaw.push(Platform.MAC.createTarget(['dmg']));
+    }
+    postBuildCallbacks.push(() =>
+      spawn('zip', ['-qyr9', '../Flipper-mac.zip', 'Flipper.app'], {
+        cwd: path.join(__dirname, '..', '..', 'dist', 'mac'),
+        encoding: 'utf-8',
+      }),
+    );
+  }
+  if (process.argv.indexOf('--linux') > -1) {
+    targetsRaw.push(Platform.LINUX.createTarget(['zip']));
+  }
+  if (process.argv.indexOf('--win') > -1) {
+    targetsRaw.push(Platform.WINDOWS.createTarget(['zip']));
+  }
+  if (!targetsRaw.length) {
+    throw new Error('No targets specified. eg. --mac, --win, or --linux');
+  }
+
+  // merge all target maps into a single map
+  let targetsMerged: [Platform, Map<Arch, string[]>][] = [];
+  for (const target of targetsRaw) {
+    targetsMerged = targetsMerged.concat(Array.from(target));
+  }
+  const targets = new Map(targetsMerged);
+
+  const electronDownloadOptions: ElectronDownloadOptions = {};
+  if (process.env.electron_config_cache) {
+    electronDownloadOptions.cache = process.env.electron_config_cache;
+  }
+
+  try {
+    await build({
+      publish: 'never',
+      config: {
+        appId: `com.facebook.sonar`,
+        directories: {
+          buildResources: path.join(__dirname, '..', 'static'),
+          output: path.join(__dirname, '..', '..', 'dist'),
+        },
+        electronDownload: electronDownloadOptions,
+        npmRebuild: false,
+      },
+      projectDir: buildFolder,
+      targets,
+    });
+    return await Promise.all(postBuildCallbacks.map(p => p()));
+  } catch (err) {
+    return die(err);
+  }
+}
+
+function copyStaticFolder(buildFolder: string) {
+  fs.copySync(path.join(__dirname, '..', 'static'), buildFolder, {
+    dereference: true,
+  });
+}
+
+function downloadIcons(buildFolder: string) {
+  const iconURLs = Object.entries(getIcons()).reduce<
+    {
+      name: string;
+      size: number;
+      density: number;
+    }[]
+  >((acc, [name, sizes]) => {
+    acc.push(
+      // get icons in @1x and @2x
+      ...sizes.map(size => ({name, size, density: 1})),
+      ...sizes.map(size => ({name, size, density: 2})),
+    );
+    return acc;
+  }, []);
+
+  return Promise.all(
+    iconURLs.map(({name, size, density}) => {
+      const url = getIconURL(name, size, density);
+      return fetch(url)
+        .then(res => {
+          if (res.status !== 200) {
+            throw new Error(
+              // eslint-disable-next-line prettier/prettier
+              `Could not download the icon ${name} from ${url}: got status ${
+                res.status
+              }`,
+            );
+          }
+          return res;
+        })
+        .then(
+          res =>
+            new Promise((resolve, reject) => {
+              const fileStream = fs.createWriteStream(
+                path.join(buildFolder, buildLocalIconPath(name, size, density)),
+              );
+              res.body.pipe(fileStream);
+              res.body.on('error', reject);
+              fileStream.on('finish', resolve);
+            }),
+        );
+    }),
+  );
+}
+
+(async () => {
+  const dir = await buildFolder();
+  // eslint-disable-next-line no-console
+  console.log('Created build directory', dir);
+  await compileMain({dev: false});
+  copyStaticFolder(dir);
+  await downloadIcons(dir);
+  await compileDefaultPlugins(path.join(dir, 'defaultPlugins'));
+  await compile(dir, path.join(__dirname, '..', 'src', 'init.tsx'));
+  const versionNumber = getVersionNumber();
+  const hgRevision = await genMercurialRevision();
+  modifyPackageManifest(dir, versionNumber, hgRevision);
+  generateManifest(versionNumber);
+  await buildDist(dir);
+  // eslint-disable-next-line no-console
+  console.log('✨  Done');
+  process.exit();
+})();

desktop/scripts/build-utils.ts

@@ -0,0 +1,183 @@
+/**
+ * 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
+ */
+
+const Metro = require('../static/node_modules/metro');
+import compilePlugins from '../static/compilePlugins';
+import util from 'util';
+import tmp from 'tmp';
+import path from 'path';
+import fs from 'fs-extra';
+import {spawn} from 'promisify-child-process';
+import recursiveReaddir from 'recursive-readdir';
+
+async function mostRecentlyChanged(
+  dir: string,
+  ignores: string[],
+): Promise<Date> {
+  const files = await util.promisify<string, string[], string[]>(
+    recursiveReaddir,
+  )(dir, ignores);
+  return files
+    .map(f => fs.lstatSync(f).ctime)
+    .reduce((a, b) => (a > b ? a : b), new Date(0));
+}
+
+export function die(err: Error) {
+  console.error(err.stack);
+  process.exit(1);
+}
+
+export function compileDefaultPlugins(
+  defaultPluginDir: string,
+  skipAll: boolean = false,
+) {
+  return compilePlugins(
+    null,
+    skipAll
+      ? []
+      : [
+          path.join(__dirname, '..', 'src', 'plugins'),
+          path.join(__dirname, '..', 'src', 'fb', 'plugins'),
+        ],
+    defaultPluginDir,
+    {force: true, failSilently: false, recompileOnChanges: false},
+  )
+    .then(defaultPlugins =>
+      fs.writeFileSync(
+        path.join(defaultPluginDir, 'index.json'),
+        JSON.stringify(
+          defaultPlugins.map(({entry, rootDir, out, ...plugin}) => ({
+            ...plugin,
+            out: path.parse(out).base,
+          })),
+        ),
+      ),
+    )
+    .catch(die);
+}
+
+export function compile(buildFolder: string, entry: string) {
+  console.log(`⚙️  Compiling renderer bundle...`);
+  const projectRoots = path.join(__dirname, '..');
+  return Metro.runBuild(
+    {
+      reporter: {update: () => {}},
+      projectRoot: projectRoots,
+      watchFolders: [projectRoots],
+      serializer: {},
+      transformer: {
+        babelTransformerPath: path.join(
+          __dirname,
+          '..',
+          'static',
+          'transforms',
+          'index.js',
+        ),
+      },
+      resolver: {
+        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      },
+    },
+    {
+      dev: false,
+      minify: false,
+      resetCache: true,
+      sourceMap: true,
+      entry,
+      out: path.join(buildFolder, 'bundle.js'),
+    },
+  )
+    .then(() => console.log('✅  Compiled renderer bundle.'))
+    .catch(die);
+}
+
+export async function compileMain({dev}: {dev: boolean}) {
+  const staticDir = path.resolve(__dirname, '..', 'static');
+  const out = path.join(staticDir, 'main.bundle.js');
+  // check if main needs to be compiled
+  if (await fs.pathExists(out)) {
+    const staticDirCtime = await mostRecentlyChanged(staticDir, ['*.bundle.*']);
+    const bundleCtime = (await fs.lstat(out)).ctime;
+    if (staticDirCtime < bundleCtime) {
+      console.log(`🥫  Using cached version of main bundle...`);
+      return;
+    }
+  }
+  console.log(`⚙️  Compiling main bundle...`);
+  try {
+    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)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      },
+    });
+    await Metro.runBuild(config, {
+      platform: 'web',
+      entry: path.join(staticDir, 'main.ts'),
+      out,
+      dev,
+      minify: false,
+      sourceMap: true,
+      resetCache: true,
+    });
+    console.log('✅  Compiled main bundle.');
+  } catch (err) {
+    die(err);
+  }
+}
+export function buildFolder(): Promise<string> {
+  // eslint-disable-next-line no-console
+  console.log('Creating build directory');
+  return new Promise<string>((resolve, reject) => {
+    tmp.dir({prefix: 'flipper-build-'}, (err, buildFolder) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(buildFolder);
+      }
+    });
+  }).catch(e => {
+    die(e);
+    return '';
+  });
+}
+export function getVersionNumber() {
+  let {version} = require('../package.json');
+  const buildNumber = process.argv.join(' ').match(/--version=(\d+)/);
+  if (buildNumber && buildNumber.length > 0) {
+    version = [...version.split('.').slice(0, 2), buildNumber[1]].join('.');
+  }
+  return version;
+}
+
+// Asynchronously determine current mercurial revision as string or `null` in case of any error.
+export function genMercurialRevision(): Promise<string | null> {
+  return spawn('hg', ['log', '-r', '.', '-T', '{node}'], {encoding: 'utf8'})
+    .then(
+      res =>
+        (res &&
+          (typeof res.stdout === 'string'
+            ? res.stdout
+            : res.stdout?.toString())) ||
+        null,
+    )
+    .catch(() => null);
+}

desktop/scripts/generate-changelog.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+/**
+ * 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.
+ *
+ * @noformat
+ */
+
+/**
+ * WARNING: this file should be able to run on node v6.16.0, which is used at SandCastle.
+ * Please run `nvm use 6.16.0` before testing changes in this file!
+ */
+
+const path = require('path');
+const fs = require('fs');
+const cp = require('child_process');
+
+const desktopRoot = path.resolve(__dirname, '..');
+const root = path.resolve(desktopRoot, '..');
+
+const version = JSON.parse(fs.readFileSync(path.join(desktopRoot, 'package.json'), 'utf8')).version;
+
+const now = new Date();
+const date = `${now.getDate()}/${now.getMonth() + 1}/${now.getFullYear()}`;
+const newlineMarker = '__NEWLINE_MARKER__';
+const fChangelog = path.resolve(root, 'CHANGELOG.md');
+
+const lastCommit = cp
+  .execSync(`hg log --limit 1 --template '{node}'`, {cwd: root})
+  .toString();
+const firstCommit = cp
+  .execSync(
+    `hg log --limit 1 --template '{node}' --keyword 'Flipper Release: v'`,
+    {cwd: root}
+  )
+  .toString();
+
+console.log(
+  `Generating changelog for version ${version} based on ${firstCommit}..${lastCommit}`
+);
+
+// # get all commit summaries since last release | find all changelog entries, but make sure there is only one line per commit by temporarily replacing newlines
+const hgLogCommand = `hg log -r "${firstCommit}::${lastCommit} and file('../*')" --template "{phabdiff} - {sub('\n','${newlineMarker}', desc)}\n"`;
+const hgLog = cp.execSync(hgLogCommand, {cwd: __dirname}).toString();
+
+const diffRe = /^D\d+/;
+const changeLogLineRe = /(^changelog:\s*?)(.*?)$/i;
+
+let contents = `# ${version} (${date})\n\n`;
+let changes = 0;
+
+hgLog
+  .split('\n')
+  .filter(line => diffRe.test(line))
+  .forEach(line => {
+    // Grab the diff nr from every line in the output
+    const diff = line.trim().match(diffRe)[0];
+    // unfold the lines generated by hg log again
+    line.split(newlineMarker).forEach(diffline => {
+      // if a line starts with changelog:, grab the rest of the text and add it to the changelog
+      const match = diffline.match(changeLogLineRe);
+      if (match) {
+        changes++;
+        contents += ` * ${diff} - ${match[2]}\n`;
+      }
+    });
+  });
+
+if (!changes) {
+  console.log('No diffs with changelog items found in this release');
+} else {
+  contents += '\n\n' + fs.readFileSync(fChangelog, 'utf8');
+  fs.writeFileSync(fChangelog, contents);
+}

desktop/scripts/metro-transform.js

@@ -0,0 +1,65 @@
+/**
+ * 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
+ */
+
+const generate = require('babel-generator').default;
+const babylon = require('babylon');
+const babel = require('babel-core');
+const metro = require('metro');
+
+exports.transform = function({
+  filename,
+  options,
+  src,
+  plugins: defaultPlugins,
+}) {
+  const presets = [];
+
+  let ast = babylon.parse(src, {
+    filename,
+    plugins: ['jsx', 'flow', 'classProperties', 'objectRestSpread'],
+    sourceType: filename.includes('node_modules') ? 'script' : 'module',
+  });
+
+  // run babel
+  const plugins = [
+    ...defaultPlugins,
+    require('./babel-plugins/electron-requires.js'),
+    require('./babel-plugins/dynamic-requires.js'),
+  ];
+  if (!filename.includes('node_modules')) {
+    plugins.unshift(require('babel-plugin-transform-es2015-modules-commonjs'));
+  }
+  ast = babel.transformFromAst(ast, src, {
+    babelrc: !filename.includes('node_modules'),
+    code: false,
+    comments: false,
+    compact: false,
+    filename,
+    plugins,
+    presets,
+    sourceMaps: true,
+  }).ast;
+
+  const result = generate(
+    ast,
+    {
+      filename,
+      sourceFileName: filename,
+      sourceMaps: true,
+    },
+    src,
+  );
+
+  return {
+    ast,
+    code: result.code,
+    filename,
+    map: result.rawMappings.map(metro.sourceMaps.compactMapping),
+  };
+};

desktop/scripts/prepare-watchman-config.js

@@ -0,0 +1,31 @@
+/**
+ * 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
+ */
+
+const path = require('path');
+const util = require('util');
+const {exists: existsImport, copyFile} = require('fs');
+const exists = util.promisify(existsImport);
+
+const desktopRootDir = path.resolve(__dirname, '..');
+const rootDir = path.resolve(desktopRootDir, '..');
+const hasGit = exists(path.join(rootDir, '.git'));
+
+async function prepareWatchmanConfig(dir) {
+  const hasWatchmanConfig = exists(path.join(dir, '.watchmanconfig'));
+  if ((await hasGit) && !(await hasWatchmanConfig)) {
+    console.log(`Creating .watchmanconfig in ${dir}`);
+    await util.promisify(copyFile)(
+      path.join(dir, '_watchmanconfig'),
+      path.join(dir, '.watchmanconfig'),
+    );
+  }
+}
+
+prepareWatchmanConfig(rootDir);
+prepareWatchmanConfig(path.join(desktopRootDir, 'static'));

desktop/scripts/start-dev-server.ts

@@ -0,0 +1,265 @@
+/**
+ * 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
+ */
+
+const electronBinary: string = require('electron') as any;
+import codeFrame from 'babel-code-frame';
+import socketIo from 'socket.io';
+import express, {Express} from 'express';
+import detect from 'detect-port';
+import child from 'child_process';
+import AnsiToHtmlConverter from 'ansi-to-html';
+import chalk from 'chalk';
+import http from 'http';
+import path from 'path';
+import fs from 'fs';
+import {compileMain} from './build-utils';
+import Watchman from '../static/watchman';
+const Metro = require('../static/node_modules/metro');
+const MetroResolver = require('../static/node_modules/metro-resolver');
+
+const ansiToHtmlConverter = new AnsiToHtmlConverter();
+
+const DEFAULT_PORT = (process.env.PORT || 3000) as number;
+const STATIC_DIR = path.join(__dirname, '..', 'static');
+
+let shutdownElectron: (() => void) | undefined = undefined;
+
+function launchElectron({
+  devServerURL,
+  bundleURL,
+  electronURL,
+}: {
+  devServerURL: string;
+  bundleURL: string;
+  electronURL: string;
+}) {
+  const args = [
+    path.join(STATIC_DIR, 'index.js'),
+    '--remote-debugging-port=9222',
+    ...process.argv,
+  ];
+
+  const proc = child.spawn(electronBinary, args, {
+    cwd: STATIC_DIR,
+    env: {
+      ...process.env,
+      SONAR_ROOT: process.cwd(),
+      BUNDLE_URL: bundleURL,
+      ELECTRON_URL: electronURL,
+      DEV_SERVER_URL: devServerURL,
+    },
+    stdio: 'inherit',
+  });
+
+  const electronCloseListener = () => {
+    process.exit();
+  };
+
+  const processExitListener = () => {
+    proc.kill();
+  };
+
+  proc.on('close', electronCloseListener);
+  process.on('exit', processExitListener);
+
+  return () => {
+    proc.off('close', electronCloseListener);
+    process.off('exit', processExitListener);
+    proc.kill();
+  };
+}
+
+function startMetroServer(app: Express) {
+  const projectRoot = path.join(__dirname, '..');
+  return Metro.runMetro({
+    projectRoot,
+    watchFolders: [projectRoot],
+    transformer: {
+      babelTransformerPath: path.join(
+        __dirname,
+        '..',
+        'static',
+        'transforms',
+        'index.js',
+      ),
+    },
+    resolver: {
+      blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      resolveRequest: (context: any, moduleName: string, platform: string) => {
+        if (moduleName.startsWith('./localhost:3000')) {
+          moduleName = moduleName.replace('./localhost:3000', '.');
+        }
+        return MetroResolver.resolve(
+          {...context, resolveRequest: null},
+          moduleName,
+          platform,
+        );
+      },
+    },
+    watch: true,
+  }).then((metroBundlerServer: any) => {
+    app.use(metroBundlerServer.processRequest.bind(metroBundlerServer));
+  });
+}
+
+function startAssetServer(
+  port: number,
+): Promise<{app: Express; server: http.Server}> {
+  const app = express();
+
+  app.use((req, res, next) => {
+    if (knownErrors[req.url] != null) {
+      delete knownErrors[req.url];
+      outputScreen();
+    }
+    next();
+  });
+
+  app.use((req, res, next) => {
+    res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');
+    res.header('Expires', '-1');
+    res.header('Pragma', 'no-cache');
+    next();
+  });
+
+  app.post('/_restartElectron', (req, res) => {
+    if (shutdownElectron) {
+      shutdownElectron();
+    }
+    shutdownElectron = launchElectron({
+      devServerURL: `http://localhost:${port}`,
+      bundleURL: `http://localhost:${port}/src/init.bundle?dev=true&platform=web&minify=false&excludeSource=false`,
+      electronURL: `http://localhost:${port}/index.dev.html`,
+    });
+    res.end();
+  });
+
+  app.get('/', (req, res) => {
+    fs.readFile(path.join(STATIC_DIR, 'index.dev.html'), (err, content) => {
+      res.end(content);
+    });
+  });
+
+  app.use(express.static(STATIC_DIR));
+
+  app.use(function(err: any, req: any, res: any, _next: any) {
+    knownErrors[req.url] = err;
+    outputScreen();
+    res.status(500).send('Something broke, check the console!');
+  });
+
+  const server = http.createServer(app);
+
+  return new Promise(resolve => {
+    server.listen(port, 'localhost', () => resolve({app, server}));
+  });
+}
+
+async function addWebsocket(server: http.Server) {
+  const io = socketIo(server);
+
+  // notify connected clients that there's errors in the console
+  io.on('connection', client => {
+    if (hasErrors()) {
+      client.emit('hasErrors', ansiToHtmlConverter.toHtml(buildErrorScreen()));
+    }
+  });
+
+  // refresh the app on changes to the src folder
+  // this can be removed once metroServer notifies us about file changes
+  try {
+    const watchman = new Watchman(path.resolve(__dirname, '..', 'src'));
+    await watchman.initialize();
+    await watchman.startWatchFiles(
+      '',
+      () => {
+        io.emit('refresh');
+      },
+      {
+        excludes: [
+          '**/__tests__/**/*',
+          '**/node_modules/**/*',
+          '**/.*',
+          'plugins/**/*', // plugin changes are tracked separately, so exlcuding them here to avoid double reloading.
+        ],
+      },
+    );
+  } catch (err) {
+    console.error(
+      'Failed to start watching for changes using Watchman, continue without hot reloading',
+      err,
+    );
+  }
+
+  return io;
+}
+
+const knownErrors: {[key: string]: any} = {};
+
+function hasErrors() {
+  return Object.keys(knownErrors).length > 0;
+}
+
+function buildErrorScreen() {
+  const lines = [
+    chalk.red(`✖ Found ${Object.keys(knownErrors).length} errors`),
+    '',
+  ];
+
+  for (const url in knownErrors) {
+    const err = knownErrors[url];
+
+    if (err.filename != null && err.lineNumber != null && err.column != null) {
+      lines.push(chalk.inverse(err.filename));
+      lines.push();
+      lines.push(err.message);
+      lines.push(
+        codeFrame(
+          fs.readFileSync(err.filename, 'utf8'),
+          err.lineNumber,
+          err.column,
+        ),
+      );
+    } else {
+      lines.push(err.stack);
+    }
+
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}
+
+function outputScreen(socket?: socketIo.Server) {
+  // output screen
+  if (hasErrors()) {
+    const errorScreen = buildErrorScreen();
+    console.error(errorScreen);
+
+    // notify live clients of errors
+    socket?.emit('hasErrors', ansiToHtmlConverter.toHtml(errorScreen));
+  } else {
+    // eslint-disable-next-line no-console
+    console.log(chalk.green('✔ No known errors'));
+  }
+}
+
+(async () => {
+  const port = await detect(DEFAULT_PORT);
+  const {app, server} = await startAssetServer(port);
+  const socket = await addWebsocket(server);
+  await startMetroServer(app);
+  outputScreen(socket);
+  await compileMain({dev: true});
+  shutdownElectron = launchElectron({
+    devServerURL: `http://localhost:${port}`,
+    bundleURL: `http://localhost:${port}/src/init.bundle`,
+    electronURL: `http://localhost:${port}/index.dev.html`,
+  });
+})();

desktop/scripts/yarn-install.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 path from 'path';
+import util from 'util';
+import globImport from 'glob';
+import {exec as execImport} from 'child_process';
+const glob = util.promisify(globImport);
+const exec = util.promisify(execImport);
+const PACKAGES = [
+  'headless-tests',
+  'static',
+  'src/plugins/*',
+  'src/fb/plugins/*',
+  'src/fb/plugins/layout/*',
+];
+const WINDOWS = /^win/.test(process.platform);
+const YARN_PATH =
+  process.argv.length > 2
+    ? path.join(__dirname, process.argv[2])
+    : 'yarn' + (WINDOWS ? '.cmd' : '');
+
+Promise.all(
+  PACKAGES.map(pattern =>
+    glob(path.join(__dirname, '..', pattern, 'package.json')),
+  ),
+)
+  .then(async packages => {
+    const flattenPackages = packages.reduce((acc, cv) => acc.concat(cv), []);
+    console.log(
+      `Installing dependencies for ${flattenPackages.length} plugins`,
+    );
+    for (const pkg of flattenPackages) {
+      const {stderr} = await exec(
+        // This script is itself executed by yarn (as postinstall script),
+        // therefore another yarn instance is running, while we are trying to
+        // install the plugin dependencies. We are setting a different port
+        // for the mutex of this yarn instance to make sure, it is not blocked
+        // by the yarn instance which is executing this script. Otherwise this
+        // will cause a deadlock.
+        [YARN_PATH, '--mutex', 'network:30330'].join(' '),
+        {
+          cwd: pkg.replace('/package.json', ''),
+        },
+      );
+      if (stderr) {
+        console.warn(stderr);
+      } else {
+        console.log(`Installed dependencies for ${pkg}`);
+      }
+    }
+  })
+  // eslint-disable-next-line
+  .then(() => console.log('📦  Installed all plugin dependencies!'))
+  .catch(err => {
+    console.error('❌  Installing plugin dependencies failed.');
+    console.error(err);
+    process.exit(1);
+  });