fix(framework): rendering is no longer delayed (#1552)

Author: vladitasev

packages/base/src/CustomElementsRegistry.js

@@ -0,0 +1,23 @@
+const DefinitionsSet = new Set();
+
+const registerTag = tag => {
+	DefinitionsSet.add(tag);
+};
+
+const isTagRegistered = tag => {
+	return DefinitionsSet.has(tag);
+};
+
+const getAllRegisteredTags = () => {
+	const arr = [];
+	DefinitionsSet.forEach(tag => {
+		arr.push(tag);
+	});
+	return arr;
+};
+
+export {
+	registerTag,
+	isTagRegistered,
+	getAllRegisteredTags,
+};

packages/base/src/RenderScheduler.js

@@ -1,4 +1,5 @@
 import RenderQueue from "./RenderQueue.js";
+import { getAllRegisteredTags } from "./CustomElementsRegistry.js";
 
 const MAX_RERENDER_COUNT = 10;
 
@@ -118,33 +119,13 @@ class RenderScheduler {
 		return renderTaskPromise;
 	}
 
-	static getNotDefinedComponents() {
-		return Array.from(document.querySelectorAll("*")).filter(el => el.localName.startsWith("ui5-") && !el.isUI5Element);
-	}
-
-	/**
-	 * return a promise that will be resolved once all ui5 webcomponents on the page have their shadow root ready
-	 */
-	static async whenShadowDOMReady() {
-		const undefinedElements = this.getNotDefinedComponents();
-
-		const definedPromises = undefinedElements.map(
-		  el => customElements.whenDefined(el.localName)
-		);
-		const timeoutPromise = new Promise(resolve => setTimeout(resolve, 5000));
-
-		await Promise.race([Promise.all(definedPromises), timeoutPromise]);
-		const stillUndefined = this.getNotDefinedComponents();
-		if (stillUndefined.length) {
-			// eslint-disable-next-line
-			console.warn("undefined elements after 5 seconds are: " + [...stillUndefined].map(el => el.localName).join(" ; "));
-		}
-
-		return Promise.resolve();
+	static whenAllCustomElementsAreDefined() {
+		const definedPromises = getAllRegisteredTags().map(tag => customElements.whenDefined(tag));
+		return Promise.all(definedPromises);
 	}
 
 	static async whenFinished() {
-		await RenderScheduler.whenShadowDOMReady();
+		await RenderScheduler.whenAllCustomElementsAreDefined();
 		await RenderScheduler.whenDOMUpdated();
 	}
 

packages/base/src/UI5Element.js

@@ -3,6 +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 DOMObserver from "./compatibility/DOMObserver.js";
 import { skipOriginalEvent } from "./config/NoConflict.js";
 import getConstructableStyle from "./theming/getConstructableStyle.js";
@@ -18,7 +19,6 @@ const metadata = {
 	},
 };
 
-const DefinitionsSet = new Set();
 let autoId = 0;
 
 const elementTimeouts = new Map();
@@ -858,14 +858,14 @@ class UI5Element extends HTMLElement {
 
 		const tag = this.getMetadata().getTag();
 
-		const definedLocally = DefinitionsSet.has(tag);
+		const definedLocally = isTagRegistered(tag);
 		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
 		} else if (!definedGlobally) {
 			this._generateAccessors();
-			DefinitionsSet.add(tag);
+			registerTag(tag);
 			window.customElements.define(tag, this);
 		}
 		return this;