From 5df34a337c22a9c58d445bcadd638dbf57e7918a Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Fri, 17 Dec 2021 07:34:41 -0800 Subject: [PATCH] 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 | 1 + desktop/.eslintrc.js | 2 + desktop/app/tsconfig.json | 2 +- desktop/babel-transformer/package.json | 8 +- desktop/babel-transformer/tsconfig.json | 2 +- desktop/doctor/tsconfig.json | 3 +- desktop/eslint-plugin-flipper/tsconfig.json | 3 +- desktop/flipper-common/src/utils/isTest.tsx | 3 +- desktop/flipper-common/tsconfig.json | 3 +- desktop/flipper-dump/tsconfig.json | 2 +- .../data-source/DataSourceRendererVirtual.tsx | 11 +- .../flipper-plugin/src/plugin/PluginBase.tsx | 10 +- .../src/test-utils/test-utils.tsx | 4 +- desktop/flipper-plugin/src/ui/Container.tsx | 90 ++++++++++ desktop/flipper-plugin/src/ui/Layout.tsx | 158 +----------------- desktop/flipper-plugin/src/ui/Sidebar.tsx | 5 +- .../src/ui/data-table/DataTable.tsx | 13 +- .../src/ui/elements-inspector/elements.tsx | 11 +- .../src/ui/renderSplitLayout.tsx | 103 ++++++++++++ desktop/flipper-plugin/src/utils/sha256.tsx | 4 +- .../src/utils/shallowSerialization.tsx | 7 +- .../src/utils/useAssertStableRef.tsx | 6 +- .../src/utils/useInUnitTest.tsx | 4 +- desktop/flipper-plugin/tsconfig.json | 3 +- desktop/flipper-server-core/tsconfig.json | 8 +- desktop/flipper-server/package.json | 3 +- desktop/flipper-server/tsconfig.json | 3 +- .../src/index-fast-refresh.tsx | 2 + desktop/flipper-ui-browser/src/index.tsx | 2 + .../src/initializeRenderHost.tsx | 1 + desktop/flipper-ui-browser/tsconfig.json | 2 +- desktop/flipper-ui-core/package.json | 3 +- .../src/__mocks__/electron.tsx | 25 --- .../src/__tests__/PluginContainer.node.tsx | 48 +++--- .../src/__tests__/deeplink.node.tsx | 4 +- .../src/chrome/PlatformSelectWizard.tsx | 4 +- .../src/chrome/SettingsSheet.tsx | 9 +- .../ShareSheetPendingDialog.node.tsx.snap | 8 +- .../PluginInstaller.node.tsx.snap | 12 +- .../chrome/settings/KeyboardShortcutInput.tsx | 2 +- .../src/devices/ArchivedDevice.tsx | 5 - .../src/devices/BaseDevice.tsx | 7 - .../handleOpenPluginDeeplink.node.tsx | 12 +- .../src/dispatcher/plugins.tsx | 7 +- .../src/reducers/supportForm.tsx | 5 +- .../src/ui/components/Tabs.tsx | 3 +- .../src/ui/components/TooltipProvider.tsx | 2 +- .../flipper-ui-core/src/utils/exportData.tsx | 3 +- .../flipper-ui-core/src/utils/sideEffect.tsx | 2 +- desktop/flipper-ui-core/tsconfig.json | 3 +- desktop/package.json | 5 +- desktop/pkg-lib/tsconfig.json | 3 +- desktop/pkg/package.json | 1 - desktop/plugin-lib/package.json | 4 +- desktop/plugin-lib/tsconfig.json | 3 +- desktop/plugins/tsconfig.json | 40 +++-- desktop/scripts/build-utils.ts | 4 +- desktop/scripts/gen-type-index.ts | 48 ------ desktop/scripts/jest-setup-after.ts | 3 - desktop/scripts/tsconfig.json | 2 +- desktop/test-utils/tsconfig.json | 3 +- desktop/tsconfig.base.json | 7 +- desktop/tsconfig.json | 26 ++- desktop/types/ansi-to-html.d.ts | 14 -- desktop/types/index.d.ts | 30 ---- desktop/types/line-replace.d.ts | 23 --- desktop/types/live-plugin-manager.d.ts | 82 --------- desktop/types/nodejs.d.ts | 17 -- desktop/yarn.lock | 9 +- 69 files changed, 406 insertions(+), 561 deletions(-) create mode 100644 desktop/flipper-plugin/src/ui/Container.tsx create mode 100644 desktop/flipper-plugin/src/ui/renderSplitLayout.tsx delete mode 100644 desktop/flipper-ui-core/src/__mocks__/electron.tsx delete mode 100644 desktop/scripts/gen-type-index.ts delete mode 100644 desktop/types/ansi-to-html.d.ts delete mode 100644 desktop/types/index.d.ts delete mode 100644 desktop/types/line-replace.d.ts delete mode 100644 desktop/types/live-plugin-manager.d.ts delete mode 100644 desktop/types/nodejs.d.ts diff --git a/desktop/.eslintignore b/desktop/.eslintignore index 0edbef0ec..97e108004 100644 --- a/desktop/.eslintignore +++ b/desktop/.eslintignore @@ -15,3 +15,4 @@ static/index.js static/defaultPlugins/* app/src/defaultPlugins/index.tsx generated +flipper-server/static diff --git a/desktop/.eslintrc.js b/desktop/.eslintrc.js index e88059632..c591b8221 100644 --- a/desktop/.eslintrc.js +++ b/desktop/.eslintrc.js @@ -27,6 +27,8 @@ const builtInModules = [ 'immer', '@emotion/styled', '@ant-design/icons', + 'jest', + 'ts-jest', ]; const prettierConfig = require('./.prettierrc.json'); diff --git a/desktop/app/tsconfig.json b/desktop/app/tsconfig.json index d852e5a76..4431b10b6 100644 --- a/desktop/app/tsconfig.json +++ b/desktop/app/tsconfig.json @@ -5,7 +5,7 @@ "rootDir": "src", "esModuleInterop": true, "emitDeclarationOnly": true, - "lib": ["DOM"] + "lib": ["DOM", "ES2019"] }, "references": [ { diff --git a/desktop/babel-transformer/package.json b/desktop/babel-transformer/package.json index 1be224f32..23a7ccf72 100644 --- a/desktop/babel-transformer/package.json +++ b/desktop/babel-transformer/package.json @@ -30,13 +30,7 @@ "tslib": "^2.3.1" }, "devDependencies": { - "@types/jest": "26.0.24", - "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" + "rimraf": "^3.0.2" }, "scripts": { "reset": "rimraf lib *.tsbuildinfo", diff --git a/desktop/babel-transformer/tsconfig.json b/desktop/babel-transformer/tsconfig.json index 22dce4bac..849702e13 100644 --- a/desktop/babel-transformer/tsconfig.json +++ b/desktop/babel-transformer/tsconfig.json @@ -2,6 +2,6 @@ "extends": "../tsconfig.base.json", "compilerOptions": { "outDir": "lib", - "rootDir": "src" + "rootDir": "src", } } diff --git a/desktop/doctor/tsconfig.json b/desktop/doctor/tsconfig.json index 4bb952b9f..195fa4fb6 100644 --- a/desktop/doctor/tsconfig.json +++ b/desktop/doctor/tsconfig.json @@ -2,7 +2,8 @@ "extends": "../tsconfig.base.json", "compilerOptions": { "outDir": "lib", - "rootDir": "src" + "rootDir": "src", + "types": ["node"] }, "references": [ { diff --git a/desktop/eslint-plugin-flipper/tsconfig.json b/desktop/eslint-plugin-flipper/tsconfig.json index 22dce4bac..474d614ce 100644 --- a/desktop/eslint-plugin-flipper/tsconfig.json +++ b/desktop/eslint-plugin-flipper/tsconfig.json @@ -2,6 +2,7 @@ "extends": "../tsconfig.base.json", "compilerOptions": { "outDir": "lib", - "rootDir": "src" + "rootDir": "src", + "types": ["node"] } } diff --git a/desktop/flipper-common/src/utils/isTest.tsx b/desktop/flipper-common/src/utils/isTest.tsx index 85aaa4d5b..fb118662a 100644 --- a/desktop/flipper-common/src/utils/isTest.tsx +++ b/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; diff --git a/desktop/flipper-common/tsconfig.json b/desktop/flipper-common/tsconfig.json index 410e2890d..b13b1421c 100644 --- a/desktop/flipper-common/tsconfig.json +++ b/desktop/flipper-common/tsconfig.json @@ -2,7 +2,8 @@ "extends": "../tsconfig.base.json", "compilerOptions": { "outDir": "lib", - "rootDir": "src" + "rootDir": "src", + "lib": ["dom", "ES2019"] }, "references": [] } diff --git a/desktop/flipper-dump/tsconfig.json b/desktop/flipper-dump/tsconfig.json index 1dbb2342f..9f68e7d5a 100644 --- a/desktop/flipper-dump/tsconfig.json +++ b/desktop/flipper-dump/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../tsconfig.base.json", "compilerOptions": { "outDir": "lib", - "rootDir": "src" + "rootDir": "src", }, "references": [ { diff --git a/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx b/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx index 75262157c..383d0623c 100644 --- 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: ( 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: ( }; 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'; } diff --git a/desktop/flipper-plugin/src/plugin/PluginBase.tsx b/desktop/flipper-plugin/src/plugin/PluginBase.tsx index 68cc41cf0..2da1277de 100644 --- 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); } } diff --git a/desktop/flipper-plugin/src/test-utils/test-utils.tsx b/desktop/flipper-plugin/src/test-utils/test-utils.tsx index fba257db7..83cbedcb6 100644 --- 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(), diff --git a/desktop/flipper-plugin/src/ui/Container.tsx b/desktop/flipper-plugin/src/ui/Container.tsx new file mode 100644 index 000000000..64b65fa24 --- /dev/null +++ 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( + ({ + 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`, + }), +); diff --git a/desktop/flipper-plugin/src/ui/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx index 33f22daf3..7fb57ae1b 100644 --- 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( - ({ - 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 = ; - } - if (!child2) { - child2 = ; - } - 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 = ( - - {child1} - - ); - } else { - child2 = ( - - {child2} - - ); - } - } - return ( - - {child1} - {child2} - - ); -} - /** * 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`; diff --git a/desktop/flipper-plugin/src/ui/Sidebar.tsx b/desktop/flipper-plugin/src/ui/Sidebar.tsx index 7b7ab15ba..0a2bab262 100644 --- 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)({ 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; diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index 534e1235e..8fcc520c3 100644 --- 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( const isUnitTest = useInUnitTest(); // eslint-disable-next-line - const scope = isUnitTest ? "" : usePluginInstanceMaybe()?.pluginKey ?? ""; + const scope = isUnitTest ? '' : usePluginInstanceMaybe()?.pluginKey ?? ''; const virtualizerRef = useRef(); const [tableState, dispatch] = useReducer( dataTableManagerReducer as DataTableReducer, @@ -344,7 +344,12 @@ export function DataTable( // 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( /** Range finder */ const [range, setRange] = useState(''); - const hideRange = useRef(); + const hideRange = useRef(); const onRangeChange = useCallback( (start: number, end: number, total: number, offset) => { @@ -425,7 +430,7 @@ export function DataTable( const contexMenu = isUnitTest ? undefined : // eslint-disable-next-line - useCallback( + useCallback( () => tableContextMenuFactory( dataSource, diff --git a/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx b/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx index b284ff340..5cb5ee804 100644 --- 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 { this.props.onElementSelected(key); }; + isDarwin = + tryGetFlipperLibImplementation()?.environmentInfo.os.platform === 'darwin'; + onKeyDown = (e: KeyboardEvent) => { const {selected} = this.props; if (selected == null) { @@ -550,8 +556,7 @@ export class Elements extends PureComponent { 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(); diff --git a/desktop/flipper-plugin/src/ui/renderSplitLayout.tsx b/desktop/flipper-plugin/src/ui/renderSplitLayout.tsx new file mode 100644 index 000000000..c438fa702 --- /dev/null +++ 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 = ; + } + if (!child2) { + child2 = ; + } + 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 = ( + + {child1} + + ); + } else { + child2 = ( + + {child2} + + ); + } + } + return ( + + {child1} + {child2} + + ); +} + +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`; diff --git a/desktop/flipper-plugin/src/utils/sha256.tsx b/desktop/flipper-plugin/src/utils/sha256.tsx index 81413e7c2..9c5d47192 100644 --- 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 { - if (process.env.NODE_ENV === 'test') { + if (isTest()) { return Promise.resolve(message.substr(0, 100)); } // From https://stackoverflow.com/a/48161723/1983583 diff --git a/desktop/flipper-plugin/src/utils/shallowSerialization.tsx b/desktop/flipper-plugin/src/utils/shallowSerialization.tsx index ab4af9165..30b5ef1d4 100644 --- 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; } diff --git a/desktop/flipper-plugin/src/utils/useAssertStableRef.tsx b/desktop/flipper-plugin/src/utils/useAssertStableRef.tsx index a6271a778..9de3e63ab 100644 --- 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) { diff --git a/desktop/flipper-plugin/src/utils/useInUnitTest.tsx b/desktop/flipper-plugin/src/utils/useInUnitTest.tsx index 42a30098c..bcfbdfc38 100644 --- 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(); } diff --git a/desktop/flipper-plugin/tsconfig.json b/desktop/flipper-plugin/tsconfig.json index 1a6a6f758..d13f25922 100644 --- a/desktop/flipper-plugin/tsconfig.json +++ b/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": [ { diff --git a/desktop/flipper-server-core/tsconfig.json b/desktop/flipper-server-core/tsconfig.json index b50a22606..a78eb8413 100644 --- a/desktop/flipper-server-core/tsconfig.json +++ b/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": [ { diff --git a/desktop/flipper-server/package.json b/desktop/flipper-server/package.json index c1119d3c0..250a692bb 100644 --- a/desktop/flipper-server/package.json +++ b/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", - "typescript": "^4.4.4" + "metro": "^0.66.2" }, "peerDependencies": {}, "scripts": { diff --git a/desktop/flipper-server/tsconfig.json b/desktop/flipper-server/tsconfig.json index 0f7436129..9657c61f7 100644 --- a/desktop/flipper-server/tsconfig.json +++ b/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": [ diff --git a/desktop/flipper-ui-browser/src/index-fast-refresh.tsx b/desktop/flipper-ui-browser/src/index-fast-refresh.tsx index 6682d2720..13e268d66 100644 --- a/desktop/flipper-ui-browser/src/index-fast-refresh.tsx +++ b/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'); diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx index e5431b215..77d943630 100644 --- a/desktop/flipper-ui-browser/src/index.tsx +++ b/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?.(); diff --git a/desktop/flipper-ui-browser/src/initializeRenderHost.tsx b/desktop/flipper-ui-browser/src/initializeRenderHost.tsx index 7f97a9f6a..fd8cd9996 100644 --- a/desktop/flipper-ui-browser/src/initializeRenderHost.tsx +++ b/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; diff --git a/desktop/flipper-ui-browser/tsconfig.json b/desktop/flipper-ui-browser/tsconfig.json index 1932169d2..c3d94f360 100644 --- a/desktop/flipper-ui-browser/tsconfig.json +++ b/desktop/flipper-ui-browser/tsconfig.json @@ -3,7 +3,7 @@ "compilerOptions": { "outDir": "lib", "rootDir": "src", - "lib": ["dom"] + "lib": ["dom", "ES2019"] }, "references": [ { diff --git a/desktop/flipper-ui-core/package.json b/desktop/flipper-ui-core/package.json index 9d070ce06..b559b3b8c 100644 --- a/desktop/flipper-ui-core/package.json +++ b/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", - "ts-jest": "^26.5.6" + "redux-mock-store": "^1.0.1" }, "scripts": { "reset": "rimraf lib *.tsbuildinfo", diff --git a/desktop/flipper-ui-core/src/__mocks__/electron.tsx b/desktop/flipper-ui-core/src/__mocks__/electron.tsx deleted file mode 100644 index f1323d833..000000000 --- a/desktop/flipper-ui-core/src/__mocks__/electron.tsx +++ /dev/null @@ -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: {}, -}; diff --git a/desktop/flipper-ui-core/src/__tests__/PluginContainer.node.tsx b/desktop/flipper-ui-core/src/__tests__/PluginContainer.node.tsx index 27e16a506..7d62dee73 100644 --- a/desktop/flipper-ui-core/src/__tests__/PluginContainer.node.tsx +++ b/desktop/flipper-ui-core/src/__tests__/PluginContainer.node.tsx @@ -74,11 +74,11 @@ test('Plugin container can render plugin and receive updates', async () => {
{
{
{
{
{
{
{
{
{
{
void; - platform: NodeJS.Platform; + platform: Platform; }; type StateFromProps = { diff --git a/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx b/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx index c6258ceb6..dbed0a635 100644 --- a/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx +++ b/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 }; diff --git a/desktop/flipper-ui-core/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap b/desktop/flipper-ui-core/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap index 8b0b7b9d4..1fdfafd28 100644 --- a/desktop/flipper-ui-core/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap +++ b/desktop/flipper-ui-core/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap @@ -2,7 +2,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `