@ui5/webcomponents-tools 2.8.1-rc.0 → 2.9.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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

package/components-package/eslint.js

@@ -17,8 +17,7 @@ const getTsModeOverrides = () => {
 		],
 		parserOptions: {
 			"project": [
-				"./tsconfig.json",
-				"./cypress/tsconfig.json",
+				"./tsconfig.json"
 			],
 			EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
 		},
@@ -55,44 +54,9 @@ const getTsModeOverrides = () => {
 		"comma-dangle": "off"
 	};
 
-	const cypressConfiguration = {
-		"files": ["**/cypress/**/*.ts", "**/cypress/**/*.tsx"],
-
-		"plugins": [
-			"cypress"
-		],
-		extends: [
-			"plugin:cypress/recommended"
-		],
-		"env": {
-			"cypress/globals": true
-		},
-		"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",
-			"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

@@ -144,8 +144,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/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();
@@ -532,8 +533,8 @@ export default {
 					}
 				})
 			},
-			packageLinkPhase({ context }) {
-				if (context.dev) {
+			packageLinkPhase() {
+				if (devMode) {
 					displayDocumentationErrors();
 				}
 			}

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,48 @@ 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 {
+		throw new Error(`Validation of internal custom elements manifest failed: ${validate.errors}`);
+	}
 }
 
 const inputDataExternal = clearProps(JSON.parse(JSON.stringify(inputDataInternal)));
@@ -62,9 +58,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.8.1-rc.0",
+  "version": "2.9.0-rc.0",
   "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",
@@ -23,7 +22,6 @@
   },
   "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",
@@ -43,12 +41,9 @@
     "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",
@@ -64,7 +59,6 @@
     "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",
@@ -85,10 +79,8 @@
     }
   },
   "devDependencies": {
-    "@cypress/mount-utils": "^4.1.2",
-    "cypress-real-events": "^1.12.0",
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "b6e950c0969283cb35ce43bf1bb21af4fb22e0f4"
+  "gitHead": "7b5afeeb1f94c3ad54b2e79ac79d0d9e36f0cb7d"
 }

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

@@ -1,66 +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";
-
-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-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,22 +0,0 @@
-/// <reference types="cypress" />
-import "cypress-real-events";
-
-export type Renderable = HTMLTemplateResult;
-export interface MountUI5Options extends MountLitTemplateOptions {
-	ui5Configuration: object;
-}
-export type MountOptions = Partial<MountUI5Options>;
-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 preact render function
-			 * @param options render options for custom rendering
-			 */
-			mount: typeof mount;
-		}
-	}
-}
-

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

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

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

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

package/components-package/cypress.config.js

@@ -1,33 +0,0 @@
-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: suites[process.env.TEST_SUITE] || ["**/specs/**/*.cy.{js,ts,jsx,tsx}"],
-		devServer: {
-			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"