fix(ui5-tooling-modules): inherited properties are not accidentally overwritten by subclass anymore

packages/ui5-tooling-modules/lib/utils/WebComponentRegistry.js

@@ -6,6 +6,10 @@ const camelize = (str) => {
 	return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 };
 
+// the class name of the base class of all control wrappers
+// corresponds to the "sap.ui.core.webc.WebComponent" class at runtime.
+const UI5_ELEMENT_CLASS_NAME = "UI5Element";
+
 const _registry = {};
 
 const _classAliases = {};
@@ -44,6 +48,8 @@ class RegistryEntry {
 			this.#connectSuperclass(classDef);
 
 			// [3] create UI5 metadata for each classed based on the parsed custom elements metadata
+			//     Note: The order is important! We need to connect the superclass and create its metadata first.
+			//           We need a fully constructed parent chain later for ensuring UI5 defaults (refer to #ensureDefaults)
 			this.#createUI5Metadata(classDef);
 		});
 
@@ -107,7 +113,7 @@ class RegistryEntry {
 					`The class '${this.namespace}/${classDef.name}' has an unknown superclass '${classDef.superclass.package}/${superclassName}' using default '@ui5/webcomponents-base/UI5Element'!`,
 				);
 				const refPackage = WebComponentRegistry.getPackage("@ui5/webcomponents-base");
-				let superclassRef = (refPackage || this).classes["UI5Element"];
+				let superclassRef = (refPackage || this).classes[UI5_ELEMENT_CLASS_NAME];
 				classDef.superclass = superclassRef;
 			} else {
 				this.#connectSuperclass(superclassRef);
@@ -420,24 +426,50 @@ class RegistryEntry {
 		}
 	}
 
-	#ensureDefaults(ui5metadata) {
-		// a text property must exist and be mapped to "textContent"
-		if (!ui5metadata.properties["text"]) {
+	/**
+	 * Validates if the given property name is defined somewhere in the parent chain
+	 * @param {string} className the starting class for which we will traverse the parent chain
+	 * @param {string} propName the property to validate
+	 */
+	#ui5PropertyExistsInParentChain(classDef, propName) {
+		// we need to stop the recursion on the very top level
+		// The runtime base class does NOT provide any inherited properties!
+		if (classDef.name === UI5_ELEMENT_CLASS_NAME) {
+			return false;
+		}
+		// check self
+		const hasProp = !!classDef?._ui5metadata?.properties?.[propName];
+		if (hasProp) {
+			return true;
+		} else {
+			// if we didn't find the property on this class, we go one step higher in the chain
+			if (classDef?.superclass) {
+				return this.#ui5PropertyExistsInParentChain(classDef.superclass, propName);
+			} else {
+				// finally nothing found
+				return false;
+			}
+		}
+	}
+
+	#ensureDefaults(classDef, ui5metadata) {
+		if (!this.#ui5PropertyExistsInParentChain(classDef, "text")) {
+			// a text property must exist and be mapped to "textContent"
 			ui5metadata.properties["text"] = {
 				type: "string",
 				mapping: "textContent",
 			};
 		}
 
 		// cssProperties: [ "width", "height", "display" ]
