@ui5/webcomponents-tools 0.0.0-f42e7c18c → 0.0.0-f6676abdd

package/CHANGELOG.md

@@ -3,6 +3,140 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
+# [2.6.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.4...v2.6.0-rc.5) (2025-01-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.6.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.3...v2.6.0-rc.4) (2025-01-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.6.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.2...v2.6.0-rc.3) (2024-12-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.6.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.1...v2.6.0-rc.2) (2024-12-19)
+
+
+### Bug Fixes
+
+* **build:** generation of custom-elements.json ([#10403](https://github.com/SAP/ui5-webcomponents/issues/10403)) ([c4eb55c](https://github.com/SAP/ui5-webcomponents/commit/c4eb55cba3e45677c464df1f8cf2a17e6855f2a0))
+
+
+
+
+
+# [2.6.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.0...v2.6.0-rc.1) (2024-12-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.6.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0...v2.6.0-rc.0) (2024-12-12)
+
+
+### Features
+
+* **framework:** add JSX template support with TypeScript ([#10046](https://github.com/SAP/ui5-webcomponents/issues/10046)) ([f42e7c1](https://github.com/SAP/ui5-webcomponents/commit/f42e7c18c846f923df4fec6ae02f1b4c20c006fa))
+
+
+
+
+
 # [2.5.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.3...v2.5.0) (2024-12-05)
 
 **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": {

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

@@ -36,4 +36,31 @@
 //   }
 // }
 
-import "cypress-real-events";
+import "cypress-real-events";
+
+const realEventCmdCallback = (originalFn, element, ...args) => {
+	cy.get(element)
+		.should($el => {
+			if ($el[0].tagName.includes("-") && $el[0].shadowRoot) {
+				expect($el[0].shadowRoot.hasChildNodes(), "Custom elements with shadow DOM have content in their shadow DOM").to.be.true;
+			}
+		})
+		.and("be.visible")
+		.then(() => {
+			return originalFn(element, ...args)
+		});
+};
+
+const commands = [
+	"realClick",
+	"realHover",
+	"realTouch",
+	"realSwipe",
+	"realMouseDown",
+	"realMouseUp",
+	"realMouseMove"
+];
+
+commands.forEach(cmd => {
+	Cypress.Commands.overwrite(cmd, realEventCmdCallback)
+});

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

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-import { RenderOptions, HTMLTemplateResult } from 'lit';
 import "cypress-real-events";
 
 export type Renderable = HTMLTemplateResult;
@@ -7,13 +6,13 @@ 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]>>;
+export declare function mount(component: JSX.Element, options?: MountOptions): CypressChainable<JQuery<HTMLElement>>;
 declare global {
 	namespace Cypress {
 		interface Chainable {
 			/**
 			 * Mount your component into Cypress sandbox
-			 * @param component content to render by lit-html render function
+			 * @param component content to render by preact render function
 			 * @param options render options for custom rendering
 			 */
 			mount: typeof mount;

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

@@ -1,34 +1,46 @@
-import { setupHooks } from '@cypress/mount-utils';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { mount } from 'cypress-ct-lit'
+import "@cypress/code-coverage/support";
+import { setupHooks, getContainerEl } from "@cypress/mount-utils";
+import { mount as preactMount } from "./cypress-ct-preact.js";
 import "./commands.js";
 
-let dispose;
+function applyConfiguration(options) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]");
+
+	if (options.ui5Configuration) {
+		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+	}
+}
 
 function cleanup() {
-	dispose?.();
+	preactMount(null, getContainerEl());
 }
 
-function ui5Mount(component, options = {}) {
-	const configurationScript = document.head.querySelector("script[data-ui5-config]")
-	cleanup();
+function mount(component, options = {}) {
+	const container = getContainerEl();
 
-	if (options.ui5Configuration) {
-		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+	// Apply custom configuration
+	applyConfiguration(options);
 
-	}
+	// Mount JSX Element
+	preactMount(component, container);
 
-	dispose = () => {
-		configurationScript.innerHTML = "{}";
-	}
+	cy.get(container)
+	.find("*")
+	.should($el => {
+		const shadowrootsExist = [...$el].every(el => {
+			if (el.tagName.includes("-") && el.shadowRoot) {
+				return el.shadowRoot.hasChildNodes();
+			}
 
-	if (typeof component === "string") {
-		return mount(unsafeHTML(component), options)
-	}
+			return true;
+		})
+
+		expect(shadowrootsExist, "Custom elements with shadow DOM have content in their shadow DOM").to.be.true;
+	})
 
-	return mount(component, options)
+	return cy.get(container);
 }
 
 setupHooks(cleanup);
 
-Cypress.Commands.add('mount', ui5Mount)
+Cypress.Commands.add('mount', mount)

package/components-package/cypress/support/cypress-ct-preact.js

@@ -0,0 +1,11 @@
+import { render } from 'preact';
+
+function mount(component, container) {
+	render(null, container);
+
+	return render(component, container);
+}
+
+export {
+	mount,
+};

package/components-package/cypress.config.js

@@ -1,13 +1,27 @@
 const { defineConfig } = require('cypress')
 const path = require("path");
+const coverageTask = require('@cypress/code-coverage/task');
+
+const suites = {
+	SUITE1: [
+		"**/specs/base/*.cy.{jsx,tsx}",
+		"**/specs/[A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+	SUITE2: [
+		"**/specs/[^A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+};
 
 module.exports = defineConfig({
 	component: {
+		setupNodeEvents(on, config) {
+			coverageTask(on, config)
+			return config
+		},
 		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}"],
+		specPattern: suites[process.env.TEST_SUITE] || ["**/specs/**/*.cy.{js,ts,jsx,tsx}"],
 		devServer: {
-			framework: 'cypress-ct-lit',
 			bundler: 'vite',
 		}
 	},
@@ -16,4 +30,4 @@ module.exports = defineConfig({
 	scrollBehavior: false,
 	viewportHeight: 1080,
 	viewportWidth: 1440,
-})
+})

package/components-package/eslint.js

@@ -4,9 +4,9 @@ const tsMode = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
 
 /**
  * Returns eslint rules specific to typescript files
- * @returns 
+ * @returns
  */
-const getTsModeOverrides = () => {	
+const getTsModeOverrides = () => {
 	const tsConfiguration = {
 		files: ["*.ts"],
 		parser: "@typescript-eslint/parser",
@@ -25,6 +25,7 @@ const getTsModeOverrides = () => {
 		rules: {
 			"no-shadow": "off",
 			"@typescript-eslint/consistent-type-imports": "error",
+			"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
 			"@typescript-eslint/no-shadow": ["error"],
 			"@typescript-eslint/no-unsafe-member-access": "off",
 			"@typescript-eslint/no-floating-promises": "off",
@@ -41,8 +42,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,7 +56,7 @@ const getTsModeOverrides = () => {
 	};
 
 	const cypressConfiguration = {
-		"files": ["**/cypress/**/*.ts"],
+		"files": ["**/cypress/**/*.ts", "**/cypress/**/*.tsx"],
 
 		"plugins": [
 			"cypress"
@@ -66,6 +69,7 @@ const getTsModeOverrides = () => {
 		},
 		"rules": {
 			"max-nested-callbacks": 0,
+			"no-unused-expressions": 0,
 			"@typescript-eslint/no-namespace": "off",
 			"cypress/no-assigning-return-values": "error",
 			"cypress/no-unnecessary-waiting": "error",

package/components-package/nps.js

@@ -19,7 +19,7 @@ const getScripts = (options) => {
 	// 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 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
@@ -122,8 +122,11 @@ 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": `cross-env CYPRESS_COVERAGE=true yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `cross-env CYPRESS_COVERAGE=true TEST_SUITE=SUITE1 yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-2": `cross-env CYPRESS_COVERAGE=true TEST_SUITE=SUITE2 yarn cypress run --component --browser chrome`,
+		"test-cy-open": `cross-env CYPRESS_COVERAGE=true yarn cypress open --component --browser chrome`,
+		"test-cy-single": `cross-env yarn cypress run --component --browser chrome --spec ${process.argv[3]}`,
 		"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",

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

@@ -127,9 +127,26 @@ function processClass(ts, classNode, moduleDoc) {
 	}
 
 	// Events
-	currClass.events = findAllDecorators(classNode, "event")
+	currClass.events = findAllDecorators(classNode, ["event", "eventStrict"])
 		?.map(event => processEvent(ts, event, classNode, moduleDoc));
 
+	// TODO: remove after changing Button's click to custom event.
+	// Currently, the Button emits a native click that doesn't need and doesn't have an event decorator,
+	// so we add it manually to the events array.
+	if (currClass.tagName === "ui5-button") {
+		currClass.events.push({
+			"name": "click",
+			"_ui5privacy": "public",
+			"type": {
+				"text": "Event"
+			},
+			"description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
+			"_ui5Cancelable": false,
+			"_ui5allowPreventDefault": false,
+			"_ui5Bubbles": true
+		});
+	}
+
 	const filename = classNode.getSourceFile().fileName;
 	const sourceFile = typeProgram.getSourceFile(filename);
 	const tsProgramClassNode = sourceFile.statements.find(statement => ts.isClassDeclaration(statement) && statement.name?.text === classNode.name?.text);

package/lib/cem/event.mjs

@@ -112,12 +112,12 @@ function processEvent(ts, event, classNode, moduleDoc) {
 			: sinceTag.name;
 	}
 
-	const eventDetailType = classNode.members?.find(member => member.name.text === "eventDetails")?.type;
+	const eventDetailType = classNode.members?.find(member => {
+		return ts.isPropertyDeclaration(member) && member.name.text === "eventDetails"
+	})?.type;
 	const eventDetailRef = eventDetailType?.members?.find(member => member.name.text === name) || eventDetailType?.types?.[eventDetailType?.types?.length - 1]?.members?.find(member => member.name.text === name);
 	const hasGeneric = !!event?.expression?.typeArguments
-	// if (name ==="value-state-change") {
-	// 	debugger
-	// }
+
 	if (commentParams.length) {
 		if (eventDetailRef && hasGeneric) {
 			logDocumentationError(moduleDoc.path, `Event details for event '${name}' has to be defined either with generic or with eventDetails.`)

package/lib/cem/utils.mjs

@@ -3,6 +3,8 @@ import path from "path";
 
 let documentationErrors = new Map();
 
+const packageRegex = /^((@([a-z0-9._-]+)\/)?([a-z0-9._-]+))/;
+
 const getDeprecatedStatus = (jsdocComment) => {
     const deprecatedTag = findTag(jsdocComment, "deprecated");
     return deprecatedTag?.name
@@ -30,7 +32,7 @@ const toKebabCase = str => {
 }
 
 const normalizeDescription = (description) => {
-	return typeof description === 'string' ? description.replaceAll(/^-\s+|^(\n)+|(\n)+$/g, ""): description;
+    return typeof description === 'string' ? description.replaceAll(/^-\s+|^(\n)+|(\n)+$/g, "") : description;
 }
 
 const getTypeRefs = (ts, node, member) => {
@@ -111,10 +113,22 @@ const findPackageName = (ts, sourceFile, typeName) => {
         if (currentModuleSpecifier?.text?.startsWith(".")) {
             return packageJSON?.name;
         } else {
-            return Object.keys(packageJSON?.dependencies || {}).find(
-                (dependency) =>
-                    currentModuleSpecifier?.text?.startsWith(`${dependency}/`)
-            );
+            // my-package/test
+            // my-package
+            // @scope/my-package
+            // my.package
+            // _mypackage
+            // mypackage-
+            // scope/my-package/test
+            // @scope/my-package/test
+            const match = currentModuleSpecifier?.text.match(packageRegex);
+            let packageName;
+
+            if (match) {
+                packageName = match[1];
+            }
+
+            return packageName || undefined;
         }
     }
 };
@@ -156,33 +170,24 @@ const findImportPath = (ts, sourceFile, typeName, modulePath) => {
                     ?.replace("src", "dist")?.replace(".ts", ".js") || undefined
             );
         } else {
-            // my-package/test
-            // my-package
-            // @scope/my-package
-            // my.package
-            // _mypackage
-            // mypackage-
-            // scope/my-package/test
-            // @scope/my-package/test
-            const match = currentModuleSpecifier?.text.match(/^((@([a-z0-9._-]+)\/)?([a-z0-9._-]+))/);
-            let packageName;
+            let packageName = currentModuleSpecifier?.text?.replace(packageRegex, "") || undefined;
 
-            if (match) {
-                packageName = match[1];
+            if (packageName?.startsWith("/")) {
+                packageName = packageName.replace("/", "");
             }
 
-            return packageName || undefined;
+            return packageName;
         }
     }
 };
 
 
 const isClass = text => {
-	return text.includes("@abstract") || text.includes("@class") || text.includes("@constructor");
+    return text.includes("@abstract") || text.includes("@class") || text.includes("@constructor");
 };
 
 const normalizeTagType = (type) => {
-	return type?.trim();
+    return type?.trim();
 }
 
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
@@ -258,12 +263,22 @@ const findDecorator = (node, decoratorName) => {
 };
 
 const findAllDecorators = (node, decoratorName) => {
-    return (
-        node?.decorators?.filter(
-            (decorator) =>
-                decorator?.expression?.expression?.text === decoratorName
-        ) || []
-    );
+    if (typeof decoratorName === "string") {
+        return node?.decorators?.filter(decorator => decorator?.expression?.expression?.text === decoratorName ) || [];
+    }
+
+    if (Array.isArray(decoratorName)) {
+        return node?.decorators?.filter(decorator => {
+                if (decorator?.expression?.expression?.text) {
+                    return decoratorName.includes(decorator.expression.expression.text);
+                }
+
+                return false;
+            }
+        ) || [];
+    }
+
+    return [];
 };
 
 const hasTag = (jsDoc, tagName) => {
@@ -339,7 +354,7 @@ const validateJSDocComment = (fieldType, jsdocComment, node, moduleDoc) => {
         let isValid = false
 
         if (fieldType === "event" && tag?.tag === "param") {
-            isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag({...tag, tag: "eventparam"});
+            isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag({ ...tag, tag: "eventparam" });
         } else {
             isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag(tag);
         }
@@ -368,20 +383,20 @@ const displayDocumentationErrors = () => {
     [...documentationErrors.keys()].forEach(modulePath => {
         const moduleErrors = documentationErrors.get(modulePath);
 
-        console.log(`=== ERROR: ${moduleErrors.length > 1 ? `${moduleErrors.length} problems` :  "Problem"} found in file: ${modulePath}:`)
+        console.log(`=== ERROR: ${moduleErrors.length > 1 ? `${moduleErrors.length} problems` : "Problem"} found in file: ${modulePath}:`)
         moduleErrors.forEach(moduleError => {
             errorsCount++;
             console.log(`\t- ${moduleError}`)
         })
     })
 
-    if(errorsCount) {
+    if (errorsCount) {
         throw new Error(`Found ${errorsCount} errors in the description of the public API.`);
     }
 }
 
 const formatArrays = (typeText) => {
-	return typeText?.replaceAll(/(\S+)\[\]/g, "Array<$1>")
+    return typeText?.replaceAll(/(\S+)\[\]/g, "Array<$1>")
 }
 
 export {

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,6 +1,7 @@
 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.:
@@ -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 via: "import ${componentName} from ./${componentName}.js";
+And, add it to your HTML: <${tagName}></${tagName}>.`);
 }
 
 // Main function

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

@@ -28,7 +28,7 @@ let customPlugin = {
 
                 // JS/TS
                 const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true);
+                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

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

@@ -42,16 +42,11 @@ let scopingPlugin = {
                 // JSON
                 const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
                 await mkdir(path.dirname(jsonPath), {recursive: true});
-                const data = {
-                    packageName: packageJSON.name,
-                    fileName: jsonPath.substr(jsonPath.lastIndexOf("themes")),
-                    content: newText,
-                };
-                writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
+                writeFileIfChanged(jsonPath, JSON.stringify(newText));
 
                 // JS/TS
                 const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
+                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

package/lib/css-processors/shared.mjs

@@ -47,30 +47,10 @@ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () =>
 `;
 };
 
-const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
-	if (tsMode) {
-		return getTSContent(targetFile, packageName, css, includeDefaultTheme);
-	}
-
-	return getJSContent(targetFile, packageName, css, includeDefaultTheme);
-}
-
-const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
-	const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
+const getFileContent = (packageName, css, includeDefaultTheme) => {
 	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
-
-	// tabs are intentionally mixed to have proper identation in the produced file
-	return `${typeImport}
-${defaultTheme}
-const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
-export default styleData;
-	`;
+	return `${defaultTheme}export default ${css.trim()}`
 }
 
-const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
-	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
-
-	return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
-}
 
 export { writeFileIfChanged, stripThemingBaseContent, getFileContent}

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-f42e7c18c",
+  "version": "0.0.0-f6676abdd",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@cypress/code-coverage": "^3.13.10",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "@wdio/cli": "^7.19.7",
@@ -48,7 +49,8 @@
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-cypress": "^3.4.0",
-    "eslint-plugin-import": "^2.22.1",
+    "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",
@@ -62,6 +64,7 @@
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-selector-parser": "^6.0.10",
+    "preact": "^10.25.4",
     "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
@@ -69,6 +72,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 +85,9 @@
     }
   },
   "devDependencies": {
-    "cypress-ct-lit": "^0.4.0",
+    "@cypress/mount-utils": "^4.1.2",
     "cypress-real-events": "^1.12.0",
-    "esbuild": "^0.19.9",
+    "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   }
 }

package/tsconfig.json

@@ -12,5 +12,7 @@
 		"inlineSources": true,
 		"strict": true,
 		"moduleResolution": "node",
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
 	}
 }