@ui5/webcomponents-tools 0.0.0-5f8ce9393 → 0.0.0-6d98d0c29

package/components-package/rollup.js

@@ -1,17 +1,24 @@
-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 { 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 colors = require("colors/safe");
+const filesize = require("rollup-plugin-filesize");
+const livereload = require("rollup-plugin-livereload");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+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 +27,109 @@ 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;
-			}
-		}));
+		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(babel({
 			presets: ["@babel/preset-env"],
-			exclude: "node_modules/**",
+			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
 			sourcemap: true,
+			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 +139,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.
@@ -153,43 +153,6 @@ exports.config = {
 	 * @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(">>>");
-
-			for (var i = 0; i < selectors.length; i++) {
-				if (i === 0) {
-					curElement = browser.$(selectors[i]);
-					continue;
-				}
-
-				// 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) {
 				let activeElement = document.activeElement;
@@ -230,8 +193,9 @@ exports.config = {
 		}, true);
 
 		browser.addCommand("getStaticAreaItemClassName", function(selector) {
-			return browser.execute((selector) => {
-				return document.querySelector(selector).getStaticAreaItemDomRef().host.classList[0];
+			return browser.execute(async (selector) => {
+				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
+				return staticAreaItem.host.classList[0];
 			}, selector);
 		}, false);
 	},
@@ -240,8 +204,34 @@ exports.config = {
 	 * @param {String} commandName hook command name
 	 * @param {Array} args arguments that command would receive
 	 */
-	// beforeCommand: function (commandName, args) {
-	// },
+	beforeCommand: function (commandName, args) {
+		const waitFor = [
+			"$",
+			"$$",
+			"getAttribute",
+			"getCSSProperty",
+			"getHTML",
+			"getProperty",
+			"getSize",
+			"getStaticAreaItemClassName", // custom
+			"getText",
+			"getValue",
+			"hasClass", // custom
+			"isDisplayed",
+			"isDisplayedInViewport",
+			"isEnabled",
+			"isExisting",
+			"isFocused",
+			"isFocusedDeep", // custom
+			"shadow$",
+			"shadow$$",
+		];
+		if (waitFor.includes(commandName)) {
+			browser.executeAsync(function (done) {
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+			});
+		}
+	},
 
 	/**
 	 * Hook that gets executed before the suite starts
@@ -288,12 +278,33 @@ exports.config = {
 	 * @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"];
+
+		// url -> set configuration first
+		if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
+			browser.execute(function() {
+				window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
+			});
+		}
+
+		const waitFor = [
+			"addValue",
+			"clearValue",
+			"click",
+			"doubleClick",
+			"dragAndDrop",
+			"keys",
+			"pause",
+			"removeAttribute", // custom
+			"setAttribute", // custom
+			"setProperty", // custom
+			"setValue",
+			"setWindowSize",
+			"touchAction",
+			"url"
+		];
 		if (waitFor.includes(commandName)) {
 			browser.executeAsync(function (done) {
-				// run all the tests in no conflict mode
-				window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
-				window.RenderScheduler.whenFinished().then(done);
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
 			});
 		}
 	},

package/icons-collection/nps.js

@@ -1,28 +1,38 @@
-const path = require("path");
-
-const LIB = path.join(__dirname, `../lib/`);
-
-const getScripts = () => {
-
-	const scripts = {
-		clean: "rimraf dist",
-		copy: {
-			default: "nps copy.json-imports copy.icon-collections",
-			"json-imports": 'copy-and-watch "src/**/*.js" dist/',
-			"icon-collections": 'copy-and-watch "src/icon-collections/**/*.json" dist/generated/assets/icon-collections/'
-		},
-		build: {
-			default: "nps clean copy build.i18n build.icons",
-			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`,
-			},
-			icons: `node ${LIB}/create-icons/index.js`,
-		}
-	};
-
-	return scripts;
-};
-
-module.exports = getScripts;
+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/`);
+
+const getScripts = (options) => {
+
+	const scripts = {
+		clean: "rimraf dist",
+		copy: {
+			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/`
+		},
+		build: {
+			default: `${UP_TO_DATE} || nps clean copy build.i18n build.icons build.jsonImports hash`,
+			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`,
+			},
+			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`,
+			},
+			icons: `node "${LIB}/create-icons/index.js" "${options.collectionName}"`,
+		},
+		hash: `node "${generateHash}" dist/ hash.txt`,
+	};
+
+	return scripts;
+};
+
+module.exports = getScripts;

package/lib/copy-and-watch/index.js

@@ -0,0 +1,122 @@
+const fs = require('fs');
+const path = require('path');
+const chokidar = require('chokidar');
+const glob = require('glob');
+const globParent = require('glob-parent');
+require('colors');
+
+/* CODE */
+
+const args = process.argv.slice(2);
+const options = {};
+
+['watch', 'clean', 'skip-initial-copy', 'safe',  'silent'].forEach(key => {
+	const index = args.indexOf(`--${key}`);
+	if (index >= 0) {
+		options[key] = true;
+		args.splice(index, 1);
+	}
+});
+
+if (args.length < 2) {
+	console.error('Not enough arguments: copy-and-watch [options] <sources> <target>'.red);
+	process.exit(1);
+}
+
+if (options['skip-initial-copy'] && !options['watch']) {
+	console.error('--skip-initial-copy argument is meant to be used with --watch, otherwise no files will be copied'.red);
+	process.exit(1);
+}
+
+const target = args.pop();
+const sources = args;
+const parents = [...new Set(sources.map(globParent))];
+
+const findTarget = from => {
+	const parent = parents
+		.filter(p => from.indexOf(p) >= 0)
+		.sort()
+		.reverse()[0];
+	return path.join(target, path.relative(parent, from));
+};
+const createDirIfNotExist = to => {
+	'use strict';
+
+	const dirs = [];
+	let dir = path.dirname(to);
+
+	while (dir !== path.dirname(dir)) {
+		dirs.unshift(dir);
+		dir = path.dirname(dir);
+	}
+
+	dirs.forEach(dir => {
+		if (!fs.existsSync(dir)) {
+			fs.mkdirSync(dir);
+		}
+	});
+};
+const copy = from => {
+	const to = findTarget(from);
+	createDirIfNotExist(to);
+	const stats = fs.statSync(from);
+	if (stats.isDirectory()) {
+		return;
+	}
+	fs.writeFileSync(to, fs.readFileSync(from));
+	options.silent || console.log('[COPY]'.yellow, from, 'to'.yellow, to);
+};
+const remove = from => {
+	const to = findTarget(from);
+	fs.unlinkSync(to);
+	options.silent || console.log('[DELETE]'.yellow, to);
+};
+const rimraf = dir => {
+	if (fs.existsSync(dir)) {
+		fs.readdirSync(dir).forEach(entry => {
+			const entryPath = path.join(dir, entry);
+			if (fs.lstatSync(entryPath).isDirectory()) {
+				rimraf(entryPath);
+			} else {
+				fs.unlinkSync(entryPath);
+			}
+		});
+		fs.rmdirSync(dir);
+	}
+};
+
+// clean
+if (options.clean) {
+	rimraf(target);
+}
+
+// initial copy
+if (!options['skip-initial-copy']) {
+	sources.forEach(s => glob.sync(s).forEach(copy));
+}
+
+// watch
+if (options.watch) {
+	const chokidarOptions = {
+		ignoreInitial: true
+	};
+
+	if (options.safe) {
+		chokidarOptions.awaitWriteFinish = {
+			stabilityThreshold: 500,
+			pollInterval: 100
+		};
+	}
+
+	chokidar
+		.watch(sources, chokidarOptions)
+		.on('ready', () => sources.forEach(s => {
+			options.silent || console.log('[WATCH]'.yellow, s);
+		}))
+		.on('add', copy)
+		.on('addDir', copy)
+		.on('change', copy)
+		.on('unlink', remove)
+		.on('unlinkDir', remove)
+		.on('error', e => console.log('[ERROR]'.red, e));
+}

package/lib/copy-list/index.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+
+const fileList = process.argv[2];
+const dest = process.argv[3];
+const src = "../../node_modules/@openui5/sap.ui.core/src/";
+
+const filesToCopy = fs.readFileSync(fileList).toString();
+// console.log(filesToCopy);
+
+// Support full-line comments starting with # in the used-modules.txt file
+const shouldCopy = file => file.length && !file.startsWith("#");
+
+const trimFile = file => file.trim();
+
+filesToCopy.split("\n").map(trimFile).filter(shouldCopy).forEach(async moduleName => {
+	const srcPath = path.join(src, moduleName);
+	const destPath = path.join(dest, moduleName);
+
+	await mkdirp(path.dirname(destPath));
+    fs.copyFile(srcPath, destPath, (err) => {
+    	if (err) {
+    		throw err;
+		}
+		console.log(`${destPath} created.`);
+	});
+});