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

.eslintignore

@@ -1,11 +1,5 @@
 *.d.ts
-*.bundle.js
-src/fb/plugins/relaydevtools/relay-devtools/*
-latest
-resources
-templates
 node_modules
-flow-typed
 lib
 !.eslintrc.js
 dist

.flowconfig

@@ -5,16 +5,16 @@
 .*/pkg/.*
 .*/dist/.*
 .*/static/.*
-<PROJECT_ROOT>/src/fb/plugins/relaydevtools/relay-devtools/DevtoolsUI.js$
+<PROJECT_ROOT>/desktop/src/fb/plugins/relaydevtools/relay-devtools/DevtoolsUI.js$
 .*/website/.*
-<PROJECT_ROOT>/src/plugins/sections/d3/d3.js$
+<PROJECT_ROOT>/desktop/src/plugins/sections/d3/d3.js$
 .*\.tsx
 .*/node_modules/.*
-<PROJECT_ROOT>/doctor/.*
+<PROJECT_ROOT>/desktop/doctor/.*
 <PROJECT_ROOT>/react-native/ReactNativeFlipperExample/.*
 
 [libs]
-flow-typed
+desktop/flow-typed
 
 [options]
 esproposal.export_star_as=enable

.github/workflows/nodejs-doctor.yml

@@ -7,17 +7,20 @@ jobs:
 
     runs-on: 'ubuntu-latest'
 
+    env:
+      doctor-directory: ./desktop/doctor
+
     steps:
     - uses: actions/checkout@v1
     - uses: actions/setup-node@v1
       with:
         node-version: '12.x'
     - name: install
-      working-directory: doctor
+      working-directory: ${{env.doctor-directory}}
       run: yarn
     - name: test
-      working-directory: doctor
+      working-directory: ${{env.doctor-directory}}
       run: yarn test
     - name: run
-      working-directory: doctor
+      working-directory: ${{env.doctor-directory}}
       run: yarn run run

.github/workflows/nodejs-pkg.yml

@@ -7,17 +7,20 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    env:
+      pkg-directory: ./desktop/pkg
+
     steps:
     - uses: actions/checkout@v1
     - uses: actions/setup-node@v1
       with:
         node-version: '12.x'
     - name: install
-      working-directory: pkg
+      working-directory: ${{env.pkg-directory}}
       run: yarn
     - name: test
-      working-directory: pkg
+      working-directory: ${{env.pkg-directory}}
       run: yarn test
     - name: run
-      working-directory: pkg
+      working-directory: ${{env.pkg-directory}}
       run: bin/run

.github/workflows/nodejs.yml

@@ -7,6 +7,9 @@ jobs:
 
     runs-on: ${{ matrix.os }}
 
+    env:
+      desktop-directory: ./desktop    
+
     strategy:
       matrix:
         node-version: [12.x]
@@ -20,19 +23,25 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - name: yarn install
       run: yarn
+      working-directory: ${{env.desktop-directory}}
     - name: lint
       run: yarn lint
+      working-directory: ${{env.desktop-directory}}
     - name: test
       run: yarn test
+      working-directory: ${{env.desktop-directory}}
     - name: build linux
       if: matrix.os == 'ubuntu-latest'
       run: yarn build --linux
+      working-directory: ${{env.desktop-directory}}
     - name: build macos
       if: matrix.os == 'macos-latest'
       run: yarn build --mac --mac-dmg
+      working-directory: ${{env.desktop-directory}}
     - name: build windows
       if: matrix.os == 'windows-latest'
       run: yarn build --win
+      working-directory: ${{env.desktop-directory}}
     - name: upload linux artifact
       uses: actions/upload-artifact@v1
       if: matrix.os == 'ubuntu-latest'

.gitignore

@@ -2,7 +2,10 @@ node_modules
 dist
 website/build
 yarn-error.log
-static/main.bundle.*
+bundle.js
+bundle.map
+*.bundle.js
+*.bundle.map
 
 # conflicts with FB internal infra
 .watchmanconfig

.travis.yml

@@ -33,6 +33,7 @@ matrix:
         - "11"
 
       install:
+        - cd desktop
         - yarn
 
       script:        

README.md

@@ -38,14 +38,14 @@ Both Flipper's desktop app and native mobile SDKs are open-source and MIT licens
 
 This repository includes all parts of Flipper. This includes:
 
-* Flipper's desktop app built using [Electron](https://electronjs.org) (`/src`)
+* Flipper's desktop app built using [Electron](https://electronjs.org) (`/desktop`)
 * native Flipper SDKs for iOS (`/iOS`)
 * native Flipper SDKs for Android (`/android`)
 * Plugins:
-  * Logs (`/src/device-plugins/logs`)
-  * Layout inspector (`/src/plugins/layout`)
-  * Network inspector (`/src/plugins/network`)
-  * Shared Preferences/NSUserDefaults inspector (`/src/plugins/shared_preferences`)
+  * Logs (`/desktop/src/device-plugins/logs`)
+  * Layout inspector (`/desktop/src/plugins/layout`)
+  * Network inspector (`/desktop/src/plugins/network`)
+  * Shared Preferences/NSUserDefaults inspector (`/desktop/src/plugins/shared_preferences`)
 * website and documentation (`/website` / `/docs`)
 
 # Getting started

desktop/.eslintignore

@@ -0,0 +1,14 @@
+*.d.ts
+*.bundle.js
+src/fb/plugins/relaydevtools/relay-devtools/*
+latest
+resources
+templates
+node_modules
+flow-typed
+lib
+!.eslintrc.js
+dist
+website/build
+react-native/ReactNativeFlipperExample
+scripts/generate-changelog.js

desktop/.vscode/launch.json

@@ -36,8 +36,7 @@
     "runtimeArgs": [
       "--require",
       "ts-node/register"
-    ],
-    "cwd": "${workspaceFolder}"
+    ]
  }
   ],
   "compounds": [

desktop/scripts/build-headless.ts

@@ -95,7 +95,7 @@ async function createZip(buildDir: string, distDir: string, targets: string[]) {
 
   process.env.BUILD_HEADLESS = 'true';
   const buildDir = await buildFolder();
-  const distDir = path.join(__dirname, '..', 'dist');
+  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'));

desktop/scripts/build-release.ts

@@ -24,12 +24,12 @@ import fetch from 'node-fetch';
 import {getIcons, buildLocalIconPath, getIconURL} from '../src/utils/icons';
 
 function generateManifest(versionNumber: string) {
-  const filePath = path.join(__dirname, '..', 'dist');
+  const filePath = path.join(__dirname, '..', '..', 'dist');
   if (!fs.existsSync(filePath)) {
     fs.mkdirSync(filePath);
   }
   fs.writeFileSync(
-    path.join(__dirname, '../dist/manifest.json'),
+    path.join(__dirname, '..', '..', 'dist', 'manifest.json'),
     JSON.stringify({
       package: 'com.facebook.sonar',
       version_name: versionNumber,
@@ -74,7 +74,7 @@ async function buildDist(buildFolder: string) {
     }
     postBuildCallbacks.push(() =>
       spawn('zip', ['-qyr9', '../Flipper-mac.zip', 'Flipper.app'], {
-        cwd: path.join(__dirname, '..', 'dist', 'mac'),
+        cwd: path.join(__dirname, '..', '..', 'dist', 'mac'),
         encoding: 'utf-8',
       }),
     );
@@ -108,7 +108,7 @@ async function buildDist(buildFolder: string) {
         appId: `com.facebook.sonar`,
         directories: {
           buildResources: path.join(__dirname, '..', 'static'),
-          output: path.join(__dirname, '..', 'dist'),
+          output: path.join(__dirname, '..', '..', 'dist'),
         },
         electronDownload: electronDownloadOptions,
         npmRebuild: false,

desktop/scripts/build-utils.ts

@@ -81,7 +81,7 @@ export function compile(buildFolder: string, entry: string) {
         ),
       },
       resolver: {
-        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
       },
     },
     {
@@ -126,7 +126,7 @@ export async function compileMain({dev}: {dev: boolean}) {
       },
       resolver: {
         sourceExts: ['tsx', 'ts', 'js'],
-        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
       },
     });
     await Metro.runBuild(config, {

desktop/scripts/generate-changelog.js

@@ -17,14 +17,15 @@ const path = require('path');
 const fs = require('fs');
 const cp = require('child_process');
 
-const root = path.join(__dirname, '..');
+const desktopRoot = path.resolve(__dirname, '..');
+const root = path.resolve(desktopRoot, '..');
 
-const version = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')).version;
+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.join(root, 'CHANGELOG.md');
+const fChangelog = path.resolve(root, 'CHANGELOG.md');
 
 const lastCommit = cp
   .execSync(`hg log --limit 1 --template '{node}'`, {cwd: root})

desktop/scripts/prepare-watchman-config.js

@@ -12,7 +12,8 @@ const util = require('util');
 const {exists: existsImport, copyFile} = require('fs');
 const exists = util.promisify(existsImport);
 
-const rootDir = path.resolve(__dirname, '..');
+const desktopRootDir = path.resolve(__dirname, '..');
+const rootDir = path.resolve(desktopRootDir, '..');
 const hasGit = exists(path.join(rootDir, '.git'));
 
 async function prepareWatchmanConfig(dir) {
@@ -27,4 +28,4 @@ async function prepareWatchmanConfig(dir) {
 }
 
 prepareWatchmanConfig(rootDir);
-prepareWatchmanConfig(path.join(rootDir, 'static'));
+prepareWatchmanConfig(path.join(desktopRootDir, 'static'));

desktop/scripts/start-dev-server.ts

@@ -90,7 +90,7 @@ function startMetroServer(app: Express) {
       ),
     },
     resolver: {
-      blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      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', '.');