@ui5/webcomponents-tools 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.1](https://github.com/SAP/ui5-webcomponents/compare/v1.9.0...v1.9.1) (2022-11-10)
+
+
+### Bug Fixes
+
+* **framework:** fix paths for generating illustration imports in nps ([#5997](https://github.com/SAP/ui5-webcomponents/issues/5997)) ([e932f7d](https://github.com/SAP/ui5-webcomponents/commit/e932f7d069ebf10f73219bff7154558b7b0d849e))
+
+
+
+
+
+# [1.9.0](https://github.com/SAP/ui5-webcomponents/compare/v1.8.0...v1.9.0) (2022-10-31)
+
+
+### Bug Fixes
+
+* **framework:** fix contexts management in hbs-2-lit compiler ([#5958](https://github.com/SAP/ui5-webcomponents/issues/5958)) ([94d1619](https://github.com/SAP/ui5-webcomponents/commit/94d16199ed7dc79b21d99a0637533e93af54c90a)), closes [#4701](https://github.com/SAP/ui5-webcomponents/issues/4701)
+
+
+### Features
+
+* **framework:** fetch illustrations on demand ([#5927](https://github.com/SAP/ui5-webcomponents/issues/5927)) ([f8e1033](https://github.com/SAP/ui5-webcomponents/commit/f8e1033643626261dcad8a38f65c325ba9aff99f))
+* **framework:** generate custom elements manifest ([#5964](https://github.com/SAP/ui5-webcomponents/issues/5964)) ([0d62770](https://github.com/SAP/ui5-webcomponents/commit/0d62770cace54fd9aef73d9632dd06d8a83680e9))
+
+
+
+
+
+# [1.8.0](https://github.com/SAP/ui5-webcomponents/compare/v1.7.1...v1.8.0) (2022-10-03)
+
+
+### Features
+
+* **icons:** create type-definitions for icon imports ([#5753](https://github.com/SAP/ui5-webcomponents/issues/5753)) ([2de4a04](https://github.com/SAP/ui5-webcomponents/commit/2de4a045f56e2f166d3e846ff11e6f9d76e98009)), closes [#5747](https://github.com/SAP/ui5-webcomponents/issues/5747) [#5335](https://github.com/SAP/ui5-webcomponents/issues/5335)
+* **main:** add support for custom SVG icons ([#5865](https://github.com/SAP/ui5-webcomponents/issues/5865)) ([d8b7200](https://github.com/SAP/ui5-webcomponents/commit/d8b7200f30c16d94b7f15ddbdf9808d8efbaa38c))
+
+
+
+
+
+## [1.7.1](https://github.com/SAP/ui5-webcomponents/compare/v1.7.0...v1.7.1) (2022-09-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.7.0](https://github.com/SAP/ui5-webcomponents/compare/v1.6.0...v1.7.0) (2022-09-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [1.6.0](https://github.com/SAP/ui5-webcomponents/compare/v1.5.0...v1.6.0) (2022-07-25)
 
 

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,13 +1,21 @@
 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) => {
 
-	let illustrations = options.illustrationsData || [];
-	illustrations = illustrations.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
-	let illustrationsScript = illustrations.join(" && ");
+	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
+	const illustrationsData = options.illustrationsData || [];
+	illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	const createIllustrationsJSImportsScript = illustrations.join(" && ");
+
+	// 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")) {
@@ -32,16 +40,17 @@ const getScripts = (options) => {
 		// no custom configuration - use default from tools project
 		eslintConfig = `--config  "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
 	}
-		
+
 	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"',
-			styleRelated: "nps build.styles build.jsonImports",
+			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`,
@@ -60,9 +69,12 @@ const getScripts = (options) => {
 				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes dist/generated/json-imports`,
 				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
 			},
+			jsImports: {
+				default: "mkdirp dist/generated/js-imports && nps build.jsImports.illustrationsLoaders",
+				illustrationsLoaders: createIllustrationsLoadersScript,
+			},
 			bundle: `vite build ${viteConfig}`,
-			api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
-			illustrations: illustrationsScript
+			illustrations: createIllustrationsJSImportsScript,
 		},
 		copy: {
 			default: "nps copy.src copy.props",
@@ -70,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: {
@@ -85,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",
@@ -105,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: `copy-and-watch "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-icons/index.js

@@ -17,7 +17,7 @@ const packageName = "${packageName}";
 
 registerIcon(name, { pathData, ltr, collection, packageName });
 
-export default "${name}";
+export default "${collection}/${name}";
 export { pathData, ltr, accData };`;
 
 
@@ -33,7 +33,7 @@ const packageName = "${packageName}";
 
 registerIcon(name, { pathData, ltr, accData, collection, packageName });
 
-export default "${name}";
+export default "${collection}/${name}";
 export { pathData, ltr, accData };`;
 
 
@@ -48,6 +48,23 @@ export default "${name}";
 export { pathData, ltr, accData };`;
 
 
+const typeDefinitionTemplate = (name, accData, collection) => `declare const pathData: string;
+declare const ltr: boolean;
+declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
+declare const _default: "${collection}/${name}";
+
+export default _default;
+export { pathData, ltr, accData };`
+
+const collectionTypeDefinitionTemplate = (name, accData) => `declare const pathData: string;
+declare const ltr: boolean;
+declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
+declare const _default: "${name}";
+
+export default _default;
+export { pathData, ltr, accData };`
+
+
 const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<path d="${pathData}"/>
 </svg>`;
@@ -68,9 +85,11 @@ const createIcons = async (file) => {
 
 		promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
 		promises.push(fs.writeFile(path.join(destDir, `${name}.svg`), svgTemplate(pathData)));
+		promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, json.collection)));
 
 		if (json.version) {
 			promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name)));
+            promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(name, acc)));
 		}
 	}
 

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 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

@@ -0,0 +1,373 @@
+const fs = require("fs").promises;
+// https://github.com/webcomponents/custom-elements-manifest/blob/main/schema.json
+
+const camelToKebabMap = new Map();
+const apiIndex = new Map();
+const processedApiIndex = new Set();
+const forbiddenAttributeTypes = ["object", "array"];
+
+const camelToKebabCase = string => {
+	if (!camelToKebabMap.has(string)) {
+		const result = string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+		camelToKebabMap.set(string, result);
+	}
+	return camelToKebabMap.get(string);
+};
+
+const generateJavaScriptExport = entity => {
+	return {
+		declaration: generateRefenrece(entity),
+		deprecated: !!entity.deprecated,
+		kind: "js",
+		name: "default",
+	};
+};
+
+const generateCustomElementExport = entity => {
+	return {
+		declaration: {
+			name: entity.basename,
+			module: `${entity.module}.js`,
+		},
+		deprecated: !!entity.deprecated,
+		kind: "custom-element-definition",
+		name: entity.tagname,
+	};
+};
+
+const generateJavaScriptModule = entity => {
+	return {
+		kind: "javascript-module",
+		path: `${entity.basename}.js`,
+		declarations: [
+			generateCustomElementDeclaration(entity),
+		],
+		exports: [
+			generateJavaScriptExport(entity),
+			generateCustomElementExport(entity),
+		],
+	};
+};
+
+const generateSingleClassField = classField => {
+	let generatedClassField = {
+		deprecated: !!classField.deprecated,
+		kind: "field",
+		name: classField.name,
+		privacy: classField.visibility,
+		static: !!classField.static,
+		type: generateType(classField.type),
+	};
+
+	if (classField.defaultValue) {
+		generatedClassField.default = classField.defaultValue;
+	}
+
+	if (classField.description) {
+		generatedClassField.description = classField.description;
+	}
+
+	return generatedClassField;
+};
+
+const generateSingleParameter = parameter => {
+	let generatedParameter = {
+		deprecated: !!parameter.deprecated,
+		name: parameter.name,
+		type: generateType(parameter.type),
+	};
+
+	if (parameter.description) {
+		generatedParameter.description = parameter.description;
+	}
+
+	if (parameter.optional) {
+		generatedParameter.optional = parameter.optional;
+	}
+
+	return generatedParameter;
+};
+
+const generateParameters = (parameters) => {
+	return parameters.reduce((newParametersArray, parameter) => {
+		newParametersArray.push(generateSingleParameter(parameter));
+
+		return newParametersArray;
+	}, []);
+};
+
+const generateSingleClassMethod = classMethod => {
+	let generatedClassMethod = {
+		deprecated: !!classMethod.deprecated,
+		kind: "method",
+		name: classMethod.name,
+		privacy: classMethod.visibility,
+		static: classMethod.static,
+	};
+
+	if (classMethod.description) {
+		generatedClassMethod.description = classMethod.description;
+	}
+
+	if (classMethod.parameters && classMethod.parameters.length) {
+		generatedClassMethod.parameters = generateParameters(classMethod.parameters);
+	}
+
+	if (classMethod.returnValue) {
+		generatedClassMethod.return = {
+			type: generateType(classMethod.returnValue.type),
+		};
+
+		if (classMethod.returnValue.description) {
+			generatedClassMethod.return.description = classMethod.returnValue.type;
+		}
+	}
+
+	return generatedClassMethod;
+};
+
+const generateClassFields = classFields => {
+	return classFields.reduce((newClassFieldsArray, classField) => {
+		newClassFieldsArray.push(generateSingleClassField(classField));
+
+		return newClassFieldsArray;
+	}, []);
+};
+
+const generateClassMethods = classMethods => {
+	return classMethods.reduce((newClassMethodsArray, classMethod) => {
+		newClassMethodsArray.push(generateSingleClassMethod(classMethod));
+
+		return newClassMethodsArray;
+	}, []);
+};
+
+const generateMembers = (classFields, classMethods) => {
+	return [...generateClassFields(classFields), ...generateClassMethods(classMethods)];
+};
+
+const generateType = type => {
+	const dataType = apiIndex.get(type);
+
+	return {
+		text: dataType && dataType.name.includes(".types.") ?
+			filterPublicApi(dataType.properties)
+				.map(prop => `"${prop.name}"`)
+				.join(" | ") : type,
+	};
+};
+
+const generateSingleAttribute = attribute => {
+	let generatedAttribute = {
+		default: attribute.defaultValue,
+		deprecated: !!attribute.deprecated,
+		fieldName: attribute.name,
+		name: camelToKebabCase(attribute.name),
+		type: generateType(attribute.type),
+	};
+
+	if (attribute.description) {
+		generatedAttribute.description = attribute.description;
+	}
+
+	return generatedAttribute;
+};
+
+const generateAttributes = attributes => {
+	attributes = attributes.reduce((newAttributesArray, attribute) => {
+		newAttributesArray.push(generateSingleAttribute(attribute));
+
+		return newAttributesArray;
+	}, []);
+
+	return attributes;
+};
+
+const generateSingleEvent = event => {
+	let generatedEvent = {
+		deprecated: !!event.deprecated,
+		name: event.name,
+		type: event.native === "true" ? "NativeEvent" : "CustomEvent",
+	};
+
+	if (event.description) {
+		generatedEvent.description = event.description;
+	}
+
+	return generatedEvent;
+};
+
+const generateEvents = events => {
+	events = events.reduce((newEventsArray, event) => {
+		newEventsArray.push(generateSingleEvent(event));
+
+		return newEventsArray;
+	}, []);
+
+	return events;
+};
+
+const generateSingleSlot = slot => {
+	return {
+		deprecated: !!slot.deprecated,
+		description: slot.description,
+		name: slot.name,
+	};
+};
+
+const generateSlots = slots => {
+	slots = slots.reduce((newSlotsArray, event) => {
+		newSlotsArray.push(generateSingleSlot(event));
+
+		return newSlotsArray;
+	}, []);
+
+	return slots;
+};
+
+const generateCustomElementDeclaration = entity => {
+	entity = generateFullComponentApi(entity);
+
+	let generatedCustomElementDeclaration = {
+		deprecated: !!entity.deprecated,
+		customElement: true,
+		kind: entity.basename,
+		name: entity.basename,
+		tagName: entity.tagname,
+	};
+
+	const slots = filterPublicApi(entity.slots);
+	const events = filterPublicApi(entity.events);
+	const classFields = filterPublicApi(entity.properties);
+	const classMethods = filterPublicApi(entity.methods);
+	const attributes = classFields.filter(property => {
+		return property.noattribute !== "true" && property.readonly !== "true" && !forbiddenAttributeTypes.includes(property.type.toLowerCase());
+	});
+
+	if (slots.length) {
+		generatedCustomElementDeclaration.slots = generateSlots(slots);
+	}
+
+	if (events.length) {
+		generatedCustomElementDeclaration.events = generateEvents(events);
+	}
+
+	if (attributes.length) {
+		generatedCustomElementDeclaration.attributes = generateAttributes(attributes);
+	}
+
+	if (entity.description) {
+		generatedCustomElementDeclaration.description = entity.description;
+	}
+
+	if (classFields.length || classMethods.length) {
+		generatedCustomElementDeclaration.members = generateMembers(classFields, classMethods);
+	}
+
+	if (entity.extends && entity.extends !== "HTMLElement") {
+		generatedCustomElementDeclaration.superclass = generateRefenrece(apiIndex.get(entity.extends));
+	}
+
+	return generatedCustomElementDeclaration;
+};
+
+const generateRefenrece = (entity) => {
+	let packageName;
+
+	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.webc.fiori")) {
+		packageName = "@ui5/webcomponents-fiori";
+	} else if (entity.name.includes("sap.ui.webc.base")) {
+		packageName = "@ui5/webcomponents-base";
+	}
+
+	return {
+		module: `${entity.module}.js`,
+		name: `${entity.basename}`,
+		package: packageName,
+	};
+};
+
+const generateFullComponentApi = entity => {
+	const componentProps = ["properties", "slots", "events", "methods"];
+	let parent = apiIndex.get(entity.extends);
+
+	if (!parent) {
+		processedApiIndex.add(entity.name);
+
+		return entity;
+	}
+
+	parent = processedApiIndex.has(entity.extends) ? apiIndex.get(entity.extends) : generateFullComponentApi(parent);
+
+	componentProps.forEach(prop => {
+		if (parent[prop] && parent[prop].length) {
+			if (entity[prop] && entity[prop].length) {
+				const uniqueParentState = parent[prop].filter(pSlot => {
+					return !entity[prop].some(eSlot => eSlot.name === pSlot.name);
+				});
+
+				entity[prop] = entity[prop].concat(uniqueParentState);
+			} else {
+				entity[prop] = [...parent[prop]];
+			}
+		}
+	});
+
+	processedApiIndex.add(entity.name);
+
+	return entity;
+};
+
+const filterPublicApi = array => {
+	return (array || []).filter(el => el.visibility === "public");
+};
+
+const generate = async () => {
+	const apiFilesPaths = [
+		require.resolve("@ui5/webcomponents-base/dist/api.json"),
+		require.resolve("@ui5/webcomponents/dist/api.json"),
+		require.resolve("@ui5/webcomponents-fiori/dist/api.json"),
+	];
+
+	let apiFiles = new Map();
+
+	await Promise.all(apiFilesPaths.map(async (apiFilePath) => {
+		const file = JSON.parse(await fs.readFile(apiFilePath));
+
+		apiFiles.set(apiFilePath, file);
+
+		file.symbols.forEach(symbol => {
+			apiIndex.set(symbol.name, symbol);
+		});
+	}));
+
+	await Promise.all(apiFilesPaths.map(async (apiFilePath) => {
+		if (apiFilePath.includes("base")) {
+			return;
+		}
+
+		let customElementsManifest = {
+			schemaVersion: "1.0.0",
+			readme: "",
+			modules: [],
+		};
+
+		apiFiles.get(apiFilePath).symbols.forEach(entity => {
+			if (entity.tagname) {
+				customElementsManifest.modules.push(generateJavaScriptModule(entity));
+			}
+		});
+
+		await fs.writeFile(apiFilePath.replace("api.json", "custom-elements.json"), JSON.stringify(customElementsManifest));
+	}));
+};
+
+generate().then(() => {
+	console.log("Custom elements manifest generated.");
+});

package/lib/generate-js-imports/illustrations.js

@@ -0,0 +1,72 @@
+const fs = require("fs").promises;
+const path = require('path');
+
+const generate = async () => {
+	const fioriInputFolder = path.normalize(process.argv[2]);
+	const tntInputFolder = path.normalize(process.argv[3]);
+	const outputFile = path.normalize(`${process.argv[4]}/Illustrations.js`);
+
+	const dir = await fs.readdir(fioriInputFolder);
+	const fioriIllustrationsOnFileSystem = dir.map(illustrationName => {
+		const fioriMatches = illustrationName.match(/.*\.js$/);
+		return fioriMatches ? illustrationName : undefined;
+	}).filter(key => !!key);
+
+	const tntDir = await fs.readdir(tntInputFolder);
+	const tntIllustrationsOnFileSystem = tntDir.map(illustrationName => {
+		const tntMatches = illustrationName.match(/.*\.js$/);
+		return tntMatches ? illustrationName : undefined;
+	}).filter(key => !!key);
+
+	// dynamic imports for Fiori illustrations
+	const fioriAvailableIllustrationsArray = `[${fioriIllustrationsOnFileSystem.filter(
+		// skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
+		line => !line.startsWith("sapIllus-Dialog") && !line.startsWith("sapIllus-Scene") && !line.startsWith("sapIllus-Spot") && !line.startsWith("AllIllustrations")).map(illustrationName => `"${illustrationName.replace('.js', '')}"`).join(", ")}]`;
+
+	const fioriDynamicImportLines = fioriIllustrationsOnFileSystem.map(illustrationName =>
+		`\t\tcase "${illustrationName.replace('.js', '')}": return (await import("../../illustrations/${illustrationName}")).default;`).filter(
+			// skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
+			line => !line.startsWith("\t\tcase \"sapIllus-Dialog") && !line.startsWith("\t\tcase \"sapIllus-Scene") && !line.startsWith("\t\tcase \"sapIllus-Spot") && !line.startsWith("\t\tcase \"AllIllustrations")).join("\n");
+
+	// dynamic imports for Tnt illustrations
+	const tntAvailableIllustrationsArray = `[${tntIllustrationsOnFileSystem.filter(
+		// skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
+		line => !line.startsWith("tnt-Dialog") && !line.startsWith("tnt-Scene") && !line.startsWith("tnt-Spot")).map(illustrationName => `"Tnt${illustrationName.replace('.js', '')}"`).join(", ")}]`;
+
+	const tntDynamicImportLines = tntIllustrationsOnFileSystem.map(illustrationName =>
+		`\t\tcase "Tnt${illustrationName.replace('.js', '')}": return (await import("../../illustrations/tnt/${illustrationName}")).default;`).filter(
+			// skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
+			line => !line.startsWith("\t\tcase \"Tnttnt-Dialog") && !line.startsWith("\t\tcase \"Tnttnt-Scene") && !line.startsWith("\t\tcase \"Tnttnt-Spot")).join("\n");
+
+
+	// dynamic imports file content
+	const contentDynamic = `import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+
+const loadIllustration = async (illustrationName) => {
+	switch (illustrationName) {
+${fioriDynamicImportLines}
+${tntDynamicImportLines}
+		default: throw new Error("[Illustrations] Illustration not found: " + illustrationName);
+	}
+};
+	const loadAndCheck = async (illustrationName) => {
+		const data = await loadIllustration(illustrationName);
+		return data;
+	}
+
+
+	${fioriAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));
+	${tntAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));`;
+	
+
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	return Promise.all([fs.writeFile(outputFile, contentDynamic)]);
+};
+
+generate().then(() => {
+	console.log("Generated Illustrations.js");
+})
+.catch(err => {
+	console.error(err);
+	process.exit(1);
+});

package/lib/hbs2lit/src/compiler.js

@@ -17,6 +17,14 @@ const hbs2lit = async (file) => {
 
 	sPreprocessed = removeWhiteSpaces(sPreprocessed);
 
+	// icons hack
+	if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
+		return `
+		let block0 = () => {
+			return svg\`${sPreprocessed}\`
+		}`;
+	}
+
 	const ast = Handlebars.parse(sPreprocessed);
 
 	const pv = new PartialsVisitor();

package/lib/hbs2lit/src/litVisitor2.js

@@ -34,7 +34,7 @@ function HTMLLitVisitor(debug) {
 	this.blocks = {};
 	this.result = "";
 	this.mainBlock = "";
-	this.blockPath = "context";
+	this.blockLevel = 0;
 	this.blockParameters = ["context", "tags", "suffix"];
 	this.paths = []; //contains all normalized relative paths
 	this.debug = debug;
@@ -57,7 +57,6 @@ HTMLLitVisitor.prototype.Program = function(program) {
 		this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
 	} else {
 		this.mainBlock = this.currentKey();
-		this.paths.push(this.blockPath);
 	}
 
 	this.blocks[this.currentKey()] += "html`";
@@ -173,7 +172,7 @@ function visitEachBlock(block) {
 
 	this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
 	this.paths.push(normalizePath.call(this, block.params[0].original));
-	this.blockPath = "item";
+	this.blockLevel++;
 
 	if (this.blockParameters.indexOf("item") === -1) {
 		bParamAdded = true;
@@ -185,8 +184,7 @@ function visitEachBlock(block) {
 		this.blockParameters.shift("item");
 		this.blockParameters.shift("index");
 	}
-	this.blockPath = "context";
-
+	this.blockLevel--;
 	this.blocks[this.currentKey()] += ") }";
 }
 
@@ -195,12 +193,52 @@ function normalizePath(sPath) {
 
 	//read carefully - https://github.com/wycats/handlebars.js/issues/1028
 	//kpdecker commented on May 20, 2015
-	if (result.indexOf("../") === 0) {
-		let absolutePath = replaceAll(this.paths[this.paths.length - 1], ".", "/") + "/" + result;
+
+	if (result.indexOf("@root") === 0) {
+		// Trying to access root context via the HBS "@root" variable.
+		// Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
+		result = result.replace("@root", "context");
+
+	} else if (result.indexOf("../") === 0) {
+		let absolutePath;
+		const levelsUp = (result.match(/..\//g) || []).length;
+
+		if (this.blockLevel <= levelsUp) {
+			// Trying to access root context from nested loops.
+			// Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
+			// Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
+			absolutePath = `context.${replaceAll(result,"../", "")}`;
+		} else {
+			// Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
+			// Example: {{../property}} compiles to "context.property" - when called in a top level loop.
+			// Example: {{../property}} compiles to "item.property" - when called in a nested level loop.
+			// TODO: the second example, although correctly generated to "item.property", "item" will point to the current object within the nested loop,
+			// not the upper level loop as intended. So accessing the upper loop from nested loop is currently not working.
+			absolutePath = replaceAll(this.paths[this.paths.length - 1 - levelsUp], ".", "/") + "/" + result;
+		}
+
 		result = replaceAll(path.normalize(absolutePath), path.sep, ".");
+
 	} else {
-		result = result ? replaceAll(this.blockPath + "/" + result, "/", ".") : this.blockPath;
+		// When neither "@root", nor "../" are used, use the following contexts:
+		// - use "context" - for the top level of execution, e.g "this.blockLevel = 0".
+		// - use "item" - for any nested level, e.g "this.blockLevel > 0".
+		// Example:
+		//
+		// {{text}} -> compiles to "context.text"
+		// {{#each items}}
+				// Item text: {{text}}</div> -> compiles to "item.text"
+				// 	{{#each words}}
+				// 			 Word text: {{text}}</div> -> compiles to "item.text"
+				// 	{{/each}}
+				// 	Item text: {{text}}</div> -> compiles to "item.text"
+		// {{/each}}
+		// {{text}} -> compiles to "context.text"
+
+		const blockPath = this.blockLevel > 0 ? "item" : "context";
+		result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
 	}
+
 	return result;
 }
 

package/lib/i18n/defaults.js

@@ -22,6 +22,15 @@ const generate = async () => {
 	} catch (e) {
 	}
 
+	// Merge messagebundle.properties and messagebundle_en.properties files to generate the default texts.
+	// Note:
+	// (1) at DEV time, it's intuituve to work with the source bundle file - the messagebundle.properties,
+	// and see the changes there take effect.
+	// (2) as the messagebundle.properties file is always written in English,
+	// it makes sense to consider the messagebundle.properties content only when the default language is "en".
+	if (defaultLanguage === "en") {
+		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);  
+	}
 
 	/*
 	 * Returns the single text object to enable single export.

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/plugin.js

@@ -34,6 +34,10 @@
  *   native
  *
  *   noattribute
+ * 
+ *   formEvents
+ * 
+ *   formProperty
  *
  *   allowPreventDefault
  *
@@ -2108,6 +2112,34 @@ exports.defineTags = function(dictionary) {
 			doclet.noattribute = true;
 		}
 	});
+
+	dictionary.defineTag('formEvents', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			if (tag.value) {
+				doclet.formEvents = doclet.formEvents || [];
+				tag.value.split(" ").forEach(function($) {
+					if ( doclet.formEvents.indexOf($) < 0 ) {
+						doclet.formEvents.push($);
+					}
+				});
+			}
+		}
+	});
+
+	dictionary.defineTag('formProperty', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.formProperty = true;
+		}
+	});
+
+	dictionary.defineTag('formAssociated', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.formAssociated = doclet.formAssociated || true;
+		}
+	});
 };
 
 exports.handlers = {

package/lib/jsdoc/preprocess.js

@@ -0,0 +1,147 @@
+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, fileContent) =>  {
+	const index = fileContent.indexOf(comment);
+	return fileContent.substr(index + comment.length).trim().charAt(0) === "@";
+}
+
+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(`^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/jsdoc/template/publish.js

@@ -2820,6 +2820,14 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 						attrib("since", extractVersion(member.since));
 					}
 
+					if ( member.formEvents ) {
+						attrib("formEvents", member.formEvents);
+					}
+
+					if ( member.formEvents ) {
+						attrib("formProperty", member.formProperty);
+					}
+
 					var type = listTypes(member.type);
 					attrib("type", type);
 
@@ -3865,7 +3873,7 @@ function createAPIJS(symbols, filename) {
 
 	var output = [];
 
-	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
+	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|formEvents|formProperty|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
 
 	function isNoKeyword($) { return !rkeywords.test($.name); }
 

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": "0.0.0-e818f286e",
+  "version": "0.0.0-ee3bbe46b",
   "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",