Make a store object per API instance

package.json

@@ -23,7 +23,7 @@
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",
     "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js && cp src/mapbox-gl-directions.css dist",
-    "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status",
+    "test": "NODE_ENV=test browserify test/index.js | smokestack -b firefox | tap-status",
     "docs": "documentation build src/directions.js --shallow --format=md > API.md",
     "lint": "eslint --no-eslintrc -c .eslintrc src"
   },
@@ -71,6 +71,7 @@
     "deep-assign": "^3.0.0",
     "lodash.debounce": "^4.0.6",
     "lodash.isequal": "^4.2.0",
+    "lodash.merge": "^4.6.2",
     "lodash.template": "^4.2.5",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.2",

src/directions.js

@@ -4,9 +4,6 @@ import { decode } from '@mapbox/polyline';
 import utils from './utils';
 import rootReducer from './reducers';
 
-const storeWithMiddleware = applyMiddleware(thunk)(createStore);
-const store = storeWithMiddleware(rootReducer);
-
 // State object management via redux
 import * as actions from './actions';
 import directionsStyle from './directions_style';
@@ -56,7 +53,9 @@ import Instructions from './controls/instructions';
 export default class MapboxDirections {
 
   constructor(options) {
-    this.actions = bindActionCreators(actions, store.dispatch);
+    this._store = this._initStore();
+
+    this.actions = bindActionCreators(actions, this._store.dispatch);
     this.actions.setOptions(options || {});
     this.options = options || {};
 
@@ -70,20 +69,20 @@ export default class MapboxDirections {
   onAdd(map) {
     this._map = map;
 
-    const { controls } = store.getState();
+    const { controls } = this._store.getState();
 
     var el = this.container = document.createElement('div');
     el.className = 'mapboxgl-ctrl-directions mapboxgl-ctrl';
 
     // Add controls to the page
     const inputEl = document.createElement('div');
     inputEl.className = 'directions-control directions-control-inputs';
-    new Inputs(inputEl, store, this.actions, this._map);
+    new Inputs(inputEl, this._store, this.actions, this._map);
 
     const directionsEl = document.createElement('div');
     directionsEl.className = 'directions-control directions-control-instructions';
 
-    new Instructions(directionsEl, store, {
+    new Instructions(directionsEl, this._store, {
       hoverMarker: this.actions.hoverMarker,
       setRouteIndex: this.actions.setRouteIndex
     }, this._map);
@@ -127,7 +126,7 @@ export default class MapboxDirections {
   }
 
   mapState() {
-    const { profile, alternatives, congestion, styles, interactive, compile } = store.getState();
+    const { profile, alternatives, congestion, styles, interactive, compile } = this._store.getState();
 
     // Emit any default or option set config
     this.actions.eventEmit('profile', { profile });
@@ -162,14 +161,14 @@ export default class MapboxDirections {
   }
 
   subscribedActions() {
-    this.storeUnsubscribe = store.subscribe(() => {
+    this.storeUnsubscribe = this._store.subscribe(() => {
       const {
         origin,
         destination,
         hoverMarker,
         directions,
         routeIndex
-      } = store.getState();
+      } = this._store.getState();
 
       const geojson = {
         type: 'FeatureCollection',
@@ -253,6 +252,11 @@ export default class MapboxDirections {
     });
   }
 
+  _initStore() {
+    const storeWithMiddleware = applyMiddleware(thunk)(createStore);
+    return storeWithMiddleware(rootReducer);
+  }
+
   _clickHandler() {
     var timer = null;
     var delay = 250;
@@ -274,7 +278,7 @@ export default class MapboxDirections {
   }
 
   _onSingleClick(e) {
-    const { origin } = store.getState();
+    const { origin } = this._store.getState();
     const coords = [e.lngLat.lng, e.lngLat.lat];
 
     if (!origin.geometry) {
@@ -311,7 +315,7 @@ export default class MapboxDirections {
   }
 
   _move(e) {
-    const { hoverMarker } = store.getState();
+    const { hoverMarker } = this._store.getState();
 
     const features = this._map.queryRenderedFeatures(e.point, {
       layers: [
@@ -376,7 +380,7 @@ export default class MapboxDirections {
   _onDragUp() {
     if (!this.isDragging) return;
 
-    const { hoverMarker, origin, destination } = store.getState();
+    const { hoverMarker, origin, destination } = this._store.getState();
 
     switch (this.isDragging.layer.id) {
       case 'directions-origin-point':
@@ -436,7 +440,7 @@ export default class MapboxDirections {
    * @returns {Object} origin
    */
   getOrigin() {
-    return store.getState().origin;
+    return this._store.getState().origin;
   }
 
   /**
@@ -460,7 +464,7 @@ export default class MapboxDirections {
    * @returns {Object} destination
    */
   getDestination() {
-    return store.getState().destination;
+    return this._store.getState().destination;
   }
 
   /**
@@ -521,7 +525,7 @@ export default class MapboxDirections {
    * @returns {MapboxDirections} this;
    */
   removeWaypoint(index) {
-    const { waypoints } = store.getState();
+    const { waypoints } = this._store.getState();
     this.actions.removeWaypoint(waypoints[index]);
     return this;
   }
@@ -531,7 +535,7 @@ export default class MapboxDirections {
    * @returns {Array} waypoints
    */
   getWaypoints() {
-    return store.getState().waypoints;
+    return this._store.getState().waypoints;
   }
 
   /**

src/reducers/index.js

@@ -1,5 +1,5 @@
 import * as types from '../constants/action_types.js';
-import deepAssign from 'deep-assign';
+import merge from 'lodash.merge';
 
 const initialState = {
   // Options set on initialization
@@ -52,8 +52,9 @@ const initialState = {
 
 function data(state = initialState, action) {
   switch (action.type) {
-  case types.SET_OPTIONS:
-    return deepAssign({}, state, action.options);
+  case types.SET_OPTIONS: {
+    return merge({}, state, action.options);
+  }
 
   case types.DIRECTIONS_PROFILE:
     return Object.assign({}, state, {

test/index.js

@@ -2,7 +2,6 @@
 
 const test = require('tape');
 window.mapboxgl = require('mapbox-gl');
-require('../src/index');
 
 mapboxgl.accessToken = process.env.MapboxAccessToken;
 

test/test.directions.js

@@ -74,20 +74,21 @@ test('Directions with custom styles', t => {
   })
 });
 
-
 test('Directions#onRemove', t => {
   const { map, directions } = setup({
     geocoder: {
       proximity: [-79.45, 43.65]
     }
   });
 
-  directions.setOrigin('Queen Street NY');
-  directions.setDestination([-77, 41]);
-  directions.on('route', once(()=>{
-    t.true(!!map.getSource('directions'), 'directions source is added');
-    map.removeControl(directions);
-    t.false(!!map.getSource('directions'), 'directions source is removed');
-    t.end();
-  }));
-});
+  map.on('load', () => {
+    directions.on('route', once(()=>{
+      t.true(!!map.getSource('directions'), 'directions source is added');
+      map.removeControl(directions);
+      t.false(!!map.getSource('directions'), 'directions source is removed');
+      t.end();
+    }));
+    directions.setOrigin('Queen Street NY');
+    directions.setDestination([-77, 41]);
+  });
+});

test/test.instructions.js

@@ -19,9 +19,17 @@ test('Directions#instructionControl', tt => {
 
   tt.test('direction with waypoints are displayed', t => {
     const { directions, container } = setup();
-    directions.setOrigin([-79.4486679946892, 43.66968384056892])
 
     directions.on('route', once(() => {
+      directions.on('route', once((e) => {
+        t.ok(e.route, 'route is emitted');
+        t.ok(
+          container.querySelector('.directions-icon-waypoint'),
+          'instructions for waypoint shown'
+        );
+        t.end();
+      }));
+
       directions.addWaypoint(0, {
         type: 'Feature',
         geometry: {
@@ -30,20 +38,11 @@ test('Directions#instructionControl', tt => {
         },
         properties: {}
       });
-
-      directions.on('route', once(() => {
-        directions.setDestination([-79.39708375091327, 43.677009321432536]);
-
-        directions.on('route', once((e) => {
-          t.ok(e.route, 'route is emitted');
-          t.ok(
-            container.querySelector('.directions-icon-waypoint'),
-            'instructions for waypoint shown'
-          );
-          t.end();
-        }));
-      }));
     }));
+
+
+    directions.setOrigin([-79.4486679946892, 43.66968384056892])
+    directions.setDestination([-79.39708375091327, 43.677009321432536]);
   });
 
   tt.test('error', t => {

test/utils/setup.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const MapboxDirections = require('../..');
 
 module.exports = function setup(opts) {