Upgrade flow to v63, and add explicitConnect

.eslintrc.js

@@ -92,7 +92,7 @@ module.exports = {
     react: {
       pragma: 'React',
       version: '15.0',
-      flowVersion: '0.54.1',
+      flowVersion: '0.63.1',
     },
   },
 };

package.json

@@ -121,9 +121,9 @@
     "express": "^4.15.4",
     "fake-indexeddb": "^2.0.3",
     "file-loader": "^0.11.2",
-    "flow-bin": "^0.54.1",
+    "flow-bin": "^0.63.1",
     "flow-coverage-report": "^0.4.0",
-    "flow-typed": "^2.1.5",
+    "flow-typed": "^2.2.3",
     "html-webpack-plugin": "^2.30.1",
     "http-server": "^0.10.0",
     "husky": "^0.14.3",

src/actions/profile-view.js

@@ -312,12 +312,14 @@ export function addTransformToStack(
 }
 
 export function popTransformsFromStack(
-  threadIndex: ThreadIndex,
   firstRemovedFilterIndex: number
-): Action {
-  return {
-    type: 'POP_TRANSFORMS_FROM_STACK',
-    threadIndex,
-    firstRemovedFilterIndex,
+): ThunkAction<void> {
+  return (dispatch, getState) => {
+    const threadIndex = getSelectedThreadIndex(getState());
+    dispatch({
+      type: 'POP_TRANSFORMS_FROM_STACK',
+      threadIndex,
+      firstRemovedFilterIndex,
+    });
   };
 }

src/actions/receive-profile.js

@@ -77,10 +77,16 @@ export function coalescedFunctionsUpdate(
   };
 }
 
