fix(framework): apply theme after every theme props registration (#6718)

There are use-cases when the framework boots, but the theme has not been registered and applied.
And, currently the framework won't apply a theme after boot finishes.
With this PR the framework will apply theme properties always when theme registration occurs.
when the theme properties are registered before boot, an event will be fired, notifying for the theme registration, but as the boot did not finish, the event will be disregarded and the theme will be applied as usual.
when the theme properties are being registered after boot, an event will be fired, notifying for the theme registration and the registered styles will be applied.

Fixes: #6666

Author: ilhan007

packages/base/src/Boot.ts

@@ -9,6 +9,7 @@ import { getFeature } from "./FeaturesRegistry.js";
 import type OpenUI5Support from "./features/OpenUI5Support.js";
 import type F6Navigation from "./features/F6Navigation.js";
 import { PromiseResolve } from "./types.js";
+import { attachThemeRegistered } from "./theming/ThemeRegistered.js";
 
 let booted = false;
 let bootPromise: Promise<void>;
@@ -40,6 +41,8 @@ const boot = async (): Promise<void> => {
 			return;
 		}
 
+		attachThemeRegistered(onThemeRegistered);
+
 		registerCurrentRuntime();
 
 		const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
@@ -70,6 +73,19 @@ const boot = async (): Promise<void> => {
 	return bootPromise;
 };
 
+/**
+ * Callback, executed after theme properties registration
+ * to apply the newly registered theme.
+ * @private
+ * @param { string } theme
+ */
+const onThemeRegistered = (theme: string) => {
+	const currentTheme = getTheme();
+	if (booted && theme === currentTheme) {
+		applyTheme(currentTheme);
+	}
+};
+
 export {
 	boot,
 	attachBoot,

packages/base/src/asset-registries/Themes.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { StyleData, StyleDataCSP } from "../types.js";
+import { fireThemeRegistered } from "../theming/ThemeRegistered.js";
 
 type ThemeData = {_: StyleDataCSP } | StyleDataCSP | string;
 type ThemeLoader = (themeName: string) => Promise<ThemeData>;
@@ -13,6 +14,7 @@ const registerThemePropertiesLoader = (packageName: string, themeName: string, l
 	loaders.set(`${packageName}/${themeName}`, loader);
 	registeredPackages.add(packageName);
 	registeredThemes.add(themeName);
+	fireThemeRegistered(themeName);
 };
 
 const getThemeProperties = async (packageName: string, themeName: string) => {

packages/base/src/theming/ThemeRegistered.ts

@@ -0,0 +1,19 @@
+import EventProvider from "../EventProvider.js";
+
+type ThemeRegisteredCallback = (theme: string) => void;
+
+const eventProvider = new EventProvider<string, void>();
+const THEME_REGISTERED = "themeRegistered";
+
+const attachThemeRegistered = (listener: ThemeRegisteredCallback) => {
+	eventProvider.attachEvent(THEME_REGISTERED, listener);
+};
+
+const fireThemeRegistered = (theme: string) => {
+	return eventProvider.fireEvent(THEME_REGISTERED, theme);
+};
+
+export {
+	attachThemeRegistered,
+	fireThemeRegistered,
+};

packages/base/test/assets/bundle.light.js

@@ -1,37 +1,25 @@
 import { attachBoot } from "../../dist/Boot.js";
 import { boot } from "../../dist/Boot.js";
+import { registerThemePropertiesLoader } from "../../dist/AssetRegistry.js";
 
-// Call attachBoot early
+// attachBoot (no longer triggers "boot")
 attachBoot(() => {
     console.log("Listener1: after framework booted!")
 })
 
-attachBoot(() => {
-    console.log("Listener2: after framework booted!")
-})
-
-attachBoot(() => {
-    console.log("Listener3: after framework booted!")
-})
-import { registerThemePropertiesLoader } from "../../dist/AssetRegistry.js";
+// boot the framework
+boot();
 
 const testAssets = {
-    registerThemePropsAndBoot: () => {
+    // registerThemePropertiesLoader after boot (and after attachBoot ), will call applyTheme
+    registerThemeProps: async () => {
         registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_fiori_3", () => {
             return {
-                content: `:root{ --var1: red; }`,
+                content: `:root{ --customCol: #fff; --customBg: #000; }`,
                 packageName: "",
                 fileName: "",
             };
         });
-        // call "boot" multiple times as if multiple web components start upgrading
-        console.log("Booting...");
-        boot();
-        boot();
-        boot();
-        boot();
-        boot();
-        boot();
     },
 }
 window["sap-ui-webcomponents-bundle"] = testAssets;

packages/base/test/assets/styles/Boot.css

@@ -1,3 +1,4 @@
 .content {
-    color: var(--var1);
+    color: var(--customCol);
+    background-color: var(--customBg);
 }

packages/base/test/pages/Boot.html

@@ -9,6 +9,6 @@
 </head>
 <body>
 
-    <div class="content">When styles are applied, this text shoul be red.</div>
+    <div class="content">Register theme properties to style this text - window['sap-ui-webcomponents-bundle'].registerThemeProps()</div>
 </body>
 </html>

packages/base/test/specs/Boot.spec.js

@@ -5,16 +5,16 @@ describe("Framework boot", async () => {
 		await browser.url("test/pages/Boot.html");
 	});
 
-	it("Tests theme loading, when attachBoot is called before theme is registered", async () => {
+	it("Tests theme loading, when registered after 'attachBoot' and 'boot'", async () => {
 		await browser.executeAsync(done => {
-			window['sap-ui-webcomponents-bundle'].registerThemePropsAndBoot();
+			window['sap-ui-webcomponents-bundle'].registerThemeProps();
 			done();
 		});
 
 		const styleElement = await browser.executeAsync(done => {
 			return done(document.querySelector("head>style[data-ui5-theme-properties]"));
 		});
 
-		assert.ok(styleElement, "style[data-ui5-theme-properties] tag is successfully created");
+		assert.ok(styleElement, "style[data-ui5-theme-properties] tag is successfully created and theme applied.");
 	});
 });