fix: fix flow warnings (#300)

* chore: update dependencies

* fix: fix flow warnings

.flowconfig

@@ -9,6 +9,9 @@
 ./node_modules/mapbox-gl/flow-typed
 ./node_modules/mapbox-gl/dist/mapbox-gl.js.flow
 
+[declarations]
+<PROJECT_ROOT>/node_modules/mapbox-gl/.*
+
 [options]
 server.max_workers=4
 esproposal.class_static_fields=enable

package.json

@@ -57,57 +57,57 @@
     "@mapbox/mapbox-gl-traffic": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-transform-spread": "^7.10.0",
-    "@babel/preset-env": "^7.10.0",
-    "@babel/preset-flow": "^7.9.0",
-    "@babel/preset-react": "^7.10.0",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-spread": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "@deck.gl/core": "^8.1.3",
     "@deck.gl/layers": "^8.1.3",
     "@deck.gl/mapbox": "^8.1.3",
     "@luma.gl/core": "^8.1.1",
     "@mapbox/mapbox-gl-language": "^0.10.0",
     "@mapbox/mapbox-gl-traffic": "^1.0.2",
-    "@size-limit/preset-small-lib": "^4.5.0",
+    "@size-limit/preset-small-lib": "^4.5.5",
     "@turf/random": "^6.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "codecov": "^3.7.0",
+    "codecov": "^3.7.1",
     "commitizen": "^4.1.2",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
     "cz-conventional-changelog": "^3.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-flowtype": "^5.1.1",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.20.0",
-    "flow-bin": "^0.108.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.3",
+    "flow-bin": "^0.129.0",
     "flow-coverage-report": "^0.7.0",
-    "flow-remove-types": "^2.125.1",
-    "gh-pages": "^2.2.0",
+    "flow-remove-types": "^2.129.0",
+    "gh-pages": "^3.1.0",
     "husky": "^4.2.5",
-    "jest": "^26.0.1",
-    "lint-staged": "^10.2.6",
-    "mapbox-gl": "^1.10.1",
+    "jest": "^26.1.0",
+    "lint-staged": "^10.2.11",
+    "mapbox-gl": "^1.11.1",
     "prettier": "^2.0.5",
     "prettier-eslint": "^9.0.1",
     "prettier-eslint-cli": "^5.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-styleguidist": "^11.0.8",
-    "rollup": "^2.10.9",
+    "rollup": "^2.22.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "size-limit": "^4.5.0",
-    "standard-version": "^8.0.0",
+    "rollup-plugin-terser": "^6.1.0",
+    "size-limit": "^4.5.5",
+    "standard-version": "^8.0.2",
     "style-loader": "^1.2.1",
     "webpack": "^4.43.0"
   },

src/components/Layer/index.js

@@ -119,6 +119,7 @@ class Layer extends PureComponent<Props> {
       this.props.type !== prevProps.type ||
       (prevProps.type !== 'background' &&
         (this.props.source !== prevProps.source ||
+          // $FlowFixMe
           this.props['source-layer'] !== prevProps['source-layer']))
     ) {
       this._id = id;

src/components/Source/index.js

@@ -47,7 +47,9 @@ class Source extends PureComponent<Props, State> {
   };
 
   componentDidMount() {
-    const { id, children, ...source } = validateSource(this.props);
+    const { id, children, ...restSourceProps } = this.props;
+    const source = validateSource((restSourceProps: any));
+
     this._map.addSource(id, source);
     this._map.on('sourcedata', this._onSourceData);
   }
@@ -56,9 +58,12 @@ class Source extends PureComponent<Props, State> {
     const {
       id: prevId,
       children: prevChildren,
-      ...prevSource
-    } = validateSource(prevProps);
-    const { id, children, ...source } = validateSource(this.props);
+      ...prevSourceProps
+    } = prevProps;
+    const prevSource = validateSource((prevSourceProps: any));
+
+    const { id, children, ...restSourceProps } = this.props;
+    const source = validateSource((restSourceProps: any));
 
     if (id !== prevId || source.type !== prevSource.type) {
       this._map.removeSource(prevId);

src/utils/validateSource.js

@@ -1,20 +1,43 @@
 // @flow
-import type { Props } from '../components/Source';
+import type {
+  SourceSpecification,
+  RasterSourceSpecification,
+  RasterDEMSourceSpecification,
+  VectorSourceSpecification,
+  GeoJSONSourceSpecification,
+  ImageSourceSpecification,
+  VideoSourceSpecification
+} from 'mapbox-gl/src/style-spec/types';
 
-export default (props: Props) => {
+export default (props: SourceSpecification): SourceSpecification => {
   switch (props.type) {
-    case 'vector':
-      return { type: 'vector', ...props };
-    case 'raster':
-      return { type: 'raster', ...props };
-    case 'raster-dem':
-      return { type: 'raster-dem', ...props };
-    case 'geojson':
-      return { type: 'geojson', ...props };
-    case 'video':
-      return { type: 'video', ...props };
-    case 'image':
-      return { type: 'image', ...props };
+    case 'vector': {
+      const source: VectorSourceSpecification = { type: 'vector', ...props };
+      return source;
+    }
+    case 'raster': {
+      const source: RasterSourceSpecification = { type: 'raster', ...props };
+      return source;
+    }
+    case 'raster-dem': {
+      const source: RasterDEMSourceSpecification = {
+        type: 'raster-dem',
+        ...props
+      };
+      return source;
+    }
+    case 'geojson': {
+      const source: GeoJSONSourceSpecification = { type: 'geojson', ...props };
+      return source;
+    }
+    case 'video': {
+      const source: VideoSourceSpecification = { type: 'video', ...props };
+      return source;
+    }
+    case 'image': {
+      const source: ImageSourceSpecification = { type: 'image', ...props };
+      return source;
+    }
     default:
       throw new Error(`Unknown type for '${props.id}' Source`);
   }