Organize our polyfills and standardize on core-js

app/assets/javascripts/behaviors/quick_submit.js

@@ -6,7 +6,7 @@
 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
 // is submitted.
 //
-require('../extensions/jquery');
+import '../commons/bootstrap';
 //
 // ### Example Markup

app/assets/javascripts/behaviors/requires_input.js

@@ -4,7 +4,7 @@
 // When called on a form with input fields with the `required` attribute, the
 // form's submit button will be disabled until all required fields have values.
 //
-require('../extensions/jquery');
+import '../commons/bootstrap';
 //
 // ### Example Markup

app/assets/javascripts/commons/bootstrap.js

-import 'jquery';
+import $ from 'jquery';
 // bootstrap jQuery plugins
 import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
@@ -8,3 +8,9 @@ import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
 import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
+
+// custom jQuery functions
+$.fn.extend({
+  disable() { return $(this).attr('disabled', 'disabled').addClass('disabled'); },
+  enable() { return $(this).removeAttr('disabled').removeClass('disabled'); },
+});

app/assets/javascripts/commons/index.js

+import './polyfills';
 import './jquery';
 import './bootstrap';

app/assets/javascripts/commons/polyfills.js

+// ECMAScript polyfills
+import 'core-js/fn/array/find';
+import 'core-js/fn/object/assign';
+import 'core-js/fn/promise';
+import 'core-js/fn/string/code-point-at';
+import 'core-js/fn/string/from-code-point';
+
+// Browser polyfills
+import './polyfills/custom_event';
+import './polyfills/element';

app/assets/javascripts/commons/polyfills/custom_event.js

+if (typeof window.CustomEvent !== 'function') {
+  window.CustomEvent = function CustomEvent(event, params) {
+    const evt = document.createEvent('CustomEvent');
+    const evtParams = params || { bubbles: false, cancelable: false, detail: undefined };
+    evt.initCustomEvent(event, evtParams.bubbles, evtParams.cancelable, evtParams.detail);
+    return evt;
+  };
+  window.CustomEvent.prototype = Event;
+}

app/assets/javascripts/extensions/element.js → app/assets/javascripts/commons/polyfills/element.js

-/* global Element */
-/* eslint-disable consistent-return, max-len, no-empty, func-names */
-
-Element.prototype.closest = Element.prototype.closest || function closest(selector, selectedElement = this) {
-  if (!selectedElement) return;
-  return selectedElement.matches(selector) ? selectedElement : Element.prototype.closest(selector, selectedElement.parentElement);
-};
+Element.prototype.closest = Element.prototype.closest ||
+  function closest(selector, selectedElement = this) {
+    if (!selectedElement) return null;
+    return selectedElement.matches(selector) ?
+      selectedElement :
+      Element.prototype.closest(selector, selectedElement.parentElement);
+  };
 Element.prototype.matches = Element.prototype.matches ||
   Element.prototype.matchesSelector ||
@@ -12,9 +12,9 @@ Element.prototype.matches = Element.prototype.matches ||
   Element.prototype.msMatchesSelector ||
   Element.prototype.oMatchesSelector ||
   Element.prototype.webkitMatchesSelector ||
