chore: add attributes to cem (#8405)

Co-authored-by: Nayden Naydenov <[email protected]>

Author: nnaydenow

.vscode/settings.json

@@ -4,5 +4,10 @@
         "./packages/localization",
         "./packages/main",
         "./packages/fiori",
-    ]
+    ],
+    "html.customData": [
+        "./packages/base/dist/vscode.html-custom-data.json",
+        "./packages/main/dist/vscode.html-custom-data.json",
+        "./packages/fiori/dist/vscode.html-custom-data.json"
+    ],
 }

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

@@ -19,8 +19,11 @@ import {
 	isClass,
 	normalizeTagType,
 	logDocumentationError,
-	displayDocumentationErrors
+	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"));
 
@@ -169,6 +172,23 @@ function processClass(ts, classNode, moduleDoc) {
 					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" && !propertyDecorator?.expression?.arguments[0]?.properties?.find(property => property.name.text === "multiple") && !["object"].includes(member._ui5validator?.toLowerCase())) {
+					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);
+					const tsProgramMember = tsProgramClassNode.members.find(m => ts.isPropertyDeclaration(m) && m.name?.text === member.name);
+					const attributeValue = typeChecker.typeToString(typeChecker.getTypeAtLocation(tsProgramMember), tsProgramMember);
+
+					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")) {
 					member._ui5formProperty = true;
 				}
@@ -334,7 +354,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;
 			}
 
@@ -475,5 +495,7 @@ export default {
 				}
 			}
 		},
+		generateCustomData({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false }),
+		customElementJetBrainsPlugin({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false })
 	],
 };

packages/tools/lib/cem/utils.mjs

@@ -14,6 +14,10 @@ const getDeprecatedStatus = (jsdocComment) => {
             : undefined;
 };
 
+const toKebabCase = str => {
+    return str.replaceAll(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase())
+}
+
 const normalizeDescription = (description) => {
 	return typeof description === 'string' ? description.replaceAll(/^-\s+|^(\n)+|(\n)+$/g, ""): description;
 }
@@ -376,4 +380,5 @@ export {
     normalizeTagType,
     displayDocumentationErrors,
     logDocumentationError,
+    toKebabCase
 };

packages/tools/package.json

@@ -22,6 +22,8 @@
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.8.4",
+    "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
+    "custom-element-jet-brains-integration": "^1.4.4",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "@wdio/cli": "^7.19.7",

yarn.lock

@@ -7466,6 +7466,13 @@ ccount@^2.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
+cem-plugin-vs-code-custom-data-generator@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.2.tgz#d81d93231d31701eb45be823109ebe9bb22a3aa2"
+  integrity sha512-Hjj7U0CkX1H8uym9SDkuRj5t2SEx6Iyys4hC4m/5F2MBcCeMPkMR5BJZlTpatcKdDRZh21tVJz+S/FbKqiniNA==
+  dependencies:
+    prettier "^2.7.1"
+
 chai@^4.3.4:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.7.tgz#ec63f6df01829088e8bf55fca839bcd464a8ec51"
@@ -8691,6 +8698,13 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+custom-element-jet-brains-integration@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.4.4.tgz#7dfd406d42b69a2097d5be67226521b845a82857"
+  integrity sha512-HEiTy5jBKQa1QdC5jaFbFkXkhHmgwJ0oRLjKK/mZuxuUx0+/wCFRjHBZX51qu5KYj6Ta/gPXcr3blCzuBHXF7A==
+  dependencies:
+    prettier "^2.8.0"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz#b35c2129076a1dc9f95d720c6f7b5b71a857274b"
@@ -16787,7 +16801,7 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==
 
-prettier@^2.8.0, prettier@^2.8.1:
+prettier@^2.7.1, prettier@^2.8.0, prettier@^2.8.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==