@ui5/webcomponents-tools 0.0.0-dff5837d7 → 0.0.0-ec448881d

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

@@ -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,9 +152,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 +164,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,12 +245,13 @@ exports.config = {
 			"isExisting",
 			"isFocused",
 			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
 			"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);
 			});
 		}
 	},
@@ -277,12 +300,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();
 			});
 		}
 
@@ -295,16 +319,17 @@ exports.config = {
 			"keys",
 			"pause",
 			"removeAttribute", // custom
+			"scrollIntoView",
 			"setAttribute", // custom
 			"setProperty", // custom
 			"setValue",
 			"setWindowSize",
 			"touchAction",
-			"url"
+			"url",
 		];
 		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);
 			});
 		}
 	},