Improve Bridge Flow types (#352)

* Updated local fork of react-window
* Updated Fow 97 -> 103
* Lint ignore NPM dist
* Improved Bridge Flow types

.eslintignore

@@ -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
 

package.json

@@ -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"
@@ -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",

packages/react-devtools-core/src/backend.js

@@ -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';
@@ -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;

packages/react-devtools-core/src/standalone.js

@@ -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);
@@ -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;
 
@@ -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,
@@ -166,7 +167,7 @@ function initialize(socket: WebSocket) {
       }
     },
   });
-  ((bridge: any): Bridge).addListener('shutdown', () => {
+  ((bridge: any): FrontendBridge).addListener('shutdown', () => {
     socket.close();
   });
 

shells/dev/app/SuspenseTree/index.js

@@ -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>
   );
 }
 
@@ -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}
@@ -33,7 +33,7 @@ function PrimaryFallbackTest({ initialSuspend }) {
       <Suspense fallback={fallbackStep}>
         {suspend ? <Never /> : primaryStep}
       </Suspense>
-    </>
+    </Fragment>
   );
 }
 
@@ -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>
   );
 }
 
@@ -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} />;
 }
 

src/__tests__/bridge-test.js

@@ -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');

src/__tests__/inspectedElementContext-test.js

@@ -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;

src/__tests__/legacy/inspectElement-test.js

@@ -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) => {

src/__tests__/ownersListContext-test.js

@@ -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;
 

src/__tests__/profilerContext-test.js

@@ -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';
@@ -10,7 +10,7 @@ describe('ProfilerContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 

src/__tests__/profilingCache-test.js

@@ -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', () => {
@@ -11,7 +11,7 @@ describe('ProfilingCache', () => {
   let Scheduler;
   let SchedulerTracing;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;
 

src/__tests__/profilingCharts-test.js

@@ -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>
@@ -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>
@@ -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>

src/__tests__/setupTests.js

@@ -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,
@@ -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;

src/__tests__/storeComponentFilters-test.js

@@ -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;
 

src/__tests__/treeContext-test.js

@@ -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,
@@ -12,7 +12,7 @@ describe('TreeListContext', () => {
   let React;
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
-  let bridge: Bridge;
+  let bridge: FrontendBridge;
   let store: Store;
   let utils;