@ui5/webcomponents-tools 2.6.3 → 2.7.0-rc.1

package/CHANGELOG.md

@@ -3,12 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.6.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.6.3) (2025-01-29)
+# [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
+
 
 
-### Bug Fixes
 
-* **ui5-*:** fix jsx templates boolean checks ([#10516](https://github.com/SAP/ui5-webcomponents/issues/10516)) ([b31c7b5](https://github.com/SAP/ui5-webcomponents/commit/b31c7b5de74272f69287985763f4f01ef46169db)), closes [#10509](https://github.com/SAP/ui5-webcomponents/issues/10509)
+
+# [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
 
 
 

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

@@ -1,3 +1,4 @@
+import '@cypress/code-coverage/support'
 import { setupHooks } from '@cypress/mount-utils';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { mount } from 'cypress-ct-lit'

package/components-package/cypress.config.js

@@ -1,8 +1,13 @@
 const { defineConfig } = require('cypress')
 const path = require("path");
+const coverageTask = require('@cypress/code-coverage/task');
 
 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}"],

package/components-package/nps.js

@@ -122,8 +122,8 @@ 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": `CYPRESS_COVERAGE=true yarn cypress run --component --browser chrome`,
+		"test-cy-open": `CYPRESS_COVERAGE=true 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",

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

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.6.3",
+  "version": "2.7.0-rc.1",
   "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",
@@ -70,6 +71,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": {
@@ -87,5 +89,5 @@
     "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   },
-  "gitHead": "bc2bbd402a353d5feb03a08133742dfaace6f77a"
+  "gitHead": "2f90ed3982de20cc411a1cda852ee98709b15e33"
 }