Upgrade dependencies and group all polyfills in a dedicated file

package.json

@@ -35,9 +35,9 @@
     },
     "devDependencies": {
         "app-manifest-webpack-plugin": "^1.1.3",
-        "autoprefixer": "^7.1.2",
+        "autoprefixer": "^9.1.0",
         "babel-core": "^6.22.1",
-        "babel-eslint": "^7.1.1",
+        "babel-eslint": "^8.2.6",
         "babel-helper-vue-jsx-merge-props": "^2.0.3",
         "babel-loader": "^7.1.1",
         "babel-plugin-syntax-jsx": "^6.18.0",
@@ -47,34 +47,34 @@
         "babel-preset-stage-2": "^6.22.0",
         "chalk": "^2.0.1",
         "copy-webpack-plugin": "^4.0.1",
-        "css-loader": "^0.28.0",
+        "css-loader": "^1.0.0",
-        "eslint": "^3.19.0",
+        "eslint": "^5.3.0",
-        "eslint-config-airbnb-base": "^11.3.0",
+        "eslint-config-airbnb-base": "^13.0.0",
-        "eslint-friendly-formatter": "^3.0.0",
+        "eslint-friendly-formatter": "^4.0.1",
-        "eslint-import-resolver-webpack": "^0.8.3",
+        "eslint-import-resolver-webpack": "^0.10.1",
-        "eslint-loader": "^1.7.1",
+        "eslint-loader": "^2.1.0",
-        "eslint-plugin-html": "^3.0.0",
+        "eslint-plugin-html": "^4.0.5",
         "eslint-plugin-import": "^2.7.0",
         "extract-text-webpack-plugin": "^3.0.0",
         "file-loader": "^1.1.4",
         "friendly-errors-webpack-plugin": "^1.6.1",
-        "html-webpack-plugin": "^2.30.1",
+        "html-webpack-plugin": "^3.2.0",
         "image-webpack-loader": "^4.3.1",
         "node-notifier": "^5.1.2",
-        "optimize-css-assets-webpack-plugin": "^3.2.0",
+        "optimize-css-assets-webpack-plugin": "^5.0.0",
-        "ora": "^1.2.0",
+        "ora": "^3.0.0",
         "portfinder": "^1.0.13",
-        "postcss-import": "^11.0.0",
+        "postcss-import": "^12.0.0",
         "postcss-loader": "^2.0.8",
         "postcss-url": "^7.2.1",
         "rimraf": "^2.6.0",
         "semver": "^5.3.0",
-        "shelljs": "^0.7.6",
+        "shelljs": "^0.8.2",
         "stylus": "^0.54.5",
         "stylus-loader": "^3.0.2",
         "svg2png": "^4.1.1",
         "uglifyjs-webpack-plugin": "^1.1.1",
-        "url-loader": "^0.5.8",
+        "url-loader": "^1.0.1",
         "vue-loader": "^13.3.0",
         "vue-style-loader": "^3.0.1",
         "vue-template-compiler": "^2.5.2",

src/api/index.js

@@ -1,6 +1,3 @@
-require('es6-promise').polyfill();
-require('isomorphic-fetch');
-
 // With trailing slash
 export const BASE_URL = process.env.API_BASE_URL || '/';
 const AUTHORIZATION_HEADERS = new Headers({});

src/components/AddressInput.vue

@@ -19,9 +19,6 @@
 <script>
 import { GEOCODING_API_ENDPOINT } from '@/constants';
 
-require('es6-promise').polyfill();
-require('isomorphic-fetch');
-
 export default {
     props: {
         label: String,

src/components/Map.vue

@@ -92,9 +92,9 @@ export default {
                 // into account the current zoom level
                 // Formula coming from https://wiki.openstreetmap.org/wiki/Zoom_levels.
                 return this.accuracy / (
-                    (constants.EARTH_RADIUS * 2 * Math.PI * Math.cos(this.positionLatLng[0] *
+                    (constants.EARTH_RADIUS * 2 * Math.PI * Math.cos(this.positionLatLng[0]
-                        (Math.PI / 180))) /
+                        * (Math.PI / 180)))
-                    (2 ** (this.zoom + 8))
+                    / (2 ** (this.zoom + 8))
                 );
             }
             return null;
@@ -102,9 +102,9 @@ export default {
         shouldDisplayAccuracy() {
             // Only display accuracy if circle is large enough
             return (
-                this.accuracy &&
+                this.accuracy
-                this.accuracy < constants.ACCURACY_DISPLAY_THRESHOLD &&
+                && this.accuracy < constants.ACCURACY_DISPLAY_THRESHOLD
-                this.radiusFromAccuracy > this.markerRadius
+                && this.radiusFromAccuracy > this.markerRadius
             );
         },
         tileServer() {
@@ -171,8 +171,8 @@ export default {
             }
             const mapCenter = this.map.getCenter();
             if (
-                mapCenter.lat !== this.center[0] &&
+                mapCenter.lat !== this.center[0]
-                mapCenter.lng !== this.center[1]
+                && mapCenter.lng !== this.center[1]
             ) {
                 this.isProgrammaticMove = true;
                 this.map.once('moveend', () => { this.isProgrammaticMove = false; });
@@ -203,8 +203,8 @@ export default {
         }
         const mapCenter = this.map.getCenter();
         if (
-            mapCenter.lat !== this.center[0] &&
+            mapCenter.lat !== this.center[0]
-            mapCenter.lng !== this.center[1]
+            && mapCenter.lng !== this.center[1]
         ) {
             this.isProgrammaticMove = true;
             this.map.once('moveend', () => { this.isProgrammaticMove = false; });
@@ -259,8 +259,8 @@ export default {
                     this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
                 }
                 if (
-                    this.map.getCenter().lat !== newCenterLatLng[0] &&
+                    this.map.getCenter().lat !== newCenterLatLng[0]
-                    this.map.getCenter().lng !== newCenterLatLng[1]
+                    && this.map.getCenter().lng !== newCenterLatLng[1]
                 ) {
                     this.isProgrammaticMove = true;
                     this.map.once('moveend', () => { this.isProgrammaticMove = false; });
@@ -276,7 +276,7 @@ export default {
                                 distance: distance(newCenterLatLng, marker.latLng),
                             }),
                         ).filter(item => item.distance < constants.MIN_DISTANCE_REPORT_DETAILS);
-                        const closestReport = distances.reduce(  // Get the closest one
+                        const closestReport = distances.reduce( // Get the closest one
                             (acc, item) => (
                                 item.distance < acc.distance ? item : acc
                             ),

src/components/ReportCard.vue

@@ -92,7 +92,7 @@ export default {
         },
         downvote() {
             const reportID = this.report.id;
-            this.closeReportCard();  // Resets this.report
+            this.closeReportCard(); // Resets this.report
             return this.$store.dispatch('downvote', { id: reportID });
         },
         notifyUser() {
@@ -111,7 +111,7 @@ export default {
         },
         upvote() {
             const reportID = this.report.id;
-            this.closeReportCard();  // Resets this.report
+            this.closeReportCard(); // Resets this.report
             return this.$store.dispatch('upvote', { id: reportID });
         },
     },

src/constants.js

@@ -112,7 +112,7 @@ export const REPORT_TYPES = {
 // Display order of the report types
 export const REPORT_TYPES_ORDER = ['gcum', 'interrupt', 'obstacle', 'pothole', 'accident', 'misc'];
 
-export const MIN_DISTANCE_REPORT_DETAILS = 40;  // in meters
+export const MIN_DISTANCE_REPORT_DETAILS = 40; // in meters
 
 export const MOCK_LOCATION = false;
 export const MOCK_LOCATION_UPDATE_INTERVAL = 5 * 1000; // in milliseconds

src/main.js

@@ -6,13 +6,14 @@ import Vue2LeafletTracksymbol from 'vue2-leaflet-tracksymbol';
 
 import '@/css/roboto-fontface.css';
 import '@/css/material-icons.css';
-import 'leaflet/dist/leaflet.css';  // eslint-disable-line  import/first
+import 'leaflet/dist/leaflet.css'; // eslint-disable-line import/first
 import 'vuetify/src/stylus/app.styl';
 
 import App from '@/App.vue';
 import i18n from '@/i18n';
 import router from '@/router';
 import store from '@/store';
+import '@/polyfills';
 import '@/vuetify';
 
 // Ensure locale is correctly set from the store value
@@ -28,8 +29,7 @@ Vue.component('v-lts', Vue2LeafletTracksymbol);
 
 Vue.config.productionTip = false;
 
-/* eslint-disable no-new */
+new Vue({ // eslint-disable-line no-new
-new Vue({
     el: '#app',
     router,
     i18n,

src/polyfills/index.js

@@ -0,0 +1,7 @@
+if (!Number.isNaN) {
+    // From https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
+    Number.isNaN = value => (value !== value); // eslint-disable-line no-self-compare
+}
+
+require('es6-promise').polyfill();
+require('isomorphic-fetch');

src/router/index.js

@@ -1,5 +1,8 @@
 import Vue from 'vue';
 import Router from 'vue-router';
+
+import store from '@/store';
+
 import About from '@/views/About.vue';
 import Map from '@/views/Map.vue';
 import Onboarding from '@/views/Onboarding.vue';
@@ -23,6 +26,16 @@ export default new Router({
             path: '/map',
             name: 'Map',
             component: Map,
+            beforeEnter: (to, from, next) => {
+                if (to.name !== 'SharedMap') {
+                    // Check that intro was seen except if we are in SharedMap view.
+                    // This is required in order to ensure NoSleep works well.
+                    if (!store.state.hasGoneThroughIntro) {
+                        return next({ name: 'Onboarding', replace: true });
+                    }
+                }
+                return next();
+            },
         },
         {
             path: '/',

src/store/actions.js

@@ -112,7 +112,7 @@ export function setCurrentMapZoom({ commit, state }, { zoom }) {
 }
 
 export function setCurrentPosition(
-    { commit, getters, state },
+    { commit },
     { coords, timestamp },
 ) {
     const currentLocation = {
@@ -122,9 +122,9 @@ export function setCurrentPosition(
         elevation: coords.elevation ? coords.elevation : null,
         vdop: coords.altitudeAccuracy ? coords.altitudeAccuracy : null,
         heading: (
-            (coords.heading !== null && !isNaN(coords.heading))
+            (coords.heading !== null && !Number.isNaN(coords.heading))
-            ? coords.heading
+                ? coords.heading
-            : null
+                : null
         ),
         speed: coords.speed ? coords.speed : null,
         timestamp,
@@ -139,7 +139,7 @@ export function setLocationWatcherId({ commit }, { id }) {
 
 export function setLocationError({ commit, state }, { error }) {
     // Unregister location watcher
-    const watcherID = state.location.watcherID;
+    const { watcherID } = state.location;
     if (watcherID !== null) {
         if (constants.MOCK_LOCATION) {
             clearInterval(watcherID);

src/store/getters.js

@@ -1,7 +1,7 @@
 import { REPORT_VOTES_THRESHOLD } from '@/constants';
 
 export function getLastLocation(state) {
-    const gpx = state.location.gpx;
+    const { gpx } = state.location;
     if (gpx.length > 0) {
         return gpx[gpx.length - 1];
     }

src/tools/index.js

@@ -8,8 +8,8 @@ export function distance(latLng1, latLng2) {
     const lng2 = (latLng2[1] * Math.PI) / 180;
 
     const a = (
-        (Math.sin((lat2 - lat1) / 2.0) ** 2) +
+        (Math.sin((lat2 - lat1) / 2.0) ** 2)
-        (Math.cos(lat1) * Math.cos(lat2) * (Math.sin((lng2 - lng1) / 2.0) ** 2))
+        + (Math.cos(lat1) * Math.cos(lat2) * (Math.sin((lng2 - lng1) / 2.0) ** 2))
     );
     const c = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 
@@ -55,15 +55,16 @@ export function storageAvailable(type) {
     } catch (e) {
         return e instanceof DOMException && (
             // everything except Firefox
-            e.code === 22 ||
+            e.code === 22
             // Firefox
-            e.code === 1014 ||
+            || e.code === 1014
             // test name field too, because code might not be present
             // everything except Firefox
-            e.name === 'QuotaExceededError' ||
+            || e.name === 'QuotaExceededError'
             // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            || e.name === 'NS_ERROR_DOM_QUOTA_REACHED'
-            // acknowledge QuotaExceededError only if there's something already stored
+        )
-            storage.length !== 0;
+        // acknowledge QuotaExceededError only if there's something already stored
+        && storage.length !== 0;
     }
 }

src/views/Map.vue

@@ -82,16 +82,6 @@ export default {
         this.disableNoSleep();
         this.$store.dispatch('hideReportDetails');
     },
-    beforeRouteEnter(to, from, next) {
-        if (to.name !== 'SharedMap') {
-            // Check that intro was seen except if we are in SharedMap view.
-            // This is required in order to ensure NoSleep works well.
-            if (!store.state.hasGoneThroughIntro) {
-                return next({ name: 'Onboarding', replace: true });
-            }
-        }
-        return next();
-    },
     components: {
         LocationError,
         Map,
@@ -137,8 +127,8 @@ export default {
         mapZoom() {
             return (
                 this.$route.params.zoom
-                ? parseInt(this.$route.params.zoom, 10)
+                    ? parseInt(this.$route.params.zoom, 10)
-                : constants.DEFAULT_ZOOM
+                    : constants.DEFAULT_ZOOM
             );
         },
         positionHistory() {