@ui5/webcomponents-tools 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/components-package/eslint.js

@@ -1,3 +1,65 @@
+const fs = require("fs");
+const path = require("path");
+const tsMode = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
+
+/**
+ * Returns eslint rules specific to typescript files
+ * @returns
+ */
+const getTsModeOverrides = () => {
+	const tsConfiguration = {
+		files: ["*.ts"],
+		parser: "@typescript-eslint/parser",
+		plugins: ["@typescript-eslint"],
+		extends: [
+			"plugin:@typescript-eslint/recommended",
+			"plugin:@typescript-eslint/recommended-requiring-type-checking"
+		],
+		parserOptions: {
+			"project": [
+				"./tsconfig.json"
+			],
+			EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+		},
+		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",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+			"@typescript-eslint/no-unsafe-call": "off",
+			"@typescript-eslint/no-non-null-assertion": "off",
+			"@typescript-eslint/no-empty-function": "off",
+			"@typescript-eslint/no-empty-interface": "off",
+			"lines-between-class-members": "off",
+		}
+	};
+
+	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",
+		"no-nested-ternary": "off",
+		"implicit-arrow-linebreak": "off",
+		"function-paren-newline": "off",
+		"comma-dangle": "off"
+	};
+
+	return [
+		tsConfiguration,
+		tsxConfiguration
+	];
+}
+
 module.exports = {
 	"env": {
 		"browser": true,
@@ -5,6 +67,7 @@ module.exports = {
 	},
 	"root": true,
 	"extends": "airbnb-base",
+	"overrides": tsMode ? getTsModeOverrides() : [],
 	"parserOptions": {
 		"ecmaVersion": 2018,
 		"sourceType": "module"
@@ -47,6 +110,7 @@ module.exports = {
 		"curly": [2, "all"],
 		// "default-case": 1, // removed for UI5 WebComponents
 		"import/extensions": ["error", "always"], // override for UI5 WebComponents
+		"import/order": "off",
 		"no-alert": 2,
 		"no-caller": 2,
 		"no-div-regex": 2,
@@ -88,7 +152,7 @@ module.exports = {
 		"no-shadow-restricted-names": 2,
 		"no-undef-init": 2,
 		"no-undef": 2,
-		"no-unused-vars": [2, {"vars":"all", "args":"none"}],
+		"no-unused-vars": [2, { "vars": "all", "args": "none" }],
 
 		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
 		"camelcase": [1, { "properties": "never" }], // added for UI5 WebComponents
@@ -104,7 +168,7 @@ module.exports = {
 		"no-new-object": 2,
 		"no-spaced-func": 2,
 		"quote-props": [2, "as-needed", { "keywords": true, "unnecessary": false }],
-		"semi-spacing": [1, {"before": false, "after": true}],
+		"semi-spacing": [1, { "before": false, "after": true }],
 		"semi": 2,
 		"keyword-spacing": 2,
 		"space-infix-ops": 2,

package/components-package/nps.js

@@ -1,113 +1,174 @@
 const path = require("path");
 const fs = require("fs");
-
 const LIB = path.join(__dirname, `../lib/`);
-const polyfillDir = path.dirname(require.resolve("@webcomponents/webcomponentsjs"));
-const polyfillPath = path.join(polyfillDir, "{*.js,*.map,*.md,bundles/**/*.*}");
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+let websiteBaseUrl = "/";
+
+const isPreview = !!process.env.PR_NUMBER;
+const getPreviewBaseUrl = () => {
+	if (process.env.DEPLOYMENT_TYPE === "netlify_preview") {
+		return "/";
+	}
+	return `/webcomponents/pr-${process.env.PR_NUMBER}/`;
+}
+
+if (process.env.DEPLOY) {
+	websiteBaseUrl = "/webcomponents/";
+} else if (process.env.DEPLOY_NIGHTLY) {
+	websiteBaseUrl = "/webcomponents/nightly/";
+} else if (isPreview) {
+	websiteBaseUrl = getPreviewBaseUrl();
+}
 
 const getScripts = (options) => {
+	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
+	const illustrationsData = options.illustrationsData || [];
+	const createIllustrationsJSImportsScript = {
+		default: `ui5nps-p ${illustrationsData.map(illustrations => `build.illustrations.build-${illustrations.set}-${illustrations.collection}`).join(" ")}` // concurently,
+	}
+	illustrationsData.forEach((illustration) => {
+		createIllustrationsJSImportsScript[`build-${illustration.set}-${illustration.collection}`] = `ui5nps-script "${LIB}create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath} ${illustration.collection}`
+	});
+	// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
+	const createIllustrationsLoadersScript = {
+		default: `ui5nps-p ${illustrationsData.map(illustrations => `build.jsImports.illustrationsLoaders.generate-${illustrations.set}-${illustrations.collection}`).join(" ")}` // concurently,
+	}
+	illustrationsData.forEach((illustrations) => {
+		createIllustrationsLoadersScript[`generate-${illustrations.set}-${illustrations.collection}`] = `ui5nps-script ${LIB}generate-js-imports/illustrations.js ${illustrations.path} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(",")}`
+	});
 
-	const port = options.port || 8080; // preferred port
-	const portStep = options.portStep || 1; // step to check for available ports, if preferred port is already used
-	let illustrations = options.illustrationsData || [];
 
-	illustrations = illustrations.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	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
+	if (options.noWatchTS) {
+		tsWatchCommandStandalone = "";
+	}
 
-	let illustrationsScript = illustrations.join(" && ");
+	if (tsOption) {
+		try {
+			require("typescript");
+		} 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);
+		}
+	}
+
+	let viteConfig;
+	if (fs.existsSync("config/vite.config.js")) {
+		// old project setup where config file is in separate folder
+		viteConfig = "-c config/vite.config.js";
+	} else if (fs.existsSync("vite.config.js")) {
+		// preferred way of custom configuration in root project folder
+		viteConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+	}
 
 	const scripts = {
-		clean: "rimraf dist && rimraf .port",
-		lint: "eslint . --config config/.eslintrc.js",
-		lintfix: "eslint . --config config/.eslintrc.js --fix",
+		__ui5envs: {
+			UI5_CEM_MODE: options.dev,
+			UI5_TS: `${tsOption}`,
+			CSS_VARIABLES_TARGET: options.cssVariablesTarget ?? "root",
+			CYPRESS_COVERAGE: !!(options.internal?.cypress_code_coverage),
+		},
+		clean: {
+			"default": "ui5nps clean.generated clean.dist scope.testPages.clean",
+			"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
+			"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
+		},
+		lint: `ui5nps-script "${LIB}eslint/eslint.js"`,
+		lintfix: `ui5nps-script "${LIB}eslint/eslint.js" --fix`,
+		generate: {
+			default: `ui5nps prepare.all`,
+			all: `ui5nps-p build.templates build.i18n prepare.styleRelated copyProps build.illustrations`, // concurently
+			styleRelated: "ui5nps build.styles build.jsonImports build.jsImports",
+		},
 		prepare: {
-			default: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples build.illustrations",
-			es5: "nps clean build.templates build.styles build.i18n build.jsonImports copy.es5 build.samples build.illustrations"
+			default: `ui5nps clean prepare.all copy copyProps prepare.typescript generateAPI`,
+			all: `ui5nps-p build.templates build.i18n prepare.styleRelated build.illustrations`, // concurently
+			styleRelated: "ui5nps build.styles build.jsonImports build.jsImports",
+			typescript: tsCommandOld,
 		},
 		build: {
-			default: "nps lint prepare.es5 build.bundle",
-			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
+			default: "ui5nps prepare lint build.bundle", // build.bundle2
+			templates: options.legacy ? `node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
 			styles: {
-				default: "nps build.styles.themes build.styles.components",
-				themes: "postcss src/**/parameters-bundle.css --config config/postcss.themes --base src --dir dist/css/",
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
+				default: `ui5nps-p build.styles.themes build.styles.components`, // concurently
+				themes: `ui5nps-script "${LIB}css-processors/css-processor-themes.mjs"`,
+				themesWithWatch: `ui5nps-script "${LIB}css-processors/css-processor-themes.mjs" -w`,
+				components: `ui5nps-script "${LIB}css-processors/css-processor-components.mjs"`,
+				componentsWithWatch: `ui5nps-script "${LIB}css-processors/css-processor-components.mjs" -w`,
 			},
 			i18n: {
-				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
-				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
+				default: "ui5nps build.i18n.defaultsjs build.i18n.json",
+				defaultsjs: `ui5nps-script "${LIB}i18n/defaults.js" src/i18n src/generated/i18n`,
+				json: `ui5nps-script "${LIB}i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
-				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
-				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes dist/generated/json-imports`,
-				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
+				default: "ui5nps build.jsonImports.themes build.jsonImports.i18n",
+				themes: `ui5nps-script "${LIB}generate-json-imports/themes.js" src/themes src/generated/json-imports`,
+				i18n: `ui5nps-script "${LIB}generate-json-imports/i18n.js" src/i18n src/generated/json-imports`,
 			},
-			bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
-			samples: {
-				default: "nps build.samples.api build.samples.docs",
-				api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
-				docs: `node "${LIB}/documentation/index.js" dist/api.json`,
+			jsImports: {
+				default: "ui5nps build.jsImports.illustrationsLoaders",
+				illustrationsLoaders: createIllustrationsLoadersScript,
 			},
-			illustrations: illustrationsScript
+			bundle: `ui5nps-script "${LIB}vite-bundler/vite-bundler.mjs" ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
+			bundle2: ``,
+			illustrations: createIllustrationsJSImportsScript,
 		},
+		copyProps: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/`,
+		copyPropsWithWatch: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/ --watch --safe --skip-initial-copy`,
+		copySrcWithWatch: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/ --watch --safe --skip-initial-copy`,
 		copy: {
-			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill-placeholder",
-			es5: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
-			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
-			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
-			test: `node "${LIB}/copy-and-watch/index.js" --silent "test/**/*.*" dist/test-resources`,
-			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" --silent "${polyfillPath}" dist/webcomponentsjs/`,
-			"webcomponents-polyfill-placeholder": `node "${LIB}/polyfill-placeholder/index.js"`
+			default: options.legacy ? "ui5nps copy.src copy.props" : "",
+			src: options.legacy ? `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/` : "",
+			props: options.legacy ? `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/` : "",
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles" "nps watch.i18n"',
-			es5: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle.es5" "nps watch.styles" "nps watch.i18n"',
-			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
-			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
-			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
-			bundle: {
-				default: 'rollup --config config/rollup.config.js -w --environment DEV,DEPLOY_PUBLIC_PATH:/resources/',
-				es5: 'rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/'
-			},
+			default: `ui5nps-p watch.templates watch.typescript watch.src watch.styles watch.i18n watch.props`, // concurently
+			devServer: 'ui5nps-p watch.default watch.bundle', // concurently
+			src: options.legacy ? 'ui5nps copySrcWithWatch' : "",
+			typescript: tsWatchCommandStandalone,
+			props: 'ui5nps copyPropsWithWatch',
+			bundle: `ui5nps-script ${LIB}dev-server/dev-server.mjs ${viteConfig}`,
 			styles: {
-				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
-				themes: 'nps "build.styles.themes -w"',
-				components: {
-					default: 'concurrently "nps watch.styles.components.existingFiles" "nps watch.styles.components.newFiles"',
-					existingFiles: `nps "build.styles.components -w"`,
-					newFiles: `node "${LIB}/postcss-new-files/index.js" --srcFiles="src/themes/*.css"`,
-				},
+				default: 'ui5nps-p watch.styles.themes watch.styles.components', // concurently
+				themes: 'ui5nps build.styles.themesWithWatch',
+				components: `ui5nps build.styles.componentsWithWatch`,
 			},
-			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
-			samples: 'chokidar "test/**/*.sample.html" -c "nps build.samples"',
-			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
-		},
-		dev: {
-			default: 'concurrently "nps serve" "nps watch"',
-			es5: 'concurrently "nps serve" "nps watch.es5"'
-		},
-		start: "nps prepare dev",
-		serve: `node "${LIB}/serve/index.js" --dir="dist/" --port=${port} --portStep=${portStep} --packageName="${packageName}"`,
-		test: {
-			// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
-			default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-			run: "cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js",
-			spec: "wdio run config/wdio.conf.js",
+			templates: options.legacy ? `ui5nps-script "${LIB}chokidar/chokidar.js" "src/**/*.hbs" "ui5nps build.templates"` : "",
+			i18n: `ui5nps-script "${LIB}chokidar/chokidar.js" "src/i18n/messagebundle.properties" "ui5nps build.i18n.defaultsjs"`
 		},
-		startWithScope: "nps scope.prepare scope.dev",
+		start: "ui5nps prepare watch.devServer",
+		test: `ui5nps-script "${LIB}/test-runner/test-runner.js"`,
+		"test-cy-ci": `cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `cypress run --component --browser chrome --spec "**/specs/[A-C]*.cy.{js,jsx,ts,tsx},**/specs/[^D-Z]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-ci-suite-2": `cypress run --component --browser chrome --spec "**/specs/[D-L]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-ci-suite-3": `cypress run --component --browser chrome --spec "**/specs/[M-S]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-ci-suite-4": `cypress run --component --browser chrome --spec "**/specs/[T-Z]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-open": `cypress open --component --browser chrome`,
+		startWithScope: "ui5nps scope.prepare scope.watchWithBundle",
 		scope: {
-			prepare: "nps scope.lint prepare scope.testPages",
-			lint: `node "${LIB}/scoping/lint-src.js"`,
+			prepare: "ui5nps scope.lint scope.testPages",
+			lint: `ui5nps-script "${LIB}scoping/lint-src.js"`,
 			testPages: {
-				default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
-				clean: "rimraf dist/test-resources/pages/scoped",
-				copy: `node "${LIB}/copy-and-watch/index.js" --silent "dist/test-resources/pages/**/*" dist/test-resources/scoped`,
-				replace: `node "${LIB}/scoping/scope-test-pages.js" dist/test-resources/scoped demo`,
+				default: "ui5nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
+				"clean": `ui5nps-script "${LIB}/rimraf/rimraf.js test/pages/scoped`,
+				copy: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "test/pages/**/*" test/pages/scoped`,
+				replace: `ui5nps-script "${LIB}scoping/scope-test-pages.js" test/pages/scoped demo`,
 			},
-			dev: 'concurrently "nps serve" "nps scope.watch"',
-			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.props" "nps scope.bundle" "nps watch.styles"',
-			bundle: 'rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE'
-		}
+			watchWithBundle: 'ui5nps-p scope.watch scope.bundle', // concurently
+			watch: 'ui5nps-p watch.templates watch.props watch.styles', // concurently
+			bundle: `ui5nps-script ${LIB}dev-server/dev-server.mjs ${viteConfig}`,
+		},
+		generateAPI: {
+			default: tsOption ? "ui5nps generateAPI.generateCEM generateAPI.validateCEM" : "",
+			generateCEM: `ui5nps-script "${LIB}cem/cem.js" analyze --config "${LIB}cem/custom-elements-manifest.config.mjs"`,
+			validateCEM: `ui5nps-script "${LIB}cem/validate.js"`,
+		},
 	};
 
 	return scripts;

package/components-package/postcss.components.js

@@ -1,21 +1 @@
-const postcssImport = require('postcss-import');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs");
-
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-
-module.exports = {
-	plugins: [
-		postcssImport(),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-					mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
-				},
-			]
-		}),
-		postcssCSStoESM({toReplace: 'src', includeDefaultTheme: true, packageName}),
-	]
-};
+module.exports = {}

package/components-package/postcss.themes.js

@@ -1,26 +1 @@
-const postcssImport = require('postcss-import');
-const combineSelectors = require('postcss-combine-duplicated-selectors');
-const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs");
-
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-
-module.exports = {
-	plugins: [
-		postcssImport(),
-		combineSelectors({
-			removeDuplicatedProperties: true
-		}),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-				},
-			]
-		},),
-		postcssCSStoJSON({toReplace: 'src', packageName}),
-		postcssCSStoESM({toReplace: 'src', packageName}),
-	]
-};
+module.exports = {};

package/components-package/vite.config.js

@@ -0,0 +1,9 @@
+// vite.config.js
+const virtualIndex = require('../lib/dev-server/virtual-index-html-plugin.js');
+
+module.exports = {
+	build: {
+		emptyOutDir: false,
+	},
+	plugins: [virtualIndex()],
+};

package/components-package/wdio.js

@@ -1,3 +1,6 @@
+const dns = require("node:dns");
+const assert = require("chai").assert;
+
 exports.config = {
 	//
 	// ====================
@@ -50,13 +53,22 @@ exports.config = {
 		// maxInstances can get overwritten per capability. So if you have an in-house Selenium
 		// grid with only 5 firefox instances available you can make sure that not more than
 		// 5 instances get started at a time.
-		maxInstances: process.env.TRAVIS ? 1 : 5,
+		maxInstances: 5,
 		//
 		browserName: 'chrome',
 		'goog:chromeOptions': {
 			// to run chrome headless the following flags are required
 			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
-			args: ['--headless', '--disable-gpu'],
+			args: [
+				'--headless',
+				'--disable-search-engine-choice-screen',
+				'--start-maximized',
+				'--no-sandbox',
+				'--disable-gpu',
+				'--disable-infobars',
+				'--disable-extensions',
+				'--disable-dev-shm-usage',
+			],
 			// args: ['--disable-gpu'],
 		}
 	}],
@@ -82,7 +94,7 @@ exports.config = {
 	// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
 	// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
 	// gets prepended directly.
-	baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
+	baseUrl: 'http://localhost:4567', // This is important since WDIO 7+ does not accept an empty string for baseUrl
 	path: '',
 	//
 	// Default timeout for all waitFor* commands.
@@ -99,7 +111,13 @@ exports.config = {
 	// Services take over a specific job you don't want to take care of. They enhance
 	// your test setup with almost no effort. Unlike plugins, they don't add new
 	// commands. Instead, they hook themselves up into the test process.
-	services: ['chromedriver'],
+	services: ['chromedriver', ['static-server', {
+			folders: [
+				{ mount: '/', path: './dist' },
+			],
+			port: '4567',
+		}],
+	],
 	// options
 	chromeDriverArgs: ['--port=9515'], // default
 	// Framework you want to run your specs with.
@@ -146,6 +164,9 @@ exports.config = {
 	 */
 	// beforeSession: function (config, capabilities, specs) {
 	// },
+	beforeSession: () => {
+        dns.setDefaultResultOrder('ipv4first');
+    },
 	/**
 	 * Gets executed before test execution begins. At this point you can access to all global
 	 * variables like `browser`. It is the perfect place to define custom commands.
@@ -210,12 +231,17 @@ exports.config = {
 			}, this, className);
 		}, true);
 
-		await browser.addCommand("getStaticAreaItemClassName", async function(selector) {
-			return browser.executeAsync(async (selector, done) => {
-				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
-				done(staticAreaItem.host.classList[0]);
-			}, selector);
-		}, false);
+		await browser.addCommand("hasAttribute", async function(attrName) {
+			return browser.executeAsync((elem, attrName, done) => {
+				done(elem.hasAttribute(attrName));
+			}, this, attrName);
+		}, true);
+
+		await browser.addCommand("matches", async function(selector) {
+			return browser.executeAsync((elem, selector, done) => {
+				done(elem.matches(selector));
+			}, this, selector);
+		}, true);
 
 		await browser.addLocatorStrategy('activeElement', (selector) => {
 			return document.querySelector(selector).shadowRoot.activeElement;
@@ -231,11 +257,12 @@ exports.config = {
 			"$",
 			"$$",
 			"getAttribute",
+			"hasAttribute", // custom
+			"matches", // custom
 			"getCSSProperty",
 			"getHTML",
 			"getProperty",
 			"getSize",
-			"getStaticAreaItemClassName", // custom
 			"getText",
 			"getValue",
 			"hasClass", // custom
@@ -247,7 +274,7 @@ exports.config = {
 			"isFocusedDeep", // custom
 			"isFocusedDeepElement", // custom
 			"shadow$",
-			"shadow$$",
+			"shadow$$"
 		];
 		if (waitFor.includes(commandName)) {
 			await browser.executeAsync(function (done) {
@@ -284,8 +311,17 @@ exports.config = {
 	 * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
 	 * @param {Object} test test details
 	 */
-	// afterTest: function (test) {
-	// },
+	afterTest: async function (test) {
+		// fetch the browser logs and fail the test if there are `console.error` messages with the `[UI5-FWK]` marker
+		const logs = await browser.getLogs('browser');
+		const severeLogs = logs
+			.filter(l => l.level === "SEVERE" && l.message.includes("[UI5-FWK]"))
+			.map(l => l.message);
+
+		if (severeLogs.length) {
+			test.callback(new Error(`[${test.title}]\n\n    ${severeLogs.join("\n    ")}`));
+		}
+	},
 	/**
 	 * Hook that gets executed after the suite has ended
 	 * @param {Object} suite suite details
@@ -316,7 +352,6 @@ exports.config = {
 			"click",
 			"doubleClick",
 			"dragAndDrop",
-			"keys",
 			"pause",
 			"removeAttribute", // custom
 			"scrollIntoView",
@@ -327,10 +362,21 @@ exports.config = {
 			"touchAction",
 			"url",
 		];
+
+		const waitForWithDelay = [
+			"keys",
+		];
+
 		if (waitFor.includes(commandName)) {
 			await browser.executeAsync(function (done) {
 				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
 			});
+		} else if (waitForWithDelay.includes(commandName)) {
+			await browser.executeAsync(function (done) {
+				setTimeout(() => {
+					window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+				}, 10);
+			});
 		}
 	},
 	/**
@@ -357,8 +403,14 @@ exports.config = {
 	 * @param {Array.<Object>} capabilities list of capabilities details
 	 * @param {<Object>} results object containing test results
 	 */
-	// onComplete: function(exitCode, config, capabilities, results) {
-	// },
+	onComplete: function (exitCode, config, capabilities, results) {
+        // The results object looks like: { finished: 0, passed: 0, retries: 0, failed: 0 }.
+        // If all values are 0, consider that no tests were found or executed.
+        if (exitCode === 1 && Object.values(results).every(result => result === 0)) {
+            console.log("✅ No specs were found or executed – treating as success.");
+            process.exit(0);
+        }
+    }
 	/**
 	 * Gets executed when a refresh happens.
 	 * @param {String} oldSessionId session ID of the old session