Skip to content

Commit

Permalink
Improve Bridge Flow types (#352)
Browse files Browse the repository at this point in the history
* Updated local fork of react-window
* Updated Fow 97 -> 103
* Lint ignore NPM dist
* Improved Bridge Flow types
  • Loading branch information
Brian Vaughn authored Jul 20, 2019
1 parent 39ad101 commit 4b34a77
Show file tree
Hide file tree
Showing 46 changed files with 1,066 additions and 379 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ shells/browser/chrome/build
shells/browser/firefox/build
shells/browser/shared/build
shells/dev/dist
packages/react-devtools-core/dist
vendor
*.js.snap

Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
"test:chrome": "node ./shells/browser/chrome/test",
"test:firefox": "node ./shells/browser/firefox/test",
"test:standalone": "cd packages/react-devtools && yarn start",
"typecheck": "flow check"
"typecheck": "flow check --show-all-errors"
},
"devEngines": {
"node": "10.x || 11.x"
Expand Down Expand Up @@ -119,7 +119,7 @@
"fbjs": "0.5.1",
"fbjs-scripts": "0.7.0",
"firefox-profile": "^1.0.2",
"flow-bin": "^0.97.0",
"flow-bin": "^0.103.0",
"fs-extra": "^3.0.1",
"gh-pages": "^1.0.0",
"html2canvas": "^1.0.0-alpha.12",
Expand Down
3 changes: 2 additions & 1 deletion packages/react-devtools-core/src/backend.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { __DEBUG__ } from 'src/constants';
import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
import { getDefaultComponentFilters } from 'src/utils';

import type { BackendBridge } from 'src/bridge';
import type { ComponentFilter } from 'src/types';
import type { DevToolsHook } from 'src/backend/types';
import type { ResolveNativeStyle } from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
Expand Down Expand Up @@ -64,7 +65,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
return;
}

let bridge: Bridge | null = null;
let bridge: BackendBridge | null = null;

const messageListeners = [];
const uri = 'ws://' + host + ':' + port;
Expand Down
7 changes: 4 additions & 3 deletions packages/react-devtools-core/src/standalone.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import DevTools from 'src/devtools/views/DevTools';
import launchEditor from './launchEditor';
import { __DEBUG__ } from 'src/constants';

import type { FrontendBridge } from 'src/bridge';
import type { InspectedElement } from 'src/devtools/views/Components/types';

installHook(window);
Expand Down Expand Up @@ -46,7 +47,7 @@ function setStatusListener(value: StatusListener) {
return DevtoolsUI;
}

let bridge: Bridge | null = null;
let bridge: FrontendBridge | null = null;
let store: Store | null = null;
let root = null;

