feat: create @ui5/webcomponents-ie11 package (#2686)

Author: vladitasev

README.md

@@ -103,7 +103,7 @@ Safari | Native
 Edge | Native
 IE 11 | With Polyfill
 
-If your app needs to support **IE11** or **legacy Edge**, please follow the [instructions](https://github.com/SAP/ui5-webcomponents/blob/master/docs/Public%20Module%20Imports.md#1-old-browser-support-edge-ie11).
+If your app needs to support **IE11**, please follow the [instructions](https://github.com/SAP/ui5-webcomponents/blob/master/docs/Public%20Module%20Imports.md#1-old-browser-support-ie11).
 
 ## Project structure, development and build
 
@@ -128,6 +128,7 @@ Project | NPM Package | Description
 `base` | [UI5 Web Components Base](https://www.npmjs.com/package/@ui5/webcomponents-base) | The UI5 Web Components framework itself
 `theme-base` | [UI5 Web Components Theme Base](https://www.npmjs.com/package/@ui5/webcomponents-theme-base) | Theming assets (the default theme and additional accessibility themes)
 `localization` | [UI5 Web Components Localization](https://www.npmjs.com/package/@ui5/webcomponents-localization) | `i18n` functionality and `CLDR` assets
+`ie11` | [UI5 Web Components IE11](https://www.npmjs.com/package/@ui5/webcomponents-ie11) | Internet Explorer 11 polyfills and adapter code
 `playground` | N/A | The playground application
 
 ### How to run the project locally:

docs/Angular-tutorial.md

@@ -136,6 +136,11 @@ If you need your application to run on Internet Explorer 11, there are some addi
 *Note* These steps have been tested with Angular 7. For other versions of Angular, there might be some differences.
 
 1. Install all needed dependencies:
+
+```bash
+npm install @ui5/webcomponents-ie11 --save
+```
+
 ```bash
 npm install --save @angular-builders/[email protected] @angular-builders/[email protected] @babel/core @babel/preset-env babel-loader
 ```
@@ -205,7 +210,7 @@ module.exports = {
 
 4. Add the following import ```to app.module.ts``` file:
 ```js
-import "@ui5/webcomponents-base/dist/features/browsersupport/IE11WithWebComponentsPolyfill.js";
+import "@ui5/webcomponents-ie11/dist/features/IE11WithWebComponentsPolyfill.js";
 ```
 
 *Note*: The ```IE11WithWebComponentsPolyfill.js``` file includes the official webcomponents polyfill, so you don’t have to import it by yourself. (This file was released in our latest @next version. It will be shipped with our next stable release rc.6, so until then it would be available only with the @next tag)

docs/Public Module Imports.md

@@ -204,23 +204,16 @@ The `base` package provides not only the UI5 Web Components framework, but also
 all UI5 Web Components.
 
 <a name="oldbrowsersupport"></a>
-### 1. Old browser support (Edge, IE11)
+### 1. Old browser support ( IE11)
 
 Most modern browsers  - **Chrome, Firefox, Safari, Edge (Chromium-based)**, support Web Components natively.
 
-If your app needs to be able to run additionally on the old **Edge (EdgeHTML-based)**, you should import the following module:
+If your app needs to run on **IE11**, you should import:
 
 ```js
-import "@ui5/webcomponents-base/dist/features/browsersupport/Edge.js";
+import "@ui5/webcomponents-ie11/dist/features/IE11.js";
 ```
 
-And if your app needs to run on both **Edge** and **IE11**, you should instead import:
-
-```js
-import "@ui5/webcomponents-base/dist/features/browsersupport/IE11.js";
-```
-(this also includes Edge support).
-
 In addition, you should load the official Web Components polyfill in your index file, as described
 [here](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs).
 
@@ -238,22 +231,15 @@ As shown in the example above, it's recommended to load the Web Components Polyf
 Finally, there is an alternative to the `IE11.js` import:
 
 ```js
-import "@ui5/webcomponents-base/dist/features/browsersupport/IE11WithWebComponentsPolyfill.js";
+import "@ui5/webcomponents-ie11/dist/features/IE11WithWebComponentsPolyfill.js";
 ```
 
 that includes the Web Components Polyfill too, so you don't have to import it manually.
 
-This may be useful in certain use cases when your app has polyfills of its own and you need to guarantee the order of exectution.
+This may be useful in certain use cases when your app has polyfills of its own and you need to guarantee the order of execution.
 
 The three old browser support options are summarized below:
 
-| |`Edge.js` | `IE11.js` | `IE11WithWebComponentsPolyfill.js` |
-|---|----------|-----------|------------------------------------|
-|Browsers supported| Edge | Edge & IE11 | Edge & IE11 |
-|Includes Web Components Polyfill | No* | No* | Yes|
-
-`* You must include the Web Components Polyfill manually`
-
 <a name="theming"></a>
 ### 2. Theming
 

docs/dev/Creating UI5 Web Components Packages.md

@@ -22,10 +22,12 @@ The name that you give to your package will be used by the UI5 Web Components to
 With `npm`:
  - `npm i --save @ui5/webcomponents-base @ui5/webcomponents-theme-base @ui5/webcomponents-tools`
  - `npm i --save-dev chromedriver`
+ - (Optional) `npm i --save @ui5/webcomponents-ie11`
 
 or with `yarn`:
  - `yarn add @ui5/webcomponents-base @ui5/webcomponents-theme-base @ui5/webcomponents-tools`
  - `yarn add -D chromedriver` 
+ - (Optional) `yarn add @ui5/webcomponents-ie11`
 
 These three `@ui5/` packages will serve as foundation for your own package and web components.
 
@@ -34,11 +36,14 @@ Package | Description
 `@ui5/webcomponents-base` | Base classes and Framework
 `@ui5/webcomponents-theme-base` | Base theming assets
 `@ui5/webcomponents-tools` | Build and configuration assets
+`@ui5/webcomponents-ie11` | (Optional) Internet Explorer 11 polyfills and adapter code
 
 *Note:* `chromedriver` is a peer dependency of `@ui5/webcomponents-tools` so that you get to choose the exact version, 
 if necessary. This is useful if, for example, you manually update Chrome on your system and you'd prefer to not have
 a fixed `chromedriver` version packaged with `@ui5/webcomponents-tools`. 
 
+*Note:* `@ui5/webcomponents-ie11` is optional and should not be installed unless you need Internet Explorer 11 support.
+
 ## Step 3 - run the package initialization script
 
 Run the initialization script, optionally with parameters from the following table:
@@ -126,7 +131,7 @@ File | Purpose
 .eslintignore | Excludes the `dist/` and `test/` directories from static code scans
 package-scripts.js | An [nps](https://www.npmjs.com/package/nps) package scripts configuration file
 bundle.esm.js | Entry point for the ES6 bundle, used for development and tests. Intended for modern browsers.
-bundle.es5.js | Entry point for the ES5 bundle, used for development and tests. Intended for IE11 only.
+bundle.es5.js | Entry point for the ES5 bundle, used for development and tests. Intended for IE11 only. Delete this file if you don't need IE11 support.
 
 You'll likely only need to change `bundle.esm.js` to import your new components there.
 

package.json

@@ -9,19 +9,21 @@
     "ui5"
   ],
   "scripts": {
-    "build": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:icons-tnt build:main build:fiori",
+    "build": "npm-run-all --sequential build:base build:ie11 build:localization build:theme-base build:icons build:icons-tnt build:main build:fiori",
     "build:localization": "cd packages/localization && yarn build",
     "build:base": "cd packages/base && yarn build",
+    "build:ie11": "cd packages/ie11 && yarn build",
     "build:theme-base": "cd packages/theme-base && yarn build",
     "build:icons": "cd packages/icons && yarn build",
     "build:icons-tnt": "cd packages/icons-tnt && yarn build",
     "build:main": "cd packages/main && yarn build",
     "build:fiori": "cd packages/fiori && yarn build",
     "build:playground": "yarn build:main && yarn build:fiori && cd packages/playground && yarn build",
     "build:playground:master": "yarn build:main && yarn build:fiori && cd packages/playground && yarn build:master",
-    "clean": "npm-run-all --sequential clean:base clean:localization clean:theme-base clean:icons clean:icons-tnt clean:main clean:fiori",
+    "clean": "npm-run-all --sequential clean:base clean:ie11 clean:localization clean:theme-base clean:icons clean:icons-tnt clean:main clean:fiori",
     "clean:localization": "cd packages/localization && yarn clean",
     "clean:base": "cd packages/base && yarn clean",
+    "clean:ie11": "cd packages/ie11 && yarn clean",
     "clean:theme-base": "cd packages/theme-base && yarn clean",
     "clean:icons": "cd packages/icons && yarn clean",
     "clean:icons-tnt": "cd packages/icons-tnt && yarn clean",
@@ -32,15 +34,16 @@
     "scopePrepare:main": "cd packages/main && nps scope.prepare",
     "scopePrepare:fiori": "cd packages/fiori && nps scope.prepare",
     "dev:base": "cd packages/base && nps watch",
+    "dev:ie11": "cd packages/ie11 && nps watch",
     "dev:localization": "cd packages/localization && nps watch",
     "dev:main": "cd packages/main && nps dev",
     "dev:fiori": "cd packages/fiori && nps dev",
     "scopeDev:main": "cd packages/main && nps scope.dev",
     "scopeDev:fiori": "cd packages/fiori && nps scope.dev",
-    "start": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:icons-tnt prepare:main prepare:fiori start:all",
-    "startWithScope": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:icons-tnt scopePrepare:main scopePrepare:fiori scopeStart:all",
-    "start:all": "npm-run-all --parallel dev:base dev:localization dev:main dev:fiori",
-    "scopeStart:all": "npm-run-all --parallel dev:base dev:localization scopeDev:main scopeDev:fiori",
+    "start": "npm-run-all --sequential build:base build:ie11 build:localization build:theme-base build:icons build:icons-tnt prepare:main prepare:fiori start:all",
+    "startWithScope": "npm-run-all --sequential build:base build:ie11 build:localization build:theme-base build:icons build:icons-tnt scopePrepare:main scopePrepare:fiori scopeStart:all",
+    "start:all": "npm-run-all --parallel dev:base dev:ie11 dev:localization dev:main dev:fiori",
+    "scopeStart:all": "npm-run-all --parallel dev:base dev:ie11 dev:localization scopeDev:main scopeDev:fiori",
     "start:base": "cd packages/base && yarn start",
     "start:main": "cd packages/main && yarn start",
     "start:fiori": "cd packages/fiori && yarn start",
@@ -71,6 +74,7 @@
     "packages/fiori",
     "packages/icons",
     "packages/icons-tnt",
+    "packages/ie11",
     "packages/tools",
     "packages/playground"
   ]

packages/base/bundle.es5.js

@@ -1,7 +1,6 @@
 import { registerThemeProperties } from "./dist/AssetRegistry.js";
 
-// ESM bundle targets Edge + browsers with native support
-import "./dist/features/browsersupport/Edge.js";
+// ESM bundle targets browsers with native support
 import "./dist/features/OpenUI5Support.js";
 
 // Test components

packages/base/bundle.esm.js

@@ -12,20 +12,19 @@ const scripts = {
 	prepare: "nps clean copy generateAssetParameters",
 	build: {
 		default: "nps lint prepare build.bundle",
-		bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
+		bundle: "rollup --config config/rollup.config.js",
 	},
 	copy: {
-		default: "nps copy.src copy.test copy.webcomponents-polyfill",
+		default: "nps copy.src copy.test",
 		src: "copy-and-watch \"src/**/*.js\" dist/",
 		test: "copy-and-watch \"test/**/*.*\" dist/test-resources",
-		"webcomponents-polyfill": "copy-and-watch \"../../node_modules/@webcomponents/webcomponentsjs/**/*.*\" dist/webcomponentsjs/",
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	watch: {
 		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
 		src: 'nps "copy.src --watch --skip-initial-copy"',
 		test: 'nps "copy.test --watch --skip-initial-copy"',
-		bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV",
+		bundle: "rollup --config config/rollup.config.js -w --environment DEV",
 	},
 	dev: 'concurrently "nps serve" "nps watch"',
 	start: "nps prepare dev",

packages/base/package-scripts.js

@@ -24,10 +24,7 @@
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "css-vars-ponyfill": "^2.1.2",
-    "lit-html": "^1.0.0",
-    "regenerator-runtime": "0.12.1",
-    "url-search-params-polyfill": "^5.0.0"
+    "lit-html": "^1.0.0"
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.0.0-rc.11",

packages/base/package.json

@@ -1,12 +1,22 @@
+import EventProvider from "./EventProvider.js";
 import whenDOMReady from "./util/whenDOMReady.js";
 import insertFontFace from "./FontFace.js";
 import insertSystemCSSVars from "./SystemCSSVars.js";
 import { getTheme } from "./config/Theme.js";
 import applyTheme from "./theming/applyTheme.js";
-import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
 import { getFeature } from "./FeaturesRegistry.js";
 
 let bootPromise;
+const eventProvider = new EventProvider();
+
+/**
+ * Attach a callback that will be executed on boot
+ * @public
+ * @param listener
+ */
+const attachBoot = listener => {
+	eventProvider.attachEvent("boot", listener);
+};
 
 const boot = () => {
 	if (bootPromise) {
@@ -24,11 +34,15 @@ const boot = () => {
 		OpenUI5Support && OpenUI5Support.attachListeners();
 		insertFontFace();
 		insertSystemCSSVars();
-		await whenPolyfillLoaded();
+		await eventProvider.fireEventAsync("boot");
+
 		resolve();
 	});
 
 	return bootPromise;
 };
 
-export default boot;
+export {
+	boot,
+	attachBoot,
+};

packages/base/src/boot.js renamed to packages/base/src/Boot.js

@@ -0,0 +1,61 @@
+const observers = new WeakMap(); // We want just one observer per node, store them here -> DOM nodes are keys
+
+/**
+ * Default implementation with MutationObserver for browsers with native support
+ */
+let _createObserver = (node, callback, options) => {
+	const observer = new MutationObserver(callback);
+	observer.observe(node, options);
+	return observer;
+};
+
+/**
+ * Default implementation with MutationObserver for browsers with native support
+ */
+let _destroyObserver = observer => {
+	observer.disconnect();
+};
+
+/**
+ * Allows to create an alternative DOM observer implementation
+ * @param createFn
+ */
+const setCreateObserverCallback = createFn => {
+	_createObserver = createFn;
+};
+
+/**
+ * Allows to create an alternative DOM observer implementation
+ * @param destroyFn
+ */
+const setDestroyObserverCallback = destroyFn => {
+	_destroyObserver = destroyFn;
+};
+
+/**
+ * @param node
+ * @param callback
+ * @param options
+ */
+const observeDOMNode = (node, callback, options) => {
+	const observer = _createObserver(node, callback, options);
+	observers.set(node, observer);
+};
+
+/**
+ * @param node
+ */
+const unobserveDOMNode = node => {
+	const observer = observers.get(node);
+	if (observer) {
+		_destroyObserver(observer);
+		observers.delete(node);
+	}
+};
+
+export {
+	setCreateObserverCallback,
+	setDestroyObserverCallback,
+	observeDOMNode,
+	unobserveDOMNode,
+};

packages/base/src/DOMObserver.js

@@ -36,7 +36,6 @@ class EventProvider {
 
 	/**
 	 * Fires an event and returns the results of all event listeners as an array.
-	 * Example: If listeners return promises, you can: await fireEvent("myEvent") to know when all listeners have finished.
 	 *
 	 * @param eventName the event to fire
 	 * @param data optional data to pass to each event listener
@@ -55,6 +54,17 @@ class EventProvider {
 		});
 	}
 
+	/**
+	 * Fires an event and returns a promise that will resolve once all listeners have resolved.
+	 *
+	 * @param eventName the event to fire
+	 * @param data optional data to pass to each event listener
+	 * @returns {Promise} a promise that will resolve when all listeners have resolved
+	 */
+	fireEventAsync(eventName, data) {
+		return Promise.all(this.fireEvent(eventName, data));
+	}
+
 	isHandlerAttached(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
 		const eventListeners = eventRegistry[eventName];