Convert codebase to Typescript

README.md

@@ -1,10 +1,10 @@
 # react-mapbox-gl
-
 ![London cycle example gif](docs/london-cycle-example.gif "London cycle example gif")
 
-React wrapper of [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/) which bring the API to a react friendly way and expose projected react components.
+React wrapper of [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/) which bring the API to a react friendly way.
+On top of the layers provided by `react-mapbox-gl` add some React layers, projected using `map.project`.
 
-Include the following elements :
+Include the following elements:
 - ReactMapboxGl
 - Layer
 - Source
@@ -20,15 +20,29 @@ Include the following elements :
 - Popup (Projected component)
 - Cluster
 
+> The source files are written in Typescript, you can consume the compiled files in Javascript or Typescript and get the type definition files.
+
+
+## Do you need `mapbox-gl-js` and `react-mapbox-gl`
+Mapbox-gl expose a map rendered in a canvas using web gl this mean:
+- All the shapes are in vector
+- Fast rendering
+- Smooth transitions
+- All the data are on the client side, you can interact with anything on the map
+- You can customize everything on the map using [mapbox studio](https://www.mapbox.com/mapbox-studio/)
+
+See all the features of the map exposed by [mapbox-gl-js](https://www.mapbox.com/maps/)
+
+
 ## How to start
 
-```
+```javascript
 npm install react-mapbox-gl --save
 ```
 
 Example:
 
-```
+```javascript
 // ES6
 import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
 
@@ -54,21 +68,21 @@ var Feature = ReactMapboxGl.Feature;
 ```
 
 ## Disclaimer
-
-The zoom property is an array on purpose. With a float as a value we can't tell whether the zoom has changed because `7 === 7 // true`. We did a work around using array so that `[7] !== [7] // true`, this way we can reliably update the zoom value.
+The zoom property is an array on purpose. With a float as a value we can't tell whether the zoom has changed when checking for value equality `7 === 7 // true`.
+We changed it to an array so that between 2 render it check for a reference equality `[7] === [7] // false`,
+this way we can reliably update the zoom value.
 
 See https://github.com/alex3165/react-mapbox-gl/issues/57 for more informations.
 
 ## Examples
-
-- See the example to display a big amount of markers : [London cycle example](example/src/london-cycle.js)
-- See the example to display all the availables shapes : [All shapes example](example/src/all-shapes.js)
-- See the example to display a GEOJson file : [geojson example](example/src/geojson-example.js)
+- Display a big amount of markers: [London cycle example](example/src/london-cycle.js)
+- Display all the availables shapes: [All shapes example](example/src/all-shapes.js)
+- Display a GEOJson file: [geojson example](example/src/geojson-example.js)
+- Display Cluster of Markers: [cluster example](example/src/cluster.js)
 
 ### Run the examples
-
 - Clone the repository
-- Go to example folder
+- Go to the example folder
 - Install the dependencies: `npm install`
 - Run the example
   - Build the library `npm run build`

example/src/cluster.js

@@ -40,7 +40,7 @@ export default class ClusterExample extends Component {
   }
 
   clusterMarker = (coordinates, pointCount) => (
-    <Marker coordinates={coordinates} style={styles.clusterMarker}>
+    <Marker coordinates={coordinates} key={coordinates.toString()} style={styles.clusterMarker}>
       { pointCount }
     </Marker>
   );

package.json

@@ -3,24 +3,25 @@
   "version": "0.29.2",
   "description": "A React binding of mapbox-gl-js",
   "main": "lib/index.js",
-  "jsnext:main": "es/index.js",
   "scripts": {
     "clean": "rm -rf dist",
-    "lint": "eslint src --ignore-pattern __tests__",
     "test": "jest",
-    "build:commonjs": "BABEL_ENV=commonjssimple babel src --out-dir lib",
-    "build:watch": "BABEL_ENV=commonjssimple babel src --watch --out-dir lib",
-    "build:es": "babel src --out-dir es",
-    "build": "npm run lint && npm run test && npm run build:commonjs && npm run build:es",
+    "lint": "tslint --project tsconfig.json",
+    "build": "npm run lint && npm run test && tsc",
+    "build:watch": "tsc --watch",
     "prepublish": "npm run clean && npm run build",
     "version": "npm run build",
     "postversion": "git push && git push --tags"
   },
   "jest": {
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/lib/",
-      "/es/"
+    "transform": {
+      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
     ],
     "verbose": true
   },
@@ -49,7 +50,6 @@
   },
   "homepage": "https://github.com/alex3165/react-mapbox-gl#readme",
   "dependencies": {
-    "babel-runtime": "^6.11.6",
     "deep-equal": "^1.0.1",
     "mapbox-gl": "^0.32.1",
     "reduce-object": "^0.1.3",
@@ -60,27 +60,20 @@
     "react-dom": "^15.0.1"
   },
   "devDependencies": {
-    "babel": "^6.5.2",
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.18.2",
-    "babel-eslint": "^7.1.0",
-    "babel-jest": "^17.0.2",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
-    "babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
-    "babel-plugin-transform-react-constant-elements": "^6.9.1",
-    "babel-plugin-transform-react-inline-elements": "^6.8.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-philpl": "^0.4.0",
-    "eslint": "^3.9.1",
-    "eslint-config-airbnb-base": "^9.0.0",
-    "eslint-plugin-import": "^2.1.0",
-    "eslint-plugin-react": "^6.5.0",
+    "@types/jest": "^18.1.1",
+    "@types/mapbox-gl": "^0.29.0",
+    "@types/react": "^15.0.6",
+    "@types/react-addons-test-utils": "^0.14.17",
+    "@types/recompose": "^0.20.3",
     "jest": "^17.0.1",
     "react": "^15.4.0",
     "react-addons-test-utils": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-test-renderer": "^15.4.0",
-    "recompose": "^0.20.2"
+    "recompose": "^0.20.2",
+    "ts-jest": "^18.0.3",
+    "tslint": "^4.4.2",
+    "tslint-react": "^2.3.0",
+    "typescript": "^2.1.5"
   }
 }

