@ui5/webcomponents-tools 0.0.0-38861c872 → 0.0.0-38f83ffef

package/icons-collection/nps.js

@@ -41,8 +41,8 @@ const copyIconAssetsCommand = (options) => {
 const getScripts = (options) => {
 	const createJSImportsCmd = createIconImportsCommand(options);
 	const copyAssetsCmd = copyIconAssetsCommand(options);
-	const tsCommand = options.typescript ? "tsc --build" : "";
-	const tsCrossEnv = options.typescript ? "cross-env UI5_TS=true" : "";
+	const tsCommand = !options.legacy ? "tsc --build" : "";
+	const tsCrossEnv = !options.legacy ? "cross-env UI5_TS=true" : "";
 
 	const scripts = {
 		clean: "rimraf dist && rimraf src/generated",

package/lib/amd-to-es6/index.js

@@ -0,0 +1,102 @@
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+const babelCore = require("@babel/core");
+const babelParser = require("@babel/parser");
+const babelGenerator = require("@babel/generator").default;
+const replaceAsync = require('replace-in-file');
+
+const convertSAPUIDefineToDefine = async (filePath) => {
+	return replaceAsync({
+		files: filePath,
+		processor: (input) => {
+			return input.replace("sap.ui.define", "define").replace(", /* bExport= */ false", "").replace(", /* bExport= */ true", "");
+		}
+	})
+}
+
+const convertAmdToEs6 = async (code) => {
+	return (await babelCore.transformAsync(code, {
+		plugins: [['babel-plugin-amd-to-esm', {}]]
+	})).code;
+}
+
+const convertAbsImportsToRelative = (filePath, code) => {
+	let changed = false;
+	// console.log("File processing started: ", srcPath);
+
+	if (code.includes("import(")) {
+		// esprima can't parse this, but it's from the project files
+		return;
+	}
+
+	const tree = babelParser.parse(code, { sourceType: "module" });
+	const importer = filePath.replace(basePath, "");
+	const importerDir = path.dirname(importer);
+	// console.log("Importer -> ", importer);
+
+	tree?.program?.body?.forEach(node => {
+		if (node.type === "ImportDeclaration") {
+			let importee = node.source.value;
+			// console.log(importee);
+			if (importee.startsWith(".")) {
+				// add .js extension if missing
+				if (!importee.endsWith(".js")) {
+					node.source.value += ".js"
+					changed = true;
+				}
+				return;
+			}
+			let importeeDir = path.dirname(importee);
+			let importeeFile = path.basename(importee);
+			let relativePath = path.relative(importerDir, importeeDir);
+			if (relativePath.length === 0) {
+				relativePath = "."
+			}
+			if (!relativePath.startsWith(".")) {
+				relativePath = "./" + relativePath;
+			}
+
+			relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
+			let relativeImport = `${relativePath}/${importeeFile}.js`;
+			// console.log(importee + " --> " + relativeImport);
+			node.source.value = relativeImport;
+			changed = true;
+		}
+	});
+
+	return changed ? babelGenerator(tree).code : code;
+}
+
+const replaceGlobalCoreUsage = (filePath, code) => {
+	if (!filePath.includes("Configuration"))  {
+		const replaced = code.replace(/sap\.ui\.getCore\(\)/g, `Core`);
+		return code !== replaced ? `import Core from 'sap/ui/core/Core';${replaced}` : code;
+	}
+
+	return code;
+};
+
+const transformAmdToES6Module = async (filePath) => {
+	await convertSAPUIDefineToDefine(filePath);
+
+	let code = (await fs.readFile(filePath)).toString();
+
+	code = await convertAmdToEs6(code);
+
+	code = replaceGlobalCoreUsage(filePath, code);
+
+	code = convertAbsImportsToRelative(filePath, code);
+
+	return fs.writeFile(filePath, code);
+}
+
+const transformAmdToES6Modules = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(transformAmdToES6Module).filter(x => !!x));
+};
+
+transformAmdToES6Modules().then(() => {
+	console.log("Success: all amd modules are transformed to es6!");
+});

package/lib/amd-to-es6/no-remaining-require.js

@@ -0,0 +1,33 @@
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+const babelCore = require("@babel/core");
+const babelParser = require("@babel/parser");
+const babelGenerator = require("@babel/generator").default;
+const walk = require("estree-walk");
+
+const checkHasRequire = (filePath, code) => {
+	code = code.replace(/sap\.ui\.require/g, "unhandledRequire");
+
+	const tree = babelParser.parse(code, { sourceType: "module" });
+	walk(tree, {
+		CallExpression: function (node) {
+            if (node.type === "CallExpression" && node?.callee?.name === "unhandledRequire") {
+                throw new Error(`sap.ui.require found in ${filePath}`);
+            }
+    	}
+    });
+}
+
+const checkFile = async (filePath) => {
+	let code = (await fs.readFile(filePath)).toString();
+	checkHasRequire(filePath, code);
+}
+
+const checkAll = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(checkFile).filter(x => !!x));
+};
+
+checkAll();

