Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert codebase to Typescript #114

Merged
merged 32 commits into from
Feb 13, 2017
Merged
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
9da425e
Setup typescript and start converting component
alex3165 Feb 3, 2017
082a0b8
Convert all files to ts
alex3165 Feb 3, 2017
a14c00a
Add missing files
alex3165 Feb 3, 2017
d6f54f4
Convert popup and map to typescript, start layer
alex3165 Feb 4, 2017
b9d1209
Convert all components
alex3165 Feb 4, 2017
777b42c
Fix overlays
alex3165 Feb 4, 2017
bab35ca
Fix all typings
alex3165 Feb 4, 2017
e67284d
Add declaration files to build
alex3165 Feb 4, 2017
1a6ce24
Move source to ts
alex3165 Feb 4, 2017
dadd1d9
Add correct configuration
alex3165 Feb 5, 2017
d05f8de
Fix small error and add build wathc
alex3165 Feb 5, 2017
a86fc7d
Fix tests and lint
alex3165 Feb 5, 2017
0186822
Fix scale control
alex3165 Feb 5, 2017
1bd8dc5
Fix from merge of source update
alex3165 Feb 5, 2017
db173f6
Improve readme file
alex3165 Feb 7, 2017
5ba2483
Improve readme again
alex3165 Feb 7, 2017
ec97fb7
Target es5 and switch from find to filter
alex3165 Feb 8, 2017
d78a016
Fix typescript, fix feature geojson object to the standard in the mea…
alex3165 Feb 8, 2017
425de49
Switch to real typescript package
alex3165 Feb 8, 2017
2ea4e37
Remove node types and introduce custom any types
alex3165 Feb 8, 2017
8b8fb1d
Fix lint
alex3165 Feb 8, 2017
9cc651e
Fix some types in cluster
alex3165 Feb 8, 2017
2d40152
Fix coordinates typings
alex3165 Feb 10, 2017
9bb5f83
Killed suppressImplicitAnyIndexErrors with :fire:
alex3165 Feb 10, 2017
61cd6d6
Fix css.ts
alex3165 Feb 10, 2017
5632416
Disable multiline only in cluster
alex3165 Feb 10, 2017
bd023a8
Remove missing suppressImplicitAnyIndexErrors
alex3165 Feb 10, 2017
563ccd1
Add back suppressImplicitAnyIndexErrors
alex3165 Feb 11, 2017
fca4a09
Fix remaining type issues
alex3165 Feb 11, 2017
6263da1
Fix deep-equal
alex3165 Feb 13, 2017
fada71a
Fix critical types
alex3165 Feb 13, 2017
74118f5
Improve readme
alex3165 Feb 13, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 0 additions & 35 deletions .babelrc

This file was deleted.

24 changes: 0 additions & 24 deletions .eslintrc

This file was deleted.

40 changes: 27 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -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, `react-mapbox-gl` add some React rendered 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`
12 changes: 6 additions & 6 deletions example/server.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
var WebpackDevServer = require('webpack-dev-server')
var webpack = require('webpack')
var config = require('./webpack.config')
var WebpackDevServer = require('webpack-dev-server');
var webpack = require('webpack');
var config = require('./webpack.config');

var compiler = webpack(config)
var port = 8080;
var port = 8081;
var host = 'localhost';

var server = new WebpackDevServer(compiler, {
publicPath: config.output.publicPath,
historyApiFallback: true,
noInfo: true
noInfo: true,
})

server.listen(port, host, function() {
console.log(`☕️ Server is listening on http://${host}:${port}.`);
})
});
2 changes: 1 addition & 1 deletion example/src/cluster.js
Original file line number Diff line number Diff line change
@@ -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>
);
50 changes: 22 additions & 28 deletions package.json
Original file line number Diff line number Diff line change
@@ -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,21 @@
"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/node": "^7.0.5",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you remove every require you don't need this anymore (+ it's a bit overkill to add node types definition just for require)

"@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"
}
}
24 changes: 14 additions & 10 deletions src/__tests__/layer.test.js → src/__tests__/layer.test.tsx
Original file line number Diff line number Diff line change
@@ -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: []
}
}]);
});
Loading