Unshare global types

Summary:
This diff adds `types` fields on the compiler config for every project. This way we can make sure that for example node types and packages are not available in flipper-ui-core. Without an explicit types field, all types would be shared between all packages, and implicitly included into the compilation of everything. For the same reason `types/index.d.ts` has been removed, we want to be intentional on which types are being used in which package.

This diff does most of the work, the next diff will fine tune the globals, and do some further cleanup.

As an alternative solution I first tried a `nohoist: **/node_modules/types/**` and make sure every package list explicitly the types used in package json, which works but is much more error prone, as for example two different react types versions in two packages will cause the most unreadable compiler error due to the types not being shared and not literally the same.

Reviewed By: lawrencelomax

Differential Revision: D33124441

fbshipit-source-id: c2b9d768f845ac28005d8331ef5fa1066c7e4cd7

desktop/.eslintignore

@@ -15,3 +15,4 @@ static/index.js
 static/defaultPlugins/*
 app/src/defaultPlugins/index.tsx
 generated
+flipper-server/static

desktop/.eslintrc.js

@@ -27,6 +27,8 @@ const builtInModules = [
   'immer',
   '@emotion/styled',
   '@ant-design/icons',
+  'jest',
+  'ts-jest',
 ];
 
 const prettierConfig = require('./.prettierrc.json');

desktop/app/tsconfig.json

@@ -5,7 +5,7 @@
     "rootDir": "src",
     "esModuleInterop": true,
     "emitDeclarationOnly": true,
-    "lib": ["DOM"]
+    "lib": ["DOM", "ES2019"]
   },
   "references": [
     {

desktop/babel-transformer/package.json

@@ -30,13 +30,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@types/jest": "26.0.24",
+    "rimraf": "^3.0.2"
-    "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/babel-transformer/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
   }
 }

desktop/doctor/tsconfig.json

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

desktop/eslint-plugin-flipper/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["node"]
   }
 }

desktop/flipper-common/src/utils/isTest.tsx

@@ -7,7 +7,8 @@
  * @format
  */
 
-const _isTest = !!process.env.JEST_WORKER_ID;
+declare const process: any;
+const _isTest = typeof process !== 'undefined' && !!process.env.JEST_WORKER_ID;
 
 export function isTest(): boolean {
   return _isTest;

desktop/flipper-common/tsconfig.json

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

desktop/flipper-dump/tsconfig.json

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

desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx

@@ -106,7 +106,10 @@ export const DataSourceRendererVirtual: <T extends object, C>(
     parentRef,
     useObserver: isUnitTest ? () => ({height: 500, width: 1000}) : undefined,
     // eslint-disable-next-line
-      estimateSize: useCallback(() => defaultRowHeight, [forceHeightRecalculation.current, defaultRowHeight]),
+    estimateSize: useCallback(
+      () => defaultRowHeight,
+      [forceHeightRecalculation.current, defaultRowHeight],
+    ),
     // TODO: optimise by using setting a keyExtractor if DataSource is keyed
     overscan: 0,
   });
@@ -130,7 +133,7 @@ export const DataSourceRendererVirtual: <T extends object, C>(
       };
 
       let unmounted = false;
