fix: improve flow typings

Author: stepankuzmin

.circleci/config.yml

@@ -2,6 +2,7 @@
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 
 version: 2
+
 jobs:
   build:
     docker:
@@ -15,9 +16,9 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
 
       - run: yarn install
 
@@ -26,9 +27,7 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
-      # run tests!
       - run: yarn lint
-      - run: yarn typecheck
+      - run: yarn flow
       - run: yarn test
       - run: yarn test:coverage
-      # - run: yarn coverage

.flowconfig

@@ -7,6 +7,7 @@
 [libs]
 ./flow-typed
 ./node_modules/mapbox-gl/flow-typed
+./node_modules/mapbox-gl/dist/mapbox-gl.js.flow
 
 [options]
 esproposal.class_static_fields=enable

flow-typed/types.js

@@ -1,30 +1,44 @@
 // @flow
 
-import Immutable from 'immutable';
+import type Map from 'mapbox-gl/src/ui/map';
+import type Popup from 'mapbox-gl/src/ui/popup';
+import type Marker from 'mapbox-gl/src/ui/marker';
+import type { Map as ImmutableMap } from 'immutable';
+import type { MapMouseEvent, MapTouchEvent } from 'mapbox-gl/src/ui/events';
+
 import type {
-  Map,
-  StyleSpecification,
-  SourceSpecification,
   LayerSpecification,
-  MapMouseEvent,
-  MapTouchEvent
-} from 'mapbox-gl';
+  StyleSpecification,
+  SourceSpecification
+} from 'mapbox-gl/src/style-spec/types';
+
+import type { LngLatBoundsLike } from 'mapbox-gl/src/geo/lng_lat_bounds';
 
 declare type MapboxMap = Map;
 