src/__tests__/layer.test.js → src/__tests__/layer.test.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import * as React from 'react';
 import Layer from '../layer';
-import TestUtils from 'react-addons-test-utils';
+import * as TestUtils from 'react-addons-test-utils';
 import { withContext } from 'recompose';
 
 describe('Layer', () => {
-  let LayerWithContext;
-  let addLayerMock;
-  let addSourceMock;
+  let LayerWithContext: any;
+  let addLayerMock = jest.fn();
+  let addSourceMock = jest.fn();
+  let children: any[];
 
   beforeEach(() => {
     addLayerMock = jest.fn();
     addSourceMock = jest.fn();
+    children = [{ props: {}}];
 
     LayerWithContext = withContext({
       map: React.PropTypes.object
@@ -25,9 +27,10 @@ describe('Layer', () => {
   });
 
   it('Should render layer with default options', () => {
-    const LayerComponent = TestUtils.renderIntoDocument(
+    TestUtils.renderIntoDocument(
       <LayerWithContext
-        children={[{ props: {}}]}/>
+        children={children}
+      /> as React.ReactElement<any>
     );
 
     expect(addLayerMock.mock.calls[0]).toEqual([{
@@ -40,16 +43,17 @@ describe('Layer', () => {
   });
 
   it('Should render layer with default source', () => {
-    const LayerComponent = TestUtils.renderIntoDocument(
+    TestUtils.renderIntoDocument(
       <LayerWithContext
-        children={[{ props: {}}]}/>
+        children={children}
+      /> as React.ReactElement<any>
     );
 
     expect(addSourceMock.mock.calls[0]).toEqual(['layer-2', {
       type: 'geojson',
       data: {
         type: 'FeatureCollection',
-        features: [],
+        features: []
       }
     }]);
   });