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/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`;