feat: enable TS in main, fiori (#6064)

The PR introduces the following changes:

**project  build**
 - rework the project build to always prepare `base` and then `main`, `fiori` (currently done in parallel) so that Typescript finds all dependencies when running on components from `main`, `fiori`.
**base** package
- several "base" types refactored to pure Enum whenever possible - see `ValueState`, `CalendarType`, etc.
- type `PopupState` removed as not used
- `UI5ElementMetadata` handles the pure Enum case (see UI5ElementMetadata#validateSingleProperty)
**main** package
- package enabled to use TS
- `Label`, `Title` and `Icon` are now in written Typescript
- All types are in TS
**fiori**  package
 - package enabled to use TS

docs/5-development/03-understanding-components-metadata.md

@@ -46,10 +46,6 @@ Properties of type `Object`, properties with `multiple` set to`true` and propert
 		"animationDuration": {
 			"type": Integer,
 		},
-		"width": {
-			"type": CSSSize,
-			"defaultValue": "",
-		},
 	},
 }
 ```
@@ -80,7 +76,6 @@ The `type` setting is required.
 | Type       | Class to Use                                       | Description                                                    |
 |------------|----------------------------------------------------|----------------------------------------------------------------|
 | Integer    | `@ui5/webcomponents-base/dist/types/Integer.js`    | Integer value                                                  |
-| CSSSize    | `@ui5/webcomponents-base/dist/types/CSSSize.js`    | Any valid CSS size definition (`px`, `rem`, etc.)              |
 | ValueState | `@ui5/webcomponents-base/dist/types/ValueState.js` | Enumeration with: `None`, `Error`, `Warning`, `Success` values |
 
 ## Slots

package.json

@@ -11,8 +11,8 @@
   "scripts": {
     "build": "npm-run-all --sequential build:prerequisitesWithLint build:bundles build:customElementsManifest",
     "build:bundles": "npm-run-all --parallel bundle:main bundle:fiori",
-    "build:prerequisitesWithLint": "npm-run-all --parallel build:prerequisites lint:main lint:fiori",
-    "build:prerequisites": "npm-run-all --parallel build:base build:localization build:theming build:icons build:icons-business-suite build:icons-tnt prepare:main prepare:fiori",
+    "build:prerequisitesWithLint": "npm-run-all build:base build:prerequisites prepare:main prepare:fiori lint:main lint:fiori",
+    "build:prerequisites": "npm-run-all --parallel build:localization build:theming build:icons build:icons-business-suite build:icons-tnt",
     "build:localization": "yarn workspace @ui5/webcomponents-localization build",
     "build:base": "yarn workspace @ui5/webcomponents-base build",
     "build:theming": "yarn workspace @ui5/webcomponents-theming build",
@@ -44,13 +44,13 @@
     "watch:fiori": "yarn workspace @ui5/webcomponents-fiori nps watch",
     "scopeWatch:main": "yarn workspace @ui5/webcomponents nps scope.watch",
     "scopeWatch:fiori": "yarn workspace @ui5/webcomponents-fiori nps scope.watch",
-    "start": "npm-run-all --sequential build:prerequisites copy-css start:all",
+    "start": "npm-run-all --sequential build:base build:prerequisites prepare:main prepare:fiori copy-css start:all",
     "startWithScope": "npm-run-all --sequential build:prerequisitesWithScope copy-css scopeStart:all",
-    "build:prerequisitesWithScope": "npm-run-all --parallel build:base build:localization build:theming build:icons build:icons-business-suite build:icons-tnt scopePrepare:main scopePrepare:fiori",
+    "build:prerequisitesWithScope": "npm-run-all build:base build:prerequisites scopePrepare:main scopePrepare:fiori",
     "start:all": "npm-run-all --parallel watch:base watch:localization watch:main watch:fiori dev",
     "dev": "node packages/tools/lib/dev-server/dev-server.js",
     "scopeStart:all": "npm-run-all --parallel watch:base watch:localization scopeWatch:main scopeWatch:fiori dev",
-    "start:playground": "yarn build:prerequisites && yarn build:main && yarn build:fiori && yarn copy-css && yarn workspace @ui5/webcomponents-playground start",
+    "start:playground": "yarn build:base build:prerequisites prepare:main prepare:fiori && yarn build:main && yarn build:fiori && yarn copy-css && yarn workspace @ui5/webcomponents-playground start",
     "test:base": "yarn workspace @ui5/webcomponents-base test",
     "test:main": "yarn workspace @ui5/webcomponents test",
     "test:main:suite-1": "yarn workspace @ui5/webcomponents test:suite-1",

packages/base/src/InitialConfiguration.ts

@@ -5,6 +5,7 @@ import validateThemeRoot from "./validateThemeRoot.js";
 import type OpenUI5Support from "./features/OpenUI5Support";
 import type { FormatSettings } from "./config/FormatSettings.js";
 import AnimationMode from "./types/AnimationMode.js";
+import CalendarType from "./types/CalendarType.js";
 
 let initialized = false;
 
@@ -15,7 +16,7 @@ type InitialConfig = {
 	themeRoot: string | undefined,
 	rtl: boolean | undefined,
 	language: string | undefined,
-	calendarType: string | undefined, // Refactor: change to Enum
+	calendarType: CalendarType | undefined,
 	noConflict: boolean,
 	formatSettings: FormatSettings,
 	fetchDefaultLanguage: boolean,

packages/base/src/UI5Element.ts

@@ -91,10 +91,6 @@ abstract class UI5Element extends HTMLElement {
 	_domRefReadyPromise: Promise<void> & { _deferredResolve?: PromiseResolve };
 	_doNotSyncAttributes: Set<string>;
 	_state: State;
-	onEnterDOM?: () => void;
-	onExitDOM?: () => void;
-	onBeforeRendering?: () => void;
-	onAfterRendering?: () => void;
 	_onComponentStateFinalized?: () => void;
 	_getRealDomRef?: () => HTMLElement;
 
@@ -175,9 +171,7 @@ abstract class UI5Element extends HTMLElement {
 		renderImmediately(this);
 		this._domRefReadyPromise._deferredResolve!();
 		this._fullyConnected = true;
-		if (typeof this.onEnterDOM === "function") {
-			this.onEnterDOM();
-		}
+		this.onEnterDOM();
 	}
 
 	/**
@@ -195,9 +189,7 @@ abstract class UI5Element extends HTMLElement {
 		}
 
 		if (this._fullyConnected) {
-			if (typeof this.onExitDOM === "function") {
-				this.onExitDOM();
-			}
+			this.onExitDOM();
 			this._fullyConnected = false;
 		}
 
@@ -208,6 +200,30 @@ abstract class UI5Element extends HTMLElement {
 		cancelRender(this);
 	}
 
+	/**
+	 * Called every time before the component renders.
+	 * @public
+	 */
+	onBeforeRendering() {}
+
+	/**
+	 * Called every time after the component renders.
+	 * @public
+	 */
+	onAfterRendering() {}
+
+	/**
+	 * Called on connectedCallback - added to the DOM.
+	 * @public
+	 */
+	onEnterDOM() {}
+
+	/**
+	 * Called on disconnectedCallback - removed from the DOM.
+	 * @public
+	 */
+	onExitDOM() {}
+
 	/**
 	 * @private
 	 */
@@ -612,9 +628,7 @@ abstract class UI5Element extends HTMLElement {
 		// suppress invalidation to prevent state changes scheduling another rendering
 		this._suppressInvalidation = true;
 
-		if (typeof this.onBeforeRendering === "function") {
-			this.onBeforeRendering();
-		}
+		this.onBeforeRendering();
 
 		// Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
 		if (this._onComponentStateFinalized) {
@@ -661,9 +675,7 @@ abstract class UI5Element extends HTMLElement {
 		}
 
 		// Call the onAfterRendering hook
-		if (typeof this.onAfterRendering === "function") {
-			this.onAfterRendering();
-		}
+		this.onAfterRendering();
 	}
 
 	/**
@@ -757,7 +769,7 @@ abstract class UI5Element extends HTMLElement {
 	 * @param bubbles - true, if the event bubbles
 	 * @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise
 	 */
-	fireEvent<T>(name: string, data: T, cancelable = false, bubbles = true) {
+	fireEvent<T>(name: string, data?: T, cancelable = false, bubbles = true) {
 		const eventResult = this._fireEvent(name, data, cancelable, bubbles);
 		const camelCaseEventName = kebabToCamelCase(name);
 
@@ -768,7 +780,7 @@ abstract class UI5Element extends HTMLElement {
 		return eventResult;
 	}
 
-	_fireEvent<T>(name: string, data: T, cancelable = false, bubbles = true) {
+	_fireEvent<T>(name: string, data?: T, cancelable = false, bubbles = true) {
 		const noConflictEvent = new CustomEvent<T>(`ui5-${name}`, {
 			detail: data,
 			composed: false,

packages/base/src/UI5ElementMetadata.ts

@@ -32,7 +32,7 @@ type Metadata = {
 	managedSlots?: boolean,
 	properties?: Record<string, Property>,
 	slots?: Record<string, Slot>,
-	events?: Array<object>,
+	events?: Record<string, object>,
 	fastNavigation?: boolean,
 	themeAware?: boolean,
 	languageAware?: boolean,
@@ -327,15 +327,20 @@ const validateSingleProperty = (value: PropertyValue, propData: Property) => {
 	if (propertyType === Boolean) {
 		return typeof value === "boolean" ? value : false;
 	}
+
 	if (propertyType === String) {
 		return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
 	}
+
 	if (propertyType === Object) {
 		return typeof value === "object" ? value : propData.defaultValue;
 	}
+
 	if ((propertyType as typeof DataType).isDataTypeClass) {
 		return (propertyType as typeof DataType).isValid(value) ? value : propData.defaultValue;
 	}
+
+	return value as string in propertyType ? value : propData.defaultValue;
 };
 
 const validateSingleSlot = (value: Node, slotData: Slot) => {

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

@@ -1,6 +1,8 @@
 import getSharedResource from "../getSharedResource.js";
 import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
 import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
+import { I18nText } from "../i18nBundle.js";
+import { TemplateFunction } from "../renderer/executeTemplate.js";
 
 type IconLoader = (collectionName: string) => Promise<CollectionData>;
 
@@ -12,7 +14,7 @@ type CollectionData = {
 		path: string,
 		paths: Array<string>,
 		ltr: boolean,
-		acc: object
+		acc: I18nText,
 	}>,
 };
 
@@ -21,8 +23,8 @@ type IconData = {
 	packageName: string,
 	pathData: string | Array<string>,
 	ltr: boolean,
-	accData: object,
-	customTemplate?: string,
+	accData: I18nText,
+	customTemplate?: TemplateFunction,
 	viewBox?: string,
 };
 
@@ -153,3 +155,7 @@ export {
 	registerIcon,
 	_getRegisteredNames,
 };
+
+export type {
+	IconData,
+};

packages/base/src/config/CalendarType.ts

@@ -1,23 +1,23 @@
-import CalendarType, { CalendarTypes } from "../types/CalendarType.js";
+import CalendarType from "../types/CalendarType.js";
 import { getCalendarType as getConfiguredCalendarType } from "../InitialConfiguration.js";
 
-let calendarType: CalendarTypes;
+let calendarType: CalendarType | undefined;
 
 /**
  * Returns the configured or default calendar type.
- * @returns { String } the effective calendar type
  * @public
+ * @returns { CalendarType } the effective calendar type
  */
-const getCalendarType = (): CalendarTypes => {
+const getCalendarType = (): CalendarType => {
 	if (calendarType === undefined) {
-		calendarType = getConfiguredCalendarType() as CalendarTypes;
+		calendarType = getConfiguredCalendarType();
 	}
 
-	if (CalendarType.isValid(calendarType)) {
+	if (calendarType && calendarType in CalendarType) {
 		return calendarType;
 	}
 
-	return CalendarTypes.Gregorian;
+	return CalendarType.Gregorian;
 };
 
 export { getCalendarType }; // eslint-disable-line

packages/base/src/i18nBundle.ts

@@ -93,3 +93,7 @@ export {
 	getI18nBundle,
 	registerCustomI18nBundleGetter,
 };
+
+export type {
+	I18nText,
+};

packages/base/src/types/AnimationMode.ts

@@ -12,22 +12,22 @@ enum AnimationMode {
 	 * @public
 	 * @type {Full}
 	 */
-    Full = "full",
+	Full = "full",
 	/**
 	 * @public
 	 * @type {Basic}
 	 */
-    Basic = "basic",
+	Basic = "basic",
 	/**
 	 * @public
 	 * @type {Minimal}
 	 */
-    Minimal = "minimal",
+	Minimal = "minimal",
 	/**
 	 * @public
 	 * @type {None}
 	 */
-    None = "none",
+	None = "none",
 }
 
 export default AnimationMode;

packages/base/src/types/CalendarType.ts

@@ -1,11 +1,13 @@
-import DataType from "./DataType.js";
-
 /**
  * Different calendar types.
- * @lends sap.ui.webcomponents.base.types.CalendarType.prototype
+ *
+ * @class
+ * @enum {string}
  * @public
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CalendarType
  */
-enum CalendarTypes {
+enum CalendarType {
 	/**
 	 * @public
 	 * @type {Gregorian}
@@ -33,24 +35,4 @@ enum CalendarTypes {
 	Persian = "Persian",
 }
 
-/**
- * @class
- * Different calendar types.
- *
- * @extends sap.ui.webcomponents.base.types.DataType
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.CalendarType
- * @public
- * @enum {string}
- */
-class CalendarType extends DataType {
-	static isValid(value: CalendarTypes) {
-		return !!CalendarTypes[value];
-	}
-}
-
-CalendarType.generateTypeAccessors(CalendarTypes);
-
 export default CalendarType;
-export { CalendarTypes };