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`] = `