Use QPL-managed QPLCore and PigeonClient (#1612)

Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/1612

* Use the QPL-managed QPLCore and PigeonClient.

**Facebook:**

js-shared/qpl and js-shared/pigeon-client are maintained by QPL in xplat/js-shared. I've updated the Metro config and tsconfig to allow the packages to be imported without breaking the open-source version.

Reviewed By: passy

Differential Revision: D24358369

fbshipit-source-id: 7f13d6c99d8ca6ebcd0e66bf0e5f25069370cce7

desktop/app/src/App.tsx

@@ -45,10 +45,7 @@ import StatusBar from './chrome/StatusBar';
 import SettingsSheet from './chrome/SettingsSheet';
 import DoctorSheet from './chrome/DoctorSheet';
 import ChangelogSheet, {hasNewChangesToShow} from './chrome/ChangelogSheet';
-import QuickPerformanceLogger, {
-  QuickLogActionType,
-  FLIPPER_QPL_EVENTS,
-} from './fb-stubs/QPL';
+import QPL, {QuickLogActionType, FLIPPER_QPL_EVENTS} from './fb-stubs/QPL';
 
 const version = remote.app.getVersion();
 
@@ -86,15 +83,8 @@ export function registerStartupTime(logger: Logger) {
   ipcRenderer.on('getLaunchTime', (_: any, launchStartTime: number) => {
     logger.track('performance', 'launchTime', launchEndTime - launchStartTime);
 
-    QuickPerformanceLogger.markerPoint(
-      FLIPPER_QPL_EVENTS.STARTUP,
-      'launchStartTime',
-      undefined,
-      0,
-      launchStartTime,
-    );
-
-    QuickPerformanceLogger.markerEnd(
+    QPL.markerStart(FLIPPER_QPL_EVENTS.STARTUP, 0, launchStartTime);
+    QPL.markerEnd(
       FLIPPER_QPL_EVENTS.STARTUP,
       QuickLogActionType.SUCCESS,
       0,

desktop/app/src/fb-stubs/QPL.tsx

@@ -19,6 +19,18 @@ export enum QuickLogActionType {
 export enum FLIPPER_QPL_EVENTS {
   STARTUP = 52035585,
 }
+
+interface Annotations {
+  string: {[key: string]: string} | null | undefined;
+  int: {[key: string]: number} | null | undefined;
+  double: {[key: string]: number} | null | undefined;
+  bool: {[key: string]: boolean} | null | undefined;
+  string_array: {[key: string]: string[]} | null | undefined;
+  int_array: {[key: string]: number[]} | null | undefined;
+  double_array: {[key: string]: number[]} | null | undefined;
+  bool_array: {[key: string]: boolean[]} | null | undefined;
+}
+
 class QuickPerformanceLogger {
   markerStart(
     _markerId: number,
@@ -29,9 +41,11 @@ class QuickPerformanceLogger {
   markerPoint(
     _markerId: number,
     _name: string,
-    _data?: string,
-    _instanceKey?: number,
-    _timestamp?: DOMHighResTimeStamp,
+    _options?: {
+      instanceKey?: number;
+      data?: Annotations | null | undefined;
+      timestamp?: DOMHighResTimeStamp;
+    },
   ): void {}
 
   markerEnd(

desktop/app/src/init.tsx

@@ -30,7 +30,6 @@ import {cache} from 'emotion';
 import {CacheProvider} from '@emotion/core';
 import {enableMapSet} from 'immer';
 import os from 'os';
-import QuickPerformanceLogger, {FLIPPER_QPL_EVENTS} from './fb-stubs/QPL';
 import {PopoverProvider} from './ui/components/PopoverProvider';
 import {initializeFlipperLibImplementation} from './utils/flipperLibImplementation';
 import {enableConsoleHook} from './chrome/ConsoleLogs';
@@ -45,13 +44,8 @@ if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   global.electronRequire('mac-ca');
 }
 
-const [s, ns] = process.hrtime();
-const launchTime = s * 1e3 + ns / 1e6;
-
 const logger = initLogger(store);
 
-QuickPerformanceLogger.markerStart(FLIPPER_QPL_EVENTS.STARTUP, 0, launchTime);
-
 enableMapSet();
 
 GK.init();

desktop/scripts/get-app-watch-folders.ts

@@ -10,7 +10,8 @@
 import fs from 'fs-extra';
 import path from 'path';
 import {getWatchFolders} from 'flipper-pkg-lib';
-import {appDir, pluginsDir} from './paths';
+import {appDir, pluginsDir, jsSharedDir} from './paths';
+import isFB from './isFB';
 
 /**
  * Flipper references code from below plugins directly. Such directly referenced plugins
@@ -30,6 +31,9 @@ export default async function getAppWatchFolders() {
     ),
   );
   const watchFolders = ([] as string[]).concat(...getWatchFoldersResults);
+  if (isFB) {
+    watchFolders.push(jsSharedDir);
+  }
   return watchFolders
     .filter((value, index, self) => self.indexOf(value) === index)
     .filter(fs.pathExistsSync);

desktop/scripts/paths.ts

@@ -8,6 +8,7 @@
  */
 
 import path from 'path';
+import isFB from './isFB';
 
 export const rootDir = path.resolve(__dirname, '..');
 export const appDir = path.join(rootDir, 'app');
@@ -22,3 +23,4 @@ export const babelTransformationsDir = path.resolve(
   'babel-transformer',
   'src',
 );
+export const jsSharedDir = isFB ? path.resolve(rootDir, '../../js-shared') : '';

desktop/tsconfig.base.json

@@ -22,6 +22,7 @@
       "flipper-plugin": ["./flipper-plugin/src"],
       "eslint-plugin-flipper": ["./eslint-plugin-flipper/src"],
       "flipper-*": ["./*/src"],
+      "@js-shared/*": ["../../js-shared/*"],
       "*": ["./*", "./types/*"]
     }
   }