@ui5/webcomponents-tools 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/components-package/nps.js

@@ -42,7 +42,7 @@ const getScripts = (options) => {
 	}
 
 	const scripts = {
-		clean: 'rimraf dist && rimraf .port && nps "scope.testPages.clean"',
+		clean: 'rimraf jsdoc-dist && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
 		lint: `eslint . ${eslintConfig}`,
 		lintfix: `eslint . ${eslintConfig}`,
 		prepare: {
@@ -121,8 +121,8 @@ const getScripts = (options) => {
 		},
 		generateAPI: {
 			default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
-			prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`,
-			preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`,
+			prepare: `node "${LIB}/copy-and-watch/index.js" --silent "dist/**/*.js" jsdoc-dist/`,
+			preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/ src`,
 			jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`,
 			cleanup: "rimraf jsdoc-dist/"
 		},

package/components-package/wdio.js

@@ -217,6 +217,12 @@ exports.config = {
 			}, this, className);
 		}, true);
 
+		await browser.addCommand("hasAttribute", async function(attrName) {
+			return browser.executeAsync((elem, attrName, done) => {
+				done(elem.hasAttribute(attrName));
+			}, this, attrName);
+		}, true);
+
 		await browser.addCommand("getStaticAreaItemClassName", async function(selector) {
 			return browser.executeAsync(async (selector, done) => {
 				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
@@ -238,6 +244,7 @@ exports.config = {
 			"$",
 			"$$",
 			"getAttribute",
+			"hasAttribute", // custom
 			"getCSSProperty",
 			"getHTML",
 			"getProperty",

package/icons-collection/nps.js

@@ -46,7 +46,7 @@ const getScripts = (options) => {
 		clean: "rimraf dist",
 		copy: copyAssetsCmd,
 		build: {
-			default: `nps clean copy build.i18n build.icons build.jsonImports`,
+			default: `nps clean typescript copy build.i18n build.icons build.jsonImports`,
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
 				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
@@ -58,6 +58,7 @@ const getScripts = (options) => {
 			},
 			icons: createJSImportsCmd,
 		},
+		typescript: "tsc",
 	};
 
 	return scripts;

package/lib/copy-list/index.js

@@ -3,7 +3,7 @@ const path = require("path");
 
 const fileList = process.argv[2];
 const dest = process.argv[3];
-const src = "../../node_modules/@openui5/sap.ui.core/src/";
+const src = "@openui5/sap.ui.core/src/";
 
 const generate = async () => {
 	const filesToCopy = (await fs.readFile(fileList)).toString();
@@ -15,7 +15,7 @@ const generate = async () => {
 	const trimFile = file => file.trim();
 
 	return filesToCopy.split("\n").map(trimFile).filter(shouldCopy).map(async moduleName => {
-		const srcPath = path.join(src, moduleName);
+		const srcPath = require.resolve(path.join(src, moduleName), {paths: [process.cwd()]});
 		const destPath = path.join(dest, moduleName);
 
 		await fs.mkdir(path.dirname(destPath), { recursive: true });

package/lib/create-new-component/index.js

@@ -13,13 +13,13 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  */
 const metadata = {
 	tag: "${tagName}",
-	properties: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
+	properties: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
 		//
 	},
-	slots: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
+	slots: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
 		//
 	},
-	events: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
+	events: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
 		//
 	},
 };
@@ -39,8 +39,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.${library}.${componentName}
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.${library}.${componentName}
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ${tagName}
  * @public
  */

package/lib/dev-server/virtual-index-html-plugin.js

@@ -33,6 +33,7 @@ const virtualIndexPlugin = async () => {
 					const folders = Object.keys(pagesPerFolder);
 
 					res.statusCode = 200;
+					res.setHeader("Content-Type", "text/html; charset=utf-8");
 					res.end(`${folders.map(folder => {
 						const pages = pagesPerFolder[folder];
 						return `<h1>${folder}</h1>

package/lib/generate-custom-elements-manifest/index.js

@@ -274,11 +274,15 @@ const generateCustomElementDeclaration = entity => {
 const generateRefenrece = (entity) => {
 	let packageName;
 
-	if (entity.name.includes("sap.ui.webcomponents.main")) {
+	if (!entity.name) {
+		throw new Error("JSDoc error: entity not found in api.json.");
+	}
+
+	if (entity.name.includes("sap.ui.webc.main")) {
 		packageName = "@ui5/webcomponents";
-	} else if (entity.name.includes("sap.ui.webcomponents.fiori")) {
+	} else if (entity.name.includes("sap.ui.webc.fiori")) {
 		packageName = "@ui5/webcomponents-fiori";
-	} else if (entity.name.includes("sap.ui.webcomponents.base")) {
+	} else if (entity.name.includes("sap.ui.webc.base")) {
 		packageName = "@ui5/webcomponents-base";
 	}
 

package/lib/jsdoc/preprocess.js

@@ -3,30 +3,31 @@ const path = require("path");
 const fs = require("fs/promises");
 
 const inputDir = process.argv[2];
+const sourceDir = process.argv[3];
 
-const preprocess = async () => {
+const preprocessTypes = async () => {
 	try {
 		const { globby } = await import("globby");
 		const fileNames = await globby(inputDir + "**/types/*.js");
 
-		return Promise.all(fileNames.map(processFile));
+		return Promise.all(fileNames.map(processTypeFile));
 	} catch(e) {
-		console.log("JSDoc preprocess failed: ", e);
+		console.log("JSDoc types preprocess failed: ", e);
 	}
 };
 
-const processFile = async (fileName) => {
+const processTypeFile = async (fileName) => {
 	let fileContent = `${await fs.readFile(fileName)}`;
 
-	const re = new RegExp(`(\\/\\*\\*[^\\/]+\\s+\\*\\/)?\\s+\\s+.*?\\["([\\w\\d]+)"\\].*?"([\\w\\d]+)";`, "gm")
+	const re = new RegExp(`(\\/\\*\\*\\s*\\n([^\\*]|(\\*(?!\\/)))*\\*\\/)\\s+[\\w\\d]+\\[\\"([\\w\\d]+)\\"\\]\\s*=\\s*\\"([\\w\\d]+)\\";`, "gm")
 	let matches = [...fileContent.matchAll(re)];
 
 	// Get all type values
 	const typeData = matches.map(match => {
 		return {
 			comment: match[1],
-			key: match[2],
-			value: match[3],
+			key: match[4],
+			value: match[5],
 		};
 	});
 	if (typeData.length === 0) {
@@ -35,7 +36,7 @@ const processFile = async (fileName) => {
 
 	const typeName = path.parse(fileName).name;
 
-	matches = fileContent.match(/^\/\*\*[^\/]+\//gm);
+	matches = fileContent.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//gm);
 	const comment = matches[0];
 
 	const propsCode = typeData.map(item => {
@@ -55,6 +56,91 @@ const processFile = async (fileName) => {
 	return fs.writeFile(fileName, fileContent);
 };
 
-preprocess().then(() => {
+const preprocessComponents = async () => {
+	if (!sourceDir) {
+		return; // if the second param was not passed, there are no components
+	}
+
+	try {
+		const { globby } = await import("globby");
+		const fileNames = await globby(sourceDir + "/*.ts");
+
+		return Promise.all(fileNames.map(processComponentFile));
+	} catch(e) {
+		console.log("JSDoc components preprocess failed: ", e);
+	}
+};
+
+const isClass = text => {
+	return text.includes("@abstract") || text.includes("@class");
+};
+
+const isAnnotationComment = (comment) =>  {
+	return comment.includes("@name");
+}
+
+const processComponentFile = async (fileName) => {
+	// source file (src/*.ts)
+	let tsFileContent = `${await fs.readFile(fileName)}`;
+
+	// Skip all non-component files
+	if (!isClass(tsFileContent)) {
+		return;
+	}
+
+	// Gather all JSDocs from the original .ts file
+	const allJSDocsRegExp = new RegExp(`\\/\\*\\*(.|\\n)+?\\s+\\*\\/`, "gm");
+	let allJSDocs = [...tsFileContent.matchAll(allJSDocsRegExp)];
+	allJSDocs = allJSDocs.map(match => match[0]); // all /** ..... */ comments
+
+	// Find where the class is defined in the original file
+	const tsClassDefinitionRegExp = new RegExp(`^(abstract\\s)?class [\\w\\d_]+`, "gm");
+	let tsClassDefinitionMatch = tsFileContent.match(tsClassDefinitionRegExp);
+	if (!tsClassDefinitionMatch) {
+		return; // no class defined in this .ts file
+	}
+	const tsClassDefinition = tsClassDefinitionMatch[0];
+	const tsClassDefinitionIndex = tsFileContent.indexOf(tsClassDefinition);
+
+	// Gather all JSDocs that are before the class definition (except for the @class one)
+	const JSDocsToAppend = [];
+	allJSDocs.forEach(JSDoc => {
+		if (!isClass(JSDoc) && (tsFileContent.indexOf(JSDoc) < tsClassDefinitionIndex || isAnnotationComment(JSDoc, tsFileContent))) {
+			JSDocsToAppend.push(JSDoc);
+		}
+	});
+
+
+
+	// destination file (jsdoc-dist/*.js)
+	const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
+	let jsFileContent = `${await fs.readFile(destFileName)}`;
+
+	const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
+	let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
+	if (!classDefinitionMatch) {
+		return; // not a file, generated by typescript, nothing to do here
+	}
+
+	const classDefinition = classDefinitionMatch[0];
+	const classDefinitionIndex = jsFileContent.indexOf(classDefinition); // classDefinitionIndex is the position in the file where the class is defined
+
+	// All comments before the class definition, except for the @class comment, must be removed
+	allJSDocs.forEach(JSDoc => {
+		if (!isClass(JSDoc) && jsFileContent.indexOf(JSDoc) < classDefinitionIndex) {
+			jsFileContent = jsFileContent.replace(JSDoc, "");
+		}
+	});
+
+	// Put all other comments at the end of the file
+	jsFileContent = jsFileContent + "\n\n" + JSDocsToAppend.join("\n\n");
+	return fs.writeFile(destFileName, jsFileContent);
+};
+
+Promise.all([
+	preprocessTypes(),
+	preprocessComponents(),
+]).then(() => {
 	console.log("JSDoc preprocess ready.");
 });
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-e0658a650",
+  "version": "0.0.0-e55c2cec6",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",