Expand Down Expand Up @@ -83,7 +84,7 @@ function reload() {
root = createRoot(node);
root.render(
createElement(DevTools, {
bridge: ((bridge: any): Bridge),
bridge: ((bridge: any): FrontendBridge),
showTabBar: true,
store: ((store: any): Store),
warnIfLegacyBackendDetected: true,
Expand Down Expand Up @@ -166,7 +167,7 @@ function initialize(socket: WebSocket) {
}
},
});
((bridge: any): Bridge).addListener('shutdown', () => {
((bridge: any): FrontendBridge).addListener('shutdown', () => {
socket.close();
});

Expand Down
40 changes: 20 additions & 20 deletions shells/dev/app/SuspenseTree/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
// @flow

import React, { Suspense, useState } from 'react';
import React, { Fragment, Suspense, useState } from 'react';

function SuspenseTree() {
return (
<>
<Fragment>
<h1>Suspense</h1>
<h4>Primary to Fallback Cycle</h4>
<PrimaryFallbackTest initialSuspend={false} />
<h4>Fallback to Primary Cycle</h4>
<PrimaryFallbackTest initialSuspend={true} />
<NestedSuspenseTest />
</>
</Fragment>
);
}

Expand All @@ -20,7 +20,7 @@ function PrimaryFallbackTest({ initialSuspend }) {
const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
const primaryStep = useTestSequence('primary', Primary1, Primary2);
return (
<>
<Fragment>
<label>
<input
checked={suspend}
Expand All @@ -33,7 +33,7 @@ function PrimaryFallbackTest({ initialSuspend }) {
<Suspense fallback={fallbackStep}>
{suspend ? <Never /> : primaryStep}
</Suspense>
</>
</Fragment>
);
}

Expand All @@ -45,32 +45,32 @@ function useTestSequence(label, T1, T2) {
</button>
);
let allSteps = [
<>{next}</>,
<>
<Fragment>{next}</Fragment>,
<Fragment>
{next} <T1 prop={step}>mount</T1>
</>,
<>
</Fragment>,
<Fragment>
{next} <T1 prop={step}>update</T1>
</>,
<>
</Fragment>,
<Fragment>
{next} <T2 prop={step}>several</T2> <T1 prop={step}>different</T1>{' '}
<T2 prop={step}>children</T2>
</>,
<>
</Fragment>,
<Fragment>
{next} <T2 prop={step}>goodbye</T2>
</>,
</Fragment>,
];
return allSteps[step];
}

function NestedSuspenseTest() {
return (
<>
<Fragment>
<h3>Nested Suspense</h3>
<Suspense fallback={<Fallback1>Loading outer</Fallback1>}>
<Parent />
</Suspense>
</>
</Fragment>
);
}

Expand Down Expand Up @@ -118,19 +118,19 @@ function Never() {
throw new Promise(resolve => {});
}

function Fallback1({ prop, ...rest }) {
function Fallback1({ prop, ...rest }: any) {
return <span {...rest} />;
}

function Fallback2({ prop, ...rest }) {
function Fallback2({ prop, ...rest }: any) {
return <span {...rest} />;
}

function Primary1({ prop, ...rest }) {
function Primary1({ prop, ...rest }: any) {
return <span {...rest} />;
}

function Primary2({ prop, ...rest }) {
function Primary2({ prop, ...rest }: any) {
return <span {...rest} />;
}

Expand Down
10 changes: 5 additions & 5 deletions src/__tests__/bridge-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ describe('Bridge', () => {
const bridge = new Bridge(wall);

// Check that we're wired up correctly.
bridge.send('init');
bridge.send('reloadAppForProfiling');
jest.runAllTimers();
expect(wall.send).toHaveBeenCalledWith('init', undefined, undefined);
expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling');

// Should flush pending messages and then shut down.
wall.send.mockClear();
bridge.send('update', '1');
bridge.send('update', '2');
bridge.shutdown();
jest.runAllTimers();
expect(wall.send).toHaveBeenCalledWith('update', '1', undefined);
expect(wall.send).toHaveBeenCalledWith('update', '2', undefined);
expect(wall.send).toHaveBeenCalledWith('shutdown', undefined, undefined);
expect(wall.send).toHaveBeenCalledWith('update', '1');
expect(wall.send).toHaveBeenCalledWith('update', '2');
expect(wall.send).toHaveBeenCalledWith('shutdown');

// Verify that the Bridge doesn't send messages after shutdown.
spyOn(console, 'warn');
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/inspectedElementContext-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

import typeof ReactTestRenderer from 'react-test-renderer';
import type { GetInspectedElementPath } from 'src/devtools/views/Components/InspectedElementContext';
import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type Store from 'src/devtools/store';

describe('InspectedElementContext', () => {
let React;
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;
let meta;
let utils;
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/legacy/inspectElement-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

import type { InspectedElementPayload } from 'src/backend/types';
import type { DehydratedData } from 'src/devtools/views/Components/types';
import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type Store from 'src/devtools/store';

describe('InspectedElementContext', () => {
let React;
let ReactDOM;
let hydrate;
let meta;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;

const act = (callback: Function) => {
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/ownersListContext-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

import typeof ReactTestRenderer from 'react-test-renderer';
import type { Element } from 'src/devtools/views/Components/types';
import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type Store from 'src/devtools/store';

describe('OwnersListContext', () => {
let React;
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;
let utils;

Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/profilerContext-test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow

import typeof ReactTestRenderer from 'react-test-renderer';
import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type { Context } from 'src/devtools/views/Profiler/ProfilerContext';
import type { DispatcherContext } from 'src/devtools/views/Components/TreeContext';
import type Store from 'src/devtools/store';
Expand All @@ -10,7 +10,7 @@ describe('ProfilerContext', () => {
let React;
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;
let utils;

Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/profilingCache-test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow

import typeof ReactTestRenderer from 'react-test-renderer';
import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type Store from 'src/devtools/store';

describe('ProfilingCache', () => {
Expand All @@ -11,7 +11,7 @@ describe('ProfilingCache', () => {
let Scheduler;
let SchedulerTracing;
let TestRenderer: ReactTestRenderer;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;
let utils;

Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/profilingCharts-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('profiling charts', () => {

describe('flamegraph chart', () => {
it('should contain valid data', () => {
const Parent = ({ count }) => {
const Parent = (_: {||}) => {
Scheduler.unstable_advanceTime(10);
return (
<React.Fragment>
Expand Down Expand Up @@ -105,7 +105,7 @@ describe('profiling charts', () => {

describe('ranked chart', () => {
it('should contain valid data', () => {
const Parent = ({ count }) => {
const Parent = (_: {||}) => {
Scheduler.unstable_advanceTime(10);
return (
<React.Fragment>
Expand Down Expand Up @@ -177,7 +177,7 @@ describe('profiling charts', () => {

describe('interactions', () => {
it('should contain valid data', () => {
const Parent = ({ count }) => {
const Parent = (_: {||}) => {
Scheduler.unstable_advanceTime(10);
return (
<React.Fragment>
Expand Down
6 changes: 4 additions & 2 deletions src/__tests__/setupTests.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// @flow

import type { BackendBridge, FrontendBridge } from 'src/bridge';

const env = jasmine.getEnv();
env.beforeEach(() => {
// These files should be required (and re-reuired) before each test,
Expand Down Expand Up @@ -51,13 +53,13 @@ env.beforeEach(() => {
},
});

const agent = new Agent(bridge);
const agent = new Agent(((bridge: any): BackendBridge));

const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;

initBackend(hook, agent, global);

const store = new Store(bridge);
const store = new Store(((bridge: any): FrontendBridge));

global.agent = agent;
global.bridge = bridge;
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/storeComponentFilters-test.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// @flow

import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type Store from 'src/devtools/store';

describe('Store component filters', () => {
let React;
let ReactDOM;
let TestUtils;
let Types;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;
let utils;

Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/treeContext-test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow

import typeof ReactTestRenderer from 'react-test-renderer';
import type Bridge from 'src/bridge';
import type { FrontendBridge } from 'src/bridge';
import type Store from 'src/devtools/store';
import type {
DispatcherContext,
Expand All @@ -12,7 +12,7 @@ describe('TreeListContext', () => {
let React;
let ReactDOM;
let TestRenderer: ReactTestRenderer;
let bridge: Bridge;
let bridge: FrontendBridge;
let store: Store;
let utils;

Expand Down
Loading

0 comments on commit 4b34a77

Please sign in to comment.