-      let timeoutHandle: NodeJS.Timeout | undefined = undefined;
+      let timeoutHandle: any = undefined;
 
       function rerender(prio: 1 | 2, invalidateHeights = false) {
         if (invalidateHeights && !useFixedRowHeight) {
@@ -343,6 +346,8 @@ export function useTableRedraw() {
   return useContext(RedrawContext);
 }
 
+declare const process: any;
+
 function useInUnitTest(): boolean {
-  return process.env.NODE_ENV === 'test';
+  return typeof process !== 'undefined' && process?.env?.NODE_ENV === 'test';
 }

desktop/flipper-plugin/src/plugin/PluginBase.tsx

@@ -373,14 +373,10 @@ export abstract class BasePluginInstance {
     this.assertNotDestroyed();
     if (deepLink !== this.lastDeeplink) {
       this.lastDeeplink = deepLink;
-      if (typeof setImmediate !== 'undefined') {
+      // we only want to trigger deeplinks after the plugin had a chance to render
-        // we only want to trigger deeplinks after the plugin had a chance to render
+      setTimeout(() => {
-        setImmediate(() => {
-          this.events.emit('deeplink', deepLink);
-        });
-      } else {
         this.events.emit('deeplink', deepLink);
-      }
+      }, 0);
     }
   }
 

desktop/flipper-plugin/src/test-utils/test-utils.tsx

@@ -390,6 +390,8 @@ export function createMockFlipperLib(options?: StartPluginOptions): FlipperLib {
     exportFile: jest.fn(),
     importFile: jest.fn(),
     paths: {
+      // @ts-ignore process not known outside unit tests / Node, but this function should not be used
+      // outside a node context, so that is ok
       appPath: process.cwd(),
       homePath: `/dev/null`,
       tempPath: `/dev/null`,
@@ -441,7 +443,7 @@ function createBasePluginResult(
       return new Promise((resolve) => {
         // this ensures the test won't continue until the setImmediate used by
         // the deeplink handling event is handled
-        setImmediate(resolve);
+        setTimeout(resolve, 0);
       });
     },
     destroy: () => pluginInstance.destroy(),

desktop/flipper-plugin/src/ui/Container.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 React, {CSSProperties, forwardRef} from 'react';
+import styled from '@emotion/styled';
+import {
+  normalizePadding,
+  normalizeSpace,
+  PaddingProps,
+  Spacing,
+  theme,
+} from './theme';
+
+type ContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  borderBottom?: boolean;
+  borderTop?: boolean;
+  borderRight?: boolean;
+  borderLeft?: boolean;
+  bordered?: boolean;
+  rounded?: boolean;
+  width?: number;
+  height?: number;
+  // grow to available space?
+  grow?: boolean;
+  // allow shrinking beyond minally needed size? Makes using ellipsis on children possible
+  shrink?: boolean;
+  /**
+   * Gab between individual items
+   */
+  gap?: Spacing;
+  /**
+   * If set, items will be aligned in the center, if false (the default) items will be stretched.
+   */
+  center?: boolean;
+} & PaddingProps;
+
+export const Container = styled.div<ContainerProps>(
+  ({
+    bordered,
+    borderBottom,
+    borderLeft,
+    borderRight,
+    borderTop,
+    rounded,
+    width,
+    height,
+    grow,
+    shrink,
+    gap,
+    center,
+    ...rest
+  }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    flex:
+      grow && shrink
+        ? `1 1 0` // allow growing, and shrinking smaller than actual size
+        : grow
+        ? `1 0 auto` // allow grow, start at natural size
+        : shrink
+        ? `0 1 0` // allow shrinking smaller than natural size
+        : `0 0 auto`, // (default) use natural size, don't grow or shrink (in parent flex direction)
+    alignItems: center ? 'center' : 'stretch',
+    gap: normalizeSpace(gap, theme.space.small),
+
+    minWidth: shrink ? 0 : undefined,
+    maxWidth: shrink ? '100%' : undefined,
+    boxSizing: 'border-box',
+    width,
+    height,
+    padding: normalizePadding(rest),
+    borderRadius: rounded ? theme.containerBorderRadius : undefined,
+    borderStyle: 'solid',
+    borderColor: theme.dividerColor,
+    borderWidth: bordered
+      ? 1
+      : `${borderTop ? 1 : 0}px ${borderRight ? 1 : 0}px ${
+          borderBottom ? 1 : 0
+        }px ${borderLeft ? 1 : 0}px`,
+  }),
+);

desktop/flipper-plugin/src/ui/Layout.tsx

@@ -9,6 +9,7 @@
 
 import React, {CSSProperties, forwardRef} from 'react';
 import styled from '@emotion/styled';
+import {Container} from './Container';
 import {
   normalizePadding,
   normalizeSpace,
@@ -17,77 +18,7 @@ import {
   theme,
 } from './theme';
 
-type ContainerProps = {
+import {renderSplitLayout} from './renderSplitLayout';
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  borderBottom?: boolean;
-  borderTop?: boolean;
-  borderRight?: boolean;
-  borderLeft?: boolean;
-  bordered?: boolean;
-  rounded?: boolean;
-  width?: number;
-  height?: number;
-  // grow to available space?
-  grow?: boolean;
-  // allow shrinking beyond minally needed size? Makes using ellipsis on children possible
-  shrink?: boolean;
-  /**
-   * Gab between individual items
-   */
-  gap?: Spacing;
-  /**
-   * If set, items will be aligned in the center, if false (the default) items will be stretched.
-   */
-  center?: boolean;
-} & PaddingProps;
-
-const Container = styled.div<ContainerProps>(
-  ({
-    bordered,
-    borderBottom,
-    borderLeft,
-    borderRight,
-    borderTop,
-    rounded,
-    width,
-    height,
-    grow,
-    shrink,
-    gap,
-    center,
-    ...rest
-  }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    flex:
-      grow && shrink
-        ? `1 1 0` // allow growing, and shrinking smaller than actual size
-        : grow
-        ? `1 0 auto` // allow grow, start at natural size
-        : shrink
-        ? `0 1 0` // allow shrinking smaller than natural size
-        : `0 0 auto`, // (default) use natural size, don't grow or shrink (in parent flex direction)
-    alignItems: center ? 'center' : 'stretch',
-    gap: normalizeSpace(gap, theme.space.small),
-
-    minWidth: shrink ? 0 : undefined,
-    maxWidth: shrink ? '100%' : undefined,
-    boxSizing: 'border-box',
-    width,
-    height,
-    padding: normalizePadding(rest),
-    borderRadius: rounded ? theme.containerBorderRadius : undefined,
-    borderStyle: 'solid',
-    borderColor: theme.dividerColor,
-    borderWidth: bordered
-      ? 1
-      : `${borderTop ? 1 : 0}px ${borderRight ? 1 : 0}px ${
-          borderBottom ? 1 : 0
-        }px ${borderLeft ? 1 : 0}px`,
-  }),
-);
 
 const Horizontal = styled(Container)({
   flexDirection: 'row',
@@ -139,7 +70,7 @@ const ScrollContainer = forwardRef(
   },
 );
 
-type SplitLayoutProps = {
+export type SplitLayoutProps = {
   /**
    * If set, items will be centered over the orthogonal direction, if false (the default) items will be stretched.
    */
@@ -174,63 +105,6 @@ type SplitVerticalResizableProps =
     }
   | {};
 
-const Empty = styled.div({width: 0, height: 0});
-
-function renderSplitLayout(
-  props: SplitLayoutProps,
-  direction: 'column' | 'row',
-  grow: 1 | 2,
-) {
-  let [child1, child2] = props.children;
-  // prevent some children to be accidentally omitted if the primary one is `null`
-  if (!child1) {
-    child1 = <Empty />;
-  }
-  if (!child2) {
-    child2 = <Empty />;
-  }
-  if ('resizable' in props && props.resizable) {
-    const {width, height, minHeight, minWidth, maxHeight, maxWidth} =
-      props as any;
-    const sizeProps =
-      direction === 'column'
-        ? ({
-            minHeight,
-            height: height ?? 300,
-            maxHeight,
-          } as const)
-        : ({
-            minWidth,
-            width: width ?? 300,
-            maxWidth,
-          } as const);
-    const Sidebar = require('./Sidebar').Sidebar;
-    if (grow === 2) {
-      child1 = (
-        <Sidebar
-          position={direction === 'column' ? 'top' : 'left'}
-          {...sizeProps}>
-          {child1}
-        </Sidebar>
-      );
-    } else {
-      child2 = (
-        <Sidebar
-          position={direction === 'column' ? 'bottom' : 'right'}
-          {...sizeProps}>
-          {child2}
-        </Sidebar>
-      );
-    }
-  }
-  return (
-    <SandySplitContainer {...props} flexDirection={direction} grow={grow}>
-      {child1}
-      {child2}
-    </SandySplitContainer>
-  );
-}
-
 /**
  * The Layout component divides all available screenspace over two components:
  * A fixed top (or left) component, and all remaining space to a bottom component.
@@ -263,29 +137,3 @@ export const Layout = {
 Object.keys(Layout).forEach((key) => {
   (Layout as any)[key].displayName = `Layout.${key}`;
 });
-
-const SandySplitContainer = styled.div<{
-  grow: 1 | 2;
-  gap?: Spacing;
-  center?: boolean;
-  flexDirection: CSSProperties['flexDirection'];
-}>((props) => ({
-  boxSizing: 'border-box',
-  display: 'flex',
-  flex: `1 1 0`,
-  flexDirection: props.flexDirection,
-  alignItems: props.center ? 'center' : 'stretch',
-  gap: normalizeSpace(props.gap, theme.space.small),
-  overflow: props.center ? undefined : 'hidden', // only use overflow hidden in container mode, to avoid weird resizing issues
-  '>:nth-child(1)': {
-    flex: props.grow === 1 ? splitGrowStyle : splitFixedStyle,
-    minWidth: props.grow === 1 ? 0 : undefined,
-  },
-  '>:nth-child(2)': {
-    flex: props.grow === 2 ? splitGrowStyle : splitFixedStyle,
-    minWidth: props.grow === 2 ? 0 : undefined,
-  },
-}));
-
-const splitFixedStyle = `0 0 auto`;
-const splitGrowStyle = `1 0 0`;

desktop/flipper-plugin/src/ui/Sidebar.tsx

@@ -7,14 +7,15 @@
  * @format
  */
 
-import {Layout} from './Layout';
 import {Component, ReactNode} from 'react';
 import styled from '@emotion/styled';
 import {Property} from 'csstype';
+import {Container} from './Container';
 import React from 'react';
 import {MoreOutlined} from '@ant-design/icons';
 import {Interactive, InteractiveProps} from './Interactive';
 import {theme} from './theme';
+import {Layout} from './Layout';
 
 const SidebarInteractiveContainer = styled(Interactive)<InteractiveProps>({
   display: 'flex',
@@ -26,7 +27,7 @@ type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
 const borderStyle = `1px solid ${theme.dividerColor}`;
 
-const SidebarContainer = styled(Layout.Container)<{
+const SidebarContainer = styled(Container)<{
   position: 'right' | 'top' | 'left' | 'bottom';
   overflow?: boolean;
   unstyled?: boolean;

desktop/flipper-plugin/src/ui/data-table/DataTable.tsx

@@ -144,7 +144,7 @@ export function DataTable<T extends object>(
   const isUnitTest = useInUnitTest();
 
   // eslint-disable-next-line
-  const scope = isUnitTest ? "" : usePluginInstanceMaybe()?.pluginKey ?? "";
+  const scope = isUnitTest ? '' : usePluginInstanceMaybe()?.pluginKey ?? '';
   const virtualizerRef = useRef<DataSourceVirtualizer | undefined>();
   const [tableState, dispatch] = useReducer(
     dataTableManagerReducer as DataTableReducer<T>,
@@ -344,7 +344,12 @@ export function DataTable<T extends object>(
     // Important dep optimization: we don't want to recalc filters if just the width or visibility changes!
     // We pass entire state.columns to computeDataTableFilter, but only changes in the filter are a valid cause to compute a new filter function
     // eslint-disable-next-line
-    [tableState.searchValue, tableState.useRegex, ...tableState.columns.map((c) => c.filters), ...tableState.columns.map((c => c.inversed))],
+    [
+      tableState.searchValue,
+      tableState.useRegex,
+      ...tableState.columns.map((c) => c.filters),
+      ...tableState.columns.map((c) => c.inversed),
+    ],
   );
 
   useEffect(
@@ -398,7 +403,7 @@ export function DataTable<T extends object>(
 
   /** Range finder */
   const [range, setRange] = useState('');
-  const hideRange = useRef<NodeJS.Timeout>();
+  const hideRange = useRef<any>();
 
   const onRangeChange = useCallback(
     (start: number, end: number, total: number, offset) => {
@@ -425,7 +430,7 @@ export function DataTable<T extends object>(
   const contexMenu = isUnitTest
     ? undefined
     : // eslint-disable-next-line
-    useCallback(
+      useCallback(
         () =>
           tableContextMenuFactory(
             dataSource,

desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx

@@ -14,7 +14,10 @@ import styled from '@emotion/styled';
 import React, {MouseEvent, KeyboardEvent} from 'react';
 import {theme} from '../theme';
 import {Layout} from '../Layout';
-import {getFlipperLib} from 'flipper-plugin';
+import {
+  getFlipperLib,
+  tryGetFlipperLibImplementation,
+} from '../../plugin/FlipperLib';
 import {DownOutlined, RightOutlined} from '@ant-design/icons';
 
 const {Text} = Typography;
@@ -529,6 +532,9 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
     this.props.onElementSelected(key);
   };
 
+  isDarwin =
+    tryGetFlipperLibImplementation()?.environmentInfo.os.platform === 'darwin';
+
   onKeyDown = (e: KeyboardEvent<any>) => {
     const {selected} = this.props;
     if (selected == null) {
@@ -550,8 +556,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
 
     if (
       e.key === 'c' &&
-      ((e.metaKey && process.platform === 'darwin') ||
+      ((e.metaKey && this.isDarwin) || (e.ctrlKey && this.isDarwin))
-        (e.ctrlKey && process.platform !== 'darwin'))
     ) {
       e.stopPropagation();
       e.preventDefault();

desktop/flipper-plugin/src/ui/renderSplitLayout.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 React, {CSSProperties, forwardRef} from 'react';
+import styled from '@emotion/styled';
+import {
+  normalizePadding,
+  normalizeSpace,
+  PaddingProps,
+  Spacing,
+  theme,
+} from './theme';
+
+import type {SplitLayoutProps} from './Layout';
+import {Sidebar} from './Sidebar';
+
+const Empty = styled.div({width: 0, height: 0});
+
+export function renderSplitLayout(
+  props: SplitLayoutProps,
+  direction: 'column' | 'row',
+  grow: 1 | 2,
+) {
+  let [child1, child2] = props.children;
+  // prevent some children to be accidentally omitted if the primary one is `null`
+  if (!child1) {
+    child1 = <Empty />;
+  }
+  if (!child2) {
+    child2 = <Empty />;
+  }
+  if ('resizable' in props && props.resizable) {
+    const {width, height, minHeight, minWidth, maxHeight, maxWidth} =
+      props as any;
+    const sizeProps =
+      direction === 'column'
+        ? ({
+            minHeight,
+            height: height ?? 300,
+            maxHeight,
+          } as const)
+        : ({
+            minWidth,
+            width: width ?? 300,
+            maxWidth,
+          } as const);
+    if (grow === 2) {
+      child1 = (
+        <Sidebar
+          position={direction === 'column' ? 'top' : 'left'}
+          {...sizeProps}>
+          {child1}
+        </Sidebar>
+      );
+    } else {
+      child2 = (
+        <Sidebar
+          position={direction === 'column' ? 'bottom' : 'right'}
+          {...sizeProps}>
+          {child2}
+        </Sidebar>
+      );
+    }
+  }
+  return (
+    <SandySplitContainer {...props} flexDirection={direction} grow={grow}>
+      {child1}
+      {child2}
+    </SandySplitContainer>
+  );
+}
+
+const SandySplitContainer = styled.div<{
+  grow: 1 | 2;
+  gap?: Spacing;
+  center?: boolean;
+  flexDirection: CSSProperties['flexDirection'];
+}>((props) => ({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flex: `1 1 0`,
+  flexDirection: props.flexDirection,
+  alignItems: props.center ? 'center' : 'stretch',
+  gap: normalizeSpace(props.gap, theme.space.small),
+  overflow: props.center ? undefined : 'hidden', // only use overflow hidden in container mode, to avoid weird resizing issues
+  '>:nth-child(1)': {
+    flex: props.grow === 1 ? splitGrowStyle : splitFixedStyle,
+    minWidth: props.grow === 1 ? 0 : undefined,
+  },
+  '>:nth-child(2)': {
+    flex: props.grow === 2 ? splitGrowStyle : splitFixedStyle,
+    minWidth: props.grow === 2 ? 0 : undefined,
+  },
+}));
+
+const splitFixedStyle = `0 0 auto`;
+const splitGrowStyle = `1 0 0`;

desktop/flipper-plugin/src/utils/sha256.tsx

@@ -7,8 +7,10 @@
  * @format
  */
 
+import {isTest} from 'flipper-common';
+
 export function sha256(message: string): Promise<string> {
-  if (process.env.NODE_ENV === 'test') {
+  if (isTest()) {
     return Promise.resolve(message.substr(0, 100));
   }
   // From https://stackoverflow.com/a/48161723/1983583

desktop/flipper-plugin/src/utils/shallowSerialization.tsx

@@ -66,14 +66,17 @@ export function deserializeShallowObject(obj: any): any {
   return obj;
 }
 
+// TODO: introduce a isProduction utility!
+declare const process: any;
+
 /**
  * Asserts a value is JSON serializable.
  * Will print a warning if a value is JSON serializable, but isn't a pure tree
  */
 export function assertSerializable(obj: any) {
   if (
-    process.env.NODE_ENV !== 'test' &&
+    typeof process === 'undefined' ||
-    process.env.NODE_ENV !== 'development'
+    (process.env.NODE_ENV !== 'test' && process.env.NODE_ENV !== 'development')
   ) {
     return;
   }

desktop/flipper-plugin/src/utils/useAssertStableRef.tsx

@@ -9,13 +9,17 @@
 
 import {useRef} from 'react';
 
+// TODO: create isProduction utility!
+declare const process: any;
+
 /**
  * This hook will throw in development builds if the value passed in is unstable.
  * Use this if to make sure consumers aren't creating or changing certain props over time
  * (intentionally or accidentally)
  */
 export const useAssertStableRef =
-  process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test'
+  typeof process !== 'undefined' &&
+  (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')
     ? function useAssertStableRef(value: any, prop: string) {
         const ref = useRef(value);
         if (ref.current !== value) {

desktop/flipper-plugin/src/utils/useInUnitTest.tsx

@@ -7,10 +7,12 @@
  * @format
  */
 
+import {isTest} from 'flipper-common';
+
 /**
  * Check if we are currently running a unit test.
  * Use this hook to disable certain functionality that is probably not going to work as expected in the JSDom implementaiton
  */
 export function useInUnitTest(): boolean {
-  return process.env.NODE_ENV === 'test';
+  return isTest();
 }

desktop/flipper-plugin/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src",
-    "lib": ["dom"]
+    "lib": ["dom", "ES2019"],
+    "types": ["jest", "../types/jest-extensions"]
   },
   "references": [
     {

desktop/flipper-server-core/tsconfig.json

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "types": [
+      "../types/JSONStream",
+      "../types/adbkit",
+      "../types/openssl-wrapper",
+      "../types/adbkit-logcat"
+    ]
   },
   "references": [
     {

desktop/flipper-server/package.json

@@ -22,8 +22,7 @@
     "flipper-common": "0.0.0",
     "flipper-pkg-lib": "0.0.0",
     "flipper-server-core": "0.0.0",
-    "metro": "^0.66.2",
+    "metro": "^0.66.2"
-    "typescript": "^4.4.4"
   },
   "peerDependencies": {},
   "scripts": {

desktop/flipper-server/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["../types/flipperGlobals", "../types/metro-resolver", "../types/metro"]
   },
   "include": ["./src/*"],
   "references": [

desktop/flipper-ui-browser/src/index-fast-refresh.tsx

@@ -47,7 +47,9 @@ const Refresh = {
   },
 };
 
+// @ts-ignore
 (require as any).Refresh = Refresh;
 
+// @ts-ignore
 // eslint-disable-next-line import/no-commonjs
 require('./index.tsx');

desktop/flipper-ui-browser/src/index.tsx

@@ -14,6 +14,7 @@ import {createFlipperServer} from './flipperServerConnection';
 document.getElementById('root')!.innerText = 'flipper-ui-browser started';
 
 async function start() {
+  // @ts-ignore
   (global as any).electronRequire = function (path: string) {
     console.error(
       `[decapitate] Tried to electronRequire ${path}, this module is not available in the browser and will be stubbed`,
@@ -39,6 +40,7 @@ async function start() {
   // but not set yet, which might happen when using normal imports.
   // TODO: remove
   window.flipperShowError?.('Connected to Flipper Server successfully');
+  // @ts-ignore
   // eslint-disable-next-line import/no-commonjs
   require('flipper-ui-core').startFlipperDesktop(flipperServer);
   window.flipperHideError?.();

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -72,6 +72,7 @@ export function initializeRenderHost(
 }
 
 function getDefaultPluginsIndex() {
+  // @ts-ignore
   // eslint-disable-next-line import/no-unresolved
   const index = require('./defaultPlugins');
   return index.default || index;

desktop/flipper-ui-browser/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src",
-    "lib": ["dom"]
+    "lib": ["dom", "ES2019"]
   },
   "references": [
     {

desktop/flipper-ui-core/package.json

@@ -79,8 +79,7 @@
     "@types/uuid": "^8.3.1",
     "flipper-test-utils": "0.0.0",
     "mock-fs": "^5.1.2",
-    "redux-mock-store": "^1.0.1",
+    "redux-mock-store": "^1.0.1"
-    "ts-jest": "^26.5.6"
   },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",

desktop/flipper-ui-core/src/__mocks__/electron.tsx

@@ -1,25 +0,0 @@
-/**
- * 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
- */
-
-module.exports = {
-  remote: {
-    process: {
-      env: {},
-    },
-    app: {
-      getPath: (path: string) => `/${path}`,
-      getAppPath: process.cwd,
-      getVersion: () => '0.9.99',
-      relaunch: () => {},
-      exit: () => {},
-    },
-    getCurrentWindow: () => ({isFocused: () => true}),
-  },
-  ipcRenderer: {},
-};

desktop/flipper-ui-core/src/__tests__/PluginContainer.node.tsx

@@ -74,11 +74,11 @@ test('Plugin container can render plugin and receive updates', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -176,11 +176,11 @@ test('PluginContainer can render Sandy plugins', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -216,11 +216,11 @@ test('PluginContainer can render Sandy plugins', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -296,11 +296,11 @@ test('PluginContainer can render Sandy plugins', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -561,11 +561,11 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -605,11 +605,11 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -748,11 +748,11 @@ test('PluginContainer can render Sandy device plugins', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -793,11 +793,11 @@ test('PluginContainer can render Sandy device plugins', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -909,11 +909,11 @@ test('PluginContainer + Sandy device plugin supports deeplink', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -955,11 +955,11 @@ test('PluginContainer + Sandy device plugin supports deeplink', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -1247,11 +1247,11 @@ test('PluginContainer can render Sandy plugins for archived devices', async () =
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -1325,11 +1325,11 @@ test('PluginContainer can render Sandy plugins for archived devices', async () =
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"

desktop/flipper-ui-core/src/__tests__/deeplink.node.tsx

@@ -65,11 +65,11 @@ test('Triggering a deeplink will work', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"

desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx

@@ -14,7 +14,7 @@ import {State as Store} from '../reducers';
 import {flush} from '../utils/persistor';
 import ToggledSection from './settings/ToggledSection';
 import {isEqual} from 'lodash';
-import {reportUsage, Settings} from 'flipper-common';
+import {Platform, reportUsage, Settings} from 'flipper-common';
 import {Modal, Button} from 'antd';
 import {Layout, withTrackingScope, _NuxManagerContext} from 'flipper-plugin';
 import {getRenderHostInstance} from '../RenderHost';
@@ -23,7 +23,7 @@ const WIZARD_FINISHED_LOCAL_STORAGE_KEY = 'platformSelectWizardFinished';
 
 type OwnProps = {
   onHide: () => void;
-  platform: NodeJS.Platform;
+  platform: Platform;
 };
 
 type StateFromProps = {

desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx

@@ -22,7 +22,12 @@ import {FilePathConfigField, ConfigText} from './settings/configFields';
 import KeyboardShortcutInput from './settings/KeyboardShortcutInput';
 import {isEqual, isMatch, isEmpty} from 'lodash';
 import LauncherSettingsPanel from '../fb-stubs/LauncherSettingsPanel';
-import {LauncherSettings, reportUsage, Settings} from 'flipper-common';
+import {
+  LauncherSettings,
+  Platform,
+  reportUsage,
+  Settings,
+} from 'flipper-common';
 import {Modal, message, Button} from 'antd';
 import {Layout, withTrackingScope, _NuxManagerContext} from 'flipper-plugin';
 import {getRenderHostInstance} from '../RenderHost';
@@ -30,7 +35,7 @@ import {loadTheme} from '../utils/loadTheme';
 
 type OwnProps = {
   onHide: () => void;
-  platform: NodeJS.Platform;
+  platform: Platform;
   noModal?: boolean; // used for testing
 };
 

desktop/flipper-ui-core/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
 <div
-  className="css-gzchr8-Container e1hsqii15"
+  className="css-gzchr8-Container e1k65efv0"
   style={
     Object {
       "textAlign": "center",
@@ -51,7 +51,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
     </strong>
   </span>
   <div
-    className="css-1knrt0j-SandySplitContainer e1hsqii10"
+    className="css-1knrt0j-SandySplitContainer e148ues30"
   >
     <div />
     <button
@@ -69,7 +69,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
 
 exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
 <div
-  className="css-gzchr8-Container e1hsqii15"
+  className="css-gzchr8-Container e1k65efv0"
   style={
     Object {
       "textAlign": "center",
@@ -118,7 +118,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
     </strong>
   </span>
   <div
-    className="css-1knrt0j-SandySplitContainer e1hsqii10"
+    className="css-1knrt0j-SandySplitContainer e148ues30"
   >
     <div />
     <button

desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap

@@ -3,7 +3,7 @@
 exports[`load PluginInstaller list 1`] = `
 <div>
   <div
-    class="css-1v0y38i-Container e1hsqii15"
+    class="css-1v0y38i-Container e1k65efv0"
     height="500"
   >
     <div
@@ -166,7 +166,7 @@ exports[`load PluginInstaller list 1`] = `
               width="0"
             >
               <div
-                class="css-s1wsbn-Container-Horizontal e1hsqii14"
+                class="css-s1wsbn-Container-Horizontal e1hsqii12"
               >
                 <span
                   class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -233,7 +233,7 @@ exports[`load PluginInstaller list 1`] = `
               width="0"
             >
               <div
-                class="css-s1wsbn-Container-Horizontal e1hsqii14"
+                class="css-s1wsbn-Container-Horizontal e1hsqii12"
               >
                 <span
                   class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -379,7 +379,7 @@ exports[`load PluginInstaller list 1`] = `
 exports[`load PluginInstaller list with one plugin installed 1`] = `
 <div>
   <div
-    class="css-1v0y38i-Container e1hsqii15"
+    class="css-1v0y38i-Container e1k65efv0"
     height="500"
   >
     <div
@@ -542,7 +542,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="0"
             >
               <div
-                class="css-s1wsbn-Container-Horizontal e1hsqii14"
+                class="css-s1wsbn-Container-Horizontal e1hsqii12"
               >
                 <span
                   class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -609,7 +609,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="0"
             >
               <div
-                class="css-s1wsbn-Container-Horizontal e1hsqii14"
+                class="css-s1wsbn-Container-Horizontal e1hsqii12"
               >
                 <span
                   class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"

desktop/flipper-ui-core/src/chrome/settings/KeyboardShortcutInput.tsx

@@ -141,7 +141,7 @@ const KeyboardShortcutInput = (props: {
   }, [isShortcutValid, pressedKeys, props]);
 
   const inputRef = useRef<HTMLInputElement>(null);
-  let typingTimeout: NodeJS.Timeout;
+  let typingTimeout: any;
 
   const handleFocusInput = () => {
     if (inputRef.current !== null) {

desktop/flipper-ui-core/src/devices/ArchivedDevice.tsx

@@ -9,7 +9,6 @@
 
 import BaseDevice from './BaseDevice';
 import type {DeviceOS, DeviceType} from 'flipper-plugin';
-import {DeviceShell} from './BaseDevice';
 import {SupportFormRequestDetailsState} from '../reducers/supportForm';
 
 export default class ArchivedDevice extends BaseDevice {
@@ -62,10 +61,6 @@ export default class ArchivedDevice extends BaseDevice {
 
   supportRequestDetails?: SupportFormRequestDetailsState;
 
-  spawnShell(): DeviceShell | undefined | null {
-    return null;
-  }
-
   getArchivedScreenshotHandle(): string | null {
     return this.archivedScreenshotHandle;
   }

desktop/flipper-ui-core/src/devices/BaseDevice.tsx

@@ -7,7 +7,6 @@
  * @format
  */
 
-import stream from 'stream';
 import {
   Device,
   _SandyDevicePluginInstance,
@@ -28,12 +27,6 @@ import {DeviceSpec, PluginDetails} from 'flipper-common';
 import {getPluginKey} from '../utils/pluginKey';
 import {Base64} from 'js-base64';
 
-export type DeviceShell = {
-  stdout: stream.Readable;
-  stderr: stream.Readable;
-  stdin: stream.Writable;
-};
-
 type PluginDefinition = _SandyPluginDefinition;
 type PluginMap = Map<string, PluginDefinition>;
 

desktop/flipper-ui-core/src/dispatcher/__tests__/handleOpenPluginDeeplink.node.tsx

@@ -113,11 +113,11 @@ test('Triggering a deeplink will work', async () => {
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -225,11 +225,11 @@ test('triggering a deeplink without applicable device can wait for a device', as
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"
@@ -309,11 +309,11 @@ test('triggering a deeplink without applicable client can wait for a device', as
     <body>
       <div>
         <div
-          class="css-1x2cmzz-SandySplitContainer e1hsqii10"
+          class="css-1x2cmzz-SandySplitContainer e148ues30"
         >
           <div />
           <div
-            class="css-1knrt0j-SandySplitContainer e1hsqii10"
+            class="css-1knrt0j-SandySplitContainer e148ues30"
           >
             <div
               class="css-1woty6b-Container"

desktop/flipper-ui-core/src/dispatcher/plugins.tsx

@@ -48,17 +48,20 @@ import isPluginVersionMoreRecent from '../utils/isPluginVersionMoreRecent';
 import {createSandyPluginWrapper} from '../utils/createSandyPluginWrapper';
 import {getRenderHostInstance} from '../RenderHost';
 import pMap from 'p-map';
+import * as deprecatedExports from '../deprecated-exports';
 
 let defaultPluginsIndex: any = null;
 
 export default async (store: Store, _logger: Logger) => {
   // expose Flipper and exact globally for dynamically loaded plugins
-  const globalObject: any = typeof window === 'undefined' ? global : window;
+  const globalObject = (function (this: any) {
+    return this;
+  })();
 
   // this list should match `replace-flipper-requires.tsx` and the `builtInModules` in `desktop/.eslintrc`
   globalObject.React = React;
   globalObject.ReactDOM = ReactDOM;
-  globalObject.Flipper = require('../deprecated-exports');
+  globalObject.Flipper = deprecatedExports;
   globalObject.FlipperPlugin = FlipperPluginSDK;
   globalObject.Immer = Immer;
   globalObject.antd = antd;

desktop/flipper-ui-core/src/reducers/supportForm.tsx

@@ -20,6 +20,7 @@ import {logPlatformSuccessRate} from 'flipper-common';
 export const SUPPORT_FORM_PREFIX = 'support-form-v2';
 import {getExportablePlugins} from '../selectors/connections';
 import {DeviceOS} from 'flipper-plugin';
+import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
 
 const {DEFAULT_SUPPORT_GROUP} = constants;
 
@@ -113,9 +114,7 @@ export class Group {
       source: 'deeplink',
       group: this.name,
     });
-    store.dispatch(
+    store.dispatch(setStaticView(SupportRequestFormV2));
-      setStaticView(require('../fb-stubs/SupportRequestFormV2').default),
-    );
     const selectedAppId = store.getState().connections.selectedAppId;
     const selectedClient = store
       .getState()

desktop/flipper-ui-core/src/ui/components/Tabs.tsx

@@ -178,7 +178,8 @@ export default function Tabs(props: {
   classic?: boolean;
 }) {
   let tabsContainer = useContext(TabsContext);
-  const scope = useContext((global as any).FlipperTrackingScopeContext);
+  // @ts-ignore
+  const scope = useContext(global.FlipperTrackingScopeContext);
   if (props.classic === true) {
     tabsContainer = false;
   }

desktop/flipper-ui-core/src/ui/components/TooltipProvider.tsx

@@ -128,7 +128,7 @@ export const TooltipContext = createContext<TooltipManager>(undefined as any);
 const TooltipProvider: React.FC<{}> = memo(function TooltipProvider({
   children,
 }) {
-  const timeoutID = useRef<NodeJS.Timeout>();
+  const timeoutID = useRef<any>();
   const [tooltip, setTooltip] = useState<TooltipObject | undefined>(undefined);
   const tooltipManager = useMemo(
     () => ({

desktop/flipper-ui-core/src/utils/exportData.tsx

@@ -38,6 +38,7 @@ import ShareSheetExportFile from '../chrome/ShareSheetExportFile';
 import ExportDataPluginSheet from '../chrome/ExportDataPluginSheet';
 import {getRenderHostInstance} from '../RenderHost';
 import {uploadFlipperMedia} from '../fb-stubs/user';
+import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
 
 export const IMPORT_FLIPPER_TRACE_EVENT = 'import-flipper-trace';
 export const EXPORT_FLIPPER_TRACE_EVENT = 'export-flipper-trace';
@@ -580,7 +581,7 @@ export function importDataToStore(source: string, data: string, store: Store) {
   if (supportRequestDetails) {
     store.dispatch(
       // Late require to avoid circular dependency issue
-      setStaticView(require('../fb-stubs/SupportRequestDetails').default),
+      setStaticView(SupportRequestDetails),
     );
   }
 }

desktop/flipper-ui-core/src/utils/sideEffect.tsx

@@ -41,7 +41,7 @@ export function sideEffect<
   let scheduled = false;
   let lastRun = -1;
   let lastSelectedValue: V = selector(store.getState());
-  let timeout: NodeJS.Timeout;
+  let timeout: any;
 
   function run() {
     scheduled = false;

desktop/flipper-ui-core/tsconfig.json

@@ -5,7 +5,8 @@
     "rootDir": "src",
     "esModuleInterop": true,
     "emitDeclarationOnly": true,
-    "lib": ["dom"]
+    "lib": ["dom", "es2019"],
+    "types": ["../types/ReactDebounceRender"]
   },
   "references": [
     {

desktop/package.json

@@ -70,6 +70,7 @@
     "@babel/eslint-parser": "^7.16.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
+    "@types/jest": "^26.0.24",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.3",
     "electron": "11.2.3",
@@ -115,8 +116,6 @@
     "**/metro/**/temp": "0.9.0",
     "**/metro/**/ws": "1.1.5",
     "@jest-runner/electron/electron": "11.2.3",
-    "@types/react": "17.0.34",
-    "adbkit-logcat": "^2.0.1",
     "bl": "^5.0.0",
     "csstype": "^3.0.5",
     "jsdom": "16.6.0",
@@ -152,7 +151,7 @@
     "lint:tsc": "tsc -p tsc-root/tsconfig.json --noemit",
     "list-plugins": "./ts-node scripts/list-plugins.ts",
     "open-dist": "open ../dist/mac/Flipper.app --args --launcher=false --inspect=9229",
-    "postinstall": "patch-package && ./ts-node scripts/gen-type-index.ts && yarn --cwd plugins install --mutex network:30331 && yarn build:tsc && ./ts-node scripts/generate-plugin-entry-points.ts && yarn build:themes",
+    "postinstall": "patch-package && yarn --cwd plugins install --mutex network:30331 && yarn build:tsc && ./ts-node scripts/generate-plugin-entry-points.ts && yarn build:themes",
     "prebuild": "yarn build:tsc && yarn rm-dist && yarn build:themes",
     "preinstall": "node scripts/prepare-watchman-config.js && yarn config set ignore-engines",
     "prelint:eslint": "yarn build:eslint",

desktop/pkg-lib/tsconfig.json

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

desktop/pkg/package.json

@@ -31,7 +31,6 @@
     "@oclif/dev-cli": "^1",
     "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^7.3.3",
-    "@types/jest": "^26.0.24",
     "@types/node": "^15.12.5",
     "@types/recursive-readdir": "^2.2.0",
     "flipper-test-utils": "0.0.0"

desktop/plugin-lib/package.json

@@ -25,12 +25,10 @@
   "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",
-    "mock-fs": "^5.1.2",
+    "mock-fs": "^5.1.2"
-    "ts-jest": "^26.5.6"
   },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",

desktop/plugin-lib/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["../types/npm-api", "../types/decompress-unzip", "../types/decompress-targz"]
   },
   "references": [
     {

desktop/plugins/tsconfig.json

@@ -1,21 +1,25 @@
 {
-    "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.base.json",
-    "compilerOptions": {
+  "compilerOptions": {
-        "noEmit": true,
+    "noEmit": true,
-        "baseUrl": ".",
+    "baseUrl": ".",
-        "rootDir": ".",
+    "rootDir": ".",
-        "outDir": "lib",
+    "outDir": "lib",
-        "lib": ["DOM"]
+    "lib": ["DOM", "ES2019"],
-    },
+    // TODO: ideally we'd move those into specific packages
-    "include": [
+    "types": [
-        "public/",
+      "../types/ReactDebounceRender",
-        "fb/"
+      "../types/json-format-highlight",
-    ],
+      "../types/memoize-weak",
-    "exclude": [
+      "../types/XmlBeautifier"
-        "**/lib/",
-        "**/dist/",
-        "**/node_modules/",
-        "**/__tests__/",
-        "**/__test__/"
     ]
+  },
+  "include": ["public/", "fb/"],
+  "exclude": [
+    "**/lib/",
+    "**/dist/",
+    "**/node_modules/",
+    "**/__tests__/",
+    "**/__test__/"
+  ]
 }

desktop/scripts/build-utils.ts

@@ -132,12 +132,14 @@ async function generateDefaultPluginEntryPoints(
   /* eslint-disable */
   // THIS FILE IS AUTO-GENERATED by function "generateDefaultPluginEntryPoints" in "build-utils.ts".
 
+  declare var require: any;
+
   // This function exists to make sure that if one require fails in its module initialisation, not everything fails
   function tryRequire(module: string, fn: () => any): any {
     try {
       return fn();
     } catch (e) {
-      console.error(\`Could not require ${module}: \`, e)
+      console.error(\`Could not require \${module}: \`, e)
       return {};
     }
   }

desktop/scripts/gen-type-index.ts

@@ -1,48 +0,0 @@
-/**
- * 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
- */
-/* eslint-disable flipper/no-console-error-without-context */
-
-import {rootDir} from './paths';
-import path from 'path';
-import fs from 'fs-extra';
-
-async function genTypeIndex() {
-  const typesDir = path.join(rootDir, 'types');
-  const filePaths = (await fs.readdir(typesDir))
-    .filter(
-      (filePath) => filePath.endsWith('.d.ts') && filePath !== 'index.d.ts',
-    )
-    .sort();
-  await fs.writeFile(
-    path.join(typesDir, 'index.d.ts'),
-    // @lint-ignore-every LICENSELINT
-    `/**
- * 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
- */
-
-${filePaths
-  .map((filePath) => `/// <reference path="${filePath}" />`)
-  .join('\n')}
-`,
-  );
-}
-
-genTypeIndex()
-  .then(() => {
-    process.exit(0);
-  })
-  .catch((err: any) => {
-    console.error(err);
-    process.exit(1);
-  });

desktop/scripts/jest-setup-after.ts

@@ -165,9 +165,6 @@ function createStubRenderHost(): RenderHost {
     async exportFile() {
       return undefined;
     },
-    registerShortcut() {
-      return () => undefined;
-    },
     hasFocus() {
       return true;
     },

desktop/scripts/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": ".",
-    "lib": ["DOM", "ES2019"],
+    "lib": ["ES2019"],
     "noEmit": true,
     "esModuleInterop": true
   },

desktop/test-utils/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["node"]
   }
 }

desktop/tsconfig.base.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "lib": ["es7", "es2019"],
+    "lib": ["ES2019"],
     "esModuleInterop": true,
     "target": "ES2019",
     "removeComments": true,
@@ -27,7 +27,10 @@
       "flipper-server-ui": ["./flipper-server-ui/src"],
       "flipper-common": ["./flipper-common/src"],
       "flipper-*": ["./*/src"]
-    }
+    },
+    // by default we don't include any @types, as to white list them specifically per project.
+    // this avoids hoised @types packages being shared by all projects implicitly
+    "types": []
   },
   "exclude": ["**/lib/", "**/dist/", "**/node_modules/", "**/__tests__/"]
 }

desktop/tsconfig.json

@@ -1,15 +1,13 @@
 {
-    "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
+    // for unit tests:
-    },
+    "lib": ["DOM", "ES2019"],
-    "exclude": [
+    "types": ["jest"]
-      "**/node_modules/",
+  },
-      "**/lib/",
+  "exclude": ["**/node_modules/", "**/lib/", "**/dist/"]
-      "**/dist/"
+}
-    ]
-  }

desktop/types/ansi-to-html.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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
- */
-
-declare module 'ansi-to-html' {
-  export default class Filter {
-    toHtml: (input: string) => string;
-  }
-}

desktop/types/index.d.ts

@@ -1,30 +0,0 @@
-/**
- * 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
- */
-
-/// <reference path="JSONStream.d.ts" />
-/// <reference path="ReactDebounceRender.d.ts" />
-/// <reference path="XmlBeautifier.d.ts" />
-/// <reference path="adbkit-logcat.d.ts" />
-/// <reference path="adbkit.d.ts" />
-/// <reference path="ansi-to-html.d.ts" />
-/// <reference path="decompress-targz.d.ts" />
-/// <reference path="decompress-unzip.d.ts" />
-/// <reference path="download-tarball.d.ts" />
-/// <reference path="flipperGlobals.d.ts" />
-/// <reference path="jest-extensions.d.ts" />
-/// <reference path="json-format-highlight.d.ts" />
-/// <reference path="line-replace.d.ts" />
-/// <reference path="live-plugin-manager.d.ts" />
-/// <reference path="memoize-weak.d.ts" />
-/// <reference path="metro-cache.d.ts" />
-/// <reference path="metro-resolver.d.ts" />
-/// <reference path="metro.d.ts" />
-/// <reference path="nodejs.d.ts" />
-/// <reference path="npm-api.d.ts" />
-/// <reference path="openssl-wrapper.d.ts" />

desktop/types/line-replace.d.ts

@@ -1,23 +0,0 @@
-/**
- * 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
- */
-
-declare module 'line-replace' {
-  export default function (args: {
-    file: string;
-    line: number;
-    text: string;
-    addNewLine: boolean;
-    callback: (args: {
-      file: string;
-      line: number;
-      replacedText: string;
-      text: string;
-    }) => void;
-  }): void;
-}

desktop/types/live-plugin-manager.d.ts

@@ -1,82 +0,0 @@
-/**
- * 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
- */
-
-export declare class PluginManager {
-  constructor(options?: Partial<LivePluginManager.PluginManagerOptions>);
-  install(
-    name: string,
-    version?: string,
-  ): Promise<LivePluginManager.IPluginInfo>;
-  installFromPath(
-    location: string,
-    options?: {
-      force: boolean;
-    },
-  ): Promise<LivePluginManager.IPluginInfo>;
-
-  readonly options: LivePluginManager.PluginManagerOptions;
-}
-
-declare namespace LivePluginManager {
-  interface IPluginInfo {
-    readonly mainFile: string;
-    readonly location: string;
-    readonly name: string;
-    readonly version: string;
-    readonly dependencies: {[name: string]: string};
-  }
-
-  interface PluginSandbox {
-    env?: NodeJS.ProcessEnv;
-    global?: NodeJS.Global;
-  }
-
-  export interface NpmRegistryAuthToken {
-    token: string;
-  }
-
-  export interface NpmRegistryAuthBasic {
-    username: string;
-    password: string;
-  }
-
-  interface NpmRegistryConfig {
-    auth?: NpmRegistryAuthToken | NpmRegistryAuthBasic;
-    userAgent?: string;
-  }
-
-  export interface GithubAuthUserToken {
-    type: 'token';
-    token: string;
-  }
-
-  export interface GithubAuthBasic {
-    type: 'basic';
-    username: string;
-    password: string;
-  }
-
-  export type GithubAuth = GithubAuthUserToken | GithubAuthBasic;
-
-  interface PluginManagerOptions {
-    cwd: string;
-    pluginsPath: string;
-    sandbox: PluginSandbox;
-    npmRegistryUrl: string;
-    npmRegistryConfig: NpmRegistryConfig;
-    npmInstallMode: 'useCache' | 'noCache';
-    requireCoreModules: boolean;
-    hostRequire?: NodeRequire;
-    ignoredDependencies: Array<string | RegExp>;
-    staticDependencies: {[key: string]: any};
-    githubAuthentication?: GithubAuth;
-    lockWait: number;
-    lockStale: number;
-  }
-}

desktop/types/nodejs.d.ts

@@ -1,17 +0,0 @@
-/**
- * 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
- */
-
-declare module NodeJS {
-  interface Global {
-    window: Window | undefined;
-    WebSocket: any;
-    fetch: any;
-    originalConsole: Console | undefined;
-  }
-}

desktop/yarn.lock

@@ -2452,7 +2452,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@26.0.24", "@types/jest@^26.0.24":
+"@types/jest@^26.0.24":
   version "26.0.24"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
   integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
@@ -2990,7 +2990,12 @@ acorn@^8.2.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.3.0.tgz#1193f9b96c4e8232f00b11a9edff81b2c8b98b88"
   integrity sha512-tqPKHZ5CaBJw0Xmy0ZZvLs1qTV+BNFSyvn77ASXkpBNfIRk8ev26fKrD9iLGwGA9zedPao52GSHzq8lyZG0NUw==
 
-adbkit-logcat@^1.1.0, adbkit-logcat@^2.0.1:
+adbkit-logcat@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz#01d7f9b0cef9093a30bcb3b007efff301508962f"
+  integrity sha1-Adf5sM75CTowvLOwB+//MBUIli8=
+
+adbkit-logcat@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/adbkit-logcat/-/adbkit-logcat-2.0.1.tgz#d4986b9fc7cfda42733389d46a52124abef43ca5"
   integrity sha512-MznVzzEzcrWhIaIyblll+a0AL1TICJe/yuaia7HDYTAtiNabR/9amJkAnLt30U8/W7MVBc3mvU1jB/6MJ/TYHw==