@ui5/webcomponents-tools 0.0.0-8db0ce01a → 0.0.0-9c26e8e4f

package/CHANGELOG.md

@@ -3,6 +3,163 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/SAP/ui5-webcomponents/compare/v1.4.0...v1.5.0) (2022-07-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.4.0](https://github.com/SAP/ui5-webcomponents/compare/v1.3.1...v1.4.0) (2022-05-25)
+
+
+### Features
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
+## [1.3.1](https://github.com/SAP/ui5-webcomponents/compare/v1.3.0...v1.3.1) (2022-04-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.3.0](https://github.com/SAP/ui5-webcomponents/compare/v1.2.4...v1.3.0) (2022-04-19)
+
+
+### Bug Fixes
+
+* **localization:** fix js error if "sh" locale set ([#4905](https://github.com/SAP/ui5-webcomponents/issues/4905)) ([979bca2](https://github.com/SAP/ui5-webcomponents/commit/979bca2)), closes [#4904](https://github.com/SAP/ui5-webcomponents/issues/4904)
+
+
+
+
+
+## [1.2.4](https://github.com/SAP/ui5-webcomponents/compare/v1.2.3...v1.2.4) (2022-03-30)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.2.3](https://github.com/SAP/ui5-webcomponents/compare/v1.2.2...v1.2.3) (2022-03-23)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.2.2](https://github.com/SAP/ui5-webcomponents/compare/v1.2.1...v1.2.2) (2022-03-22)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.2.1](https://github.com/SAP/ui5-webcomponents/compare/v1.2.0...v1.2.1) (2022-03-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.2.0](https://github.com/SAP/ui5-webcomponents/compare/v1.1.2...v1.2.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* correct scoping issues with several components ([#4820](https://github.com/SAP/ui5-webcomponents/issues/4820)) ([621dc20](https://github.com/SAP/ui5-webcomponents/commit/621dc20))
+* display methods in child components API ([#4792](https://github.com/SAP/ui5-webcomponents/issues/4792)) ([1929d08](https://github.com/SAP/ui5-webcomponents/commit/1929d08))
+
+
+### Features
+
+* **jsdoc:** remove attr name for Object props ([#4680](https://github.com/SAP/ui5-webcomponents/issues/4680)) ([1741bd6](https://github.com/SAP/ui5-webcomponents/commit/1741bd6)), closes [#4674](https://github.com/SAP/ui5-webcomponents/issues/4674)
+
+
+
+
+
+## [1.1.2](https://github.com/SAP/ui5-webcomponents/compare/v1.1.1...v1.1.2) (2022-01-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.1.1](https://github.com/SAP/ui5-webcomponents/compare/v1.1.0...v1.1.1) (2022-01-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.1.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.2...v1.1.0) (2022-01-21)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.0.2](https://github.com/SAP/ui5-webcomponents/compare/v1.0.1...v1.0.2) (2021-11-29)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.0.1](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0...v1.0.1) (2021-11-10)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.0.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.16...v1.0.0) (2021-11-10)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+# [1.0.0-rc.16](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.15...v1.0.0-rc.16) (2021-11-09)
+
+
+
+### Features
+
+* **tools:** create an npm init script ([#4090](https://github.com/SAP/ui5-webcomponents/issues/4090)) ([5608e04](https://github.com/SAP/ui5-webcomponents/commit/5608e04))
+
+
+
+# [1.0.0-rc.15](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.14...v1.0.0-rc.15) (2021-07-23)
+
+
+### Bug Fixes
+
+* **tools:** fix build error on MacOS 11 from rollup-plugin-terser ([#3347](https://github.com/SAP/ui5-webcomponents/issues/3347)) ([59892c4](https://github.com/SAP/ui5-webcomponents/commit/59892c4)), closes [#2515](https://github.com/SAP/ui5-webcomponents/issues/2515)
+
+
+
+
+
+
 # [1.0.0-rc.14](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.13...v1.0.0-rc.14) (2021-04-01)
 
 

package/README.md

@@ -1,24 +1,23 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
 # UI5 Web Components - Tools
 
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 Provides libraries, configuration files and build artifacts, 
 used by other UI5 Web Components packages, such as `main` and `fiori`. 
 
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
 - [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/assets-meta.js

@@ -8,7 +8,12 @@ const assetsMeta = {
       "sap_belize_hcb",
       "sap_belize_hcw",
       "sap_fiori_3_hcb",
-      "sap_fiori_3_hcw"
+      "sap_fiori_3_hcw",
+	  "sap_horizon",
+	  "sap_horizon_dark",
+	  "sap_horizon_hcb",
+	  "sap_horizon_hcw",
+	  "sap_horizon_exp"
     ]
   },
   "languages": {
@@ -131,6 +136,7 @@ const assetsMeta = {
       "sk",
       "sl",
       "sr",
+      "sr_Latn",
       "sv",
       "th",
       "tr",

package/bin/dev.js

@@ -10,11 +10,7 @@ if (command === "watch") {
 		command = `watch.${argument}`;
 	}
 } else if (command === "test") {
-	if (argument === "--no-server") { // yarn test --no-server
-		command = `test.run`;
-	} else if (argument) { // yarn test test/specs/Button.spec.js
-		command = `test.spec --spec ${argument}`;
-	}
+	command = `test ${process.argv.slice(3).join(" ")}`;
 }
 
 child_process.execSync(`npx nps "${command}"`, {stdio: 'inherit'});

package/components-package/nps.js

@@ -1,30 +1,53 @@
 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;
+
 
 const getScripts = (options) => {
 
-	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}`);
+	let illustrationsScript = illustrations.join(" && ");
+
+	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")}"`;
+	}
 
+	let eslintConfig;
+	if (fs.existsSync("config/.eslintrc.js")) {
+		// old project setup where config file is in separate folder
+		eslintConfig = "--config config/.eslintrc.js";
+	} else if (fs.existsSync(".eslintrc.js")) {
+		// preferred way of custom configuration in root project folder
+		eslintConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		eslintConfig = `--config  "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
+	}
+		
 	const scripts = {
-		clean: "rimraf dist && rimraf .port",
-		lint: "eslint . --config config/.eslintrc.js",
-		lintfix: "eslint . --config config/.eslintrc.js --fix",
+		clean: 'rimraf dist && rimraf .port && nps "scope.testPages.clean"',
+		lint: `eslint . ${eslintConfig}`,
+		lintfix: `eslint . ${eslintConfig}`,
 		prepare: {
-			default: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples",
-			es5: "nps clean build.templates build.styles build.i18n build.jsonImports copy.es5 build.samples"
+			default: "nps clean prepare.all",
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.api" "nps build.illustrations"',
+			styleRelated: "nps build.styles build.jsonImports",
 		},
 		build: {
-			default: "nps lint prepare.es5 build.bundle",
+			default: "nps lint prepare build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/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/",
+				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,
 				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
@@ -37,32 +60,21 @@ const getScripts = (options) => {
 				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`,
 			},
-			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`,
-			}
+			bundle: `vite build ${viteConfig}`,
+			api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
+			illustrations: illustrationsScript
 		},
 		copy: {
-			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill-placeholder",
-			es5: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
+			default: "nps copy.src copy.props",
 			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`
 		},
 		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"',
+			default: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"',
+			devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
 			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/'
-			},
+			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
@@ -73,34 +85,26 @@ const getScripts = (options) => {
 				},
 			},
 			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
-			samples: 'chokidar "test/**/*.sample.html" -c "nps build.samples"',
+			api: 'chokidar "test/**/*.sample.html" -c "nps build.api"',
 			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",
-		},
-		startWithScope: "nps scope.prepare scope.dev",
+		start: "nps prepare watch.devServer",
+		test: `node "${LIB}/test-runner/test-runner.js"`,
+		"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",
 		scope: {
 			prepare: "nps scope.lint prepare scope.testPages",
 			lint: `node "${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`,
+				clean: "rimraf test/pages/scoped",
+				copy: `node "${LIB}/copy-and-watch/index.js" --silent "test/pages/**/*" test/pages/scoped`,
+				replace: `node "${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: 'concurrently "nps scope.watch" "nps scope.bundle" ',
+			watch: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.props" "nps watch.styles"',
+			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 		}
 	};
 

package/components-package/postcss.themes.js

@@ -1,8 +1,11 @@
 const postcssImport = require('postcss-import');
-const combineSelectors = require('postcss-combine-duplicated-selectors');
+const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
 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: [
@@ -17,7 +20,7 @@ module.exports = {
 				},
 			]
 		},),
-		postcssCSStoJSON({toReplace: 'src'}),
-		postcssCSStoESM({toReplace: 'src'}),
+		postcssCSStoJSON({toReplace: 'src', packageName}),
+		postcssCSStoESM({toReplace: 'src', packageName}),
 	]
 };

package/components-package/vite.config.js

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

package/components-package/wdio.js

@@ -50,7 +50,7 @@ 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': {
@@ -82,7 +82,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 +99,14 @@ 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', 'devtools',
+		['static-server', {
+			folders: [
+				{ mount: '/', path: './dist' },
+			],
+			port: '4567',
+		}],
+	],
 	// options
 	chromeDriverArgs: ['--port=9515'], // default
 	// Framework you want to run your specs with.
@@ -152,9 +159,9 @@ exports.config = {
 	 * @param {Array.<Object>} capabilities list of capabilities details
 	 * @param {Array.<String>} specs List of spec file paths that are to be run
 	 */
-	before: function (capabilities, specs) {
-		browser.addCommand("isFocusedDeep", function () {
-			return browser.execute(function (elem) {
+	before: async function (capabilities, specs) {
+		await browser.addCommand("isFocusedDeep", async function () {
+			return browser.executeAsync(function (elem, done) {
 				let activeElement = document.activeElement;
 
 				while (activeElement.shadowRoot) {
@@ -164,47 +171,69 @@ exports.config = {
 						break;
 					}
 				}
-				return elem === activeElement;
+				done(elem === activeElement);
 			}, this);
 		}, true);
 
-		browser.addCommand("setProperty", function(property, value) {
-			return browser.execute((elem, property, value) => {
-				return elem[property] = value;
+		await browser.addCommand("isFocusedDeepElement", async function (element) {
+			return browser.executeAsync(function (elem, element, done) {
+				let activeElement = document.activeElement;
+
+				while (activeElement.shadowRoot) {
+					if (activeElement.shadowRoot.activeElement) {
+						activeElement = activeElement.shadowRoot.activeElement;
+					} else {
+						break;
+					}
+				}
+				done(element === activeElement);
+			}, this, element);
+		}, true);
+
+		await browser.addCommand("setProperty", async function(property, value) {
+			return browser.executeAsync((elem, property, value, done) => {
+				elem[property] = value;
+				done();
 			}, this, property, value);
 		}, true);
 
-		browser.addCommand("setAttribute", function(attribute, value) {
-			return browser.execute((elem, attribute, value) => {
-				return elem.setAttribute(attribute, value);
+		await browser.addCommand("setAttribute", async function(attribute, value) {
+			return browser.executeAsync((elem, attribute, value, done) => {
+				elem.setAttribute(attribute, value);
+				done();
 			}, this, attribute, value);
 		}, true);
 
-		browser.addCommand("removeAttribute", function(attribute) {
-			return browser.execute((elem, attribute) => {
-				return elem.removeAttribute(attribute);
+		await browser.addCommand("removeAttribute", async function(attribute) {
+			return browser.executeAsync((elem, attribute, done) => {
+				elem.removeAttribute(attribute);
+				done();
 			}, this, attribute);
 		}, true);
 
-		browser.addCommand("hasClass", function(className) {
-			return browser.execute((elem, className) => {
-				return elem.classList.contains(className);
+		await browser.addCommand("hasClass", async function(className) {
+			return browser.executeAsync((elem, className, done) => {
+				done(elem.classList.contains(className));
 			}, this, className);
 		}, true);
 
-		browser.addCommand("getStaticAreaItemClassName", function(selector) {
-			return browser.execute(async (selector) => {
+		await browser.addCommand("getStaticAreaItemClassName", async function(selector) {
+			return browser.executeAsync(async (selector, done) => {
 				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
-				return staticAreaItem.host.classList[0];
+				done(staticAreaItem.host.classList[0]);
 			}, selector);
 		}, false);
+
+		await browser.addLocatorStrategy('activeElement', (selector) => {
+			return document.querySelector(selector).shadowRoot.activeElement;
+		});
 	},
 	/**
 	 * Runs before a WebdriverIO command gets executed.
 	 * @param {String} commandName hook command name
 	 * @param {Array} args arguments that command would receive
 	 */
-	beforeCommand: function (commandName, args) {
+	beforeCommand: async function (commandName, args) {
 		const waitFor = [
 			"$",
 			"$$",
@@ -223,11 +252,12 @@ exports.config = {
 			"isExisting",
 			"isFocused",
 			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
 			"shadow$",
 			"shadow$$",
 		];
 		if (waitFor.includes(commandName)) {
-			browser.executeAsync(function (done) {
+			await browser.executeAsync(function (done) {
 				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
 			});
 		}
@@ -277,12 +307,13 @@ exports.config = {
 	 * @param {Number} result 0 - command success, 1 - command error
 	 * @param {Object} error error object if any
 	 */
-	afterCommand: function (commandName, args, result, error) {
+	afterCommand: async function (commandName, args, result, error) {
 
 		// url -> set configuration first
 		if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
-			browser.execute(function() {
+			await browser.executeAsync(function(done) {
 				window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
+				done();
 			});
 		}
 
@@ -292,20 +323,31 @@ exports.config = {
 			"click",
 			"doubleClick",
 			"dragAndDrop",
-			"keys",
 			"pause",
 			"removeAttribute", // custom
+			"scrollIntoView",
 			"setAttribute", // custom
 			"setProperty", // custom
 			"setValue",
 			"setWindowSize",
 			"touchAction",
-			"url"
+			"url",
 		];
+
+		const waitForWithDelay = [
+			"keys",
+		];
+
 		if (waitFor.includes(commandName)) {
-			browser.executeAsync(function (done) {
+			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);
+			});
 		}
 	},
 	/**