@ui5/webcomponents-tools 0.0.0-c6d8872f3 → 0.0.0-cf069fb29

package/components-package/rollup.js

@@ -1,17 +1,27 @@
-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 packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+const os = require("os");
+const { babel } = require("@rollup/plugin-babel");
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+const url = require("@rollup/plugin-url");
+const { terser } = require("rollup-plugin-terser");
+const json = require("@rollup/plugin-json");
+const replace = require("@rollup/plugin-replace");
+const commonjs = require("@rollup/plugin-commonjs");
+const colors = require("cli-color");
+const filesize = require("rollup-plugin-filesize");
+const livereload = require("rollup-plugin-livereload");
+const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
+
+const packageFile = JSON.parse(fs.readFileSync("./package.json"));
+const packageName = packageFile.name;
 const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
 
+const warningsToSkip = [{
+	warningCode: "THIS_IS_UNDEFINED",
+	filePath: /.+zxing.+/,
+}];
+
 function ui5DevImportCheckerPlugin() {
 	return {
 		name: "ui5-dev-import-checker-plugin",
@@ -20,51 +30,129 @@ function ui5DevImportCheckerPlugin() {
 			if (re.test(code)) {
 				throw new Error(`illegal import in ${file}`);
 			}
-		}
+		},
+	};
+}
+
+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;
+	}
+
+	// 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 = ({ transpile }) => {
 	const plugins = [];
-	let publicPath = DEPLOY_PUBLIC_PATH || "/resources/";
 
-	if (!process.env.DEV) {
-		plugins.push(filesize({
-			render : function (options, bundle, { minSize, gzipSize, brotliSize, bundleSize }){
-				return gzipSize;
-			}
+	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",
+			],
 		}));
 	}
 
+	if (!process.env.DEV) {
+		plugins.push(filesize(
+			{
+				reporter(options, bundle, {
+					minSize, gzipSize, brotliSize, bundleSize,
+					fileName,
+					// "showBeforeSizes: release"
+					lastVersion,
+					// "showBeforeSizes: "release" or "showBeforeSizes": "build"
+					bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore,
+				}) {
+				// If a promise is returned, it will be awaited before rendering.
+					return `${fileName.padEnd(35)} ${minSize} / gzipped: ${gzipSize}`;
+				},
+			},
+
+		));
+	}
+
+	const publicPath = DEPLOY_PUBLIC_PATH;
+
 	plugins.push(ui5DevImportCheckerPlugin());
 
-	plugins.push(url({
-		limit: 0,
-		include: [
-			/.*assets\/.*\.json/
-		],
-		emitFiles: true,
-		fileName: "[name].[hash][extname]",
-		publicPath,
-	}));
+	if (!transpile) {
+		plugins.push(json({
+			include: [
+				/.*assets\/.*\.json/,
+			],
+			namedExports: false,
+		}));
+	}
 
+	if (transpile) {
+		plugins.push(url({
+			limit: 0,
+			include: [
+				/.*assets\/.*\.json/,
+			],
+			emitFiles: true,
+			fileName: "[name].[hash][extname]",
+			publicPath,
+		}));
+	}
 
 	if (transpile) {
+		plugins.push(commonjs());
 		plugins.push(babel({
 			presets: ["@babel/preset-env"],
-			exclude: "node_modules/**",
-			sourcemap: true,
+			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
+			sourcemap: false,
+			babelHelpers: "bundled",
 		}));
 	}
 
-	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";
@@ -74,61 +162,78 @@ const getPlugins = ({ transpile }) => {
 				"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
+			sourcemap: true,
 		},
-		moduleContext: (id) => {
-			if (id.includes("url-search-params-polyfill")) {
+		moduleContext: id => {
+			if (typeof id === "string" && 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
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: false}),
+		plugins: getPlugins({ transpile: false }),
+		onwarn: onwarn,
 	}];
 };
 
-const getES5Config = () => {
-	return [ {
-		input: "bundle.es5.js",
+const getES5Config = (input = "bundle.es5.js") => {
+	return [{
+		input,
 		output: {
 			dir: "dist/resources",
 			format: "iife",
+			inlineDynamicImports: true,
 			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
+			sourcemap: true,
 		},
-		moduleContext: (id) => {
+		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
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: true}),
+		plugins: getPlugins({ transpile: true }),
+		onwarn: onwarn,
 	}];
 };
 
 let config = getES6Config();
 
-if (process.env.ES5_BUILD) {
+if (process.env.ES5_BUILD && fs.existsSync("bundle.es5.js")) {
 	config = config.concat(getES5Config());
 }
 
+if (process.env.SCOPE) {
+	if (fs.existsSync("bundle.scoped.esm.js")) {
+		config = config.concat(getES6Config("bundle.scoped.esm.js"));
+
+		if (fs.existsSync("bundle.scoped.es5.js") && process.env.ES5_BUILD) {
+			config = config.concat(getES5Config("bundle.scoped.es5.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.
@@ -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);
 			});
 		}
 	},