@ui5/webcomponents-tools 0.0.0-35e2c9666 → 0.0.0-37338d49d

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,13 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import virtualIndex from '../lib/dev-server/virtual-index-html-plugin.js';
+
+export default defineConfig(async () => {
+	const data = await virtualIndex();
+	return {
+		build: {
+			emptyOutDir: false,
+		},
+		plugins: [data],
+	}
+  })

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=old',
+				'--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);
+			});
 		}
 	},
 	/**

package/icons-collection/nps.js

@@ -1,9 +1,4 @@
 const path = require("path");
-const resolve = require("resolve");
-
-const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
-const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
-const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
 
 const LIB = path.join(__dirname, `../lib/`);
 
@@ -26,7 +21,7 @@ const copyIconAssetsCommand = (options) => {
 		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" dist/generated/assets/`,
+			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" src/generated/assets/`,
 		}
 	}
 
@@ -37,7 +32,7 @@ const copyIconAssetsCommand = (options) => {
 
 	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" dist/generated/assets/${v}/`;
+		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" src/generated/assets/${v}/`;
 	});
 
 	return command;
@@ -46,24 +41,28 @@ const copyIconAssetsCommand = (options) => {
 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",
+		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: `${UP_TO_DATE} || nps clean copy build.i18n build.icons build.jsonImports hash`,
+			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`,
 			},
 			jsonImports: {
-				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.i18n",
-				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
+				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,
 		},
-		hash: `node "${generateHash}" dist/ hash.txt`,
+		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();