feat: migrate illustrated-message component to TS, small refactor (#6195

)

With this change:
- Migrated the Illustrated-message component to TypeScript.
Added slightly different logic in the onBeforeRendering() method - for validating if a given illustration name is correct or not.
- If incorrect illustration name is provided - a warning is now given in the console, which let the developer know that there may be either a typo or wrong illustration name, and as same as before the default one ( "BeforeSearch" ) is loaded and shown.
- Error messages for missing modules are a little bit more specific now aswell;

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

@@ -1,13 +1,14 @@
 import getSharedResource from "../getSharedResource.js";
+import { I18nText } from "../i18nBundle.js";
 
 type IllustrationLoader = (illustrationName: string) => Promise<IllustrationData>;
 
 type IllustrationProperties = {
 	dialogSvg: string,
 	sceneSvg: string,
 	spotSvg: string,
-	title: string,
-	subtitle: string,
+	title: I18nText,
+	subtitle: I18nText,
 };
 
 type IllustrationData = IllustrationProperties & {
@@ -17,7 +18,6 @@ type IllustrationData = IllustrationProperties & {
 const loaders = new Map<string, IllustrationLoader>();
 const registry = getSharedResource<Map<string, IllustrationProperties>>("SVGIllustration.registry", new Map());
 const illustrationPromises = getSharedResource<Map<string, Promise<IllustrationData>>>("SVGIllustration.promises", new Map());
-const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
 
 const registerIllustration = (name: string, data: IllustrationData) => {
 	registry.set(`${data.set}/${name}`, {
@@ -36,8 +36,10 @@ const registerIllustrationLoader = (illustrationName: string, loader: Illustrati
 const _loadIllustrationOnce = async (illustrationName: string) => {
 	if (!illustrationPromises.has(illustrationName)) {
 		if (!loaders.has(illustrationName)) {
-			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module.`);
+			const illustrationPath = illustrationName.startsWith("Tnt") ? `tnt/${illustrationName.replace(/^Tnt/, "")}` : illustrationName;
+			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js" module. Or you can import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module that will make all illustrations available, but fetch only the ones used.`);
 		}
+
 		const loadIllustrations = loaders.get(illustrationName)!;
 		illustrationPromises.set(illustrationName, loadIllustrations(illustrationName));
 	}
@@ -62,7 +64,7 @@ const getIllustrationData = async (illustrationName: string) => {
 		set = "tnt";
 		illustrationName = illustrationName.replace(/^Tnt/, "");
 	}
-	return registry.get(`${set}/${illustrationName}`) || ILLUSTRATION_NOT_FOUND;
+	return registry.get(`${set}/${illustrationName}`);
 };
 
 export {