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
2021-12-17 07:34:41 -08:00
parent af3757dcae
commit 5df34a337c
69 changed files with 406 additions and 561 deletions
--- a/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
+++ b/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';
 }
--- a/desktop/flipper-plugin/src/plugin/PluginBase.tsx
+++ b/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
-        setImmediate(() => {
-          this.events.emit('deeplink', deepLink);
-        });
-      } else {
+      // we only want to trigger deeplinks after the plugin had a chance to render
+      setTimeout(() => {
        this.events.emit('deeplink', deepLink);
-      }
+      }, 0);
    }
  }

--- a/desktop/flipper-plugin/src/test-utils/test-utils.tsx
+++ b/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(),
--- a/desktop/flipper-plugin/src/ui/Container.tsx
+++ b/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`,
+  }),
+);
--- a/desktop/flipper-plugin/src/ui/Layout.tsx
+++ b/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 = {
-  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`,
-  }),
-);
+import {renderSplitLayout} from './renderSplitLayout';

 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`;
--- a/desktop/flipper-plugin/src/ui/Sidebar.tsx
+++ b/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;
--- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
+++ b/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,
--- a/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx
+++ b/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.ctrlKey && process.platform !== 'darwin'))
+      ((e.metaKey && this.isDarwin) || (e.ctrlKey && this.isDarwin))
    ) {
      e.stopPropagation();
      e.preventDefault();
--- a/desktop/flipper-plugin/src/ui/renderSplitLayout.tsx
+++ b/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`;
--- a/desktop/flipper-plugin/src/utils/sha256.tsx
+++ b/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
--- a/desktop/flipper-plugin/src/utils/shallowSerialization.tsx
+++ b/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' &&
-    process.env.NODE_ENV !== 'development'
+    typeof process === 'undefined' ||
+    (process.env.NODE_ENV !== 'test' && process.env.NODE_ENV !== 'development')
  ) {
    return;
  }
--- a/desktop/flipper-plugin/src/utils/useAssertStableRef.tsx
+++ b/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) {
--- a/desktop/flipper-plugin/src/utils/useInUnitTest.tsx
+++ b/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();
 }