feat: load Web Components polyfill on demand (#96)

BREAKING CHANGE: any applications that want to support Edge and/or IE11 should now import the respective browser support module. For details, see the README.md

Author: vladitasev

README.md

@@ -57,6 +57,34 @@ Then, you can use the custom element in an HTML page:
 <ui5-button>Hello world!</ui5-button>
 ```
 
+## Browser support
+
+Currently only Chrome, Safari and Firefox support Web Components natively.
+
+If your application should run on browsers without native Web Components support (Edge and/or IE11), import one the following modules before your first Web Component import: 
+
+### Edge only
+
+```js
+import "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/browsersupport/Edge";
+```
+
+### Edge and IE11
+
+```js
+import "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/browsersupport/IE11";
+```
+
+*Note:* Importing the module for IE11 support automatically enables Edge support as well, so there is no need to import them both explicitly.
+
+Example:
+
+```js
+import "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/browsersupport/IE11"; // This will enable Edge and IE11 support for all Web Components below
+import "@ui5/webcomponents/dist/Button"; // loads ui5-button
+import "@ui5/webcomponents/dist/Label"; // loads ui5-label
+```
+
 ## Configure
 UI5 Web Components have built-in internalization and globalization support. Language, compact/cozy switch, date/time settings and theme can be changed with parameters.
 

packages/base/.eslintignore

@@ -1,2 +1,3 @@
 # Note: Changes to this file also must be applied to the top level .eslintignore file.
 test
+src/sap/ui/webcomponents/base/thirdparty

packages/base/package.json

@@ -22,6 +22,7 @@
     "@polymer/polymer": "^3.1.0",
     "@ui5/webcomponents-core": "0.7.0",
     "lit-html": "^1.0.0",
+    "regenerator-runtime": "0.12.1",
     "url-search-params-polyfill": "^5.0.0"
   },
   "devDependencies": {

packages/base/src/sap/ui/webcomponents/base/Bootstrap.js

@@ -3,14 +3,9 @@ import "./shims/jquery-shim";
 
 import whenDOMReady from "./util/whenDOMReady";
 import EventEnrichment from "./events/EventEnrichment";
-import patchNodeValue from "./compatibility/patchNodeValue";
 import IconFonts from "./IconFonts";
 import DOMEventHandler from "./DOMEventHandler";
 
-
-// This will only have effect if the polyfill is loaded
-patchNodeValue();
-
 EventEnrichment.run();
 
 let bootPromise;

packages/base/src/sap/ui/webcomponents/base/browsersupport/Edge.js

@@ -0,0 +1,6 @@
+// URLSearchParams
+import "url-search-params-polyfill";
+
+// Edge only needs the Web Components polyfill and the pseudo mutation observer fix
+import "../thirdparty/webcomponents-polyfill";
+import "../compatibility/patchNodeValue";

packages/base/src/sap/ui/webcomponents/base/browsersupport/IE11.js

@@ -0,0 +1,44 @@
+// String
+import "@ui5/webcomponents-core/dist/sap/ui/thirdparty/es6-string-methods";
+
+// Object
+import "../thirdparty/Object.assign";
+import "../thirdparty/Object.entries";
+
+// Array
+import "../thirdparty/Array.from";
+import "../thirdparty/Array.prototype.fill";
+import "../thirdparty/Array.prototype.includes";
+
+// Number
+import "../thirdparty/Number.isInteger";
+import "../thirdparty/Number.isNaN";
+import "../thirdparty/Number.parseInt";
+
+// Symbol
+import "../thirdparty/Symbol";
+
+// Element
+import "../thirdparty/Element.prototype.matches";
+import "../thirdparty/Element.prototype.closest";
+
+// Promise
+import "@ui5/webcomponents-core/dist/sap/ui/thirdparty/es6-promise";
+
+// WeakSet
+import "../thirdparty/WeakSet";
+
+// fetch
+import "../thirdparty/fetch";
+
+// template
+import "../thirdparty/template";
+
+// Various event polyfills - preventDefault, window.Event, window.CustomEvent, window.MouseEvent
+import "../thirdparty/events-polyfills";
+
+// async - await
+import "regenerator-runtime/runtime";
+
+// Plus all polyfills needed for Edge are also needed for IE11
+import "./Edge";

packages/base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM.js

@@ -1,4 +1,3 @@
-import "../thirdparty/webcomponents-polyfill";
 import { getTheme, getRTL, getCompactSize } from "../Configuration";
 
 import StyleInjection from "../theming/StyleInjection";

packages/base/src/sap/ui/webcomponents/base/compatibility/patchNodeValue.js

@@ -1,5 +1,3 @@
-import "../thirdparty/webcomponents-polyfill";
-
 const patchNodeValue = () => {
 	if (!window.ShadyDOM) {
 		return;
@@ -21,4 +19,6 @@ const patchNodeValue = () => {
 	});
 };
 
-export default patchNodeValue;
+patchNodeValue();
+
+export default {};

packages/base/src/sap/ui/webcomponents/base/events/PolymerGestures.js

@@ -1,4 +1,3 @@
-import "../thirdparty/webcomponents-polyfill";
 import * as PolymerGestures from "@polymer/polymer/lib/utils/gestures";
 import { injectGesturesProvider } from "./DefaultGestures";
 

packages/base/src/sap/ui/webcomponents/base/thirdparty/Array.from.js

@@ -0,0 +1,16 @@
+// https://raw.githubusercontent.com/webcomponents/webcomponents-platform/master/webcomponents-platform.js
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+if (!Array.from) {
+	Array.from = function (object) {
+		return [].slice.call(object);
+	};
+}

packages/base/src/sap/ui/webcomponents/base/thirdparty/Array.prototype.fill.js

@@ -0,0 +1,44 @@
+if (!Array.prototype.fill) {
+	Object.defineProperty(Array.prototype, 'fill', {
+		value: function(value) {
+
+			// Steps 1-2.
+			if (this == null) {
+				throw new TypeError('this is null or not defined');
+			}
+
+			var O = Object(this);
+
+			// Steps 3-5.
+			var len = O.length >>> 0;
+
+			// Steps 6-7.
+			var start = arguments[1];
+			var relativeStart = start >> 0;
+
+			// Step 8.
+			var k = relativeStart < 0 ?
+				Math.max(len + relativeStart, 0) :
+				Math.min(relativeStart, len);
+
+			// Steps 9-10.
+			var end = arguments[2];
+			var relativeEnd = end === undefined ?
+				len : end >> 0;
+
+			// Step 11.
+			var final = relativeEnd < 0 ?
+				Math.max(len + relativeEnd, 0) :
+				Math.min(relativeEnd, len);
+
+			// Step 12.
+			while (k < final) {
+				O[k] = value;
+				k++;
+			}
+
+			// Step 13.
+			return O;
+		}
+	});
+}

packages/base/src/sap/ui/webcomponents/base/thirdparty/Array.prototype.includes.js

@@ -0,0 +1,51 @@
+// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+	Object.defineProperty(Array.prototype, 'includes', {
+		value: function(searchElement, fromIndex) {
+
+			if (this == null) {
+				throw new TypeError('"this" is null or not defined');
+			}
+
+			// 1. Let O be ? ToObject(this value).
+			var o = Object(this);
+
+			// 2. Let len be ? ToLength(? Get(O, "length")).
+			var len = o.length >>> 0;
+
+			// 3. If len is 0, return false.
+			if (len === 0) {
+				return false;
+			}
+
+			// 4. Let n be ? ToInteger(fromIndex).
+			//    (If fromIndex is undefined, this step produces the value 0.)
+			var n = fromIndex | 0;
+
+			// 5. If n ≥ 0, then
+			//  a. Let k be n.
+			// 6. Else n < 0,
+			//  a. Let k be len + n.
+			//  b. If k < 0, let k be 0.
+			var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+			function sameValueZero(x, y) {
+				return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
+			}
+
+			// 7. Repeat, while k < len
+			while (k < len) {
+				// a. Let elementK be the result of ? Get(O, ! ToString(k)).
+				// b. If SameValueZero(searchElement, elementK) is true, return true.
+				if (sameValueZero(o[k], searchElement)) {
+					return true;
+				}
+				// c. Increase k by 1.
+				k++;
+			}
+
+			// 8. Return false
+			return false;
+		}
+	});
+}

packages/base/src/sap/ui/webcomponents/base/thirdparty/Element.prototype.closest.js

@@ -0,0 +1,11 @@
+if (!Element.prototype.closest) {
+	Element.prototype.closest = function(s) {
+		var el = this;
+		if (!document.documentElement.contains(el)) return null;
+		do {
+			if (el.matches(s)) return el;
+			el = el.parentElement || el.parentNode;
+		} while (el !== null && el.nodeType === 1);
+		return null;
+	};
+}

packages/base/src/sap/ui/webcomponents/base/thirdparty/Element.prototype.matches.js

@@ -0,0 +1,6 @@
+if (Element && !Element.prototype.matches) {
+	var proto = Element.prototype;
+	proto.matches = proto.matchesSelector ||
+		proto.mozMatchesSelector || proto.msMatchesSelector ||
+		proto.oMatchesSelector || proto.webkitMatchesSelector;
+}

packages/base/src/sap/ui/webcomponents/base/thirdparty/Number.isInteger.js

@@ -0,0 +1,5 @@
+Number.isInteger = Number.isInteger || function(value) {
+	return typeof value === 'number' &&
+		isFinite(value) &&
+		Math.floor(value) === value;
+};

packages/base/src/sap/ui/webcomponents/base/thirdparty/Number.isNaN.js

@@ -0,0 +1 @@
+Number.isNaN = Number.isNaN || window.isNaN;

packages/base/src/sap/ui/webcomponents/base/thirdparty/Number.parseInt.js

@@ -0,0 +1 @@
+Number.parseInt = Number.parseInt || window.parseInt;

packages/base/src/sap/ui/webcomponents/base/thirdparty/Object.assign.js

@@ -0,0 +1,31 @@
+// https://raw.githubusercontent.com/webcomponents/webcomponents-platform/master/webcomponents-platform.js
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+if (!Object.assign) {
+	var assign = function(target, source) {
+		var n$ = Object.getOwnPropertyNames(source);
+		for (var i=0, p; i < n$.length; i++) {
+			p = n$[i];
+			target[p] = source[p];
+		}
+	}
+
+	Object.assign = function(target, sources) {
+		var args = [].slice.call(arguments, 1);
+		for (var i=0, s; i < args.length; i++) {
+			s = args[i];
+			if (s) {
+				assign(target, s);
+			}
+		}
+		return target;
+	}
+}

packages/base/src/sap/ui/webcomponents/base/thirdparty/Object.entries.js

@@ -0,0 +1,11 @@
+if (!Object.entries) {
+	Object.entries = function( obj ){
+		var ownProps = Object.keys( obj ),
+			i = ownProps.length,
+			resArray = new Array(i); // preallocate the Array
+		while (i--)
+			resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+		return resArray;
+	};
+}