Clean up packages and types

Summary:
This diff removes most deps from the root package.json, which now only contains electron and shared build / test infra structure: lint, prettier, jest, typescript.

This makes it possible to control much better which packages are used where, as all sub packages now have their deps explicitly in their package.json instead of incidentally shared. This allows for example to disable DOM types for all packages by default (flipper-plugin, ui(-core) and app still request it), and in the next diff I hope to add to this that nodeJS types are no longer shared either, so that UI oriented packages will generate compile errors when using Node built-ins

This diff removes most deps that were currently unused, and dedupes a bunch of other ones, so the build should probably be a bit smaller now as well:

{F686704253}

{F686704295}

Reviewed By: antonk52

Differential Revision: D33062859

fbshipit-source-id: 5afaa4f2103d055188382a3370c1fffa295a298a

desktop/.vscode/settings.json

@@ -22,7 +22,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"

desktop/app/src/electron/initializeElectron.tsx

@@ -29,6 +29,12 @@ import type {Icon, RenderHost} from 'flipper-ui-core';
 import {getLocalIconUrl} from '../utils/icons';
 import {getCPUUsage} from 'process';
 
+declare const electronRequire: {
+  (name: string): any;
+  resolve: (module: string) => string;
+  cache: {[module: string]: any};
+};
+
 export function initializeElectron(
   flipperServer: FlipperServer,
   flipperServerConfig: FlipperServerConfig,
@@ -176,7 +182,7 @@ export function initializeElectron(
     },
     flipperServer,
     async requirePlugin(path) {
-      return global.electronRequire(path);
+      return electronRequire(path);
     },
     getStaticResourceUrl(relativePath): string {
       return (
@@ -193,11 +199,11 @@ export function initializeElectron(
       );
     },
     unloadModule(path: string) {
-      const resolvedPath = global.electronRequire.resolve(path);
+      const resolvedPath = electronRequire.resolve(path);
-      if (!resolvedPath || !global.electronRequire.cache[resolvedPath]) {
+      if (!resolvedPath || !electronRequire.cache[resolvedPath]) {
         return;
       }
-      delete global.electronRequire.cache[resolvedPath];
+      delete electronRequire.cache[resolvedPath];
     },
     getPercentCPUUsage() {
       return getCPUUsage().percentCPUUsage;

desktop/app/src/init.tsx

@@ -50,13 +50,19 @@ declare global {
   }
 }
 
+declare const electronRequire: {
+  (name: string): any;
+  resolve: (module: string) => string;
+  cache: {[module: string]: any};
+};
+
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   // By default Node.JS has its internal certificate storage and doesn't use
   // the system store. Because of this, it's impossible to access ondemand / devserver
   // which are signed using some internal self-issued FB certificates. These certificates
   // are automatically installed to MacOS system store on FB machines, so here we're using
   // this "mac-ca" library to load them into Node.JS.
-  global.electronRequire('mac-ca');
+  electronRequire('mac-ca');
 }
 
 async function start() {
@@ -73,7 +79,7 @@ async function start() {
   let keytar: any = undefined;
   try {
     if (!isTest()) {
-      keytar = (global.electronRequire || require)(
+      keytar = electronRequire(
         path.join(appPath, 'native-modules', `keytar-${process.platform}.node`),
       );
     }

desktop/app/tsconfig.json

@@ -4,7 +4,8 @@
     "outDir": "lib",
     "rootDir": "src",
     "esModuleInterop": true,
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "lib": ["DOM"]
   },
   "references": [
     {

desktop/doctor/package.json

@@ -7,21 +7,9 @@
   "types": "lib/index.d.ts",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^16.11.7",
     "@types/fb-watchman": "2.0.1",
-    "@types/jest": "^26.0.24",
+    "flipper-common": "0.0.0"
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "flipper-common": "0.0.0",
-    "jest": "^26.6.3",
-    "prettier": "^2.4.1",
-    "ts-jest": "^26.5.6",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.4.4"
   },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",
@@ -38,7 +26,6 @@
   ],
   "author": "Facebook, Inc",
   "dependencies": {
-    "@types/node": "^16.11.7",
     "envinfo": "^7.8.1",
     "fb-watchman": "^2.0.1"
   }

desktop/doctor/src/environmentInfo.ts

@@ -8,7 +8,7 @@
  */
 
 import {run} from 'envinfo';
-import {FlipperDoctor} from 'flipper-common';
+import type {FlipperDoctor} from 'flipper-common';
 
 async function retrieveAndParseEnvInfo(): Promise<any> {
   return JSON.parse(

desktop/doctor/src/index.ts

@@ -15,7 +15,7 @@ export {getEnvInfo} from './environmentInfo';
 import * as watchman from 'fb-watchman';
 import * as fs from 'fs';
 import * as path from 'path';
-import {FlipperDoctor} from 'flipper-common';
+import type {FlipperDoctor} from 'flipper-common';
 
 export function getHealthchecks(): FlipperDoctor.Healthchecks {
   return {

desktop/eslint-plugin-flipper/package.json

@@ -11,19 +11,10 @@
   "bugs": "https://github.com/facebook/flipper/issues",
   "dependencies": {
     "@typescript-eslint/experimental-utils": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "fs-extra": "^10.0.0"
   },
-  "devDependencies": {
+  "devDependencies": {},
-    "@types/jest": "26.0.24",
-    "@typescript-eslint/parser": "^4.33.0",
-    "flipper-test-utils": "0.0.0",
-    "jest": "^26.6.3",
-    "prettier": "^2.4.1",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^26.5.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.4.4"
-  },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",
     "build": "tsc -b",

desktop/flipper-dump/package.json

@@ -12,10 +12,11 @@
   "dependencies": {
     "flipper-common": "0.0.0",
     "flipper-server-core": "0.0.0",
-    "ts-node": "^10.2.1",
     "yargs": "^17.2.1"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@types/node": "^16.11.7"
+  },
   "peerDependencies": {},
   "scripts": {
     "start": "ts-node src/index.tsx",

desktop/flipper-plugin/package.json

@@ -13,6 +13,9 @@
     "@emotion/css": "^11.5.0",
     "@emotion/react": "^11.6.0",
     "@reach/observe-rect": "^1.2.0",
+    "@types/react": "17.0.34",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^17.0.11",
     "eventemitter3": "^4.0.7",
     "flipper-common": "0.0.0",
     "immer": "^9.0.6",
@@ -27,8 +30,7 @@
   "devDependencies": {
     "@types/string-natural-compare": "^3.0.2",
     "@types/uuid": "^8.3.3",
-    "jest-mock-console": "^1.2.3",
+    "jest-mock-console": "^1.2.3"
-    "typescript": "^4.4.4"
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.2.2",

desktop/flipper-plugin/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "lib": ["dom"]
   },
   "references": [
     {

desktop/flipper-server-core/package.json

@@ -42,10 +42,15 @@
     "xdg-basedir": "^4.0.0"
   },
   "devDependencies": {
+    "@types/invariant": "^2.2.35",
     "@types/memorystream": "^0.3.0",
     "@types/node": "^15.12.5",
     "@types/rimraf": "^3.0.2",
+    "@types/rsocket-core": "^0.0.7",
+    "@types/rsocket-tcp-server": "^0.0.2",
     "@types/tmp": "^0.2.2",
+    "@types/ws": "^7.4.7",
+    "@types/which": "^2.0.1",
     "memorystream": "^0.3.1",
     "tmp": "^0.2.1"
   },

desktop/flipper-server-core/src/comms/ServerController.tsx

@@ -231,7 +231,7 @@ class ServerController extends EventEmitter implements ServerEventsListener {
     }
     id = buildClientId(clientQuery);
     this.timestamps.set(id, {
-      secureStart: performance.now(),
+      secureStart: Date.now(),
       ...tracker,
     });
 
@@ -282,7 +282,7 @@ class ServerController extends EventEmitter implements ServerEventsListener {
     const strippedClientQuery = (({device_id, ...o}) => o)(clientQuery);
     const id = buildClientId({device_id: 'unknown', ...strippedClientQuery});
     this.timestamps.set(id, {
-      insecureStart: performance.now(),
+      insecureStart: Date.now(),
     });
     this.logger.track('usage', 'untrusted-request-handler-called', clientQuery);
     this.connectionTracker.logConnectionAttempt(clientQuery);
@@ -446,7 +446,7 @@ class ServerController extends EventEmitter implements ServerEventsListener {
 
     const tracker = this.timestamps.get(id);
     if (tracker) {
-      const end = performance.now();
+      const end = Date.now();
       const start = tracker.insecureStart
         ? tracker.insecureStart
         : tracker.secureStart;

desktop/flipper-server-core/src/devices/ios/iOSDeviceManager.tsx

@@ -56,26 +56,22 @@ export class IOSDeviceManager {
   private xcodeVersionMismatchFound = false;
   public xcodeCommandLineToolsDetected = false;
 
-  constructor(private flipperServer: FlipperServerImpl) {
+  constructor(private flipperServer: FlipperServerImpl) {}
-    if (typeof window !== 'undefined') {
-      window.addEventListener('beforeunload', () => {
-        this.portForwarders.forEach((process) => process.kill());
-      });
-    }
-  }
 
   private forwardPort(port: number, multiplexChannelPort: number) {
     const child = childProcess.execFile(
       this.portforwardingClient,
       [`-portForward=${port}`, `-multiplexChannelPort=${multiplexChannelPort}`],
       (err, stdout, stderr) => {
-        // This happens on app reloads and doesn't need to be treated as an error.
+        if (err) {
-        console.warn(
+          // This happens on app reloads and doesn't need to be treated as an error.
-          '[conn] Port forwarding app failed to start',
+          console.warn(
-          err,
+            '[conn] Port forwarding app failed to start',
-          stdout,
+            err,
-          stderr,
+            stdout,
-        );
+            stderr,
+          );
+        }
       },
     );
     console.info(

desktop/flipper-server-core/src/devices/metro/MetroDevice.tsx

@@ -11,6 +11,7 @@ import {DeviceLogLevel, MetroReportableEvent} from 'flipper-common';
 import util from 'util';
 import {FlipperServerImpl} from '../../FlipperServerImpl';
 import {ServerDevice} from '../ServerDevice';
+import WebSocket from 'ws';
 
 const metroLogLevelMapping: {[key: string]: DeviceLogLevel} = {
   trace: 'verbose',

desktop/flipper-server-core/src/devices/metro/metroDeviceManager.tsx

@@ -11,6 +11,7 @@ import MetroDevice from './MetroDevice';
 import http from 'http';
 import {parseEnvironmentVariableAsNumber} from '../../utils/environmentVariables';
 import {FlipperServerImpl} from '../../FlipperServerImpl';
+import WebSocket from 'ws';
 
 const METRO_HOST = 'localhost';
 const METRO_PORT = parseEnvironmentVariableAsNumber('METRO_SERVER_PORT', 8081);

desktop/flipper-server-core/src/plugins/PluginManager.tsx

@@ -45,14 +45,12 @@ const getTempDirName = promisify(tmp.dir) as (
 export class PluginManager {
   async start() {
     // This needn't happen immediately and is (light) I/O work.
-    (typeof window !== 'undefined'
+    setTimeout(() => {
-      ? window?.requestIdleCallback
-      : setImmediate)(() => {
       cleanupOldInstalledPluginVersions(maxInstalledPluginVersionsToKeep).catch(
         (err) =>
           console.error('Failed to clean up old installed plugins:', err),
       );
-    });
+    }, 100);
   }
 
   loadDynamicPlugins = loadDynamicPlugins;

desktop/flipper-server/src/startWebServerDev.tsx

@@ -70,7 +70,7 @@ export async function startWebServerDev(
     'electron-requires.js',
   );
   const stubModules = new Set<string>(
-    global.electronRequire(electronRequires).BUILTINS,
+    (global as any).electronRequire(electronRequires).BUILTINS,
   );
   if (!stubModules.size) {
     throw new Error('Failed to load list of Node builtins');

desktop/flipper-ui-browser/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "lib": ["dom"]
   },
   "references": [
     {

desktop/flipper-ui-core/package.json

@@ -15,8 +15,6 @@
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
     "@tanishiking/aho-corasick": "^0.0.1",
-    "@types/archiver": "^5.1.1",
-    "@types/uuid": "^8.3.1",
     "antd": "4.16.8",
     "archiver": "^5.0.2",
     "async-mutex": "^0.3.2",
@@ -68,10 +66,17 @@
     "7zip-bin-mac": "^1.0.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.10.1",
+    "@testing-library/dom": "^8.11.1",
     "@testing-library/react": "^12.1.2",
+    "@types/archiver": "^5.1.1",
+    "@types/deep-equal": "^1.0.1",
     "@types/lodash.memoize": "^4.1.6",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@types/redux-mock-store": "^1.0.3",
     "@types/split2": "^3.2.1",
+    "@types/uuid": "^8.3.1",
     "flipper-test-utils": "0.0.0",
     "mock-fs": "^5.1.2",
     "redux-mock-store": "^1.0.1",

desktop/flipper-ui-core/src/RenderHost.tsx

@@ -9,13 +9,51 @@
 
 import type {NotificationEvents} from './dispatcher/notifications';
 import type {PluginNotification} from './reducers/notifications';
-// TODO: Fix me
-// eslint-disable-next-line no-restricted-imports
-import type {NotificationConstructorOptions} from 'electron';
 import {FlipperLib} from 'flipper-plugin';
 import {FlipperServer, FlipperServerConfig} from 'flipper-common';
 import {Icon} from './utils/icons';
 
+interface NotificationAction {
+  // Docs: https://electronjs.org/docs/api/structures/notification-action
+
+  /**
+   * The label for the given action.
+   */
+  text?: string;
+  /**
+   * The type of action, can be `button`.
+   */
+  type: 'button';
+}
+
+// Subset of electron.d.ts
+interface NotificationConstructorOptions {
+  /**
+   * A title for the notification, which will be shown at the top of the notification
+   * window when it is shown.
+   */
+  title: string;
+  /**
+   * The body text of the notification, which will be displayed below the title or
+   * subtitle.
+   */
+  body: string;
+  /**
+   * Actions to add to the notification. Please read the available actions and
+   * limitations in the `NotificationAction` documentation.
+   *
+   * @platform darwin
+   */
+  actions?: NotificationAction[];
+  /**
+   * A custom title for the close button of an alert. An empty string will cause the
+   * default localized text to be used.
+   *
+   * @platform darwin
+   */
+  closeButtonText?: string;
+}
+
 // Events that are emitted from the main.ts ovr the IPC process bridge in Electron
 type MainProcessEvents = {
   'flipper-protocol-handler': [query: string];

desktop/flipper-ui-core/tsconfig.json

@@ -4,7 +4,8 @@
     "outDir": "lib",
     "rootDir": "src",
     "esModuleInterop": true,
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "lib": ["dom"]
   },
   "references": [
     {

desktop/package.json

@@ -67,71 +67,12 @@
   "category": "facebook-intern",
   "description": "Mobile development tool",
   "devDependencies": {
-    "@adobe/node-fetch-retry": "^2.0.0",
-    "@babel/code-frame": "^7.15.8",
     "@babel/eslint-parser": "^7.16.3",
-    "@jest-runner/electron": "^3.0.1",
-    "@testing-library/dom": "^8.11.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/adobe__node-fetch-retry": "^1.0.2",
-    "@types/algoliasearch": "^4.0.0",
-    "@types/babel__code-frame": "^7.0.3",
-    "@types/babel__core": "^7.1.16",
-    "@types/babel__generator": "^7.6.3",
-    "@types/babel__traverse": "^7.14.2",
-    "@types/decompress": "4.2.4",
-    "@types/deep-equal": "^1.0.1",
-    "@types/detect-port": "^1.3.1",
-    "@types/electron-devtools-installer": "^2.2.0",
-    "@types/express": "^4.17.13",
-    "@types/fb-watchman": "^2.0.1",
-    "@types/form-data": "^2.2.1",
-    "@types/fs-extra": "^9.0.13",
-    "@types/glob": "^7.2.0",
-    "@types/invariant": "^2.2.35",
-    "@types/jest": "^26.0.24",
-    "@types/lodash": "^4.14.177",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/mkdirp": "^1.0.2",
-    "@types/mock-fs": "^4.13.1",
-    "@types/npm-packlist": "^1.1.2",
-    "@types/promise-retry": "^1.1.3",
-    "@types/react": "17.0.34",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-redux": "^7.1.19",
-    "@types/react-test-renderer": "^17.0.1",
-    "@types/react-virtualized": "^9.21.15",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
-    "@types/recharts": "^2.0.0",
-    "@types/recursive-readdir": "^2.2.0",
-    "@types/redux-devtools-extension": "^2.13.2",
-    "@types/redux-mock-store": "^1.0.3",
-    "@types/redux-persist": "^4.3.1",
-    "@types/requestidlecallback": "^0.3.4",
-    "@types/resize-observer-browser": "^0.1.6",
-    "@types/rsocket-core": "^0.0.7",
-    "@types/rsocket-tcp-server": "^0.0.2",
-    "@types/socket.io": "^3.0.2",
-    "@types/testing-library__react": "^10.2.0",
-    "@types/tmp": "^0.2.1",
-    "@types/uuid": "^8.3.1",
-    "@types/which": "^2.0.1",
-    "@types/ws": "^7.4.7",
-    "@types/yargs": "^16.0.1",
-    "@types/yazl": "^2.4.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "ansi-to-html": "^0.7.2",
-    "app-builder-lib": "22.14.8",
     "babel-eslint": "^10.1.0",
-    "chalk": "^4.1.2",
     "cross-env": "^7.0.3",
-    "detect-port": "^1.1.1",
-    "dotenv": "^8.2.0",
     "electron": "11.2.3",
-    "electron-builder": "22.11.7",
     "eslint": "^7.32.0",
     "eslint-config-fbjs": "^3.1.1",
     "eslint-config-prettier": "^8.3.0",
@@ -149,45 +90,17 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-rulesdir": "^0.2.1",
-    "express": "^4.15.2",
-    "fb-watchman": "^2.0.1",
-    "flipper-babel-transformer": "0.0.0",
-    "flipper-common": "0.0.0",
-    "flipper-pkg-lib": "0.0.0",
-    "flipper-plugin-lib": "0.0.0",
-    "fs-extra": "^9.0.0",
-    "glob": "^7.2.0",
-    "ignore": "^5.1.4",
-    "invariant": "^2.2.4",
     "jest": "^26.6.3",
     "jest-environment-jsdom-sixteen": "^2.0.0",
     "jest-fetch-mock": "^3.0.3",
     "less": "^4.1.2",
-    "line-replace": "^2.0.1",
-    "metro": "^0.66.2",
-    "metro-minify-terser": "^0.66.2",
-    "metro-resolver": "^0.66.2",
-    "node-fetch": "^2.6.6",
-    "open": "^8.3.0",
-    "p-filter": "^2.1.0",
-    "p-map": "^4.0.0",
     "patch-package": "^6.4.7",
     "prettier": "^2.4.1",
     "pretty-format": "^27.3.1",
-    "promisify-child-process": "^4.1.0",
-    "react-async": "^10.0.0",
-    "react-refresh": "^0.11.0",
-    "recursive-readdir": "^2.2.2",
-    "redux": "^4.1.2",
     "rimraf": "^3.0.2",
-    "socket.io": "^4.4.0",
-    "tmp": "^0.2.1",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",
-    "typescript": "^4.4.4",
+    "typescript": "^4.4.4"
-    "uuid": "^8.3.2",
-    "yargs": "^17.0.1",
-    "yazl": "^2.5.1"
   },
   "homepage": "https://fbflipper.com/",
   "icon": "icon.png",
@@ -265,6 +178,7 @@
   "version": "0.125.0",
   "workspaces": {
     "packages": [
+      "scripts",
       "app",
       "app/src/fb/*",
       "babel-transformer",

desktop/pkg-lib/package.json

@@ -19,17 +19,11 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^26.0.24",
+    "@types/mock-fs": "^4.13.1",
     "@types/node": "^15.12.5",
+    "@types/npm-packlist": "^1.1.2",
     "flipper-test-utils": "0.0.0",
-    "globby": "^12.0.2",
+    "mock-fs": "^5.1.2"
-    "jest": "^26.6.3",
-    "mock-fs": "^5.1.2",
-    "prettier": "^2.4.1",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^26.5.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.4.4"
   },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",

desktop/pkg/package.json

@@ -33,14 +33,8 @@
     "@types/inquirer": "^7.3.3",
     "@types/jest": "^26.0.24",
     "@types/node": "^15.12.5",
-    "flipper-test-utils": "0.0.0",
+    "@types/recursive-readdir": "^2.2.0",
-    "globby": "^11.0.0",
+    "flipper-test-utils": "0.0.0"
-    "jest": "^26.6.3",
-    "prettier": "^2.4.1",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^26.5.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.4.4"
   },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",

desktop/plugin-lib/package.json

@@ -23,15 +23,14 @@
     "tmp": "^0.2.1"
   },
   "devDependencies": {
+    "@types/decompress": "4.2.4",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^26.0.24",
+    "@types/mock-fs": "^4.13.1",
     "@types/node": "^15.12.5",
     "flipper-test-utils": "0.0.0",
-    "jest": "^26.6.3",
     "mock-fs": "^5.1.2",
-    "rimraf": "^3.0.2",
+    "ts-jest": "^26.5.6"
-    "ts-jest": "^26.5.6",
-    "typescript": "^4.4.4"
   },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",

desktop/plugins/package.json

@@ -24,6 +24,6 @@
     "react-dom": "*"
   },
   "scripts": {
-    "postinstall": "../ts-node ./postinstall.ts"
+    "postinstall": "cd .. && ./ts-node ./plugins/postinstall.ts"
   }
 }

desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx

@@ -31,7 +31,9 @@ function createDevToolsNode(
   wrapper.style.height = '100%';
   wrapper.style.width = '100%';
 
-  const iframe = document.createElement('webview');
+  const iframe = document.createElement(
+    'webview',
+  ) as unknown as HTMLIFrameElement;
   iframe.style.height = '100%';
   iframe.style.width = '100%';
 

desktop/plugins/tsconfig.json

@@ -4,7 +4,8 @@
         "noEmit": true,
         "baseUrl": ".",
         "rootDir": ".",
-        "outDir": "lib"
+        "outDir": "lib",
+        "lib": ["DOM"]
     },
     "include": [
         "public/",

desktop/scripts/build-release.ts

@@ -29,14 +29,13 @@ import {
   moveSourceMaps,
 } from './build-utils';
 import fetch from '@adobe/node-fetch-retry';
-import {buildLocalIconPath, Icons} from '../app/src/utils/icons';
 import isFB from './isFB';
 import copyPackageWithDependencies from './copy-package-with-dependencies';
 import {staticDir, distDir} from './paths';
 import yargs from 'yargs';
 import {WinPackager} from 'app-builder-lib/out/winPackager';
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line node/no-extraneous-import
-import {Icon, getPublicIconUrl} from 'flipper-ui-core/src/utils/icons';
+import type {Icon} from 'flipper-ui-core';
 
 // Used in some places to avoid release-to-release changes. Needs
 // to be this high for some MacOS-specific things that I can't
@@ -159,7 +158,9 @@ async function modifyPackageManifest(
 ) {
   // eslint-disable-next-line no-console
   console.log('Creating package.json manifest');
+  // eslint-disable-next-line flipper/no-relative-imports-across-packages
   const manifest = require('../package.json');
+  // eslint-disable-next-line flipper/no-relative-imports-across-packages
   const manifestStatic = require('../static/package.json');
 
   // The manifest's dependencies are bundled with the final app by
@@ -392,3 +393,20 @@ async function downloadIcons(buildFolder: string) {
   console.log('✨  Done');
   process.exit();
 })();
+
+export type Icons = {
+  [key: string]: Icon['size'][];
+};
+
+// should match flipper-ui-core/src/utils/icons.tsx
+export function getPublicIconUrl({name, variant, size, density}: Icon) {
+  return `https://facebook.com/assets/?name=${name}&variant=${variant}&size=${size}&set=facebook_icons&density=${density}x`;
+}
+
+// should match app/src/utils/icons.tsx
+function buildLocalIconPath(icon: Icon) {
+  return path.join(
+    'icons',
+    `${icon.name}-${icon.variant}-${icon.size}@${icon.density}x.png`,
+  );
+}

desktop/scripts/build-utils.ts

@@ -33,6 +33,7 @@ import {
   browserUiDir,
 } from './paths';
 
+// eslint-disable-next-line flipper/no-relative-imports-across-packages
 const {version} = require('../package.json');
 
 const dev = process.env.NODE_ENV !== 'production';
@@ -344,6 +345,7 @@ export function buildFolder(): Promise<string> {
   });
 }
 export function getVersionNumber(buildNumber?: number) {
+  // eslint-disable-next-line flipper/no-relative-imports-across-packages
   let {version} = require('../package.json');
   if (buildNumber) {
     // Unique build number is passed as --version parameter from Sandcastle

desktop/scripts/jest-setup-after.ts

@@ -9,11 +9,12 @@
 
 // jest-setup-after will run after Jest has been initialized, so that it can be adapted.
 
+// eslint-disable-next-line node/no-extraneous-import
 import {cleanup} from '@testing-library/react';
 import {resolve} from 'path';
 import os from 'os';
 
-window.FlipperRenderHostInstance = createStubRenderHost();
+(window as any).FlipperRenderHostInstance = createStubRenderHost();
 
 import {TestUtils} from 'flipper-plugin';
 import {
@@ -52,7 +53,7 @@ if (!test) {
 
 beforeEach(() => {
   // Fresh mock flipperServer for every test
-  window.FlipperRenderHostInstance = createStubRenderHost();
+  (window as any).FlipperRenderHostInstance = createStubRenderHost();
 });
 
 afterEach(cleanup);

desktop/scripts/jest-transform.js

@@ -14,7 +14,7 @@ if (isFB && process.env.FLIPPER_FB === undefined) {
 }
 process.env.FLIPPER_TEST_RUNNER = 'true';
 
-// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line import/no-unresolved,flipper/no-relative-imports-across-packages
 const {transform} = require('../babel-transformer/lib/transform-jest');
 
 module.exports = {

desktop/scripts/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "flipper-scripts",
+    "private": true,
+    "version": "0.0.0",
+    "description": "Utility scripts to manage Flipper",
+    "repository": "facebook/flipper",
+    "license": "MIT",
+    "bugs": "https://github.com/facebook/flipper/issues",
+    "devDependencies": {
+      "@adobe/node-fetch-retry": "^2.0.0",
+      "@babel/code-frame": "^7.15.8",
+      "@types/adobe__node-fetch-retry": "^1.0.2",
+      "@types/babel__code-frame": "^7.0.3",
+      "@types/detect-port": "^1.3.1",
+      "@types/fs-extra": "^9.0.13",
+      "@types/node": "^15.12.5",
+      "ansi-to-html": "^0.7.2",
+      "app-builder-lib": "22.14.8",
+      "chalk": "^4.1.2",
+      "detect-port": "^1.1.1",
+      "dotenv": "^8.2.0",
+      "electron-builder": "22.11.7",
+      "express": "^4.15.2",
+      "fb-watchman": "^2.0.1",
+      "flipper-common": "0.0.0",
+      "flipper-pkg-lib": "0.0.0",
+      "flipper-plugin-lib": "0.0.0",
+      "fs-extra": "^9.0.0",
+      "glob": "^7.2.0",
+      "ignore": "^5.1.4",
+      "metro": "^0.66.2",
+      "metro-minify-terser": "^0.66.2",
+      "open": "^8.3.0",
+      "p-filter": "^2.1.0",
+      "p-map": "^4.0.0",
+      "promisify-child-process": "^4.1.0",
+      "socket.io": "^4.4.0",
+      "tmp": "^0.2.1",
+      "uuid": "^8.3.2",
+      "yargs": "^17.0.1"
+    },
+    "scripts": {
+    },
+    "files": [
+      "lib/**/*"
+    ],
+    "homepage": "https://github.com/facebook/flipper",
+    "keywords": [
+      "Flipper"
+    ],
+    "author": "Facebook, Inc"
+  }

desktop/scripts/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": ".",
+    "lib": ["DOM", "ES2019"],
+    "noEmit": true,
+    "esModuleInterop": true
+  },
+  "references": [
+    {
+      "path": "../flipper-common"
+    },
+    {
+      "path": "../pkg-lib"
+    },
+    {
+      "path": "../plugin-lib"
+    },
+    {
+      "path": "../flipper-plugin"
+    }
+  ]
+}

desktop/static/main.ts

@@ -31,6 +31,7 @@ import isFB from './fb-stubs/isFB';
 import delegateToLauncher from './launcher';
 import yargs from 'yargs';
 import {promisify} from 'util';
+import process from 'process';
 
 const VERSION: string = (global as any).__VERSION__;
 

desktop/static/package.json

@@ -13,5 +13,8 @@
     "ws": "^8.2.3",
     "xdg-basedir": "^4.0.0",
     "yargs": "^16.2.0"
+  },
+  "devDependencies": {
+    "@types/mkdirp": "^1.0.2"
   }
 }

desktop/ts-node

@@ -4,4 +4,4 @@
 # This source code is licensed under the MIT license found in the
 # LICENSE file in the root directory of this source tree.
 
-env TS_NODE_TRANSPILE_ONLY=true node --max_old_space_size=4096 --require ts-node/register "$@"
+env TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=scripts/tsconfig.json node --max_old_space_size=4096 --require ts-node/register "$@"

desktop/ts-node.cmd

@@ -5,4 +5,4 @@
 
 @echo off
 
-set TS_NODE_TRANSPILE_ONLY=true & node --max_old_space_size=4096 --require ts-node/register %*
+set TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=scripts/tsconfig.json & node --max_old_space_size=4096 --require ts-node/register %*

desktop/tsconfig.base.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "lib": ["es7", "dom", "es2019"],
+    "lib": ["es7", "es2019"],
     "esModuleInterop": true,
     "target": "ES2019",
     "removeComments": true,

desktop/tsconfig.json

@@ -1,14 +1,15 @@
 {
-  "extends": "./tsconfig.base.json",
+    "extends": "./tsconfig.base.json",
-  "compilerOptions": {
+    "compilerOptions": {
-    "noEmit": true,
+      "noEmit": true,
-    "incremental": false,
+      "incremental": false,
-    "composite": false,
+      "composite": false,
-    "allowJs": false
+      "allowJs": false,
-  },
+      "lib": ["DOM"] // for unit tests
-  "exclude": [
+    },
-    "**/node_modules/",
+    "exclude": [
-    "**/lib/",
+      "**/node_modules/",
-    "**/dist/"
+      "**/lib/",
-  ]
+      "**/dist/"
-}
+    ]
+  }