@ui5/webcomponents-tools 0.0.0-389bdbabc → 0.0.0-453158269

package/components-package/rollup.js

@@ -1,16 +1,21 @@
-const babel = require("rollup-plugin-babel");
 const process = require("process");
-const resolve = require("rollup-plugin-node-resolve");
-const url = require("rollup-plugin-url");
-const { terser } = require("rollup-plugin-terser");
-const notify = require('rollup-plugin-notify');
-const filesize = require('rollup-plugin-filesize');
-const livereload = require('rollup-plugin-livereload');
-const os = require("os");
 const fs = require("fs");
+const os = require("os");
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+const { terser } = require("rollup-plugin-terser");
+const json = require("@rollup/plugin-json");
+const replace = require("@rollup/plugin-replace");
+const colors = require("cli-color");
+const livereload = require("rollup-plugin-livereload");
+const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
+const packageFile = JSON.parse(fs.readFileSync("./package.json"));
+const packageName = packageFile.name;
+
+const warningsToSkip = [{
+	warningCode: "THIS_IS_UNDEFINED",
+	filePath: /.+zxing.+/,
+}];
 
 function ui5DevImportCheckerPlugin() {
 	return {
@@ -20,115 +25,126 @@ function ui5DevImportCheckerPlugin() {
 			if (re.test(code)) {
 				throw new Error(`illegal import in ${file}`);
 			}
-		}
+		},
 	};
 }
 
