Migrate to TypeScript: initial commit (#1268)

Author: Pessimistress

.eslintrc.js

@@ -1,8 +1,8 @@
 // prettier-ignore
 module.exports = {
   parser: 'babel-eslint',
-  plugins: ['flowtype', 'react'],
-  extends: ['uber-jsx', 'uber-es2015', 'prettier', 'prettier/react', 'prettier/flowtype', 'plugin:import/errors', 'plugin:flowtype/recommended'],
+  plugins: ['react', '@typescript-eslint'],
+  extends: ['uber-jsx', 'uber-es2015', 'prettier', 'prettier/react', 'plugin:import/errors'],
   overrides: [{
     files: ['*.spec.js', 'webpack.config.js', '**/bundle/*.js'],
     rules: {

.flowconfig

@@ -4,7 +4,7 @@ const getBabelConfig = require('ocular-dev-tools/config/babel.config');
 module.exports = api => {
   const config = getBabelConfig(api);
 
-  config.presets = (config.presets || []).concat(['@babel/flow', '@babel/preset-react']);
+  config.presets = (config.presets || []).concat(['@babel/preset-react']);
   config.plugins = (config.plugins || []).concat('@babel/proposal-class-properties');
 
   return config;

babel.config.js

@@ -12,7 +12,7 @@ const LIB_DIR = resolve(__dirname, '..');
 const SRC_DIR = resolve(LIB_DIR, './src');
 
 const BABEL_CONFIG = {
-  presets: ['@babel/env', '@babel/react', '@babel/flow'],
+  presets: ['@babel/env', '@babel/react'],
   plugins: ['@babel/proposal-class-properties']
 };
 

examples/webpack.config.local.js

@@ -14,6 +14,7 @@
     "url": "https://github.com/visgl/react-map-gl.git"
   },
   "license": "MIT",
+  "types": "src/index.d.ts",
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
   "esnext": "dist/es6/index.js",
@@ -29,20 +30,24 @@
     "README.md"
   ],
   "scripts": {
-    "typecheck": "flow check",
+    "typecheck": "tsc",
     "start": "(cd examples/controls && yarn && yarn start-local)",
     "bootstrap": "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn && ocular-bootstrap",
     "clean": "ocular-clean",
-    "build": "ocular-clean && ocular-build",
+    "build": "ocular-clean && ocular-build && npm run flowgen",
+    "flowgen": "for i in $(find dist -type f -name \"*.d.ts\"); do sh -c \"flowgen $i -o ${i%.*.*}.js.flow\"; done;",
     "lint": "ocular-lint",
     "cover": "ocular-test cover",
     "publish-prod": "ocular-publish prod",
     "publish-beta": "ocular-publish beta",
-    "test": "flow check && ocular-test",
-    "test-fast": "flow check && ocular-test fast",
+    "test": "tsc && ocular-test",
+    "test-fast": "tsc && ocular-test node",
     "metrics": "ocular-metrics",
     "update-release-branch": "scripts/update-release-branch.sh"
   },
+  "resolutions": {
+    "prettier": "1.14.3"
+  },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "mapbox-gl": "^2.0.0",
@@ -53,21 +58,20 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@probe.gl/bench": "^3.2.1",
     "@probe.gl/test-utils": "^3.2.1",
+    "@types/react": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0",
     "coveralls": "^3.0.0",
     "eslint-config-uber-jsx": "^3.3.3",
-    "eslint-plugin-flowtype": "^3.7.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-react": "^7.10",
-    "flow-bin": "^0.98.1",
+    "flowgen": "^1.12.1",
     "immutable": "^3.8.2",
     "jsdom": "^15.0.0",
     "ocular-dev-tools": "^0.1.8",
@@ -76,7 +80,8 @@
     "react-dom": "^16.3.0",
     "react-test-renderer": "^16.3.0",
     "reify": "^0.18.1",
-    "sinon": "4.1.3"
+    "sinon": "4.1.3",
+    "typescript": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=16.3.0"

flow-typed/npm/mapbox-gl_vx.x.x.js

@@ -0,0 +1,21 @@
+import {MapControlProps} from './use-map-control';
+import {MjolnirEvent} from '../utils/map-controller';
+
+export default class BaseControl {
+
+  static defaultProps: MapControlProps;
+
+  _context: any;
+  _containerRef: {current: null | HTMLElement | SVGAElement};
+
+  _onScroll(evt: MjolnirEvent) : void;
+
+  _onDragStart(evt: MjolnirEvent) : void;
+
+  _onDblClick(evt: MjolnirEvent) : void;
+
+  _onClick(evt: MjolnirEvent) : void;
+
+  _onPointerMove(evt: MjolnirEvent) : void;
+
+}

flow-typed/npm/math.gl_vx.x.x.js

@@ -1,4 +1,3 @@
-// @flow
 // Copyright (c) 2015 Uber Technologies, Inc.
 
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -22,12 +21,7 @@ import * as React from 'react';
 import {PureComponent, createRef} from 'react';
 import useMapControl, {mapControlDefaultProps, mapControlPropTypes} from './use-map-control';
 
-import type {MjolnirEvent} from 'mjolnir.js';
-import type {MapControlProps} from './use-map-control';
-
-export type BaseControlProps = MapControlProps;
-
-function Control(props: any) {
+function Control(props) {
   const {instance} = props;
   const {context, containerRef} = useMapControl(instance.props, props);
 
@@ -40,26 +34,22 @@ function Control(props: any) {
 /*
  * This class is kept for backward compatibility
  */
-export default class BaseControl<
-  Props: BaseControlProps,
-  State: any,
-  ContainerType: Element
-> extends PureComponent<Props, State> {
+export default class BaseControl extends PureComponent {
   static propTypes = mapControlPropTypes;
   static defaultProps = mapControlDefaultProps;
 
-  _context: any = {};
-  _containerRef: {current: null | ContainerType} = createRef();
+  _context = {};
+  _containerRef = createRef();
 
-  _onScroll = (evt: MjolnirEvent) => {};
+  _onScroll = evt => {};
 
-  _onDragStart = (evt: MjolnirEvent) => {};
+  _onDragStart = evt => {};
 
-  _onDblClick = (evt: MjolnirEvent) => {};
+  _onDblClick = evt => {};
 
-  _onClick = (evt: MjolnirEvent) => {};
+  _onClick = evt => {};
 
-  _onPointerMove = (evt: MjolnirEvent) => {};
+  _onPointerMove = evt => {};
 
   _render() {
     throw new Error('_render() not implemented');