-const requestIdleCallbackPolyfill: typeof requestIdleCallback =
-  typeof window === 'object' && window.requestIdleCallback
-    ? window.requestIdleCallback
-    : callback => setTimeout(callback, 0);
+let requestIdleCallbackPolyfill: (
+  callback: () => void,
+  _opts?: { timeout: number }
+) => mixed;
+
+if (typeof window === 'object' && window.requestIdleCallback) {
+  requestIdleCallbackPolyfill = window.requestIdleCallback;
+} else {
+  requestIdleCallbackPolyfill = callback => setTimeout(callback, 0);
+}
 
 class ColascedFunctionsUpdateDispatcher {
   _updates: FunctionsUpdatePerThread;

src/components/app/Home.js

@@ -5,13 +5,18 @@
 // @flow
 
 import * as React from 'react';
-import { connect } from 'react-redux';
+import explicitConnect from '../../utils/connect';
 import classNames from 'classnames';
 import AddonScreenshot from '../../../res/gecko-profiler-screenshot-2018-01-18.png';
 import PerfScreenshot from '../../../res/perf-screenshot-2017-09-08.jpg';
 import { retrieveProfileFromFile } from '../../actions/receive-profile';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import FooterLinks from './FooterLinks';
+import type {
+  ExplicitConnectOptions,
+  ConnectedProps,
+} from '../../utils/connect';
+
 require('./Home.css');
 
 const ADDON_URL =
@@ -46,7 +51,7 @@ class InstallButton extends React.PureComponent<InstallButtonProps> {
 }
 
 type UploadButtonProps = {
-  retrieveProfileFromFile: File => void,
+  retrieveProfileFromFile: typeof retrieveProfileFromFile,
 };
 
 class UploadButton extends React.PureComponent<UploadButtonProps> {
@@ -96,10 +101,15 @@ window.geckoProfilerAddonInstalled = function() {
   }
 };
 
-type HomeProps = {
-  specialMessage?: string,
-  retrieveProfileFromFile: File => void,
-};
+type OwnHomeProps = {|
+  +specialMessage?: string,
+|};
+
+type DispatchHomeProps = {|
+  +retrieveProfileFromFile: typeof retrieveProfileFromFile,
+|};
+
+type HomeProps = ConnectedProps<OwnHomeProps, {||}, DispatchHomeProps>;
 
 type HomeState = {
   isDragging: boolean,
@@ -392,4 +402,8 @@ function _isFirefox(): boolean {
   return Boolean(navigator.userAgent.match(/Firefox\/\d+\.\d+/));
 }
 
-export default connect(state => state, { retrieveProfileFromFile })(Home);
+const options: ExplicitConnectOptions<OwnHomeProps, {||}, DispatchHomeProps> = {
+  mapDispatchToProps: { retrieveProfileFromFile },
+  component: Home,
+};
+export default explicitConnect(options);

src/components/app/Initializing.js

@@ -3,50 +3,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // @flow
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import React from 'react';
 
-type Props = {
-  className: string,
-  profilerUrl: string,
-};
+const PROFILER_URL = 'https://github.com/devtools-html/Gecko-Profiler-Addon';
 
-class Initializing extends PureComponent<Props> {
-  render() {
-    const { className, profilerUrl } = this.props;
-
-    return (
-      <div className={className}>
-        <div className={`${className}-text`}>
-          <h1>Waiting on Gecko Profiler to provide a profile.</h1>
-          <p>
-            Make sure Firefox is running the{' '}
-            <a href={profilerUrl}> new version of the Gecko Profiler add-on</a>.
-            You can control the profiler with the following two shortcuts.
-          </p>
-          <ul>
-            <li>
-              <span>Ctrl</span>+<span>Shift</span>+<span>5</span>: Stop /
-              Restart profiling
-            </li>
-            <li>
-              <span>Ctrl</span>+<span>Shift</span>+<span>6</span>: Capture the
-              profile and open up this interface.
-            </li>
-          </ul>
-        </div>
+export default function Initializing() {
+  return (
+    <div className="initializing">
+      <div className="initializing-text">
+        <h1>Waiting on Gecko Profiler to provide a profile.</h1>
+        <p>
+          Make sure Firefox is running the{' '}
+          <a href={PROFILER_URL}> new version of the Gecko Profiler add-on</a>.
+          You can control the profiler with the following two shortcuts.
+        </p>
+        <ul>
+          <li>
+            <span>Ctrl</span>+<span>Shift</span>+<span>5</span>: Stop / Restart
+            profiling
+          </li>
+          <li>
+            <span>Ctrl</span>+<span>Shift</span>+<span>6</span>: Capture the
+            profile and open up this interface.
+          </li>
+        </ul>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-Initializing.propTypes = {
-  className: PropTypes.string.isRequired,
-  profilerUrl: PropTypes.string.isRequired,
-};
-
-export default connect(() => ({
-  className: 'initializing',
-  profilerUrl: 'https://github.com/devtools-html/Gecko-Profiler-Addon',
-}))(Initializing);

src/components/app/ProfileFilterNavigator.js

@@ -4,23 +4,33 @@
 
 // @flow
 
-import { connect } from 'react-redux';
-import actions from '../../actions';
+import explicitConnect from '../../utils/connect';
+import { popRangeFiltersAndUnsetSelection } from '../../actions/profile-view';
 import { getRangeFilterLabels } from '../../reducers/url-state';
 import FilterNavigatorBar from '../calltree/FilterNavigatorBar';
 
-import type { State } from '../../types/reducers';
+import type { ExplicitConnectOptions } from '../../utils/connect';
+import type { ElementProps } from 'react';
 
-export default connect(
-  (state: State) => {
+type Props = ElementProps<typeof FilterNavigatorBar>;
+type DispatchProps = {|
+  +onPop: $PropertyType<Props, 'onPop'>,
+|};
+type StateProps = $ReadOnly<$Exact<$Diff<Props, DispatchProps>>>;
+
+const options: ExplicitConnectOptions<{||}, StateProps, DispatchProps> = {
+  mapStateToProps: state => {
     const items = getRangeFilterLabels(state);
     return {
       className: 'profileFilterNavigator',
       items: items,
       selectedItem: items.length - 1,
     };
   },
-  {
-    onPop: actions.popRangeFiltersAndUnsetSelection,
-  }
-)(FilterNavigatorBar);
+  mapDispatchToProps: {
+    onPop: popRangeFiltersAndUnsetSelection,
+  },
+  component: FilterNavigatorBar,
+};
+
+export default explicitConnect(options);

src/components/app/ProfileSharing.js

@@ -5,7 +5,7 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
+import explicitConnect from '../../utils/connect';
 import classNames from 'classnames';
 import {
   getProfile,
@@ -29,6 +29,10 @@ import type { StartEndRange } from '../../types/units';
 import type { Profile } from '../../types/profile';
 import type { Action, DataSource } from '../../types/actions';
 import type { SymbolicationStatus } from '../../types/reducers';
+import type {
+  ExplicitConnectOptions,
+  ConnectedProps,
+} from '../../utils/connect';
 
 require('./ProfileSharing.css');
 
@@ -438,14 +442,23 @@ class ProfileDownloadButton extends PureComponent<
   }
 }
 
-type ProfileSharingProps = {
-  profile: Profile,
-  rootRange: StartEndRange,
-  dataSource: DataSource,
-  symbolicationStatus: SymbolicationStatus,
-  profilePublished: typeof actions.profilePublished,
-  predictUrl: (Action | Action[]) => string,
-};
+type ProfileSharingStateProps = {|
+  +profile: Profile,
+  +rootRange: StartEndRange,
+  +dataSource: DataSource,
+  +symbolicationStatus: SymbolicationStatus,
+  +predictUrl: (Action | Action[]) => string,
+|};
+
+type ProfileSharingDispatchProps = {|
+  +profilePublished: typeof actions.profilePublished,
+|};
+
+type ProfileSharingProps = ConnectedProps<
+  {||},
+  ProfileSharingStateProps,
+  ProfileSharingDispatchProps
+>;
 
 const ProfileSharing = ({
   profile,
@@ -466,13 +479,19 @@ const ProfileSharing = ({
     <ProfileDownloadButton profile={profile} rootRange={rootRange} />
   </div>;
 
-export default connect(
-  state => ({
+const options: ExplicitConnectOptions<
+  {||},
+  ProfileSharingStateProps,
+  ProfileSharingDispatchProps
+> = {
+  mapStateToProps: state => ({
     profile: getProfile(state),
     rootRange: getProfileRootRange(state),
     dataSource: getDataSource(state),
     symbolicationStatus: getProfileViewOptions(state).symbolicationStatus,
     predictUrl: getUrlPredictor(state),
   }),
-  { profilePublished: actions.profilePublished }
-)(ProfileSharing);
+  mapDispatchToProps: { profilePublished: actions.profilePublished },
+  component: ProfileSharing,
+};
+export default explicitConnect(options);