-		if (!ui5metadata.properties["width"]) {
+		if (!this.#ui5PropertyExistsInParentChain(classDef, "width")) {
 			ui5metadata.properties["width"] = {
 				type: "sap.ui.core.CSSSize",
 				mapping: "style",
 			};
 		}
 
-		if (!ui5metadata.properties["height"]) {
+		if (!this.#ui5PropertyExistsInParentChain(classDef, "height")) {
 			ui5metadata.properties["height"] = {
 				type: "sap.ui.core.CSSSize",
 				mapping: "style",
@@ -551,7 +583,7 @@ class RegistryEntry {
 
 		this.#processUI5Interfaces(classDef, ui5metadata);
 
-		this.#ensureDefaults(ui5metadata);
+		this.#ensureDefaults(classDef, ui5metadata);
 
 		this.#patchUI5Specifics(classDef, ui5metadata);
 	}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/NotificationListGroupItem.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-li-notification-group","interfaces":[],"properties":{"collapsed":{"type":"boolean","mapping":"property","defaultValue":false},"growing":{"type":"@ui5/webcomponents.NotificationListGrowingMode","mapping":"property","defaultValue":"None"},"titleText":{"type":"string","mapping":"property"},"read":{"type":"boolean","mapping":"property","defaultValue":false},"loading":{"type":"boolean","mapping":"property","defaultValue":false},"loadingDelay":{"type":"float","mapping":"property","defaultValue":1000},"text":{"type":"string","mapping":"textContent"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{"items":{"type":"@ui5/webcomponents-fiori.NotificationListItem","multiple":true}},"associations":{},"events":{"toggle":{},"loadMore":{}},"getters":[],"methods":[],"defaultAggregation":"items"}
+{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-li-notification-group","interfaces":[],"properties":{"collapsed":{"type":"boolean","mapping":"property","defaultValue":false},"growing":{"type":"@ui5/webcomponents.NotificationListGrowingMode","mapping":"property","defaultValue":"None"},"titleText":{"type":"string","mapping":"property"},"read":{"type":"boolean","mapping":"property","defaultValue":false},"loading":{"type":"boolean","mapping":"property","defaultValue":false},"loadingDelay":{"type":"float","mapping":"property","defaultValue":1000}},"aggregations":{"items":{"type":"@ui5/webcomponents-fiori.NotificationListItem","multiple":true}},"associations":{},"events":{"toggle":{},"loadMore":{}},"getters":[],"methods":[],"defaultAggregation":"items"}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/NotificationListItem.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-li-notification","interfaces":[],"properties":{"wrappingType":{"type":"@ui5/webcomponents.WrappingType","mapping":"property","defaultValue":"None"},"state":{"type":"@ui5/webcomponents-base.ValueState","mapping":"property","defaultValue":"None"},"showClose":{"type":"boolean","mapping":"property","defaultValue":false},"importance":{"type":"@ui5/webcomponents-fiori.NotificationListItemImportance","mapping":"property","defaultValue":"Standard"},"titleText":{"type":"string","mapping":"property"},"read":{"type":"boolean","mapping":"property","defaultValue":false},"loading":{"type":"boolean","mapping":"property","defaultValue":false},"loadingDelay":{"type":"float","mapping":"property","defaultValue":1000},"text":{"type":"string","mapping":"textContent"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{"avatar":{"type":"sap.ui.core.Control","multiple":true,"slot":"avatar"},"menu":{"type":"sap.ui.core.Control","multiple":true,"slot":"menu"},"footnotes":{"type":"sap.ui.core.Control","multiple":true,"slot":"footnotes"},"description":{"type":"sap.ui.core.Control","multiple":true}},"associations":{},"events":{"close":{}},"getters":[],"methods":[],"defaultAggregation":"description"}
+{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-li-notification","interfaces":[],"properties":{"wrappingType":{"type":"@ui5/webcomponents.WrappingType","mapping":"property","defaultValue":"None"},"state":{"type":"@ui5/webcomponents-base.ValueState","mapping":"property","defaultValue":"None"},"showClose":{"type":"boolean","mapping":"property","defaultValue":false},"importance":{"type":"@ui5/webcomponents-fiori.NotificationListItemImportance","mapping":"property","defaultValue":"Standard"},"titleText":{"type":"string","mapping":"property"},"read":{"type":"boolean","mapping":"property","defaultValue":false},"loading":{"type":"boolean","mapping":"property","defaultValue":false},"loadingDelay":{"type":"float","mapping":"property","defaultValue":1000}},"aggregations":{"avatar":{"type":"sap.ui.core.Control","multiple":true,"slot":"avatar"},"menu":{"type":"sap.ui.core.Control","multiple":true,"slot":"menu"},"footnotes":{"type":"sap.ui.core.Control","multiple":true,"slot":"footnotes"},"description":{"type":"sap.ui.core.Control","multiple":true}},"associations":{},"events":{"close":{}},"getters":[],"methods":[],"defaultAggregation":"description"}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/NotificationListItemBase.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","interfaces":[],"properties":{"titleText":{"type":"string","mapping":"property"},"read":{"type":"boolean","mapping":"property","defaultValue":false},"loading":{"type":"boolean","mapping":"property","defaultValue":false},"loadingDelay":{"type":"float","mapping":"property","defaultValue":1000},"text":{"type":"string","mapping":"textContent"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{},"associations":{},"events":{},"getters":[],"methods":[]}
+{"namespace":"@ui5/webcomponents-fiori","interfaces":[],"properties":{"titleText":{"type":"string","mapping":"property"},"read":{"type":"boolean","mapping":"property","defaultValue":false},"loading":{"type":"boolean","mapping":"property","defaultValue":false},"loadingDelay":{"type":"float","mapping":"property","defaultValue":1000}},"aggregations":{},"associations":{},"events":{},"getters":[],"methods":[]}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/SideNavigationSelectableItemBase.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","interfaces":[],"properties":{"icon":{"type":"string","mapping":"property"},"selected":{"type":"boolean","mapping":"property","defaultValue":false},"href":{"type":"string","mapping":"property"},"target":{"type":"string","mapping":"property"},"text":{"type":"string","mapping":"property"},"enabled":{"type":"boolean","defaultValue":"true","mapping":{"type":"property","to":"disabled","formatter":"_mapEnabled"}},"tooltip":{"type":"string","mapping":"property"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{},"associations":{},"events":{"click":{}},"getters":[],"methods":[]}
+{"namespace":"@ui5/webcomponents-fiori","interfaces":[],"properties":{"icon":{"type":"string","mapping":"property"},"selected":{"type":"boolean","mapping":"property","defaultValue":false},"href":{"type":"string","mapping":"property"},"target":{"type":"string","mapping":"property"},"text":{"type":"string","mapping":"property"},"enabled":{"type":"boolean","defaultValue":"true","mapping":{"type":"property","to":"disabled","formatter":"_mapEnabled"}},"tooltip":{"type":"string","mapping":"property"}},"aggregations":{},"associations":{},"events":{"click":{}},"getters":[],"methods":[]}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/SideNavigationSubItem.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-side-navigation-sub-item","interfaces":[],"properties":{"icon":{"type":"string","mapping":"property"},"selected":{"type":"boolean","mapping":"property","defaultValue":false},"href":{"type":"string","mapping":"property"},"target":{"type":"string","mapping":"property"},"text":{"type":"string","mapping":"property"},"enabled":{"type":"boolean","defaultValue":"true","mapping":{"type":"property","to":"disabled","formatter":"_mapEnabled"}},"tooltip":{"type":"string","mapping":"property"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{},"associations":{},"events":{"click":{}},"getters":[],"methods":[]}
+{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-side-navigation-sub-item","interfaces":[],"properties":{"icon":{"type":"string","mapping":"property"},"selected":{"type":"boolean","mapping":"property","defaultValue":false},"href":{"type":"string","mapping":"property"},"target":{"type":"string","mapping":"property"},"text":{"type":"string","mapping":"property"},"enabled":{"type":"boolean","defaultValue":"true","mapping":{"type":"property","to":"disabled","formatter":"_mapEnabled"}},"tooltip":{"type":"string","mapping":"property"}},"aggregations":{},"associations":{},"events":{"click":{}},"getters":[],"methods":[]}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/UploadCollectionItem.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-upload-collection-item","interfaces":[],"properties":{"file":{"type":"file","mapping":"property","defaultValue":"null"},"fileName":{"type":"string","mapping":"property","defaultValue":""},"fileNameClickable":{"type":"boolean","mapping":"property","defaultValue":false},"disableDeleteButton":{"type":"boolean","mapping":"property","defaultValue":false},"hideDeleteButton":{"type":"boolean","mapping":"property","defaultValue":false},"hideRetryButton":{"type":"boolean","mapping":"property","defaultValue":false},"hideTerminateButton":{"type":"boolean","mapping":"property","defaultValue":false},"progress":{"type":"float","mapping":"property","defaultValue":0},"uploadState":{"type":"@ui5/webcomponents-fiori.UploadState","mapping":"property","defaultValue":"Ready"},"text":{"type":"string","mapping":"textContent"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{"content":{"type":"sap.ui.core.Control","multiple":true},"thumbnail":{"type":"sap.ui.core.Control","multiple":true,"slot":"thumbnail"}},"associations":{},"events":{"fileNameClick":{},"rename":{},"terminate":{},"retry":{}},"getters":[],"methods":[],"defaultAggregation":"content"}
+{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-upload-collection-item","interfaces":[],"properties":{"file":{"type":"file","mapping":"property","defaultValue":"null"},"fileName":{"type":"string","mapping":"property","defaultValue":""},"fileNameClickable":{"type":"boolean","mapping":"property","defaultValue":false},"disableDeleteButton":{"type":"boolean","mapping":"property","defaultValue":false},"hideDeleteButton":{"type":"boolean","mapping":"property","defaultValue":false},"hideRetryButton":{"type":"boolean","mapping":"property","defaultValue":false},"hideTerminateButton":{"type":"boolean","mapping":"property","defaultValue":false},"progress":{"type":"float","mapping":"property","defaultValue":0},"uploadState":{"type":"@ui5/webcomponents-fiori.UploadState","mapping":"property","defaultValue":"Ready"}},"aggregations":{"content":{"type":"sap.ui.core.Control","multiple":true},"thumbnail":{"type":"sap.ui.core.Control","multiple":true,"slot":"thumbnail"}},"associations":{},"events":{"fileNameClick":{},"rename":{},"terminate":{},"retry":{}},"getters":[],"methods":[],"defaultAggregation":"content"}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents-fiori/classes/UserMenuItem.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-user-menu-item","interfaces":[],"properties":{"text":{"type":"string","mapping":"textContent"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"}},"aggregations":{"items":{"type":"@ui5/webcomponents-fiori.UserMenuItem","multiple":true}},"associations":{},"events":{},"getters":[],"methods":[],"defaultAggregation":"items"}
+{"namespace":"@ui5/webcomponents-fiori","tag":"ui5-user-menu-item","interfaces":[],"properties":{},"aggregations":{"items":{"type":"@ui5/webcomponents-fiori.UserMenuItem","multiple":true}},"associations":{},"events":{},"getters":[],"methods":[],"defaultAggregation":"items"}

packages/ui5-tooling-modules/test/__fixtures__/@ui5/webcomponents/classes/DatePicker.json

@@ -1 +1 @@
-{"namespace":"@ui5/webcomponents","tag":"ui5-date-picker","interfaces":["sap.ui.core.IFormContent"],"properties":{"value":{"type":"string","mapping":"property","defaultValue":""},"valueState":{"type":"sap.ui.core.ValueState","mapping":{"formatter":"_mapValueState","parser":"_parseValueState"},"defaultValue":"None"},"required":{"type":"boolean","mapping":"property","defaultValue":false},"enabled":{"type":"boolean","defaultValue":"true","mapping":{"type":"property","to":"disabled","formatter":"_mapEnabled"}},"readonly":{"type":"boolean","mapping":"property","defaultValue":false},"placeholder":{"type":"string","mapping":"property"},"name":{"type":"string","mapping":"property"},"hideWeekNumbers":{"type":"boolean","mapping":"property","defaultValue":false},"open":{"type":"boolean","mapping":"property","defaultValue":false},"accessibleName":{"type":"string","mapping":"property"},"primaryCalendarType":{"type":"@ui5/webcomponents-base.CalendarType","mapping":"property"},"secondaryCalendarType":{"type":"@ui5/webcomponents-base.CalendarType","mapping":"property"},"formatPattern":{"type":"string","mapping":"property"},"minDate":{"type":"string","mapping":"property","defaultValue":""},"maxDate":{"type":"string","mapping":"property","defaultValue":""},"calendarWeekNumbering":{"type":"@ui5/webcomponents.CalendarWeekNumbering","mapping":"property","defaultValue":"Default"},"text":{"type":"string","mapping":"textContent"},"width":{"type":"sap.ui.core.CSSSize","mapping":"style"},"height":{"type":"sap.ui.core.CSSSize","mapping":"style"},"valueStateText":{"name":"valueStateText","type":"string","defaultValue":"","mapping":{"type":"slot","slotName":"valueStateMessage","to":"div"}}},"aggregations":{},"associations":{"ariaLabelledBy":{"type":"sap.ui.core.Control","multiple":true,"mapping":{"type":"property","to":"accessibleNameRef","formatter":"_getAriaLabelledByForRendering"}}},"events":{"change":{},"input":{},"valueStateChange":{},"open":{},"close":{}},"getters":["dateValue"],"methods":["isValid","isInValidRange","formatValue"]}
+{"namespace":"@ui5/webcomponents","tag":"ui5-date-picker","interfaces":["sap.ui.core.IFormContent"],"properties":{"value":{"type":"string","mapping":"property","defaultValue":""},"valueState":{"type":"sap.ui.core.ValueState","mapping":{"formatter":"_mapValueState","parser":"_parseValueState"},"defaultValue":"None"},"required":{"type":"boolean","mapping":"property","defaultValue":false},"enabled":{"type":"boolean","defaultValue":"true","mapping":{"type":"property","to":"disabled","formatter":"_mapEnabled"}},"readonly":{"type":"boolean","mapping":"property","defaultValue":false},"placeholder":{"type":"string","mapping":"property"},"name":{"type":"string","mapping":"property"},"hideWeekNumbers":{"type":"boolean","mapping":"property","defaultValue":false},"open":{"type":"boolean","mapping":"property","defaultValue":false},"accessibleName":{"type":"string","mapping":"property"},"primaryCalendarType":{"type":"@ui5/webcomponents-base.CalendarType","mapping":"property"},"secondaryCalendarType":{"type":"@ui5/webcomponents-base.CalendarType","mapping":"property"},"formatPattern":{"type":"string","mapping":"property"},"minDate":{"type":"string","mapping":"property","defaultValue":""},"maxDate":{"type":"string","mapping":"property","defaultValue":""},"calendarWeekNumbering":{"type":"@ui5/webcomponents.CalendarWeekNumbering","mapping":"property","defaultValue":"Default"},"valueStateText":{"name":"valueStateText","type":"string","defaultValue":"","mapping":{"type":"slot","slotName":"valueStateMessage","to":"div"}}},"aggregations":{},"associations":{"ariaLabelledBy":{"type":"sap.ui.core.Control","multiple":true,"mapping":{"type":"property","to":"accessibleNameRef","formatter":"_getAriaLabelledByForRendering"}}},"events":{"change":{},"input":{},"valueStateChange":{},"open":{},"close":{}},"getters":["dateValue"],"methods":["isValid","isInValidRange","formatValue"]}