fix(ui5-tooling-modules): improve handling for missing superclass

packages/ui5-tooling-modules/lib/rollup-plugin-webcomponents.js

@@ -173,7 +173,7 @@ module.exports = function ({ log, resolveModule, pkgJson, getPackageJson, framew
 		const npmPackage = getNpmPackageName(source);
 
 		let clazz;
-		if (npmPackage !== "@ui5/webcomponents-base" && (clazz = WebComponentRegistry.getClassDefinition(source))) {
+		if (npmPackage !== WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE && (clazz = WebComponentRegistry.getClassDefinition(source))) {
 			return clazz;
 		}
 
@@ -187,7 +187,7 @@ module.exports = function ({ log, resolveModule, pkgJson, getPackageJson, framew
 				const moduleName = `${npmPackage}/${modulePath}`;
 				const clazz = WebComponentRegistry.getClassDefinition(moduleName);
 				// TODO: base classes must be ignored as UI5Element is flagged as custom element although it is a base class
-				if (clazz && clazz.customElement && npmPackage !== "@ui5/webcomponents-base") {
+				if (clazz && clazz.customElement && npmPackage !== WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE) {
 					return clazz;
 				}
 			}
@@ -223,7 +223,7 @@ module.exports = function ({ log, resolveModule, pkgJson, getPackageJson, framew
 		const metadata = JSON.stringify(metadataObject, undefined, 2);
 
 		// is it the base library? (important for the monkey patches)
-		const isBaseLib = namespace === "@ui5/webcomponents-base";
+		const isBaseLib = namespace === WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE;
 
 		// generate the library code
 		const webcPackage = chunkName && posix.relative(dirname(source), chunkName);
@@ -497,7 +497,7 @@ module.exports = function ({ log, resolveModule, pkgJson, getPackageJson, framew
 
 				// generate the web component package code
 				const code = webcTmplFnWebCPackage({
-					isBaseLib: namespace === "@ui5/webcomponents-base",
+					isBaseLib: namespace === WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE,
 					scopeSuffix: ui5WebCScopeSuffix,
 					enrichBusyIndicator,
 					nonUI5TagsToRegister,

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

@@ -1,6 +1,7 @@
 const SimpleLogger = require("./SimpleLogger");
 const logger = SimpleLogger.create("📚 JSDoc");
 const { loadAndCompile, baseTemplate } = require("./HandlebarsHelper");
+const WebComponentRegistryHelper = require("./WebComponentRegistryHelper");
 
 /**
  * All needed HBS templates for serializing JSDoc comments.
@@ -27,12 +28,14 @@ function dot2slash(s) {
  */
 function _serializeClassHeader(classDef) {
 	// find superclass name, either another wrapper OR the core WebComponent base class
-	let superclassName = classDef.superclass?._ui5metadata && classDef.superclass?.name;
-	if (superclassName === "UI5Element") {
+	let superclassName = classDef.superclass.name;
+	if (superclassName === WebComponentRegistryHelper.UI5_ELEMENT_CLASS_NAME) {
 		// we reached the very top of the inheritance chain
 		superclassName = "sap.ui.core.webc.WebComponent";
 	} else if (superclassName) {
 		superclassName = `module:${classDef.superclass._ui5QualifiedNameSlashes}`;
+	} else {
+		logger.warn(`Superclass for class ${classDef._ui5QualifiedName} has no property 'name'`);
 	}
 
 	// TODO: The descriptions can contain non JSDoc compliant characters, e.g. `*` or `@`

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

@@ -38,9 +38,6 @@ const calculateGetterName = (functionName) => {
 	return "get" + functionName.substring(0, 1).toUpperCase() + functionName.substring(1);
 };
 
-// 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 WEBC_ASSOCIATION_TYPE = "HTMLElement | string | undefined";
 
 let _registry = {};
@@ -189,13 +186,18 @@ class RegistryEntry {
 				logger.error(
 					`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[UI5_ELEMENT_CLASS_NAME];
+				const refPackage = WebComponentRegistry.getPackage(WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE);
+				let superclassRef = (refPackage || this).classes[WebComponentRegistryHelper.UI5_ELEMENT_CLASS_NAME];
 				classDef.superclass = superclassRef;
 			} else {
 				this.#connectSuperclass(superclassRef);
 				classDef.superclass = superclassRef;
 			}
+		} else if (classDef.customElement && !WebComponentRegistryHelper.isUI5Element(classDef)) {
+			classDef.superclass = {
+				name: WebComponentRegistryHelper.UI5_ELEMENT_CLASS_NAME,
+				namespace: WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE,
+			};
 		}
 	}
 
@@ -280,10 +282,10 @@ class RegistryEntry {
 				// Since the UI5 runtime only allows for 1 single type per property/aggregation, we take the first reference
 				type = typeInfo?.references?.[0]?.name || type;
 
-				if (typeInfo.references?.[0].package === "@ui5/webcomponents-base") {
+				if (typeInfo.references?.[0].package === WebComponentRegistryHelper.UI5_ELEMENT_NAMESPACE) {
 					// case 0: we just have a reference to the UI5Element base class in the @ui5/webcomponent-base package
 					//         This means that the Web Component can only nest other Web Component subclasses in that slot.
-					if (type === "UI5Element") {
+					if (type === WebComponentRegistryHelper.UI5_ELEMENT_CLASS_NAME) {
 						return {
 							dtsType: "WebComponent",
 							packageName: "sap/ui/core",
@@ -835,7 +837,7 @@ class RegistryEntry {
 	#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) {
+		if (classDef.name === WebComponentRegistryHelper.UI5_ELEMENT_CLASS_NAME) {
 			return false;
 		}
 		// check self

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

@@ -1,4 +1,9 @@
 const WebComponentRegistryHelper = {
+	// the class name of the base class of all control wrappers
+	// corresponds to the "sap.ui.core.webc.WebComponent" class at runtime.
+	UI5_ELEMENT_CLASS_NAME: "UI5Element",
+	UI5_ELEMENT_NAMESPACE: "@ui5/webcomponents-base",
+
 	/**
 	 * Helper function to check whether the given class inherits from UI5Element, the base class for all
 	 * UI5 web components.
@@ -10,7 +15,7 @@ const WebComponentRegistryHelper = {
 		let superclass = classDef.superclass,
 			isUI5ElementSubclass = false;
 		while (superclass) {
-			if (superclass?.namespace === "@ui5/webcomponents-base" && superclass?.name === "UI5Element") {
+			if (superclass?.namespace === this.UI5_ELEMENT_NAMESPACE && superclass?.name === this.UI5_ELEMENT_CLASS_NAME) {
 				isUI5ElementSubclass = true;
 				break;
 			}
@@ -20,7 +25,7 @@ const WebComponentRegistryHelper = {
 	},
 
 	isUI5Element(ui5Superclass) {
-		return ui5Superclass.namespace === "@ui5/webcomponents-base" && ui5Superclass.name === "UI5Element";
+		return ui5Superclass.namespace === this.UI5_ELEMENT_NAMESPACE && ui5Superclass.name === this.UI5_ELEMENT_CLASS_NAME;
 	},
 };
 

packages/ui5-tooling-modules/test/__snap__/56bfa72a/@luigi-project/container/LuigiContainer.js

@@ -16,7 +16,7 @@ sap.ui.define(
         metadata: {
           namespace: "@luigi-project/container",
           qualifiedNamespace: "@luigi-project.container",
-          tag: "luigi-container",
+          tag: "luigi-container-1fd55bfa",
           interfaces: [],
           properties: {
             activeFeatureToggleList: {

packages/ui5-tooling-modules/test/__snap__/56bfa72a/LuigiContainer.js

@@ -1,7 +1,7 @@
-sap.ui.define(['./LuigiContainer2'], (function (LuigiContainer) { 'use strict';
+sap.ui.define(['./container'], (function (container) { 'use strict';
 
 
 
-	return LuigiContainer.nt;
+	return container.nt;
 
 }));