-  function (s) {
-    const matches = (this.document || this.ownerDocument).querySelectorAll(s);
-    let i = matches.length - 1;
-    while (i >= 0 && matches.item(i) !== this) { i -= 1; }
+  function matches(selector) {
+    const elms = (this.document || this.ownerDocument).querySelectorAll(selector);
+    let i = elms.length - 1;
+    while (i >= 0 && elms.item(i) !== this) { i -= 1; }
     return i > -1;
   };

app/assets/javascripts/droplab/droplab_ajax.js

@@ -74,6 +74,9 @@ require('../window')(function(w){
         this._loadUrlData(config.endpoint)
           .then(function(d) {
             self._loadData(d, config, self);
+          }, function(xhrError) {
+            // TODO: properly handle errors due to XHR cancellation
+            return;
           }).catch(function(e) {
             throw new droplabAjaxException(e.message || e);
           });

app/assets/javascripts/droplab/droplab_ajax_filter.js

@@ -82,6 +82,9 @@ require('../window')(function(w){
         this._loadUrlData(url)
           .then(function(data) {
             self._loadData(data, config, self);
+          }, function(xhrError) {
+            // TODO: properly handle errors due to XHR cancellation
+            return;
           });
       }
     },

app/assets/javascripts/extensions/array.js

-/* eslint-disable no-extend-native, func-names, space-before-function-paren, space-infix-ops, strict, max-len */
-'use strict';
-
-Array.prototype.first = function() {
+// TODO: remove this
+// eslint-disable-next-line no-extend-native
+Array.prototype.first = function first() {
   return this[0];
 };
-Array.prototype.last = function() {
-  return this[this.length-1];
-};
-
-Array.prototype.find = Array.prototype.find || function(predicate, ...args) {
-  if (!this) throw new TypeError('Array.prototype.find called on null or undefined');
-  if (typeof predicate !== 'function') throw new TypeError('predicate must be a function');
-
-  const list = Object(this);
-  const thisArg = args[1];
-  let value = {};
-
-  for (let i = 0; i < list.length; i += 1) {
-    value = list[i];
-    if (predicate.call(thisArg, value, i, list)) return value;
-  }
-
-  return undefined;
+// eslint-disable-next-line no-extend-native
+Array.prototype.last = function last() {
+  return this[this.length - 1];
 };

app/assets/javascripts/extensions/custom_event.js

-/* global CustomEvent */
-/* eslint-disable no-global-assign */
-
-// Custom event support for IE
-CustomEvent = function CustomEvent(event, parameters) {
-  const params = parameters || { bubbles: false, cancelable: false, detail: undefined };
-  const evt = document.createEvent('CustomEvent');
-  evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-  return evt;
-};
-
-CustomEvent.prototype = window.Event.prototype;

app/assets/javascripts/extensions/jquery.js

-/* eslint-disable func-names, space-before-function-paren, object-shorthand, comma-dangle, max-len */
-// Disable an element and add the 'disabled' Bootstrap class
-(function() {
-  $.fn.extend({
-    disable: function() {
-      return $(this).attr('disabled', 'disabled').addClass('disabled');
-    }
-  });
-
-  // Enable an element and remove the 'disabled' Bootstrap class
-  $.fn.extend({
-    enable: function() {
-      return $(this).removeAttr('disabled').removeClass('disabled');
-    }
-  });
-}).call(window);

app/assets/javascripts/extensions/object.js

-/* eslint-disable no-restricted-syntax */
-
-// Adapted from https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
-if (typeof Object.assign !== 'function') {
-  Object.assign = function assign(target, ...args) {
-    if (target == null) { // TypeError if undefined or null
-      throw new TypeError('Cannot convert undefined or null to object');
-    }
-
-    const to = Object(target);
-
-    for (let index = 0; index < args.length; index += 1) {
-      const nextSource = args[index];
-
-      if (nextSource != null) { // Skip over if undefined or null
-        for (const nextKey in nextSource) {
-          // Avoid bugs when hasOwnProperty is shadowed
-          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-            to[nextKey] = nextSource[nextKey];
-          }
-        }
-      }
-    }
-    return to;
-  };
-}

app/assets/javascripts/extensions/string.js

-import 'string.prototype.codepointat';
-import 'string.fromcodepoint';

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -162,6 +162,10 @@
     }
     resetDropdowns() {
+      if (!this.currentDropdown) {
+        return;
+      }
+
       // Force current dropdown to hide
       this.mapping[this.currentDropdown].reference.hideDropdown();

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -38,7 +38,8 @@
       this.editTokenWrapper = this.editToken.bind(this);
       this.tokenChange = this.tokenChange.bind(this);
-      this.filteredSearchInput.form.addEventListener('submit', this.handleFormSubmit);
+      this.filteredSearchInputForm = this.filteredSearchInput.form;
+      this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.addEventListener('input', this.handleInputPlaceholderWrapper);
@@ -56,7 +57,7 @@
     }
     unbindEvents() {
-      this.filteredSearchInput.form.removeEventListener('submit', this.handleFormSubmit);
+      this.filteredSearchInputForm.removeEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.removeEventListener('input', this.handleInputPlaceholderWrapper);

app/assets/javascripts/main.js

@@ -16,17 +16,9 @@ import Sortable from 'vendor/Sortable';
 import 'mousetrap';
 import 'mousetrap/plugins/pause/mousetrap-pause';
 import 'vendor/fuzzaldrin-plus';
-import promisePolyfill from 'es6-promise';
 // extensions
-import './extensions/string';
 import './extensions/array';
-import './extensions/custom_event';
-import './extensions/element';
-import './extensions/jquery';
-import './extensions/object';
-
-promisePolyfill.polyfill();
 // expose common libraries as globals (TODO: remove these)
 window.jQuery = jQuery;

app/assets/javascripts/monitoring/prometheus_graph.js

-/* eslint-disable no-new*/
+/* eslint-disable no-new */
+/* global Flash */
+
 import d3 from 'd3';
 import _ from 'underscore';
 import statusCodes from '~/lib/utils/http_status';
 import '~/lib/utils/common_utils';
-import Flash from '~/flash';
+import '~/flash';
 const prometheusGraphsContainer = '.prometheus-graph';
 const metricsEndpoint = 'metrics.json';

changelogs/unreleased/use-corejs-polyfills.yml

+---
+title: Standardize on core-js for es2015 polyfills
+merge_request: 9749
+author:

package.json

@@ -17,11 +17,11 @@
     "babel-preset-stage-2": "^6.22.0",
     "bootstrap-sass": "^3.3.6",
     "compression-webpack-plugin": "^0.3.2",
+    "core-js": "^2.4.1",
     "d3": "^3.5.11",
     "document-register-element": "^1.3.0",
     "dropzone": "^4.2.0",
     "emoji-unicode-version": "^0.2.1",
-    "es6-promise": "^4.0.5",
     "jquery": "^2.2.1",
     "jquery-ujs": "^1.2.1",
     "js-cookie": "^2.1.3",
@@ -31,8 +31,6 @@
     "raw-loader": "^0.5.1",
     "select2": "3.5.2-browserify",
     "stats-webpack-plugin": "^0.4.3",
-    "string.fromcodepoint": "^0.2.1",
-    "string.prototype.codepointat": "^0.2.0",
     "timeago.js": "^2.0.5",
     "underscore": "^1.8.3",
     "vue": "^2.1.10",