feat(framework): support several runtimes simultaneously (#1691)

Author: vladitasev

packages/base/src/CustomElementsRegistry.js

@@ -1,23 +1,45 @@
-const DefinitionsSet = new Set();
+const Definitions = new Set();
+const Failures = new Set();
+let failureTimeout;
 
 const registerTag = tag => {
-	DefinitionsSet.add(tag);
+	Definitions.add(tag);
 };
 
 const isTagRegistered = tag => {
-	return DefinitionsSet.has(tag);
+	return Definitions.has(tag);
 };
 
 const getAllRegisteredTags = () => {
 	const arr = [];
-	DefinitionsSet.forEach(tag => {
+	Definitions.forEach(tag => {
 		arr.push(tag);
 	});
 	return arr;
 };
 
+const recordTagRegistrationFailure = tag => {
+	Failures.add(tag);
+	if (!failureTimeout) {
+		failureTimeout = setTimeout(() => {
+			displayFailedRegistrations();
+			failureTimeout = undefined;
+		}, 1000);
+	}
+};
+
+const displayFailedRegistrations = () => {
+	const tags = []; // IE only supports Set.prototype.forEach
+	Failures.forEach(tag => {
+		tags.push(tag);
+	});
+	console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${tags.join(", ")}`); // eslint-disable-line
+	Failures.clear();
+};
+
 export {
 	registerTag,
 	isTagRegistered,
 	getAllRegisteredTags,
+	recordTagRegistrationFailure,
 };

packages/base/src/UI5Element.js

@@ -3,7 +3,7 @@ import boot from "./boot.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
 import StaticAreaItem from "./StaticAreaItem.js";
 import RenderScheduler from "./RenderScheduler.js";
-import { registerTag, isTagRegistered } from "./CustomElementsRegistry.js";
+import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
 import { skipOriginalEvent } from "./config/NoConflict.js";
 import getConstructableStyle from "./theming/getConstructableStyle.js";
@@ -901,7 +901,7 @@ class UI5Element extends HTMLElement {
 		const definedGlobally = customElements.get(tag);
 
 		if (definedGlobally && !definedLocally) {
-			console.warn(`Skipping definition of tag ${tag}, because it was already defined by another instance of ui5-webcomponents.`); // eslint-disable-line
+			recordTagRegistrationFailure(tag);
 		} else if (!definedGlobally) {
 			this._generateAccessors();
 			registerTag(tag);

packages/base/src/delegate/ItemNavigation.js

@@ -9,7 +9,6 @@ import {
 } from "../Keys.js";
 
 import EventProvider from "../EventProvider.js";
-import UI5Element from "../UI5Element.js";
 import NavigationMode from "../types/NavigationMode.js";
 import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 
@@ -193,7 +192,7 @@ class ItemNavigation extends EventProvider {
 
 		const currentItem = items[this.currentIndex];
 
-		if (currentItem instanceof UI5Element) {
+		if (currentItem.isUI5Element) {
 			return currentItem.getFocusDomRef();
 		}
 

packages/base/src/delegate/ResizeHandler.js

@@ -1,4 +1,3 @@
-import UI5Element from "../UI5Element.js";
 import NativeResize from "./NativeResize.js";
 import CustomResize from "./CustomResize.js";
 
@@ -38,7 +37,7 @@ class ResizeHandler {
 	 * @memberof ResizeHandler
 	 */
 	static register(ref, callback) {
-		if (ref instanceof UI5Element) {
+		if (ref.isUI5Element) {
 			ref = ref.getDomRef();
 		}
 
@@ -53,7 +52,7 @@ class ResizeHandler {
 	 * @memberof ResizeHandler
 	 */
 	static deregister(ref, callback) {
-		if (ref instanceof UI5Element) {
+		if (ref.isUI5Element) {
 			ref = ref.getDomRef();
 		}
 

packages/base/src/util/FocusableElements.js

@@ -1,4 +1,3 @@
-import UI5Element from "../UI5Element.js";
 import isNodeHidden from "./isNodeHidden.js";
 import isNodeClickable from "./isNodeClickable.js";
 
@@ -32,7 +31,7 @@ const findFocusableElement = (container, forward) => {
 	while (child) {
 		const originalChild = child;
 
-		child = child instanceof UI5Element ? child.getFocusDomRef() : child;
+		child = child.isUI5Element ? child.getFocusDomRef() : child;
 		if (!child) {
 			return null;
 		}