Add browser-polyfills, remove lodash assign, compact, values

(re: #6087)

CONTRIBUTING.md

@@ -290,10 +290,21 @@ you're going to update the presets, [review the Presets README](/data/presets/RE
 
 ## JavaScript
 
-iD uses ES5 syntax throughout the code, with one exception:
-[ES6 modules](http://exploringjs.com/es6/ch_modules.html) using `import` and
+iD uses ES5 syntax throughout the code, with the following exceptions:
+- [ES6 modules](http://exploringjs.com/es6/ch_modules.html) using `import` and
 `export` constructs. These are processed by [Rollup.js](https://rollupjs.org/guide/en)
 and not present in the distributed iD bundle.
+- Polyfills provided by [browser-polyfills](https://github.com/tiagomapmarques/browser-polyfills#what-does-it-have)
+  - `Promise`
+  - `fetch`
+  - `Map`
+  - `Set`
+  - `Array.find`
+  - `Array.findIndex`
+  - `Array.from`
+  - `Object.values`
+  - `Object.assign`
+  - `requestAnimationFrame (rAF)`
 
 ES5 syntax is required for:
 * IE11, which about 15-20% of our users still use
@@ -307,8 +318,7 @@ only one difference:  **4 space soft tabs always for JavaScript, not 2.**
 No aligned `=`, no aligned arguments, spaces are either indents or the 1
 space between expressions. No hard tabs, ever.
 
-JavaScript code should pass through [ESLint](http://eslint.org/) with no
-warnings.
+JavaScript code should pass through [ESLint](http://eslint.org/) with no warnings.
 
 
 ## HTML

data/index.js

@@ -1,5 +1,3 @@
-import _values from 'lodash-es/values';
-
 export { wikipedia as dataWikipedia } from 'wmf-sitematrix';
 
 export { dataAddressFormats } from './address-formats.json';
@@ -29,7 +27,7 @@ import whichPolygon from 'which-polygon';
 
 
 // index the osm-community-index
-var ociFeatureCollection = _values(ociFeatures).map(function(feature) {
+var ociFeatureCollection = Object.values(ociFeatures).map(function(feature) {
     // workaround for which-polygon: only supports `properties`, not `id`
     // https://github.com/mapbox/which-polygon/pull/6
     feature.properties = {

modules/behavior/hash.js

@@ -1,16 +1,11 @@
-import _assign from 'lodash-es/assign';
 import _omit from 'lodash-es/omit';
 import _throttle from 'lodash-es/throttle';
 
 import { select as d3_select } from 'd3-selection';
 
 import { geoSphericalDistance } from '../geo';
 import { modeBrowse } from '../modes';
-
-import {
-    utilQsString,
-    utilStringQs
-} from '../util';
+import { utilQsString, utilStringQs } from '../util';
 
 
 export function behaviorHash(context) {
@@ -62,7 +57,7 @@ export function behaviorHash(context) {
             '/' + center[1].toFixed(precision) +
             '/' + center[0].toFixed(precision);
 
-        return '#' + utilQsString(_assign(q, newParams), true);
+        return '#' + utilQsString(Object.assign(q, newParams), true);
     };
 
 

modules/core/difference.js

@@ -1,7 +1,6 @@
 import _difference from 'lodash-es/difference';
 import _each from 'lodash-es/each';
 import _isEqual from 'lodash-es/isEqual';
-import _values from 'lodash-es/values';
 
 
 /*
@@ -167,7 +166,7 @@ export function coreDifference(base, head) {
             }
         }
 
-        return _values(relevant);
+        return Object.values(relevant);
     };
 
 

modules/core/graph.js

@@ -1,4 +1,3 @@
-import _assign from 'lodash-es/assign';
 import _difference from 'lodash-es/difference';
 import _includes from 'lodash-es/includes';
 import _without from 'lodash-es/without';
@@ -12,9 +11,9 @@ export function coreGraph(other, mutable) {
 
     if (other instanceof coreGraph) {
         var base = other.base();
-        this.entities = _assign(Object.create(base.entities), other.entities);
-        this._parentWays = _assign(Object.create(base.parentWays), other._parentWays);
-        this._parentRels = _assign(Object.create(base.parentRels), other._parentRels);
+        this.entities = Object.assign(Object.create(base.entities), other.entities);
+        this._parentWays = Object.assign(Object.create(base.parentWays), other._parentWays);
+        this._parentRels = Object.assign(Object.create(base.parentRels), other._parentRels);
 
     } else {
         this.entities = Object.create({});

modules/core/history.js

@@ -10,7 +10,6 @@ import _forEach from 'lodash-es/forEach';
 import _map from 'lodash-es/map';
 import _omit from 'lodash-es/omit';
 import _reject from 'lodash-es/reject';
-import _values from 'lodash-es/values';
 import _without from 'lodash-es/without';
 import _uniq from 'lodash-es/uniq';
 
@@ -23,11 +22,7 @@ import { coreGraph } from './graph';
 import { coreTree } from './tree';
 import { osmEntity } from '../osm/entity';
 import { uiLoading } from '../ui';
-
-import {
-    utilRebind,
-    utilSessionMutex
-} from '../util';
+import { utilRebind, utilSessionMutex } from '../util';
 
 
 export function coreHistory(context) {
@@ -472,8 +467,8 @@ export function coreHistory(context) {
 
             return JSON.stringify({
                 version: 3,
-                entities: _values(allEntities),
-                baseEntities: _values(baseEntities),
+                entities: Object.values(allEntities),
+                baseEntities: Object.values(baseEntities),
                 stack: s,
                 nextIDs: osmEntity.id.next,
                 index: _index

modules/id.js

@@ -1,2 +1,3 @@
+import 'browser-polyfills';
 import * as iD from './index';
 window.iD = iD;

modules/modes/select.js

@@ -1,7 +1,6 @@
 import _intersection from 'lodash-es/intersection';
 import _map from 'lodash-es/map';
 import _uniq from 'lodash-es/uniq';
-import _values from 'lodash-es/values';
 import _without from 'lodash-es/without';
 
 import {
@@ -241,7 +240,7 @@ export function modeSelect(context, selectedIDs) {
 
         context.features().forceVisible(selectedIDs);
 
-        var operations = _without(_values(Operations), Operations.operationDelete)
+        var operations = _without(Object.values(Operations), Operations.operationDelete)
             .map(function(o) { return o(selectedIDs, context); })
             .filter(function(o) { return o.available(); });
 

modules/osm/changeset.js

@@ -1,9 +1,7 @@
-import _compact from 'lodash-es/compact';
 import _extend from 'lodash-es/extend';
 import _filter from 'lodash-es/filter';
 import _find from 'lodash-es/find';
 import _map from 'lodash-es/map';
-import _values from 'lodash-es/values';
 
 import { osmEntity } from './entity';
 import { geoExtent } from '../geo';
@@ -106,7 +104,7 @@ _extend(osmChangeset.prototype, {
 
                 while (processing.length > 0) {
                     var next = processing[0],
-                    deps = _filter(_compact(next.member.map(resolve)), isNew);
+                    deps = _filter(next.member.map(resolve).filter(Boolean), isNew);
                     if (deps.length === 0) {
                         sorted[next['@id']] = next;
                         processing.shift();
@@ -116,7 +114,7 @@ _extend(osmChangeset.prototype, {
                 }
             }
 
-            changes.relation = _values(sorted);
+            changes.relation = Object.values(sorted);
             return changes;
         }
 

modules/presets/collection.js

@@ -2,7 +2,6 @@ import _find from 'lodash-es/find';
 import _findIndex from 'lodash-es/findIndex';
 import _some from 'lodash-es/some';
 import _uniq from 'lodash-es/uniq';
-import _values from 'lodash-es/values';
 import _without from 'lodash-es/without';
 
 import { utilEditDistance } from '../util/index';
@@ -108,7 +107,7 @@ export function presetCollection(collection) {
             // matches value to preset.tags values
             var leading_tag_values = searchable
                 .filter(function(a) {
-                    return _some(_without(_values(a.tags || {}), '*'), leading);
+                    return _some(_without(Object.values(a.tags || {}), '*'), leading);
                 });
 
             var leading_suggestions = suggestions

modules/renderer/map.js

@@ -1,7 +1,5 @@
-import _compact from 'lodash-es/compact';
 import _map from 'lodash-es/map';
 import _throttle from 'lodash-es/throttle';
-import _values from 'lodash-es/values';
 
 import { set as d3_set } from 'd3-collection';
 import { dispatch as d3_dispatch } from 'd3-dispatch';
@@ -207,7 +205,7 @@ export function rendererMap(context) {
                         }
                     }
                 });
-                var data = _values(selectedAndParents);
+                var data = Object.values(selectedAndParents);
                 var filter = function(d) { return d.id in selectedAndParents; };
 
                 data = context.features().filter(data, graph);
@@ -279,7 +277,7 @@ export function rendererMap(context) {
 
         if (difference) {
             var complete = difference.complete(map.extent());
-            data = _compact(_values(complete));
+            data = Object.values(complete).filter(Boolean);
             filter = function(d) { return d.id in complete; };
             features.clear(data);
 

modules/services/nominatim.js

@@ -1,4 +1,3 @@
-import _assign from 'lodash-es/assign';
 import _forEach from 'lodash-es/forEach';
 
 import { json as d3_json } from 'd3-request';
@@ -63,7 +62,7 @@ export default {
             }
 
             var extent = geoExtent(location).padByMeters(200);
-            nominatimCache.insert(_assign(extent.bbox(), {data: result}));
+            nominatimCache.insert(Object.assign(extent.bbox(), {data: result}));
 
             callback(null, result);
         });

modules/svg/areas.js

@@ -1,5 +1,4 @@
 import _map from 'lodash-es/map';
-import _values from 'lodash-es/values';
 
 import { bisector as d3_bisector } from 'd3-array';
 
@@ -214,7 +213,7 @@ export function svgAreas(projection, context) {
             }
         }
 
-        areas = _values(areas).filter(function hasPath(a) { return path(a.entity); });
+        areas = Object.values(areas).filter(function hasPath(a) { return path(a.entity); });
         areas.sort(function areaSort(a, b) { return b.area - a.area; });
         areas = _map(areas, 'entity');
 

modules/svg/debug.js

@@ -1,5 +1,3 @@
-import _values from 'lodash-es/values';
-
 import { select as d3_select } from 'd3-selection';
 
 import { data, dataImperial, dataDriveLeft } from '../../data';
@@ -94,7 +92,7 @@ export function svgDebug(projection, context) {
 
 
         var community = layer.selectAll('path.debug-community')
-            .data(showsCommunity ? _values(data.community.features) : []);
+            .data(showsCommunity ? Object.values(data.community.features) : []);
 
         community.exit()
             .remove();

modules/svg/midpoints.js

@@ -1,16 +1,5 @@
-import _values from 'lodash-es/values';
-
-import {
-    svgPointTransform,
-    svgTagClasses
-} from './index';
-
-import {
-    geoAngle,
-    geoLineIntersection,
-    geoVecInterp,
-    geoVecLength
-} from '../geo';
+import { svgPointTransform, svgTagClasses } from './index';
+import { geoAngle, geoLineIntersection, geoVecInterp, geoVecLength } from '../geo';
 
 
 export function svgMidpoints(projection, context) {
@@ -131,7 +120,7 @@ export function svgMidpoints(projection, context) {
 
         var groups = drawLayer.selectAll('.midpoint')
             .filter(midpointFilter)
-            .data(_values(midpoints), function(d) { return d.id; });
+            .data(Object.values(midpoints), function(d) { return d.id; });
 
         groups.exit()
             .remove();
@@ -170,7 +159,7 @@ export function svgMidpoints(projection, context) {
 
         // Draw touch targets..
         touchLayer
-            .call(drawTargets, graph, _values(midpoints), midpointFilter);
+            .call(drawTargets, graph, Object.values(midpoints), midpointFilter);
     }
 
     return drawMidpoints;

modules/svg/vertices.js

@@ -1,6 +1,3 @@
-import _assign from 'lodash-es/assign';
-import _values from 'lodash-es/values';
-
 import { select as d3_select } from 'd3-selection';
 
 import { geoScaleToZoom } from '../geo';
@@ -368,7 +365,7 @@ export function svgVertices(projection, context) {
             hovered: _currHover           // hovered + siblings of hovered (render only in draw modes)
         };
 
-        var all = _assign({}, (isMoving ? _currHover : {}), _currSelected, _currPersistent);
+        var all = Object.assign({}, (isMoving ? _currHover : {}), _currSelected, _currPersistent);
 
         // Draw the vertices..
         // The filter function controls the scope of what objects d3 will touch (exit/enter/update)
@@ -406,7 +403,7 @@ export function svgVertices(projection, context) {
 
         // note that drawVertices will add `_currSelected` automatically if needed..
         var filter = function(d) { return d.id in _prevSelected; };
-        drawVertices(selection, graph, _values(_prevSelected), filter, extent, false);
+        drawVertices(selection, graph, Object.values(_prevSelected), filter, extent, false);
     };
 
 
@@ -429,7 +426,7 @@ export function svgVertices(projection, context) {
 
         // note that drawVertices will add `_currHover` automatically if needed..
         var filter = function(d) { return d.id in _prevHover; };
-        drawVertices(selection, graph, _values(_prevHover), filter, extent, false);
+        drawVertices(selection, graph, Object.values(_prevHover), filter, extent, false);
     };
 
     return drawVertices;

modules/ui/feature_info.js

@@ -1,6 +1,3 @@
-import _compact from 'lodash-es/compact';
-import _map from 'lodash-es/map';
-
 import { event as d3_event } from 'd3-selection';
 
 import { t } from '../util/locale';
@@ -10,15 +7,15 @@ import { tooltip } from '../util/tooltip';
 
 export function uiFeatureInfo(context) {
     function update(selection) {
-        var features = context.features(),
-            stats = features.stats(),
-            count = 0,
-            hiddenList = _compact(_map(features.hidden(), function(k) {
-                if (stats[k]) {
-                    count += stats[k];
-                    return String(stats[k]) + ' ' + t('feature.' + k + '.description');
-                }
-            }));
+        var features = context.features();
+        var stats = features.stats();
+        var count = 0;
+        var hiddenList = features.hidden().map(function(k) {
+            if (stats[k]) {
+                count += stats[k];
+                return String(stats[k]) + ' ' + t('feature.' + k + '.description');
+            }
+        }).filter(Boolean);
 
         selection.html('');