@ui5/webcomponents-tools 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

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: '',
+	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,15 +164,18 @@ 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.
 	 * @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,56 +185,84 @@ 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) => {
-				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
-				return 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;
+		});
 	},
 	/**
 	 * 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 = [
 			"$",
 			"$$",
 			"getAttribute",
+			"hasAttribute", // custom
+			"matches", // custom
 			"getCSSProperty",
 			"getHTML",
 			"getProperty",
 			"getSize",
-			"getStaticAreaItemClassName", // custom
 			"getText",
 			"getValue",
 			"hasClass", // custom
@@ -223,12 +272,13 @@ exports.config = {
 			"isExisting",
 			"isFocused",
 			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
 			"shadow$",
-			"shadow$$",
+			"shadow$$"
 		];
 		if (waitFor.includes(commandName)) {
-			browser.executeAsync(function (done) {
-				window.RenderScheduler.whenFinished().then(done);
+			await browser.executeAsync(function (done) {
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
 			});
 		}
 	},
@@ -261,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
@@ -277,12 +336,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,19 +352,30 @@ 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) {
-				window.RenderScheduler.whenFinished().then(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);
 			});
 		}
 	},

package/icons-collection/nps.js

@@ -2,24 +2,67 @@ const path = require("path");
 
 const LIB = path.join(__dirname, `../lib/`);
 
+const createIconImportsCommand = (options) => {
+	if (!options.versions) {
+		return `node "${LIB}/create-icons/index.js" "${options.collectionName}"`;
+	}
+
+	const command  = { default: "nps" };
+	options.versions.forEach((v) => {
+		command.default += ` build.icons.create${v}`;
+		command[`create${v}`] = `node "${LIB}/create-icons/index.js" "${options.collectionName}" "${v}"`;
+	});
+
+	return command;
+}
+
+const copyIconAssetsCommand = (options) => {
+	if (!options.versions) {
+		return 	{
+			default: "nps copy.json-imports copy.icon-collection",
+			"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" src/generated/assets/`,
+		}
+	}
+
+	const command  = {
+		default: "nps copy.json-imports ",
+		"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+	};
+
+	options.versions.forEach((v) => {
+		command.default += ` copy.icon-collection${v}`;
+		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" src/generated/assets/${v}/`;
+	});
+
+	return command;
+}
+
 const getScripts = (options) => {
+	const createJSImportsCmd = createIconImportsCommand(options);
+	const copyAssetsCmd = copyIconAssetsCommand(options);
+	const tsCommand = !options.legacy ? "tsc --build" : "";
+	const tsCrossEnv = !options.legacy ? "cross-env UI5_TS=true" : "";
 
 	const scripts = {
-		clean: "rimraf dist",
-		copy: {
-			default: "nps copy.json-imports copy.icon-collection",
-			"json-imports": `node "${LIB}/copy-and-watch/index.js" "src/**/*.js" dist/`,
-			"icon-collection": `node "${LIB}/copy-and-watch/index.js" "src/*.json" dist/generated/assets/`
-		},
+		clean: "rimraf dist && rimraf src/generated",
+		copy: copyAssetsCmd,
+		generate: `${tsCrossEnv} nps clean copy build.i18n build.icons build.jsonImports copyjson`,
+		copyjson: "copy-and-watch \"src/generated/**/*.json\" dist/generated/",
 		build: {
-			default: "nps clean copy build.i18n build.icons",
+			default: `${tsCrossEnv} nps clean copy build.i18n typescript build.icons build.jsonImports`,
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
-				json: `mkdirp dist/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
+				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
+				json: `mkdirp src/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n src/generated/assets/i18n`,
 			},
-			icons: `node "${LIB}/create-icons/index.js" "${options.collectionName}"`,
-		}
+			jsonImports: {
+				default: "mkdirp src/generated/json-imports && nps build.jsonImports.i18n",
+				i18n: `node "${LIB}/generate-json-imports/i18n.js" src/generated/assets/i18n src/generated/json-imports`,
+			},
+			icons: createJSImportsCmd,
+		},
+		typescript: tsCommand,
 	};
 
 	return scripts;

package/lib/amd-to-es6/index.js

@@ -0,0 +1,102 @@
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+const babelCore = require("@babel/core");
+const babelParser = require("@babel/parser");
+const babelGenerator = require("@babel/generator").default;
+const replaceAsync = require('replace-in-file');
+
+const convertSAPUIDefineToDefine = async (filePath) => {
+	return replaceAsync({
+		files: filePath,
+		processor: (input) => {
+			return input.replace("sap.ui.define", "define").replace(", /* bExport= */ false", "").replace(", /* bExport= */ true", "");
+		}
+	})
+}
+
+const convertAmdToEs6 = async (code) => {
+	return (await babelCore.transformAsync(code, {
+		plugins: [['babel-plugin-amd-to-esm', {}]]
+	})).code;
+}
+
+const convertAbsImportsToRelative = (filePath, code) => {
+	let changed = false;
+	// console.log("File processing started: ", srcPath);
+
+	if (code.includes("import(")) {
+		// esprima can't parse this, but it's from the project files
+		return;
+	}
+
+	const tree = babelParser.parse(code, { sourceType: "module" });
+	const importer = filePath.replace(basePath, "");
+	const importerDir = path.dirname(importer);
+	// console.log("Importer -> ", importer);
+
+	tree?.program?.body?.forEach(node => {
+		if (node.type === "ImportDeclaration") {
+			let importee = node.source.value;
+			// console.log(importee);
+			if (importee.startsWith(".")) {
+				// add .js extension if missing
+				if (!importee.endsWith(".js")) {
+					node.source.value += ".js"
+					changed = true;
+				}
+				return;
+			}
+			let importeeDir = path.dirname(importee);
+			let importeeFile = path.basename(importee);
+			let relativePath = path.relative(importerDir, importeeDir);
+			if (relativePath.length === 0) {
+				relativePath = "."
+			}
+			if (!relativePath.startsWith(".")) {
+				relativePath = "./" + relativePath;
+			}
+
+			relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
+			let relativeImport = `${relativePath}/${importeeFile}.js`;
+			// console.log(importee + " --> " + relativeImport);
+			node.source.value = relativeImport;
+			changed = true;
+		}
+	});
+
+	return changed ? babelGenerator(tree).code : code;
+}
+
+const replaceGlobalCoreUsage = (filePath, code) => {
+	if (!filePath.includes("Configuration"))  {
+		const replaced = code.replace(/sap\.ui\.getCore\(\)/g, `Core`);
+		return code !== replaced ? `import Core from 'sap/ui/core/Core';${replaced}` : code;
+	}
+
+	return code;
+};
+
+const transformAmdToES6Module = async (filePath) => {
+	await convertSAPUIDefineToDefine(filePath);
+
+	let code = (await fs.readFile(filePath)).toString();
+
+	code = await convertAmdToEs6(code);
+
+	code = replaceGlobalCoreUsage(filePath, code);
+
+	code = convertAbsImportsToRelative(filePath, code);
+
+	return fs.writeFile(filePath, code);
+}
+
+const transformAmdToES6Modules = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(transformAmdToES6Module).filter(x => !!x));
+};
+
+transformAmdToES6Modules().then(() => {
+	console.log("Success: all amd modules are transformed to es6!");
+});

package/lib/amd-to-es6/no-remaining-require.js

@@ -0,0 +1,33 @@
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+const babelCore = require("@babel/core");
+const babelParser = require("@babel/parser");
+const babelGenerator = require("@babel/generator").default;
+const walk = require("estree-walk");
+
+const checkHasRequire = (filePath, code) => {
+	code = code.replace(/sap\.ui\.require/g, "unhandledRequire");
+
+	const tree = babelParser.parse(code, { sourceType: "module" });
+	walk(tree, {
+		CallExpression: function (node) {
+            if (node.type === "CallExpression" && node?.callee?.name === "unhandledRequire") {
+                throw new Error(`sap.ui.require found in ${filePath}`);
+            }
+    	}
+    });
+}
+
+const checkFile = async (filePath) => {
+	let code = (await fs.readFile(filePath)).toString();
+	checkHasRequire(filePath, code);
+}
+
+const checkAll = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(checkFile).filter(x => !!x));
+};
+
+checkAll();