chore: fix tree and improve validation

packages/main/src/Interfaces.ts

@@ -190,10 +190,8 @@ const IToken = "sap.ui.webc.main.IToken";
 /**
  * Interface for tree items for the purpose of <code>ui5-tree</code>
  *
- * @interface
  * @public
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface ITreeItem extends HTMLElement { }
 
 /**

packages/main/src/Tree.ts

@@ -26,6 +26,7 @@ import TreeTemplate from "./generated/templates/TreeTemplate.lit.js";
 
 // Styles
 import TreeCss from "./generated/themes/Tree.css.js";
+import { ITreeItem } from "./Interfaces.js";
 
 type TreeItemEventDetail = {
 	item: TreeItemBase,
@@ -278,7 +279,7 @@ class Tree extends UI5Element {
 	 * @public
 	 */
 	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
-	items!: Array<TreeItemBase>;
+	items!: Array<ITreeItem>;
 
 	/**
 	 * Defines the component header.
@@ -419,7 +420,6 @@ class Tree extends UI5Element {
 	/**
 	 * Returns the a flat array of all tree items
 	 * @protected
-	 * @returns {Array}
 	 */
 	getItems(): Array<TreeItemBase> {
 		return this.list.getItems();
@@ -439,7 +439,7 @@ class Tree extends UI5Element {
 	 * Perform Depth-First-Search walk on the tree and run a callback on each node
 	 *
 	 * @public
-	 * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
+	 * @param callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
 	 */
 	walk(callback: WalkCallback) {
 		walkTree(this, 1, callback);

packages/main/src/TreeItemBase.ts

@@ -25,6 +25,7 @@ import TreeItemBaseTemplate from "./generated/templates/TreeItemBaseTemplate.lit
 import treeItemCss from "./generated/themes/TreeItem.css.js";
 
 import HasPopup from "./types/HasPopup.js";
+import { ITreeItem } from "./Interfaces.js";
 
 type TreeItemBaseEventDetail = {
 	item: TreeItemBase,
@@ -172,7 +173,7 @@ class TreeItemBase extends ListItem {
 	/**
 	 * Defines the accessible name of the component.
 	 *
-	 * @default: ""
+	 * @default ""
 	 * @public
 	 * @since 1.8.0
 	 */
@@ -247,7 +248,7 @@ class TreeItemBase extends ListItem {
 	 * @public
 	 */
 	@slot({ type: HTMLElement, "default": true })
-	items!: Array<TreeItemBase>;
+	items!: Array<ITreeItem>;
 
 	onBeforeRendering() {
 		this.actionable = false;
@@ -322,17 +323,15 @@ class TreeItemBase extends ListItem {
 
 	/**
 	 * Used to duck-type TreeItem elements without using instanceof
-	 * @returns {boolean}
 	 * @protected
 	 */
-	get isTreeItem() {
+	get isTreeItem(): boolean {
 		return true;
 	}
 
 	/**
 	 * Call this method to manually switch the <code>expanded</code> state of a tree item.
 	 * @public
-	 * @method
 	 */
 	toggle() {
 		this.expanded = !this.expanded;

packages/tools/lib/cem/custom-elements-manifest.config.mjs

@@ -93,7 +93,13 @@ function processClass(ts, classNode, moduleDoc) {
 		// Slots with accessors are treated like fields by the tool, so we have to convert them into slots.
 		if (member.kind === "field") {
 			const slotDecorator = findDecorator(classNodeMember, "slot");
-			validateJSDocComment(slotDecorator ? "slot" : "field", memberParsedJsDoc, classNodeMember.name?.text, moduleDoc);
+			let fieldType;
+
+			if (slotDecorator) fieldType = "slot";
+			else if (member.readonly) fieldType = "getter";
+			else fieldType = "field";
+
+			validateJSDocComment(fieldType, memberParsedJsDoc, classNodeMember.name?.text, moduleDoc);
 
 				const typeRefs = (getTypeRefs(ts, classNodeMember, member)
 					?.map(e => getReference(ts, e, classNodeMember, moduleDoc.path)).filter(Boolean)) || [];
@@ -283,7 +289,7 @@ const processPublicAPI = object => {
 };
 
 export default {
-	globs: ["src/Test.ts"],
+	globs: ["src/!(*generated)/*.ts", "src/*.ts"],
 	outdir: 'dist',
 	plugins: [
 		{

packages/tools/lib/cem/utils.mjs

@@ -189,18 +189,18 @@ const getType = (type) => {
 };
 
 const commonTags = ["public", "protected", "private", "since", "deprecated"];
-
 const allowedTags = {
-    field: [...commonTags, "formEvents", "formProperty", "default", "readonly"],
+    field: [...commonTags, "formEvents", "formProperty", "default"],
     slot: [...commonTags, "default"],
     event: [...commonTags, "param", "allowPreventDefault", "native"],
     eventParam: [...commonTags],
-    method: [...commonTags, "param", "returns"],
+    method: [...commonTags, , "override", "param", "returns"],
     class: [...commonTags, "constructor", "class", "abstract", "implements", "extends", "slot", "csspart"],
     enum: [...commonTags],
     enumMember: [...commonTags],
     interface: [...commonTags],
 };
+allowedTags.getter = [...allowedTags.field, "readonly", "override"];
 
 const tagMatchCallback = (tag, tagName) => {
     const currentTagName = tag.tag;
@@ -275,6 +275,8 @@ const validateJSDocTag = (tag) => {
             return !tag.type && tag.name && tag.description;
         case "since":
             return !tag.type && tag.name;
+        case "override":
+            return !tag.type;
         case "returns":
             return !tag.type && tag.name;
         case "default":
@@ -297,7 +299,7 @@ const validateJSDocComment = (fieldType, jsdocComment, node, moduleDoc) => {
         let isValid = false
 
         if (fieldType === "event" && tag?.tag === "param") {
-            isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag({...tag, tag: "eventparam"});
+            isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag({ ...tag, tag: "eventparam" });
         } else {
             isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag(tag);
         }