-declare type MapboxLayer = LayerSpecification;
+declare type MapboxPopup = Popup;
+
+declare type MapboxMarker = Marker;
+
+declare type MapboxLngLatBoundsLike = LngLatBoundsLike;
+
+declare type MapboxLayerSpecification = LayerSpecification;
+
+declare type MapboxStyleSpecification = StyleSpecification;
+
+declare type MapboxSourceSpecification = SourceSpecification;
 
 declare type MapStyle = {
   toJS: () => StyleSpecification
-} & Immutable.Map<string, any>;
+} & ImmutableMap<string, any>;
 
 declare type MapSource = {
   toJS: () => SourceSpecification
-} & Immutable.Map<string, any>;
+} & ImmutableMap<string, any>;
 
 declare type MapLayer = {
   toJS: () => LayerSpecification
-} & Immutable.Map<string, any>;
+} & ImmutableMap<string, any>;
 
 declare type Viewport = {
   latitude: number,

package.json

@@ -17,8 +17,8 @@
   "scripts": {
     "start": "npm run styleguide",
     "lint": "eslint src test",
-    "typecheck": "flow check src",
-    "typecheck:coverage": "flow-coverage-report -i 'src/**/*.js' -t html",
+    "flow": "flow check",
+    "flow:coverage": "flow-coverage-report -i 'src/**/*.js' -t html",
     "test": "jest",
     "test:coverage": "jest --coverage && codecov",
     "build": "rollup -c",

src/components/Layer/index.js

@@ -92,10 +92,10 @@ class Layer extends PureComponent<Props> {
   }
 
   componentDidMount() {
-    const map = this._map;
+    const map: MapboxMap = this._map;
     const { layer, before } = this.props;
 
-    const mapboxLayer: MapboxLayer = layer.toJS();
+    const mapboxLayer: MapboxLayerSpecification = layer.toJS();
     if (before && map.getLayer(before)) {
       map.addLayer(mapboxLayer, before);
     } else {

src/components/MapContext.js

@@ -1,4 +1,5 @@
 // @flow
+
 import createContext from 'create-react-context';
 import type { Context } from 'create-react-context';
 

src/components/MapGL/events.js

@@ -1,3 +1,5 @@
+// @flow
+
 const events = [
   'resize',
   'remove',

src/components/MapGL/index.js

@@ -3,6 +3,7 @@
 import { Children, PureComponent, createElement, cloneElement } from 'react';
 import { isImmutable } from 'immutable';
 import type { Node } from 'react';
+
 import type { EventProps } from './eventProps';
 
 import Layer from '../Layer';
@@ -102,7 +103,7 @@ type Props = EventProps & {
   refreshExpiredTiles?: boolean,
 
   /** If set, the map will be constrained to the given bounds. */
-  maxBounds?: mapboxgl.LngLatBoundsLike,
+  maxBounds?: MapboxLngLatBoundsLike,
 
   /** If `true`, the "scroll to zoom" interaction is enabled. */
   scrollZoom?: boolean | Object,
@@ -365,8 +366,8 @@ class MapGL extends PureComponent<Props, State> {
    * @param {Props} newProps
    */
   _updateMapViewport(newProps: Props): void {
-    const map: mapboxgl.Map = this._map;
-    const center: mapboxgl.LngLat = map.getCenter();
+    const map: MapboxMap = this._map;
+    const center = map.getCenter();
 
     const viewportChanged =
       newProps.latitude !== center.lat ||

src/components/Marker/index.js

@@ -3,6 +3,7 @@
 import { render, unmountComponentAtNode } from 'react-dom';
 import { PureComponent, createElement } from 'react';
 import type { Element } from 'react';
+import type { PointLike } from '@mapbox/point-geometry';
 
 import MapContext from '../MapContext';
 import mapboxgl from '../../utils/mapbox-gl';
@@ -21,15 +22,15 @@ type Props = {
    * The offset in pixels as a `PointLike` object to apply
    * relative to the element's center. Negatives indicate left and up.
    */
-  offset?: mapboxgl.PointLike
+  offset?: PointLike
 };
 
 class Marker extends PureComponent<Props> {
   _map: MapboxMap;
 
   _container: HTMLDivElement;
 
-  _marker: mapboxgl.Marker;
+  _marker: MapboxMarker;
 
   static displayName = 'Marker';
 
@@ -43,6 +44,7 @@ class Marker extends PureComponent<Props> {
     this._container = document.createElement('div');
     render(element, this._container);
 
+    // $FlowFixMe
     const marker = new mapboxgl.Marker(this._container, { offset });
     marker.setLngLat([longitude, latitude]).addTo(this._map);
     this._marker = marker;

src/components/Popup/index.js

@@ -43,13 +43,13 @@ type Props = {
    * The offset in pixels as a `PointLike` object to apply
    * relative to the element's center. Negatives indicate left and up.
    */
-  offset?: mapboxgl.LngLatLike
+  offset?: MapboxLngLatBoundsLike
 };
 
 class Popup extends PureComponent<Props> {
   _map: MapboxMap;
 
-  _popup: mapboxgl.Popup;
+  _popup: MapboxPopup;
 
   static displayName = 'Popup';
 
@@ -76,6 +76,7 @@ class Popup extends PureComponent<Props> {
     const div = document.createElement('div');
     render(element, div);
 
+    // $FlowFixMe
     const popup = new mapboxgl.Popup({ offset, closeButton, closeOnClick, anchor });
     popup.setLngLat([longitude, latitude]).addTo(this._map);
     popup.setDOMContent(div);

src/index.js

@@ -1,3 +1,5 @@
+// @flow
+
 export { default } from './components/MapGL';
 export { default as Layer } from './components/Layer';
 export { default as Source } from './components/Source';

src/utils/capitalizeFirstLetter.js

@@ -1,4 +1,6 @@
-function capitalizeFirstLetter(string) {
+// @flow
+
+function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 

src/utils/generateEventProps.js

@@ -1,3 +1,5 @@
+// @flow
+
 const fs = require('fs');
 const path = require('path');
 const events = require('../components/MapGL/events');

src/utils/mapbox-gl.js

@@ -1,3 +1,5 @@
+// @flow
+
 const isBrowser = !(
   Object.prototype.toString.call(global.process) === '[object process]' && !global.process.browser
 );

src/utils/queryRenderedFeatures.js

@@ -1,9 +1,7 @@
 // @flow
 
-import mapboxgl from './mapbox-gl';
-
 const queryRenderedFeatures = (
-  map: mapboxgl.Map,
+  map: MapboxMap,
   layerId: string,
   position: [number, number],
   radius: number