fix(ui5-tooling-modules): named aggregations can also be marked as de…

…fault aggregation (#1096)

* fix(ui5-tooling-modules): named aggregations can also be marked as default aggregation

* fix(ui5-tooling-modules): use correct named aggregation in DynamicPage view

* fix(ui5-tooling-modules): use type references for complex type parsing

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

@@ -127,6 +127,7 @@ class RegistryEntry {
 	}
 
 	#extractUi5Type(typeInfo) {
+		// [Simple type]:
 		// some types are given as a union type, e.g. "string | undefined"
 		// TODO: are there combinations of arrays and other types/undefined? e.g. "Array<number> | undefined"
 		//       Does that make sense? Probably should be an empty array instead of undefined?
@@ -143,18 +144,24 @@ class RegistryEntry {
 				};
 			}
 
-			// UI5 normally accepts only one type for a property, except if "any" is used
-			// in this case we just use the first one as the primary type
+			// UI5 only accepts one type for a property/aggregation, in this case we just use the first one as the primary type.
 			parsedType = types[0];
 		}
 
 		// check if we have an array type
 		const arrayTypeMatch = parsedType?.match(/Array<(.*)>/i);
 		const multiple = !!arrayTypeMatch;
-		parsedType = arrayTypeMatch?.[1] || parsedType;
 
-		// complex types have a reference to other things, e.g. enums
-		if (typeInfo?.references) {
+		// [Complex types]:
+		// we have a reference to other things -> enums, interfaces, classes
+		if (typeInfo?.references?.length > 0) {
+			// Since the UI5 runtime only allows for 1 single type per property/aggregation, we take the first reference
+			parsedType = typeInfo.references[0].name;
+
+			// TODO: Investigate if this fallback can be omitted, I suspect it is not needed.
+			//       The string based type "arrayTypeMatch[1]" might contain TypeScript generics, which are not known (and irrelevant) to UI5 -> e.g. P13nPopup
+			parsedType ??= arrayTypeMatch?.[1] || parsedType;
+
 			// case 2: enum type -> easy
 			if (this.enums[parsedType]) {
 				return {
@@ -164,13 +171,10 @@ class RegistryEntry {
 				};
 			}
 
-			// case 3: interface type -> theoretically this should this be a 0..n aggregation... but really?
+			// case 3: interface or class type
 			const interfaceOrClassType = this.#checkForInterfaceOrClassType(parsedType);
 
 			if (interfaceOrClassType) {
-				// TODO: How should this be wired for properties?
-				//       Aggregations can have an interface/class type, but properties do not.
-				//       A property of this typing could be considered a calculated field...?
 				return {
 					isInterfaceOrClassType: true,
 					origType: parsedType,
@@ -225,7 +229,7 @@ class RegistryEntry {
 	#processMembers(classDef, ui5metadata, propDef) {
 		// field -> property
 		if (propDef.kind === "field") {
-			let ui5TypeInfo = this.#extractUi5Type(propDef.type, propDef.name);
+			let ui5TypeInfo = this.#extractUi5Type(propDef.type);
 
 			// [ Accessibility ]
 			//     1. ACC attributes have webc internal typing and will be defaulted to "object" ob UI5 side.
@@ -316,11 +320,16 @@ class RegistryEntry {
 			}
 		}
 
-		// "default" slot becomes default aggregation
+		// The "default" slot will most likely be transformed into the "content" in UI5
 		if (aggregationName === "default") {
-			// we call it "content" in ui5 though
-			aggregationName = "content";
-			// default slot has no name
+			// but if a "_ui5propertyName" is defined, we regard it as a named aggregation!
+			if (slotDef._ui5propertyName) {
+				aggregationName = slotDef._ui5propertyName;
+			} else {
+				aggregationName = "content";
+			}
+
+			// on webc level the default slot has no name
 			slotName = undefined;
 
 			ui5metadata.defaultAggregation = aggregationName;

showcases/ui5-tsapp-webc/webapp/view/Main.view.xml

@@ -36,6 +36,8 @@
         <VBox alignItems="Center" justifyContent="Center" height="100%">
           <webc:Input value="Hello World 123" change="onBoo" />
           <webc:AvatarGroup type="Individual">
+            <!-- Example: the default aggregation of the AvatarGroup is called "items"
+                 It is not need to explicitly name this aggregation here. -->
             <webc:Avatar initials="PM" colorScheme="Accent1" />
             <webc:Avatar initials="XX" colorScheme="Accent4" shape="Square" />
             <webc:Avatar icon="ai" colorScheme="Accent7" />

showcases/ui5-tsapp-webc/webapp/view/fiori/DynamicPage.view.xml

@@ -88,7 +88,7 @@
       </fiori:DynamicPageHeader>
     </fiori:headerArea>
 
-    <webc:List content="{dpModel>/items}" headerText="Products" selectionMode="None">
+    <webc:List items="{dpModel>/items}" headerText="Products" selectionMode="None">
       <webc:ListItemStandard icon="slim-arrow-right" iconEnd="true" description="{dpModel>productID}" additionalText="{dpModel>price}" text="{dpModel>productName}">
         <webc:image>
           <webc:Avatar size="S" shape="Square" colorScheme="Accent10">