-const getPlugins = ({ transpile }) => {
-	const plugins = [];
-	let publicPath = DEPLOY_PUBLIC_PATH || "/resources/";
+function onwarn(warning, warn) {
+	// Skip warning for known false positives that will otherwise polute the log
+	let skip = warningsToSkip.find(warningToSkip => {
+		let loc, file;
+		return warning.code === warningToSkip.warningCode
+			&& (loc = warning.loc)
+			&& (file = loc.file)
+			&& file.match(warningToSkip.filePath);
+	});
+	if (skip) {
+		return;
+	}
 
-	if (!process.env.DEV) {
-		plugins.push(filesize({
-			render : function (options, bundle, { minSize, gzipSize, brotliSize, bundleSize }){
-				return gzipSize;
+	// warn everything else
+	warn( warning );
+}
+
+const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
+function ui5DevReadyMessagePlugin() {
+	return {
+		name: "ui5-dev-message-ready-plugin",
+		writeBundle: (assets, bundle) => {
+			if (reportedForPackages.has(packageName)) {
+				return;
 			}
+			console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
+
+			if (fs.existsSync(".port")) {
+				const port = `${fs.readFileSync(".port")}`;
+				if (port) {
+					console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
+				}
+			}
+			reportedForPackages.add(packageName);
+		},
+	};
+}
+
+const getPlugins = () => {
+	const plugins = [];
+
+	if (process.env.DEV) {
+		plugins.push(replace({
+			values: {
+				'const DEV_MODE = false': 'const DEV_MODE = true',
+			},
+			preventAssignment: false,
+		}));
+	}
+
+	if (process.env.DEV && !process.env.ENABLE_CLDR) {
+		// Empty the CLDR assets file for better performance during development
+		plugins.push(emptyModulePlugin({
+			emptyModules: [
+				"localization/dist/Assets.js",
+			],
 		}));
 	}
 
 	plugins.push(ui5DevImportCheckerPlugin());
 
-	plugins.push(url({
-		limit: 0,
+	plugins.push(json({
 		include: [
-			/.*assets\/.*\.json/
+			/.*assets\/.*\.json/,
 		],
-		emitFiles: true,
-		fileName: "[name].[hash][extname]",
-		publicPath,
+		namedExports: false,
 	}));
 
-
-	if (transpile) {
-		plugins.push(babel({
-			presets: ["@babel/preset-env"],
-			exclude: "node_modules/**",
-			sourcemap: true,
-		}));
-	}
-
-	plugins.push(resolve());
+	plugins.push(nodeResolve());
 
 	if (!process.env.DEV) {
-		plugins.push(terser());
-	}
-
-	if (process.env.DEV) {
-		plugins.push(notify());
+		plugins.push(terser({
+			numWorkers: 1,
+		}));
 	}
 
-	const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
+	const es6DevMain = process.env.DEV && packageName === "@ui5/webcomponents";
 	if (es6DevMain && os.platform() !== "win32") {
 		plugins.push(livereload({
 			watch: [
 				"dist/resources/bundle.esm.js",
 				"dist/**/*.html",
 				"dist/**/*.json",
-			]
+			],
 		}));
 	}
 
+	if (process.env.DEV) {
+		plugins.push(ui5DevReadyMessagePlugin());
+	}
+
 	return plugins;
 };
 
-const getES6Config = () => {
+const getES6Config = (input = "bundle.esm.js") => {
 	return [{
-		input: "bundle.esm.js",
+		input,
 		output: {
 			dir: "dist/resources",
 			format: "esm",
-			sourcemap: true
-		},
-		moduleContext: (id) => {
-			if (id.includes("url-search-params-polyfill")) {
-				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
-				return "window";
-			}
-		},
-		watch: {
-			clearScreen: false
-		},
-		plugins: getPlugins({transpile: false}),
-	}];
-};
-
-const getES5Config = () => {
-	return [ {
-		input: "bundle.es5.js",
-		output: {
-			dir: "dist/resources",
-			format: "iife",
-			name: "sap-ui-webcomponents-bundle",
-			extend: "true",	// Whether or not to extend the global variable defined by the name option in umd or iife formats.
-			sourcemap: true
-		},
-		moduleContext: (id) => {
-			if (id.includes("url-search-params-polyfill")) {
-				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
-				return "window";
-			}
+			sourcemap: true,
 		},
 		watch: {
-			clearScreen: false
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: true}),
+		plugins: getPlugins(),
+		onwarn: onwarn,
 	}];
 };
 
 let config = getES6Config();
 
-if (process.env.ES5_BUILD) {
-	config = config.concat(getES5Config());
+if (process.env.SCOPE) {
+	if (fs.existsSync("bundle.scoped.esm.js")) {
+		config = config.concat(getES6Config("bundle.scoped.esm.js"));
+	}
 }
 
 module.exports = config;

package/components-package/wdio.js

@@ -57,7 +57,7 @@ exports.config = {
 			// 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: ['--disable-gpu'],
+			// args: ['--disable-gpu'],
 		}
 	}],
 	//
@@ -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: '',
+	baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
 	path: '',
 	//
 	// Default timeout for all waitFor* commands.
@@ -99,7 +99,7 @@ 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'],
 	// options
 	chromeDriverArgs: ['--port=9515'], // default
 	// Framework you want to run your specs with.
@@ -152,46 +152,24 @@ 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("findElementDeep", function (selector) {
-			const selectors = selector.split(">>>");
+	before: async function (capabilities, specs) {
+		await browser.addCommand("isFocusedDeep", async function () {
+			return browser.executeAsync(function (elem, done) {
+				let activeElement = document.activeElement;
 
-			for (var i = 0; i < selectors.length; i++) {
-				if (i === 0) {
-					curElement = browser.$(selectors[i]);
-					continue;
+				while (activeElement.shadowRoot) {
+					if (activeElement.shadowRoot.activeElement) {
+						activeElement = activeElement.shadowRoot.activeElement;
+					} else {
+						break;
+					}
 				}
+				done(elem === activeElement);
+			}, this);
+		}, true);
 
-				// wait for the shadowDom to be filled before executing the selector
-				browser.executeAsync(function (elem, done) {
-					elem._waitForDomRef().then(done);
-				}, curElement);
-
-				// find the next element from the selector
-				curElement = curElement.$(new Function (`
-                    return this.shadowRoot.querySelector("${selectors[i]}");
-                `));
-			}
-
-			return curElement;
-
-		});
-
-		browser.addCommand("findElementDeep", function (selector) {
-			const selectors = selector.split(">>>");
-			let curElement = this;
-
-			for (var i = 0; i < selectors.length; i++) {
-				curElement = curElement.$(new Function (`
-                    return this.shadowRoot.querySelector("${selectors[i]}");
-                `));
-			}
-
-			return curElement;
-		}, this);
-
-		browser.addCommand("isFocusedDeep", function () {
-			return browser.execute(function (elem) {
+		await browser.addCommand("isFocusedDeepElement", async function (element) {
+			return browser.executeAsync(function (elem, element, done) {
 				let activeElement = document.activeElement;
 
 				while (activeElement.shadowRoot) {
@@ -201,47 +179,82 @@ exports.config = {
 						break;
 					}
 				}
-				return elem === activeElement;
-			}, this);
+				done(element === activeElement);
+			}, this, element);
 		}, true);
 
-		browser.addCommand("setProperty", function(property, value) {
-			return browser.execute((elem, property, value) => {
-				return elem[property] = value;
+		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((selector) => {
-				return document.querySelector(selector).getStaticAreaItemDomRef().host.classList[0];
+		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.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",
+			"getCSSProperty",
+			"getHTML",
+			"getProperty",
+			"getSize",
+			"getStaticAreaItemClassName", // custom
+			"getText",
+			"getValue",
+			"hasClass", // custom
+			"isDisplayed",
+			"isDisplayedInViewport",
+			"isEnabled",
+			"isExisting",
+			"isFocused",
+			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
+			"shadow$",
+			"shadow$$",
+		];
+		if (waitFor.includes(commandName)) {
+			await browser.executeAsync(function (done) {
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+			});
+		}
+	},
 
 	/**
 	 * Hook that gets executed before the suite starts
@@ -287,13 +300,36 @@ exports.config = {
 	 * @param {Number} result 0 - command success, 1 - command error
 	 * @param {Object} error error object if any
 	 */
-	afterCommand: function (commandName, args, result, error) {
-		const waitFor = ["$", "$$", "shadow$", "click", "performActions", "elementClick", "keys", "sendKeys", "findElement", "elementClear", "elementSendKeys", "setValue", "addValue", "getHTML", "getProperty", "setAttribute", "removeAttribute", "getElementProperty"];
-		if (waitFor.includes(commandName)) {
-			browser.executeAsync(function (done) {
-				// run all the tests in no conflict mode
+	afterCommand: async function (commandName, args, result, error) {
+
+		// url -> set configuration first
+		if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
+			await browser.executeAsync(function(done) {
 				window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
-				window.RenderScheduler.whenFinished().then(done);
+				done();
+			});
+		}
+
+		const waitFor = [
+			"addValue",
+			"clearValue",
+			"click",
+			"doubleClick",
+			"dragAndDrop",
+			"keys",
+			"pause",
+			"removeAttribute", // custom
+			"scrollIntoView",
+			"setAttribute", // custom
+			"setProperty", // custom
+			"setValue",
+			"setWindowSize",
+			"touchAction",
+			"url",
+		];
+		if (waitFor.includes(commandName)) {
+			await browser.executeAsync(function (done) {
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
 			});
 		}
 	},