@ui5/webcomponents-tools 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/CHANGELOG.md

@@ -3,6 +3,228 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.11.0-rc.0...v2.11.0-rc.1) (2025-05-15)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0...v2.11.0-rc.0) (2025-05-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.10.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.3...v2.10.0) (2025-05-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.10.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.2...v2.10.0-rc.3) (2025-05-01)
+
+
+### Bug Fixes
+
+* escape backslash when processing component's css ([#11425](https://github.com/SAP/ui5-webcomponents/issues/11425)) ([2c4dc74](https://github.com/SAP/ui5-webcomponents/commit/2c4dc744fb06f79ec77df6cbe725723a75eecb87))
+
+
+### Features
+
+* **ui5-button:** make click button preventable ([#11318](https://github.com/SAP/ui5-webcomponents/issues/11318)) ([1f4aa92](https://github.com/SAP/ui5-webcomponents/commit/1f4aa927d2841e0c51f665ab2bdb851b1d030c35))
+
+
+
+
+
+# [2.10.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.1...v2.10.0-rc.2) (2025-04-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.10.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.0...v2.10.0-rc.1) (2025-04-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.10.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.1-rc.0...v2.10.0-rc.0) (2025-04-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [2.9.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0...v2.9.1-rc.0) (2025-04-10)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.9.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.3...v2.9.0) (2025-04-04)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.9.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.2...v2.9.0-rc.3) (2025-04-03)
+
+
+### Bug Fixes
+
+* **framework:** fix fetching "id" (indonesian) language ([#11251](https://github.com/SAP/ui5-webcomponents/issues/11251)) ([9a36df5](https://github.com/SAP/ui5-webcomponents/commit/9a36df5dc2191758abd665d6fb1014d645e322f7)), closes [#11233](https://github.com/SAP/ui5-webcomponents/issues/11233)
+
+
+
+
+
+# [2.9.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.1...v2.9.0-rc.2) (2025-03-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.9.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.0...v2.9.0-rc.1) (2025-03-20)
+
+
+### Bug Fixes
+
+* **tools:** fix icon imports to i18n texts ([#11091](https://github.com/SAP/ui5-webcomponents/issues/11091)) ([472ffdc](https://github.com/SAP/ui5-webcomponents/commit/472ffdcd602a4da53a839829e5a5bcf017ff618c))
+
+
+
+
+
+# [2.9.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [2.8.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0...v2.8.1-rc.0) (2025-03-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [2.6.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2-rc.0...v2.6.2) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [2.6.2-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.1...v2.6.2-rc.0) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [2.6.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0...v2.6.1) (2025-01-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [2.6.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.5...v2.6.0) (2025-01-07)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/assets-meta.js

@@ -10,10 +10,6 @@ const assetsMeta = {
 	    "sap_horizon_dark",
 	    "sap_horizon_hcb",
 	    "sap_horizon_hcw",
-      "sap_horizon_exp",
-	    "sap_horizon_dark_exp",
-	    "sap_horizon_hcb_exp",
-	    "sap_horizon_hcw_exp",
     ],
   },
   "languages": {
@@ -42,7 +38,7 @@ const assetsMeta = {
       "hi",
       "hr",
       "hu",
-      "in",
+      "id",
       "it",
       "iw",
       "ja",

package/components-package/eslint.js

@@ -17,8 +17,7 @@ const getTsModeOverrides = () => {
 		],
 		parserOptions: {
 			"project": [
-				"./tsconfig.json",
-				"./cypress/tsconfig.json",
+				"./tsconfig.json"
 			],
 			EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
 		},
@@ -42,8 +41,10 @@ const getTsModeOverrides = () => {
 
 	const tsxConfiguration = JSON.parse(JSON.stringify(tsConfiguration));
 	tsxConfiguration.files = ["*.tsx"];
+	tsxConfiguration.plugins.push("jsx-no-leaked-values");
 	tsxConfiguration.rules = {
 		...tsxConfiguration.rules,
+		"jsx-no-leaked-values/jsx-no-leaked-values": "error",
 		"@typescript-eslint/unbound-method": "off", // to be able to attach on* listeners
 		"@typescript-eslint/no-misused-promises": "off", // to be able to have async event listeners
 		"operator-linebreak": "off",
@@ -53,43 +54,9 @@ const getTsModeOverrides = () => {
 		"comma-dangle": "off"
 	};
 
-	const cypressConfiguration = {
-		"files": ["**/cypress/**/*.ts"],
-
-		"plugins": [
-			"cypress"
-		],
-		extends: [
-			"plugin:cypress/recommended"
-		],
-		"env": {
-			"cypress/globals": true
-		},
-		"rules": {
-			"max-nested-callbacks": 0,
-			"@typescript-eslint/no-namespace": "off",
-			"cypress/no-assigning-return-values": "error",
-			"cypress/no-unnecessary-waiting": "error",
-			"cypress/assertion-before-screenshot": "warn",
-			"cypress/no-force": "warn",
-			"cypress/no-async-tests": "error",
-			"cypress/no-async-before": "error",
-			"cypress/no-pause": "error",
-			"import/no-extraneous-dependencies": [
-				"error",
-				{
-					"devDependencies": [
-						"**/cypress/**/*.ts"
-					]
-				}
-			]
-		}
-	}
-
 	return [
 		tsConfiguration,
-		tsxConfiguration,
-		cypressConfiguration,
+		tsxConfiguration
 	];
 }
 

package/components-package/nps.js

@@ -9,6 +9,25 @@ if (process.env.DEPLOY) {
 	websiteBaseUrl = "/ui5-webcomponents/nightly/";
 }
 
+const cypressEnvVariables = (options, predefinedVars) => {
+	let variables = [];
+	const { cypress_code_coverage, cypress_acc_tests } = options.internal ?? {};
+
+	// Handle environment variables like TEST_SUITE  
+	if (predefinedVars) {
+		variables = [...predefinedVars];
+	}
+
+	// The coverage task is always registered and requires an explicit variable whether to generate a report or not
+	variables.push(`CYPRESS_COVERAGE=${!!cypress_code_coverage}`);
+
+	if (cypress_acc_tests) {
+		variables.push("CYPRESS_UI5_ACC=true");
+	}
+
+	return variables.length ? `cross-env ${variables.join(" ")}` : "";
+}
+
 const getScripts = (options) => {
 
 	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
@@ -17,9 +36,9 @@ const getScripts = (options) => {
 	const createIllustrationsJSImportsScript = illustrations.join(" && ");
 
 	// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
-    const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
+	const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
 
-	const tsOption = !options.legacy;
+	const tsOption = !options.legacy || options.jsx;
 	const tsCommandOld = tsOption ? "tsc" : "";
 	let tsWatchCommandStandalone = tsOption ? "tsc --watch" : "";
 	// this command is only used for standalone projects. monorepo projects get their watch from vite, so opt-out here
@@ -31,7 +50,7 @@ const getScripts = (options) => {
 	if (tsOption) {
 		try {
 			require("typescript");
-		} catch(e) {
+		} catch (e) {
 			console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
 			process.exit(e.code);
 		}
@@ -122,8 +141,10 @@ const getScripts = (options) => {
 		},
 		start: "nps prepare watch.devServer",
 		test: `node "${LIB}/test-runner/test-runner.js"`,
-		"test-cy-ci": `yarn cypress run --component --browser chrome`,
-		"test-cy-open": `yarn cypress open --component --browser chrome`,
+		"test-cy-ci": `${cypressEnvVariables(options)} yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `${cypressEnvVariables(options, ["TEST_SUITE=SUITE1"])} yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-2": `${cypressEnvVariables(options, ["TEST_SUITE=SUITE2"])} yarn cypress run --component --browser chrome`,
+		"test-cy-open": `${cypressEnvVariables(options)} yarn cypress open --component --browser chrome`,
 		"test-suite-1": `node "${LIB}/test-runner/test-runner.js" --suite suite1`,
 		"test-suite-2": `node "${LIB}/test-runner/test-runner.js" --suite suite2`,
 		startWithScope: "nps scope.prepare scope.watchWithBundle",
@@ -142,8 +163,8 @@ const getScripts = (options) => {
 		},
 		generateAPI: {
 			default: tsOption ? "nps generateAPI.generateCEM generateAPI.validateCEM" : "",
-			generateCEM: `cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs" ${ options.dev ? "--dev" : "" }`,
-			validateCEM: `node "${LIB}/cem/validate.js" ${ options.dev ? "--dev" : "" }`,
+			generateCEM: `${options.dev ? "cross-env UI5_CEM_MODE='dev'" : ""} cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs"`,
+			validateCEM: `${options.dev ? "cross-env UI5_CEM_MODE='dev'" : ""} node "${LIB}/cem/validate.js"`,
 		},
 	};
 

package/components-package/vite.config.js

@@ -1,13 +1,9 @@
 // vite.config.js
-import { defineConfig } from 'vite';
-import virtualIndex from '../lib/dev-server/virtual-index-html-plugin.js';
+const virtualIndex = require('../lib/dev-server/virtual-index-html-plugin.js');
 
-export default defineConfig(async () => {
-	const data = await virtualIndex();
-	return {
-		build: {
-			emptyOutDir: false,
-		},
-		plugins: [data],
-	}
-  })
+module.exports = {
+	build: {
+		emptyOutDir: false,
+	},
+	plugins: [virtualIndex()],
+};

package/components-package/wdio.js

@@ -60,7 +60,7 @@ exports.config = {
 			// to run chrome headless the following flags are required
 			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
 			args: [
-				'--headless=old',
+				'--headless',
 				'--disable-search-engine-choice-screen',
 				'--start-maximized',
 				'--no-sandbox',

package/lib/cem/custom-elements-manifest.config.mjs

@@ -27,6 +27,7 @@ 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 devMode = process.env.UI5_CEM_MODE === "dev";
 
 const extractClassNodeJSDoc = node => {
 	const fileContent = node.getFullText();
@@ -127,7 +128,7 @@ function processClass(ts, classNode, moduleDoc) {
 	}
 
 	// Events
-	currClass.events = findAllDecorators(classNode, "event")
+	currClass.events = findAllDecorators(classNode, ["event", "eventStrict"])
 		?.map(event => processEvent(ts, event, classNode, moduleDoc));
 
 	const filename = classNode.getSourceFile().fileName;
@@ -451,14 +452,6 @@ export default {
 				}
 			},
 			moduleLinkPhase({ moduleDoc }) {
-				for (let i = 0; i < moduleDoc.declarations.length; i++) {
-					const shouldRemove = processPublicAPI(moduleDoc.declarations[i]) || ["function", "variable"].includes(moduleDoc.declarations[i].kind)
-					if (shouldRemove) {
-						moduleDoc.declarations.splice(i, 1);
-						i--;
-					}
-				}
-
 				moduleDoc.path = moduleDoc.path?.replace(/^src/, "dist").replace(/\.ts$/, ".js");
 
 				moduleDoc.exports = moduleDoc.exports.
@@ -482,41 +475,51 @@ export default {
 						})
 					}
 				})
+			},
+			packageLinkPhase({ customElementsManifest }) {
+				customElementsManifest.modules.forEach(moduleDoc => {
+					for (let i = 0; i < moduleDoc.declarations.length; i++) {
+						const shouldRemove = processPublicAPI(moduleDoc.declarations[i]) || ["function", "variable"].includes(moduleDoc.declarations[i].kind)
+						if (shouldRemove) {
+							moduleDoc.declarations.splice(i, 1);
+							i--;
+						}
+					}
 
-				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)
-								})
-							}
+					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)
+					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.`,)
+							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) {
+					})
+				});
+
+				if (devMode) {
 					displayDocumentationErrors();
 				}
 			}

package/lib/cem/schema-internal.json

@@ -407,6 +407,9 @@
     "CssCustomProperty": {
       "additionalProperties": false,
       "properties": {
+        "inheritedFrom": {
+          "$ref": "#/definitions/Reference"
+        },
         "default": {
           "type": "string"
         },
@@ -443,6 +446,9 @@
       "additionalProperties": false,
       "description": "The description of a CSS Part",
       "properties": {
+        "inheritedFrom": {
+          "$ref": "#/definitions/Reference"
+        },
         "deprecated": {
           "description": "Whether the CSS shadow part is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
           "type": [
@@ -1222,6 +1228,9 @@
     "Slot": {
       "additionalProperties": false,
       "properties": {
+        "inheritedFrom": {
+          "$ref": "#/definitions/Reference"
+        },
         "_ui5propertyName": {
           "type": "string"
         },

package/lib/cem/utils.mjs

@@ -241,7 +241,7 @@ const allowedTags = {
     eventParam: [...commonTags],
     method: [...commonTags, "param", "returns", "override"],
     class: [...commonTags, "constructor", "class", "abstract", "experimental", "implements", "extends", "slot", "csspart"],
-    enum: [...commonTags],
+    enum: [...commonTags, "experimental",],
     enumMember: [...commonTags, "experimental",],
     interface: [...commonTags, "experimental",],
 };
@@ -256,19 +256,29 @@ const tagMatchCallback = (tag, tagName) => {
 };
 
 const findDecorator = (node, decoratorName) => {
-    return node?.decorators?.find(
+    return (node?.modifiers || node?.decorators)?.find(
         (decorator) =>
             decorator?.expression?.expression?.text === decoratorName
     );
 };
 
 const findAllDecorators = (node, decoratorName) => {
-    return (
-        node?.decorators?.filter(
-            (decorator) =>
-                decorator?.expression?.expression?.text === decoratorName
-        ) || []
-    );
+    if (typeof decoratorName === "string") {
+        return (node?.modifiers || node?.decorators)?.filter(decorator => decorator?.expression?.expression?.text === decoratorName) || [];
+    }
+
+    if (Array.isArray(decoratorName)) {
+        return (node?.modifiers || node?.decorators)?.filter(decorator => {
+            if (decorator?.expression?.expression?.text) {
+                return decoratorName.includes(decorator.expression.expression.text);
+            }
+
+            return false;
+        }
+        ) || [];
+    }
+
+    return [];
 };
 
 const hasTag = (jsDoc, tagName) => {

package/lib/cem/validate.js

@@ -1,11 +1,6 @@
 const fs = require('fs');
 const Ajv = require('ajv');
 const path = require('path');
-const yargs = require('yargs/yargs')
-const { hideBin } = require('yargs/helpers')
-const argv = yargs(hideBin(process.argv))
-	.argv;
-
 // Load your JSON schema
 const extenalSchema = require('./schema.json');
 const internalSchema = require('./schema-internal.json');
@@ -14,47 +9,49 @@ const internalSchema = require('./schema-internal.json');
 const inputFilePath = path.join(process.cwd(), "dist/custom-elements.json"); // Update with your file path
 const customManifest = fs.readFileSync(inputFilePath, 'utf8');
 const inputDataInternal = JSON.parse(customManifest);
+const devMode = process.env.UI5_CEM_MODE === "dev";
 
 inputDataInternal.modules.forEach(moduleDoc => {
-    moduleDoc.exports = moduleDoc.exports.
-    filter(e => moduleDoc.declarations.find(d => d.name === e.declaration.name && ["class", "function", "variable", "enum"].includes(d.kind)) || e.name === "default");
+	moduleDoc.exports = moduleDoc.exports.
+		filter(e => moduleDoc.declarations.find(d => d.name === e.declaration.name && ["class", "function", "variable", "enum"].includes(d.kind)) || e.name === "default");
 })
 
 const clearProps = (data) => {
-    if (Array.isArray(data)) {
-        for (let i = 0; i < data.length; i++) {
-            if (typeof data[i] === "object") {
-                if (["enum", "interface"].includes(data[i].kind)) {
-                    data.splice(i, 1);
-                    i--;
-                } else {
-                    clearProps(data[i]);
-                }
-            }
-        }
-    } else if (typeof data === "object") {
-        Object.keys(data).forEach(prop => {
-            if (prop.startsWith("_ui5")) {
-                delete data[prop];
-            } else if (typeof data[prop] === "object") {
-                clearProps(data[prop]);
-            }
-        });
-    }
+	if (Array.isArray(data)) {
+		for (let i = 0; i < data.length; i++) {
+			if (typeof data[i] === "object") {
+				if (["enum", "interface"].includes(data[i].kind)) {
+					data.splice(i, 1);
+					i--;
+				} else {
+					clearProps(data[i]);
+				}
+			}
+		}
+	} else if (typeof data === "object") {
+		Object.keys(data).forEach(prop => {
+			if (prop.startsWith("_ui5")) {
+				delete data[prop];
+			} else if (typeof data[prop] === "object") {
+				clearProps(data[prop]);
+			}
+		});
+	}
 
-    return data;
+	return data;
 }
 
 const ajv = new Ajv({ allowUnionTypes: true, allError: true })
 let validate = ajv.compile(internalSchema)
 
 // Validate the JSON data against the schema
-if (argv.dev) {
-    if (validate(inputDataInternal)) {
-        console.log('Internal custom  element manifest is validated successfully');
-    } else {
-        throw new Error(`Validation of internal custom elements manifest failed: ${validate.errors}`);
-    }
+if (devMode) {
+	if (validate(inputDataInternal)) {
+		console.log('Internal custom  element manifest is validated successfully');
+	} else {
+		console.log(validate.errors)
+		throw new Error(`Validation of internal custom elements manifest failed: ${validate.errors}`);
+	}
 }
 
 const inputDataExternal = clearProps(JSON.parse(JSON.stringify(inputDataInternal)));
@@ -62,9 +59,9 @@ validate = ajv.compile(extenalSchema)
 
 // Validate the JSON data against the schema
 if (validate(inputDataExternal)) {
-    console.log('Custom element manifest is validated successfully');
-    fs.writeFileSync(inputFilePath, JSON.stringify(inputDataExternal, null, 2), 'utf8');
-    fs.writeFileSync(inputFilePath.replace("custom-elements", "custom-elements-internal"), JSON.stringify(inputDataInternal, null, 2), 'utf8');
-} else if (argv.dev) {
-    throw new Error(`Validation of public custom elements manifest failed: ${validate.errors}`);
-    }
+	console.log('Custom element manifest is validated successfully');
+	fs.writeFileSync(inputFilePath, JSON.stringify(inputDataExternal, null, 2), 'utf8');
+	fs.writeFileSync(inputFilePath.replace("custom-elements", "custom-elements-internal"), JSON.stringify(inputDataInternal, null, 2), 'utf8');
+} else if (devMode) {
+	throw new Error(`Validation of public custom elements manifest failed: ${validate.errors}`);
+}

package/lib/create-icons/index.js

@@ -21,8 +21,8 @@ export default "${collection}/${name}";
 export { pathData, ltr, accData };`;
 
 
-const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
-import { ${accData.key} } from "../generated/i18n/i18n-defaults.js";
+const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName, versioned) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { ${accData.key} } from "${versioned ? "../" : "./"}generated/i18n/i18n-defaults.js";
 
 const name = "${name}";
 const pathData = "${pathData}";
@@ -84,8 +84,9 @@ const createIcons = async (file) => {
 		const acc = iconData.acc;
 		const packageName =  json.packageName;
 		const collection =  json.collection;
+		const versioned = json.version;
 
-		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName) : iconTemplate(name, pathData, ltr, collection, packageName);
+		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName, versioned) : iconTemplate(name, pathData, ltr, collection, packageName);
 
 		promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
 		promises.push(fs.writeFile(path.join(destDir, `${name}.svg`), svgTemplate(pathData)));
@@ -96,7 +97,7 @@ const createIcons = async (file) => {
 		// - "@ui5/ui5-webcomponents-icons/dist/v5/accept.js"
 		// - "@ui5/ui5-webcomponents-icons/dist/v4/accept.js"
 
-		if (json.version) {
+		if (versioned) {
 			// The exported value from the top level (unversioned) icon module depends on whether the collection is the default,
 			// to add or not the collection name to the exported value:
 			// For the default collection (SAPIcons) we export just the icon name - "export default { 'accept' }"

package/lib/create-new-component/{tsFileContentTemplate.js → Component.js}

@@ -1,12 +1,12 @@
-const tsFileContentTemplate = (componentName, tagName, library, packageName) => {
+const Component = (componentName, tagName, library, packageName) => {
 	return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
-import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
+import ${componentName}Template from "./${componentName}Template.js";
 
 // Styles
 import ${componentName}Css from "./generated/themes/${componentName}.css.js";
@@ -30,10 +30,9 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  */
 @customElement({
 	tag: "${tagName}",
-	renderer: litRender,
+	renderer: jsxRenderer,
 	styles: ${componentName}Css,
 	template: ${componentName}Template,
-	dependencies: [],
 })
 
 /**
@@ -42,8 +41,12 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  *
  * @public
  */
-@event("interact", { detail: { /* event payload ( optional ) */ } })
+@event("interact")
 class ${componentName} extends UI5Element {
+	eventDetails!: {
+		"interact": void,
+	};
+
 	/**
 	 * Defines the value of the component.
 	 *
@@ -68,4 +71,4 @@ export default ${componentName};
 `;
 };
 
-module.exports = tsFileContentTemplate;
+module.exports = Component;

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

@@ -0,0 +1,12 @@
+const ComponentTemplate = (componentName) => {
+	return `import type ${componentName} from "./${componentName}.js";
+
+export default function ${componentName}Template(this: ${componentName}) {
+	return (
+		<div>Hello World!</div>
+	);
+}
+`;
+};
+
+module.exports = ComponentTemplate;

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

@@ -1,16 +1,17 @@
 const fs = require("fs");
 const prompts = require("prompts");
-const tsFileContentTemplate = require("./tsFileContentTemplate.js");
+const Component = require("./Component.js");
+const ComponentTemplate= require("./ComponentTemplate.js");
 
 /**
- * Hyphanates the given PascalCase string, f.e.:
- * Foo -> "my-foo" (adds preffix)
- * FooBar -> "foo-bar"
+ * Hyphanates the given PascalCase string and adds prefix, f.e.:
+ * Foo -> "my-foo"
+ * FooBar -> "my-foo-bar"
  */
 const hyphaneteComponentName = (componentName) => {
 	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
 
-	return result.includes("-") ? result : `my-${result}`;
+	return `my-${result}`;
 };
 
 /**
@@ -61,12 +62,12 @@ const generateFiles = (componentName, tagName, library, packageName) => {
 	const filePaths = {
 		"main": `./src/${componentName}.ts`,
 		"css": `./src/themes/${componentName}.css`,
-		"template": `./src/${componentName}.hbs`,
+		"template": `./src/${componentName}Template.tsx`,
 	};
 
-	fs.writeFileSync(filePaths.main, tsFileContentTemplate(componentName, tagName, library, packageName), { flag: "wx+" });
+	fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
 	fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
-	fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
+	fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
 
 	console.log(`Successfully generated ${filePaths.main}`);
 	console.log(`Successfully generated ${filePaths.css}`);
@@ -74,8 +75,8 @@ const generateFiles = (componentName, tagName, library, packageName) => {
 
 	// Change the color of the output
 	console.warn('\x1b[33m%s\x1b[0m', `
-	Make sure to import the component in your bundle by using:
-	import "./dist/${componentName}.js";`);
+Now, import the component in src/bundle.esm.ts via: "import ${componentName} from ./${componentName}.js";
+And, add it to your HTML: <${tagName}></${tagName}>.`);
 }
 
 // Main function

package/lib/css-processors/css-processor-components.mjs

@@ -22,7 +22,8 @@ let customPlugin = {
         build.onEnd(result => {
             result.outputFiles.forEach(async f => {
                 // scoping
-                const newText = scopeVariables(f.text, packageJSON);
+                let newText = scopeVariables(f.text, packageJSON);
+                newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
                 await mkdir(path.dirname(f.path), {recursive: true});
                 writeFile(f.path, newText);
 

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

@@ -1,23 +1,17 @@
-const virtualIndexPlugin = async () => {
-	const path = await import("path");
-	const { globby } = await import("globby");
-	const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
-
-	const pagesPerFolder = {};
-	files.forEach(file => {
-		let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
-		folder.push(path.basename(file));
-	});
+const virtualIndexPlugin = () => {
+	return {
+		name: 'virtual-index-html',
+		async config() {
+			const path = (await import("path")).default;
+			const globby = (await import("globby")).globby;
+			const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
 
-	const rollupInput = {};
+			const rollupInput = {};
 
-	files.forEach(file => {
-		rollupInput[file] = path.resolve(process.cwd(), file);
-	})
+			files.forEach(file => {
+				rollupInput[file] = path.resolve(process.cwd(), file);
+			});
 
-	return {
-		name: 'virtual-index-html',
-		config() {
 			return {
 				build: {
 					rollupOptions: {
@@ -26,7 +20,17 @@ const virtualIndexPlugin = async () => {
 				}
 			}
 		},
-		configureServer(server) {
+		async configureServer(server) {
+			const path = (await import("path")).default;
+			const globby = (await import("globby")).globby;
+			const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
+
+			const pagesPerFolder = {};
+			files.forEach(file => {
+				let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
+				folder.push(path.basename(file));
+			});
+
 			server.middlewares.use((req, res, next) => {
 				if (req.url === "/") {
 					const folders = Object.keys(pagesPerFolder);
@@ -37,8 +41,8 @@ const virtualIndexPlugin = async () => {
 						const pages = pagesPerFolder[folder];
 						return `<h1>${folder}</h1>
 							${pages.map(page => {
-								return `<li><a href='${folder}/${page}'>${page}</a></li>`
-							}).join("")}
+							return `<li><a href='${folder}/${page}'>${page}</a></li>`
+						}).join("")}
 						`
 					}).join("")}`);
 				} else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-4e88b8243",
+  "version": "0.0.0-50f1454ef",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,6 @@
     "sapui5",
     "ui5"
   ],
-  "types": "./types/index.d.ts",
   "scripts": {},
   "bin": {
     "wc-dev": "bin/dev.js",
@@ -22,7 +21,7 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "@wdio/cli": "^7.19.7",
@@ -42,13 +41,11 @@
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
     "custom-element-jet-brains-integration": "^1.4.4",
-    "cypress": "^13.11.0",
-    "cypress-real-events": "^1.12.0",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-cypress": "^3.4.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-no-leaked-values": "^0.1.24",
     "esprima": "^4.0.1",
     "getopts": "^2.3.0",
     "glob": "^7.1.6",
@@ -69,6 +66,7 @@
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
     "vite": "^5.4.8",
+    "vite-plugin-istanbul": "^6.0.2",
     "wdio-chromedriver-service": "^7.3.2"
   },
   "peerDependencies": {
@@ -81,9 +79,7 @@
     }
   },
   "devDependencies": {
-    "cypress-ct-lit": "^0.4.0",
-    "cypress-real-events": "^1.12.0",
-    "esbuild": "^0.19.9",
+    "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   }
 }

package/components-package/cypress/support/commands.js

@@ -1,39 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-import "cypress-real-events";

package/components-package/cypress/support/component-index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<meta name="sap-allowedThemeOrigins" content="https://example.com">
-	<title>Components App</title>
-	<script data-ui5-config type="application/json">{}</script>
-</head>
-
-<body>
-	<div data-cy-root></div>
-</body>
-
-</html>

package/components-package/cypress/support/component.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="cypress" />
-import { RenderOptions, HTMLTemplateResult } from 'lit';
-import "cypress-real-events";
-
-export type Renderable = HTMLTemplateResult;
-export interface MountUI5Options extends MountLitTemplateOptions {
-	ui5Configuration: object;
-}
-export type MountOptions = Partial<MountUI5Options>;
-export declare function mount<T extends keyof HTMLElementTagNameMap = any>(component: string | Renderable, options?: MountOptions): Cypress.Chainable<JQuery<HTMLElementTagNameMap[T]>>;
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			/**
-			 * Mount your component into Cypress sandbox
-			 * @param component content to render by lit-html render function
-			 * @param options render options for custom rendering
-			 */
-			mount: typeof mount;
-		}
-	}
-}
-

package/components-package/cypress/support/component.js

@@ -1,34 +0,0 @@
-import { setupHooks } from '@cypress/mount-utils';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { mount } from 'cypress-ct-lit'
-import "./commands.js";
-
-let dispose;
-
-function cleanup() {
-	dispose?.();
-}
-
-function ui5Mount(component, options = {}) {
-	const configurationScript = document.head.querySelector("script[data-ui5-config]")
-	cleanup();
-
-	if (options.ui5Configuration) {
-		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
-
-	}
-
-	dispose = () => {
-		configurationScript.innerHTML = "{}";
-	}
-
-	if (typeof component === "string") {
-		return mount(unsafeHTML(component), options)
-	}
-
-	return mount(component, options)
-}
-
-setupHooks(cleanup);
-
-Cypress.Commands.add('mount', ui5Mount)

package/components-package/cypress.config.js

@@ -1,19 +0,0 @@
-const { defineConfig } = require('cypress')
-const path = require("path");
-
-module.exports = defineConfig({
-	component: {
-		supportFile: path.join(__dirname, "cypress/support/component.js"),
-		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
-		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
-		devServer: {
-			framework: 'cypress-ct-lit',
-			bundler: 'vite',
-		}
-	},
-	video: false,
-	screenshotOnRunFailure: false,
-	scrollBehavior: false,
-	viewportHeight: 1080,
-	viewportWidth: 1440,
-})

package/types/index.d.ts

@@ -1 +0,0 @@
-import "../components-package/cypress/support/component"