package/lib/cem/custom-elements-manifest.config.mjs

@@ -4,6 +4,7 @@ import path from "path";
 import fs from 'fs';
 import {
 	getDeprecatedStatus,
+	getExperimentalStatus,
 	getSinceStatus,
 	getPrivacyStatus,
 	getReference,
@@ -13,13 +14,20 @@ import {
 	hasTag,
 	findTag,
 	findAllTags,
-	getJSDocErrors,
 	getTypeRefs,
 	normalizeDescription,
 	formatArrays,
 	isClass,
-	normalizeTagType
+	normalizeTagType,
+	logDocumentationError,
+	displayDocumentationErrors,
+	toKebabCase
 } from "./utils.mjs";
+import { generateCustomData } from "cem-plugin-vs-code-custom-data-generator";
+import { customElementJetBrainsPlugin } from "custom-element-jet-brains-integration";
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
+const devMode = process.env.UI5_CEM_MODE === "dev";
 
 const extractClassNodeJSDoc = node => {
 	const fileContent = node.getFullText();
@@ -58,21 +66,43 @@ function processClass(ts, classNode, moduleDoc) {
 	currClass.customElement = !!customElementDecorator || className === "UI5Element" || undefined;
 	currClass.kind = "class";
 	currClass.deprecated = getDeprecatedStatus(classParsedJsDoc);
+	currClass._ui5experimental = getExperimentalStatus(classParsedJsDoc);
 	currClass._ui5since = getSinceStatus(classParsedJsDoc);
 	currClass._ui5privacy = getPrivacyStatus(classParsedJsDoc);
 	currClass._ui5abstract = hasTag(classParsedJsDoc, "abstract") ? true : undefined;
 	currClass.description = normalizeDescription(classParsedJsDoc.description || findTag(classParsedJsDoc, "class")?.description);
 	currClass._ui5implements = findAllTags(classParsedJsDoc, "implements")
-		.map(tag => getReference(ts, normalizeTagType(tag.type), classNode, moduleDoc.path))
+		.map(tag => {
+			const correctInterfaceDescription = classNode?.heritageClauses?.some(heritageClause => {
+				return heritageClause?.types?.some(type => type.expression?.text === normalizeTagType(tag.type));
+			});
+
+			if (!correctInterfaceDescription) {
+				logDocumentationError(moduleDoc.path, `@interface {${tag.type}} tag is used, but the class doesn't implement the corresponding interface`)
+			}
+
+			return getReference(ts, normalizeTagType(tag.type), classNode, moduleDoc.path)
+		})
 		.filter(Boolean);
 
 
 	if (hasTag(classParsedJsDoc, "extends")) {
 		const superclassTag = findTag(classParsedJsDoc, "extends");
-		currClass.superclass = getReference(ts, superclassTag.name, classNode, moduleDoc.path);
+		const customElement = superclassTag.name === "HTMLElement";
 
-		if (currClass.superclass?.name === "UI5Element") {
+		if (customElement) {
+			currClass.superclass = { name: "HTMLElement" }
 			currClass.customElement = true;
+		} else {
+			currClass.superclass = getReference(ts, superclassTag.name, classNode, moduleDoc.path);
+
+			if (classNode?.heritageClauses?.[0]?.types?.[0]?.expression?.text !== superclassTag.name) {
+				logDocumentationError(moduleDoc.path, `@extends ${superclassTag.name} is used, but the class doesn't extend the corresponding superclass`)
+			}
+
+			if (currClass.superclass?.name === "UI5Element") {
+				currClass.customElement = true;
+			}
 		}
 	}
 
@@ -105,9 +135,13 @@ function processClass(ts, classNode, moduleDoc) {
 	}
 
 	// Events
-	currClass.events = findAllDecorators(classNode, "event")
+	currClass.events = findAllDecorators(classNode, ["event", "eventStrict"])
 		?.map(event => processEvent(ts, event, classNode, moduleDoc));
 
+	const filename = classNode.getSourceFile().fileName;
+	const sourceFile = typeProgram.getSourceFile(filename);
+	const tsProgramClassNode = sourceFile.statements.find(statement => ts.isClassDeclaration(statement) && statement.name?.text === classNode.name?.text);
+
 	// Slots (with accessor), methods and fields
 	for (let i = 0; i < (currClass.members?.length || 0); i++) {
 		const member = currClass.members[i];
@@ -162,7 +196,29 @@ function processClass(ts, classNode, moduleDoc) {
 				const propertyDecorator = findDecorator(classNodeMember, "property");
 
 				if (propertyDecorator) {
-					member._ui5validator = propertyDecorator?.expression?.arguments[0]?.properties?.find(property => ["validator", "type"].includes(property.name.text))?.initializer?.text || "String";
+					member._ui5noAttribute = propertyDecorator?.expression?.arguments[0]?.properties?.find(property => property.name.text === "noAttribute")?.initializer?.kind === ts.SyntaxKind.TrueKeyword || undefined;
+				}
+
+				if (currClass.customElement && member.privacy === "public") {
+					const tsProgramMember = tsProgramClassNode.members.find(m => ts.isPropertyDeclaration(m) && m.name?.text === member.name);
+					const attributeValue = typeChecker.typeToString(typeChecker.getTypeAtLocation(tsProgramMember), tsProgramMember);
+
+					if (attributeValue === "boolean" && member.default === "true") {
+						logDocumentationError(moduleDoc.path, `Boolean properties must be initialzed to false. [${member.name}] property of class [${className}] is intialized to \`true\``)
+					}
+
+					if (!member.type) {
+						logDocumentationError(moduleDoc.path, `Public properties must have type. The type of [${member.name}] property is not determinated automatically. Please check it.`)
+					}
+
+					currClass.attributes.push({
+						description: member.description,
+						name: toKebabCase(member.name),
+						default: member.default,
+						fieldName: member.name,
+						type: { text: attributeValue },
+						deprecated: member.deprecated
+					})
 				}
 
 				if (hasTag(memberParsedJsDoc, "formProperty")) {
@@ -181,24 +237,14 @@ function processClass(ts, classNode, moduleDoc) {
 					member.default = tagValue;
 				}
 
-				if (member.privacy === "public") {
-					const JSDocErrors = getJSDocErrors();
-
-					if (!member.default) {
-						JSDocErrors.push(
-							`=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Default value is missing`
-						);
-					}
+				if (member.privacy === "public" && !member.default) {
+					logDocumentationError(moduleDoc.path, `Missing default value for '${member.name}'.`)
 				}
 
 				// Getters are treated as fields so they should not have return, instead of return they should have default value defined with @default
 				if (member.readonly) {
 					if (member.privacy === "public" && !member.type) {
-						const JSDocErrors = getJSDocErrors();
-
-						JSDocErrors.push(
-							`=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Missing return type`
-						);
+						logDocumentationError(moduleDoc.path, `Missing return type for read-only field '${member.name}'.`)
 					}
 
 					delete member.return;
@@ -247,21 +293,19 @@ function processClass(ts, classNode, moduleDoc) {
 			if (member.return) {
 				const returnTag = findTag(memberParsedJsDoc, "returns");
 				member.return.description = returnTag?.description ? `${returnTag.name} ${returnTag.description}` : returnTag?.name;
-				member.return.type.text = classNodeMember?.type?.getFullText?.()?.trim();
+				member.return.type.text = formatArrays(classNodeMember?.type?.getFullText?.()?.trim());
 				const typeRefs = (getTypeRefs(ts, classNodeMember, member.return)
 					?.map(typeRef => getReference(ts, typeRef, classNodeMember, moduleDoc.path)).filter(Boolean)) || [];
 
 				if (typeRefs.length) {
 					member.return.type.references = typeRefs;
 				}
-			}
-
-			if (member.privacy === "public" && !member.return) {
-				const JSDocErrors = getJSDocErrors();
 
-				JSDocErrors.push(
-					`=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Missing return type`
-				);
+				if (member.privacy === "public" && !member.return.type.text) {
+					logDocumentationError(moduleDoc.path, `Missing return type for function '${member.name}'.`)
+				}
+			} else if (member.privacy === "public") {
+				logDocumentationError(moduleDoc.path, `Missing return type for function '${member.name}'.`)
 			}
 		}
 	}
@@ -281,6 +325,7 @@ function processInterface(ts, interfaceNode, moduleDoc) {
 		kind: "interface",
 		name: interfaceName,
 		description: normalizeDescription(interfaceParsedJsDoc?.description),
+		_ui5experimental: getExperimentalStatus(interfaceParsedJsDoc),
 		_ui5privacy: getPrivacyStatus(interfaceParsedJsDoc),
 		_ui5since: getSinceStatus(interfaceParsedJsDoc),
 		deprecated: getDeprecatedStatus(interfaceParsedJsDoc),
@@ -301,6 +346,7 @@ function processEnum(ts, enumNode, moduleDoc) {
 		kind: "enum",
 		name: enumName,
 		description: normalizeDescription(enumJSdoc?.comment),
+		_ui5experimental: getExperimentalStatus(enumParsedJsDoc),
 		_ui5privacy: getPrivacyStatus(enumParsedJsDoc),
 		_ui5since: getSinceStatus(enumParsedJsDoc),
 		deprecated: getDeprecatedStatus(enumParsedJsDoc) || undefined,
@@ -342,7 +388,7 @@ const processPublicAPI = object => {
 		if ((key === "privacy" && object[key] !== "public") || (key === "_ui5privacy" && object[key] !== "public")) {
 			return true;
 		} else if (typeof object[key] === "object") {
-			if (key === "cssParts" || key === "_ui5implements") {
+			if (key === "cssParts" || key === "attributes" || key === "_ui5implements") {
 				continue;
 			}
 
@@ -413,21 +459,18 @@ export default {
 				}
 			},
 			moduleLinkPhase({ moduleDoc }) {
-				for (let i = 0; i < moduleDoc.declarations.length; i++) {
-					const shouldRemove = processPublicAPI(moduleDoc.declarations[i]) || ["function", "variable"].includes(moduleDoc.declarations[i].kind)
-					if (shouldRemove) {
-						moduleDoc.declarations.splice(i, 1);
-						i--;
-					}
-				}
+				moduleDoc.path = moduleDoc.path?.replace(/^src/, "dist").replace(/\.ts$/, ".js");
 
-				if (moduleDoc.exports) {
-					moduleDoc.exports = moduleDoc.exports.filter(e => !(e.kind === "custom-element-definition" && !moduleDoc.declarations?.find(d => d.name === e.name)?.tagName))
-				}
+				moduleDoc.exports = moduleDoc.exports.
+					filter(e => !(e.kind === "custom-element-definition" && !moduleDoc.declarations?.find(d => d.name === e.name)?.tagName))
 
-				moduleDoc.exports?.forEach(e => {
+				moduleDoc.exports.forEach(e => {
 					const classNode = moduleDoc.declarations.find(c => c.name === e.declaration.name);
 
+					if (e.declaration && e.declaration.module) {
+						e.declaration.module = e.declaration.module.replace(/^src/, "dist").replace(/\.ts$/, ".js");
+					}
+
 					if (classNode?.customElement && classNode.tagName && e.kind !== "custom-element-definition") {
 						moduleDoc.exports.push({
 							kind: "custom-element-definition",
@@ -441,23 +484,54 @@ export default {
 				})
 			},
 			packageLinkPhase({ customElementsManifest }) {
-				// Uncomment and handle errors appropriately
-				// const JSDocErrors = getJSDocErrors();
-				// if (JSDocErrors.length > 0) {
-				// 	console.log(JSDocErrors.join("\n"));
-				// 	console.log(`Invalid JSDoc. ${JSDocErrors.length} were found.`);
-				// 	throw new Error(`Invalid JSDoc.`);
-				// }
-
-				customElementsManifest.modules?.forEach(m => {
-					m.path = m.path?.replace(/^src/, "dist").replace(/\.ts$/, ".js");
-
-					m.exports?.forEach(e => {
-						if (e.declaration && e.declaration.module)
-							e.declaration.module = e.declaration?.module?.replace(/^src/, "dist").replace(/\.ts$/, ".js");
+				customElementsManifest.modules.forEach(moduleDoc => {
+					for (let i = 0; i < moduleDoc.declarations.length; i++) {
+						const shouldRemove = processPublicAPI(moduleDoc.declarations[i]) || ["function", "variable"].includes(moduleDoc.declarations[i].kind)
+						if (shouldRemove) {
+							moduleDoc.declarations.splice(i, 1);
+							i--;
+						}
+					}
+
+					const typeReferences = new Set();
+					const registerTypeReference = reference => typeReferences.add(JSON.stringify(reference))
+
+					moduleDoc.declarations.forEach(declaration => {
+						["events", "slots", "members"].forEach(memberType => {
+							declaration[memberType]?.forEach(member => {
+								if (member.type?.references) {
+									member.type.references.forEach(registerTypeReference)
+								} else if (member._ui5type?.references) {
+									member._ui5type.references.forEach(registerTypeReference)
+								} else if (member.kind === "method") {
+									member.return?.type?.references?.forEach(registerTypeReference)
+
+									member.parameters?.forEach(parameter => {
+										parameter.type?.references?.forEach(registerTypeReference)
+									})
+								}
+							})
+						})
 					});
-				})
+
+					typeReferences.forEach(reference => {
+						reference = JSON.parse(reference);
+						if (reference.package === packageJSON?.name && reference.module === moduleDoc.path) {
+							const hasExport = moduleDoc.exports.some(e => e.declaration?.name === reference.name && e.declaration?.module === reference.module)
+
+							if (!hasExport) {
+								logDocumentationError(moduleDoc.path?.replace(/^dist/, "src").replace(/\.js$/, ".ts"), `Type '${reference.name}' is used to describe a public API but is not exported.`,)
+							}
+						}
+					})
+				});
+
+				if (devMode) {
+					displayDocumentationErrors();
+				}
 			}
 		},
+		generateCustomData({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false }),
+		customElementJetBrainsPlugin({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false })
 	],
 };

package/lib/cem/event.mjs

@@ -4,29 +4,22 @@ import {
 	getDeprecatedStatus,
 	getSinceStatus,
 	getType,
+	getTypeRefs,
 	validateJSDocComment,
 	hasTag,
 	findTag,
 	findAllTags,
 	getReference,
 	normalizeDescription,
-	normalizeTagType
+	normalizeTagType,
+	logDocumentationError
 } from "./utils.mjs";
 
 const jsDocRegExp = /\/\*\*(.|\n)+?\s+\*\//;
+const ASTFalseKeywordCode = 94;
 
 const getParams = (ts, eventDetails, commentParams, classNode, moduleDoc) => {
 	return commentParams?.map(commentParam => {
-		const decoratorParam = eventDetails?.find(prop => prop?.name?.text === commentParam?.name);
-
-		if (!decoratorParam || !decoratorParam?.jsDoc?.[0]) {
-			return;
-		}
-
-		const decoratorParamParsedComment = parse(decoratorParam?.jsDoc?.[0]?.getText?.(), { spacing: 'preserve' })[0];
-
-		validateJSDocComment("eventParam", decoratorParamParsedComment, decoratorParam.name?.text, moduleDoc);
-
 		const { typeName, name } = getType(normalizeTagType(commentParam?.type));
 		let type;
 
@@ -45,17 +38,16 @@ const getParams = (ts, eventDetails, commentParams, classNode, moduleDoc) => {
 		return {
 			type,
 			name: commentParam?.name,
-			_ui5privacy: getPrivacyStatus(decoratorParamParsedComment),
+			_ui5privacy: "public",
 			description: normalizeDescription(commentParam?.description),
-			_ui5since: getSinceStatus(decoratorParamParsedComment),
-			deprecated: getDeprecatedStatus(decoratorParamParsedComment),
 		};
-	}).filter(pair => !!pair);
+	});
 };
 
 function processEvent(ts, event, classNode, moduleDoc) {
+	const name = event?.expression?.arguments?.[0]?.text;
 	const result = {
-		name: event?.expression?.arguments?.[0]?.text,
+		name,
 		_ui5privacy: "private",
 		type: { text: "CustomEvent" }
 	};
@@ -68,19 +60,35 @@ function processEvent(ts, event, classNode, moduleDoc) {
 
 	const eventParsedComment = parse(comment, { spacing: 'preserve' })[0];
 
-	validateJSDocComment("event", eventParsedComment, event?.expression?.arguments?.[0]?.text, moduleDoc);
+	validateJSDocComment("event", eventParsedComment, name, moduleDoc);
 
 	const deprecatedTag = findTag(eventParsedComment, "deprecated");
 	const privacy = findTag(eventParsedComment, ["public", "private", "protected"])?.tag || "private";
 	const sinceTag = findTag(eventParsedComment, "since");
 	const commentParams = findAllTags(eventParsedComment, "param");
-	const allowPreventDefault = hasTag(eventParsedComment, "allowPreventDefault") || undefined;
 	const description = normalizeDescription(eventParsedComment?.description);
 	const native = hasTag(eventParsedComment, "native");
-	const eventDetails = event?.expression?.arguments?.[1]?.properties?.find(prop => prop?.name?.text === "detail")?.initializer?.properties;
+	const eventArgs = event?.expression?.arguments;
+	let eventBubbles;
+	let eventCancelable;
+	let eventDetails;
+
+	eventArgs && eventArgs.forEach(arg => {
+		arg.properties?.forEach(prop => {
+			if (prop.name?.text === "bubbles") {
+				eventBubbles = prop.initializer.kind === ASTFalseKeywordCode ? false : true;
+			} else if (prop.name?.text === "cancelable") {
+				eventCancelable = prop.initializer.kind === ASTFalseKeywordCode ? false : true;
+			} else if (prop.name?.text === "detail") {
+				eventDetails = prop.initializer?.properties;
+			}
+		});
+	});
 
 	result.description = description;
-	result._ui5allowPreventDefault = allowPreventDefault;
+	result._ui5Cancelable = eventCancelable !== undefined ? eventCancelable : false;
+	result._ui5allowPreventDefault = result._ui5Cancelable;
+	result._ui5Bubbles = eventBubbles !== undefined ? eventBubbles : false;
 
 	if (native) {
 		result.type = { text: "Event" };
@@ -104,7 +112,53 @@ function processEvent(ts, event, classNode, moduleDoc) {
 			: sinceTag.name;
 	}
 
-	if (commentParams && eventDetails) {
+	const eventDetailType = classNode.members?.find(member => {
+		return ts.isPropertyDeclaration(member) && member.name.text === "eventDetails"
+	})?.type;
+	const eventDetailRef = eventDetailType?.members?.find(member => member.name.text === name) || eventDetailType?.types?.[eventDetailType?.types?.length - 1]?.members?.find(member => member.name.text === name);
+	const hasGeneric = !!event?.expression?.typeArguments
+
+	if (commentParams.length) {
+		if (eventDetailRef && hasGeneric) {
+			logDocumentationError(moduleDoc.path, `Event details for event '${name}' has to be defined either with generic or with eventDetails.`)
+		} else if (eventDetails) {
+			if (hasGeneric) {
+				const typesText = event?.expression?.typeArguments.map(type => type.typeName?.text).filter(Boolean).join(" | ");
+				const typeRefs = (getTypeRefs(ts, event.expression)
+					?.map(e => getReference(ts, e, event, moduleDoc.path)).filter(Boolean)) || [];
+
+				result.type = { text: `CustomEvent<${typesText}>` };
+
+				if (typeRefs.length) {
+					result.type.references = typeRefs;
+				}
+			} else if (eventDetailRef) {
+				const typesText = eventDetailRef?.type?.typeName?.text;
+				const typeRefs = (getTypeRefs(ts, eventDetailRef)
+					?.map(e => getReference(ts, e, event, moduleDoc.path)).filter(Boolean)) || [];
+
+				result.type = { text: `CustomEvent<${typesText}>` };
+
+				if (typeRefs.length) {
+					result.type.references = typeRefs;
+				}
+			} else {
+				logDocumentationError(moduleDoc.path, `Event details for event '${name}' must be described using generics. Add type via generics to the decorator: @event<TypeForDetails>("${name}", {details}).`)
+			}
+		} else if (eventDetailRef) {
+			const typesText = eventDetailRef?.type?.typeName?.text;
+			const typeRefs = (getTypeRefs(ts, eventDetailRef)
+				?.map(e => getReference(ts, e, event, moduleDoc.path)).filter(Boolean)) || [];
+
+			result.type = { text: `CustomEvent<${typesText}>` };
+
+			if (typeRefs.length) {
+				result.type.references = typeRefs;
+			}
+		} else {
+			logDocumentationError(moduleDoc.path, `Event details for event '${name}' must be described.`)
+		}
+
 		result._ui5parameters = getParams(ts, eventDetails, commentParams, classNode, moduleDoc);
 	}