improvement: externalise webcomponents polyfill (#185)

The polyfill is now loaded via the official webcomponents-loader, instead of imports
This allows users of web components to provide their own version and copy of the polyfill
This also decreases the bundle size for the playground for modern browsers.

Author: pskelin

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

@@ -18,7 +18,17 @@ const Bootstrap = {
 			whenDOMReady().then(() => {
 				insertIconFontFace();
 				DOMEventHandler.start();
-				resolve();
+
+				if (window.WebComponents && window.WebComponents.waitFor) {
+					// the polyfill loader is present
+					window.WebComponents.waitFor(() => {
+						// the polyfills are loaded, safe to execute code depending on their APIs
+						resolve();
+					});
+				} else {
+					// polyfill loader missing, modern browsers only
+					resolve();
+				}
 			});
 		});
 

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

@@ -1,9 +1,6 @@
 // URLSearchParams
 import "url-search-params-polyfill";
 
-// Web Components polyfills
-import "../thirdparty/shadydom.min";
-import "../thirdparty/custom-elements.min";
 
 // "pseudo mutation observer" fix for nodeValue
 import "../compatibility/patchNodeValue";

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

@@ -2,11 +2,9 @@
 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";
 
@@ -15,28 +13,16 @@ 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";
 

packages/main/package.json

@@ -44,7 +44,7 @@
     }
   },
   "scripts": {
-    "build": "npm-run-all --sequential clean lint build:templates build:samples build:less copy:src build:bundle copy:i18n",
+    "build": "npm-run-all --sequential clean lint build:templates build:samples build:less copy:src build:bundle copy:i18n copy:webcomponents-polyfill ",
     "build:less": "rollup -c rollup.config.less.js",
     "build:bundle": "rollup -c --environment ES5_BUILD",
     "build:templates": "mkdirp src/build/compiled && node ./lib/hbs2ui5/index.js -d src/ -o src/build/compiled",
@@ -59,7 +59,8 @@
     "copy:test": "cpx \"test/**/*.*\" dist/test-resources",
     "copy:pages": "cpx \"test/**/pages/*.*\" dist/test-resources",
     "copy:qunit": "cpx \"test/**/qunit/*.*\" dist/test-resources",
-    "dev": "npm-run-all --parallel watch:less watch:templates watch:samples watch:pages watch:qunit watch:src watch:bundle",
+    "copy:webcomponents-polyfill": "cpx \"../../node_modules/@webcomponents/webcomponentsjs/**/*.*\" dist/webcomponentsjs/",
+    "dev": "npm-run-all --parallel watch:less watch:templates watch:samples watch:pages watch:qunit watch:src watch:bundle copy:webcomponents-polyfill",
     "start": "npm-run-all --parallel serve:static dev",
     "lint": "eslint .",
     "test:wdio": "npm-run-all --parallel --race serve:static test:wdio-run",
@@ -97,6 +98,7 @@
     "@wdio/mocha-framework": "^5.4.13",
     "@wdio/spec-reporter": "^5.4.3",
     "@wdio/sync": "^5.4.13",
+    "@webcomponents/webcomponentsjs": "^2.2.7",
     "chromedriver": "^2.45.0",
     "clean-css": "^4.2.1",
     "copy-and-watch": "^0.1.2",

packages/main/src/Suggestions.js

@@ -1,3 +1,4 @@
+import Bootstrap from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Bootstrap";
 import List from "./List";
 import Popover from "./Popover";
 import StandardListItem from "./StandardListItem"; // ensure <ui5-li> is loaded
@@ -274,7 +275,9 @@ Suggestions.SCROLL_STEP = 48;
 
 // The List and Popover components would be rendered
 // by the issuer component`s template.
-List.define();
-Popover.define();
+Bootstrap.boot().then(() => {
+	List.define();
+	Popover.define();
+});
 
 export default Suggestions;

packages/main/test/sap/ui/webcomponents/main/pages/Button.html

@@ -13,11 +13,8 @@
 		}
 	</script>
 
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-		type="module"
-	>
-	</script>
-
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
 	</script>
 </head>

packages/main/test/sap/ui/webcomponents/main/pages/Calendar.html

@@ -13,11 +13,8 @@
 		}
 	</script>
 
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-	        type="module"
-	>
-	</script>
-
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
 	</script>
 </head>

packages/main/test/sap/ui/webcomponents/main/pages/Card.html

@@ -13,11 +13,8 @@
 		}
 	</script>
 
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-	        type="module"
-	>
-	</script>
-
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
 	</script>
 	<style>

packages/main/test/sap/ui/webcomponents/main/pages/CheckBox.html

@@ -6,23 +6,15 @@
 
 	<title>ui5-checkbox</title>
 
-	<script
-		src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-		type="module"
-	></script>
-
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script	src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js"></script>
 
 	<style>
 		ui5-checkbox {
 			border: 1px solid red;
 		}
 	</style>
-
-	<script data-id="sap-ui-config" type="application/json">
-		{
-		}
-	</script>
 </head>
 
 <body>

packages/main/test/sap/ui/webcomponents/main/pages/DatePicker.html

@@ -7,11 +7,8 @@
 
 	<script src="diffable-html.js"></script>
 
-	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
-		type="module"
-	>
-	</script>
-
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
 	</script>