@ui5/webcomponents-tools 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

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

@@ -13,13 +13,19 @@ 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 extractClassNodeJSDoc = node => {
 	const fileContent = node.getFullText();
@@ -163,6 +169,24 @@ function processClass(ts, classNode, moduleDoc) {
 
 				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" && !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")) {
@@ -181,24 +205,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 +261,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}'.`)
 			}
 		}
 	}
@@ -342,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;
 			}
 
@@ -421,13 +433,18 @@ export default {
 					}
 				}
 
-				if (moduleDoc.exports) {
-					moduleDoc.exports = moduleDoc.exports.filter(e => !(e.kind === "custom-element-definition" && !moduleDoc.declarations?.find(d => d.name === e.name)?.tagName))
-				}
+				moduleDoc.path = moduleDoc.path?.replace(/^src/, "dist").replace(/\.ts$/, ".js");
+
+				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",
@@ -439,25 +456,46 @@ 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");
-					});
+
+				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.`,)
+						}
+					}
 				})
+			},
+			packageLinkPhase({ context }) {
+				if (context.dev) {
+					displayDocumentationErrors();
+				}
 			}
 		},
+		generateCustomData({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false }),
+		customElementJetBrainsPlugin({ outdir: "dist", cssFileName: null, cssPropertiesDocs: false })
 	],
 };

package/lib/cem/event.mjs

@@ -4,13 +4,15 @@ import {
 	getDeprecatedStatus,
 	getSinceStatus,
 	getType,
+	getTypeRefs,
 	validateJSDocComment,
 	hasTag,
 	findTag,
 	findAllTags,
 	getReference,
 	normalizeDescription,
-	normalizeTagType
+	normalizeTagType,
+	logDocumentationError
 } from "./utils.mjs";
 
 const jsDocRegExp = /\/\*\*(.|\n)+?\s+\*\//;
@@ -54,8 +56,9 @@ const getParams = (ts, eventDetails, commentParams, classNode, moduleDoc) => {
 };
 
 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,7 +71,7 @@ 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";
@@ -79,11 +82,25 @@ function processEvent(ts, event, classNode, moduleDoc) {
 	const native = hasTag(eventParsedComment, "native");
 	const eventDetails = event?.expression?.arguments?.[1]?.properties?.find(prop => prop?.name?.text === "detail")?.initializer?.properties;
 
+	if (event?.expression?.arguments?.[1] && !event?.expression?.typeArguments) {
+		logDocumentationError(moduleDoc.path, `Event details for event '${name}' must be described using generics. Add type via generics to the decorator: @event<TypeForDetails>("${name}", {details}).`)
+	}
+
 	result.description = description;
 	result._ui5allowPreventDefault = allowPreventDefault;
 
 	if (native) {
 		result.type = { text: "Event" };
+	} else if (event?.expression?.typeArguments) {
+		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;
+		}
 	}
 
 	if (privacy) {

package/lib/cem/schema-internal.json

@@ -245,6 +245,9 @@
     "ClassField": {
       "additionalProperties": false,
       "properties": {
+        "_ui5noAttribute": {
+          "type": "boolean"
+        },
         "_ui5validator": {
           "type": "string"
         },