@ui5/webcomponents-tools 1.9.2 → 1.10.0

package/components-package/eslint.js

@@ -5,6 +5,34 @@ module.exports = {
 	},
 	"root": true,
 	"extends": "airbnb-base",
+	overrides: [{
+		files: ["*.ts"],
+		parser: "@typescript-eslint/parser",
+		plugins: ["@typescript-eslint"],
+		extends: [
+			"plugin:@typescript-eslint/recommended",
+			"plugin:@typescript-eslint/recommended-requiring-type-checking"
+		],
+		parserOptions: {
+		  "project": ["./tsconfig.json", "./packages/*/tsconfig.json"],
+		},
+		/**
+		 * Typescript Rules
+		 */
+		rules: {
+			"no-shadow": "off",
+			"@typescript-eslint/no-shadow": ["error"],
+			"@typescript-eslint/no-unsafe-member-access": "off",
+			"@typescript-eslint/no-floating-promises": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+			"@typescript-eslint/no-unsafe-call": "off",
+			"@typescript-eslint/no-non-null-assertion": "off",
+			"@typescript-eslint/no-empty-function": "off",
+			"lines-between-class-members": "off",
+		}
+	}],
 	"parserOptions": {
 		"ecmaVersion": 2018,
 		"sourceType": "module"

package/components-package/nps.js

@@ -1,6 +1,8 @@
 const path = require("path");
 const fs = require("fs");
+const resolve = require("resolve");
 const LIB = path.join(__dirname, `../lib/`);
+const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
 
 const getScripts = (options) => {
 
@@ -12,6 +14,8 @@ const getScripts = (options) => {
 	// The script creates the "dist/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
 	const illustrationDestinationPaths = illustrationsData.map(illustrations => illustrations.destinationPath);
 	const createIllustrationsLoadersScript = options.fioriPackage ? `node ${LIB}/generate-js-imports/illustrations.js ${illustrationDestinationPaths[0]} ${illustrationDestinationPaths[1]} dist/generated/js-imports` : "";
+	const tsCommand = options.typescript ? "tsc" : "";
+	const tsWatchCommand = options.typescript ? "tsc --watch" : "";
 
 	let viteConfig;
 	if (fs.existsSync("config/vite.config.js")) {
@@ -38,14 +42,15 @@ 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: {
-			default: "nps clean prepare.all",
-			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.api" "nps build.illustrations"',
+			default: "nps clean prepare.all generateAPI",
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps typescript" "nps build.illustrations"',
 			styleRelated: "nps build.styles build.jsonImports build.jsImports",
 		},
+		typescript: tsCommand,
 		build: {
 			default: "nps lint prepare build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
@@ -69,7 +74,6 @@ const getScripts = (options) => {
 				illustrationsLoaders: createIllustrationsLoadersScript,
 			},
 			bundle: `vite build ${viteConfig}`,
-			api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
 			illustrations: createIllustrationsJSImportsScript,
 		},
 		copy: {
@@ -78,9 +82,10 @@ const getScripts = (options) => {
 			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"',
+			default: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "nps watch.styles" "nps watch.i18n" "nps watch.props"',
 			devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
+			typescript: tsWatchCommand,
 			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
 			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 			styles: {
@@ -93,7 +98,7 @@ const getScripts = (options) => {
 				},
 			},
 			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
-			api: 'chokidar "test/**/*.sample.html" -c "nps build.api"',
+			api: 'chokidar "test/**/*.sample.html" -c "nps generateAPI"',
 			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
 		start: "nps prepare watch.devServer",
@@ -113,7 +118,14 @@ const getScripts = (options) => {
 			watchWithBundle: 'concurrently "nps scope.watch" "nps scope.bundle" ',
 			watch: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.props" "nps watch.styles"',
 			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
-		}
+		},
+		generateAPI: {
+			default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
+			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/"
+		},
 	};
 
 	return scripts;

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/configTypescript.json

@@ -0,0 +1,29 @@
+{
+	"source": {
+		"include": "jsdoc-dist",
+		"excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js|thirdparty"
+	},
+	"opts" : {
+		"recurse": true,
+		"template" : "template",
+		"destination": ""
+	},
+	"plugins": [
+		"./plugin.js"
+	],
+	"templates" : {
+		"ui5" : {
+			"variants": [
+				"apijson"
+			],
+			"version": "1.62",
+			"apiJsonFolder": "",
+			"apiJsonFile": "dist/api.json",
+			"includeSettingsInConstructor": false
+		}
+	},
+	"tags": {
+		"allowUnknownTags": true,
+		"dictionaries": ["jsdoc"]
+	}
+}

package/lib/jsdoc/preprocess.js

@@ -0,0 +1,146 @@
+const process = require("process");
+const path = require("path");
+const fs = require("fs/promises");
+
+const inputDir = process.argv[2];
+const sourceDir = process.argv[3];
+
+const preprocessTypes = async () => {
+	try {
+		const { globby } = await import("globby");
+		const fileNames = await globby(inputDir + "**/types/*.js");
+
+		return Promise.all(fileNames.map(processTypeFile));
+	} catch(e) {
+		console.log("JSDoc types preprocess failed: ", e);
+	}
+};
+
+const processTypeFile = async (fileName) => {
+	let fileContent = `${await fs.readFile(fileName)}`;
+
+	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[4],
+			value: match[5],
+		};
+	});
+	if (typeData.length === 0) {
+		return;
+	}
+
+	const typeName = path.parse(fileName).name;
+
+	matches = fileContent.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//gm);
+	const comment = matches[0];
+
+	const propsCode = typeData.map(item => {
+		return `${item.comment}\n get ${item.key}() { return "${item.value}"; }`;
+	}).join("\n");
+
+	const newClassCode = `
+	${comment}
+	class ${typeName} {
+		${propsCode}
+	};
+
+	export default ${typeName};`;
+
+	fileContent = newClassCode;
+
+	return fs.writeFile(fileName, fileContent);
+};
+
+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/lib/scoping/get-all-tags.js

@@ -8,18 +8,11 @@ const getTag = file => {
 	return matches ? matches[1] : undefined;
 };
 
-const getAltTag = file => {
-	const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
-	const matches = fileContent.match(/\baltTag\b:\s*\"(.*?)\"/);
-	return matches ? matches[1] : undefined;
-};
-
 const getPackageTags = (packageDir) => {
 	const srcDir = path.join(packageDir, "src/");
 	return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
 		const tag = getTag(file);
-		const altTag = getAltTag(file);
-		return [tag, altTag];
+		return [tag];
 	}).filter(item => !!item);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,6 +21,8 @@
     "directory": "packages/tools"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "@wdio/cli": "^7.19.7",
     "@wdio/devtools-service": "^7.19.7",
     "@wdio/dot-reporter": "^7.19.7",