@ui5/webcomponents-tools 1.3.0 → 1.5.0

package/lib/hbs2ui5/index.js

@@ -1,10 +1,9 @@
-const fs = require('fs');
+const fs = require('fs').promises;
 const getopts = require('getopts');
 const hbs2lit = require('../hbs2lit');
 const path = require('path');
 const litRenderer = require('./RenderTemplates/LitRenderer');
 const recursiveReadDir = require("recursive-readdir");
-const mkdirp = require('mkdirp');
 
 const args = getopts(process.argv.slice(2), {
 	alias: {
@@ -24,13 +23,13 @@ const onError = (place) => {
 
 const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
 
-const processFile = (file, outputDir) => {
-	const litCode = hbs2lit(file);
+const processFile = async (file, outputDir) => {
+	const litCode = await hbs2lit(file);
 	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
 
-	writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
 };
 
 const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -40,39 +39,54 @@ const composeAbsoluteOutputDir = (file, outputDir) => {
 	const fileDir = file.split(path.sep).slice(1, -1).join(path.sep);
 
 	// (2) Compose full output dir - "dist/generated/templates/lvl1/lvl2"
-	return `${outputDir}${path.sep}${fileDir}`; 
+	return `${outputDir}${path.sep}${fileDir}`;
 };
 
 const wrapDirectory = (directory, outputDir) => {
 	directory = path.normalize(directory);
 	outputDir = path.normalize(outputDir);
 
-	recursiveReadDir(directory, (err, files) => {
+	return new Promise((resolve, reject) => {
+		recursiveReadDir(directory, (err, files) => {
 
-		if (err) {
-			onError('directory');
-		}
-
-		files.forEach(fileName => {
-			if (isHandlebars(fileName)) {
-				processFile(fileName, outputDir);
+			if (err) {
+				onError('directory');
+				reject();
 			}
+
+			const promises = files.map(fileName => {
+				if (isHandlebars(fileName)) {
+					return processFile(fileName, outputDir);
+				}
+			}).filter(x => !!x);
+
+			resolve(Promise.all(promises));
 		});
-	})
+	});
 };
 
-const writeRenderers = (outputDir, controlName, fileContent) => {
+const writeRenderers = async (outputDir, controlName, fileContent) => {
 	try {
-		if (!fs.existsSync(outputDir)) {
-			mkdirp.sync(outputDir);
-		}
+
+		await fs.mkdir(outputDir, { recursive: true });
 
 		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
 
 		// strip DOS line endings because the break the source maps
 		let fileContentUnix = fileContent.replace(/\r\n/g, "\n");
 		fileContentUnix = fileContentUnix.replace(/\r/g, "\n");
-		fs.writeFileSync(compiledFilePath, fileContentUnix);
+
+		// Only write to the file system actual changes - each updated file, no matter if the same or not, triggers an expensive operation for rollup
+		// Note: .hbs files that include a changed .hbs file will also be recompiled as their content will be updated too
+
+		let existingFileContent = "";
+		try {
+			existingFileContent = await fs.readFile(compiledFilePath);
+		} catch (e) {}
+
+		if (existingFileContent !== fileContentUnix) {
+			return fs.writeFile(compiledFilePath, fileContentUnix);
+		}
 
 	} catch (e) {
 		console.log(e);
@@ -82,5 +96,7 @@ const writeRenderers = (outputDir, controlName, fileContent) => {
 if (!args['d'] || !args['o']) {
 	console.log('Please provide an input and output directory (-d and -o)');
 } else {
-	wrapDirectory(args['d'], args['o']);
+	wrapDirectory(args['d'], args['o']).then(() => {
+		console.log("Templates generated");
+	});
 }

package/lib/i18n/defaults.js

@@ -1,74 +1,66 @@
-const fs = require('fs');
+const fs = require('fs').promises;
 const path = require('path');
 const PropertiesReader = require('properties-reader');
-const mkdirp = require("mkdirp");
 const assets = require('../../assets-meta.js');
 
-const defaultLanguage = assets.languages.default;
+const generate = async () => {
+	const defaultLanguage = assets.languages.default;
 
-const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
-const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
-const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.js`);
+	const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
+	const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.js`);
 
-if (!messageBundle || !outputFile) {
-	return;
-}
+	if (!messageBundle || !outputFile) {
+		return;
+	}
 
-const properties = PropertiesReader(messageBundle)._properties;
+	const properties = PropertiesReader(messageBundle)._properties;
 
-let defaultLanguageProperties;
-try {
-	defaultLanguageProperties = PropertiesReader(messageBundleDefaultLanguage)._properties;
-}
-catch (e) {}
+	let defaultLanguageProperties;
+	try {
+		defaultLanguageProperties = PropertiesReader(messageBundleDefaultLanguage)._properties;
+	} catch (e) {
+	}
 
 
-/*
- * Returns the single text object to enable single export.
- *
- * Example:
- * const ARIA_LABEL_CARD_CONTENT = {
- *	key: "ARIA_LABEL_CARD_CONTENT",
- *	defaultText: "Card Content",
- * };
- */
-const getTextInfo = (key, value, defaultLanguageValue) => {
-	let effectiveValue = defaultLanguageValue || value;
-	effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
+	/*
+	 * Returns the single text object to enable single export.
+	 *
+	 * Example:
+	 * const ARIA_LABEL_CARD_CONTENT = {
+	 *	key: "ARIA_LABEL_CARD_CONTENT",
+	 *	defaultText: "Card Content",
+	 * };
+	 */
+	const getTextInfo = (key, value, defaultLanguageValue) => {
+		let effectiveValue = defaultLanguageValue || value;
+		effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
 
-	return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
-};
+		return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
+	};
 
-/*
- * Returns the complete content of i18n-defaults.js file:
- * (1) the single text objects
- * (2) the export statement at the end of the file
- *
- * Example:
- * export {
- *	ARIA_LABEL_CARD_CONTENT,
- * }
- */
-const getOutputFileContent = (properties, defaultLanguageProperties) => {
-	const textKeys = Object.keys(properties);
-	const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
+	/*
+	 * Returns the complete content of i18n-defaults.js file:
+	 * (1) the single text objects
+	 * (2) the export statement at the end of the file
+	 *
+	 * Example:
+	 * export {
+	 *	ARIA_LABEL_CARD_CONTENT,
+	 * }
+	 */
+	const getOutputFileContent = (properties, defaultLanguageProperties) => {
+		const textKeys = Object.keys(properties);
+		const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
 
-	return `${texts}
+		return `${texts}
 export {${textKeys.join()}};`;
-};
-
-/*
- * Writes the i18n-defaults.js.
- */
-const writeI18nDefaultsFile = (file, content) => {
-	fs.writeFile(file, content, (err) => {
-		if (err) {
-			return console.log(err);
-		}
+	};
 
-		console.log(`[i18n]: "${file}" file has been created`);
-	});
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.writeFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
 };
 
-mkdirp.sync(path.dirname(outputFile));
-writeI18nDefaultsFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
+generate().then(() => {
+	console.log("i18n default file generated.");
+});

package/lib/i18n/toJSON.js

@@ -8,18 +8,16 @@
  * The 2nd param './../dist/generated/assets/i18n' is where the JSON files would be written to.
  */
 const path = require("path");
-const glob = require("glob");
 const PropertiesReader = require('properties-reader');
-const fs = require('fs');
+const fs = require('fs').promises;
 const assets = require('../../assets-meta.js');
-const mkdirp = require("mkdirp");
 
 const allLanguages = assets.languages.all;
 
 const messagesBundles = path.normalize(`${process.argv[2]}/messagebundle_*.properties`);
 const messagesJSONDist = path.normalize(`${process.argv[3]}`);
 
- const convertToJSON = (file) => {
+const convertToJSON = async (file) => {
 	const properties = PropertiesReader(file)._properties;
 	const filename = path.basename(file, path.extname(file));
 	const language = filename.match(/^messagebundle_(.*?)$/)[1];
@@ -29,14 +27,17 @@ const messagesJSONDist = path.normalize(`${process.argv[3]}`);
 	}
 	const outputFile = path.normalize(`${messagesJSONDist}/${filename}.json`);
 
-	fs.writeFileSync(outputFile, JSON.stringify(properties));
+	return fs.writeFile(outputFile, JSON.stringify(properties));
 	// console.log(`[i18n]: "${filename}.json" has been generated!`);
 };
 
-mkdirp.sync(messagesJSONDist);
- glob(messagesBundles, {}, (err, files) => {
-	if (err) {
-		return console.log("No messagebundle files found!");
-	}
-	files.forEach(convertToJSON);
+const generate = async () => {
+	const { globby } = await import("globby");
+	await fs.mkdir(messagesJSONDist, { recursive: true });
+	const files = await globby(messagesBundles);
+	return Promise.all(files.map(convertToJSON));
+};
+
+generate().then(() => {
+	console.log("Message bundle JSON files generated.");
 });

package/lib/postcss-css-to-esm/index.js

@@ -38,7 +38,19 @@ module.exports = function (opts) {
 
 			const filePath = `${targetFile}.js`;
 			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
-			fs.writeFileSync(filePath, `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`);
+			
+			// it seems slower to read the old content, but writing the same content with no real changes
+			// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
+			let oldContent = "";
+			try {
+				oldContent = fs.readFileSync(filePath).toString();
+			} catch (e) {
+				// file not found
+			}
+			const content = `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+			if (content !== oldContent) {
+				fs.writeFileSync(filePath, content);
+			}
 		}
 	};
 };

package/lib/postcss-css-to-json/index.js

@@ -28,7 +28,18 @@ module.exports = function (opts) {
 				fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
 				content: css
 			};
-			fs.writeFileSync(filePath, JSON.stringify({_: data}));
+			// it seems slower to read the old content, but writing the same content with no real changes
+			// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
+			let oldContent = "";
+			try {
+				oldContent = fs.readFileSync(filePath).toString();
+			} catch (e) {
+				// file not found
+			}
+			const content = JSON.stringify({_: data});
+			if (content !== oldContent) {
+				fs.writeFileSync(filePath, content);
+			}
 		}
 	};
 };

package/lib/postcss-p/postcss-p.mjs

@@ -1,5 +1,8 @@
 import 'zx/globals';
 
+// don't print executed commands and their output
+$.verbose = false;
+
 const inputFiles = await globby("src/**/parameters-bundle.css");
 
 const restArgs = process.argv.slice(2);

package/lib/replace-global-core/index.js

@@ -1,20 +1,25 @@
-const fs = require("fs");
-const glob = require("glob");
+const fs = require("fs").promises;
 
 const basePath = process.argv[2];
 
-const replaceGlobalCoreUsage = (srcPath) => {
+const replaceGlobalCoreUsage = async (srcPath) => {
 
-	const original = fs.readFileSync(srcPath).toString();
+	const original = (await fs.readFile(srcPath)).toString();
 	let replaced = original.replace(/sap\.ui\.getCore\(\)/g, `Core`);
 
 	if (original !== replaced) {
 		replaced = `import Core from 'sap/ui/core/Core';
 		${replaced}`;
-		fs.writeFileSync(srcPath, replaced);
+		return fs.writeFile(srcPath, replaced);
 	}
 };
 
-const fileNames = glob.sync(basePath + "**/*.js");
-fileNames.forEach(replaceGlobalCoreUsage);
-console.log("Success: Replaced global core usage in:", basePath);
+const generate = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath + "**/*.js");
+	return Promise.all(fileNames.map(replaceGlobalCoreUsage).filter(x => !!x));
+};
+
+generate().then(() => {
+	console.log("Success: Replaced global core usage in:", basePath);
+});

package/lib/scoping/scope-test-pages.js

@@ -27,7 +27,7 @@ const replaceTagsAny = content => {
 // Replace bundle names and HTML tag names in test pages
 glob.sync(path.join(root, "/**/*.html")).forEach(file => {
 	let content = String(fs.readFileSync(file));
-	content = content.replace(/bundle\.(.*?)\.js/g, `bundle.scoped.$1.js`);
+	content = content.replace(/bundle\.(.*?)\.js/g, `../bundle.scoped.$1.js`);
 	content = replaceTagsHTML(content);
 	fs.writeFileSync(file, content);
 });

package/lib/test-runner/test-runner.js

@@ -0,0 +1,63 @@
+const child_process = require("child_process");
+const { readFileSync } = require("fs");
+const path = require("path");
+
+// search for dev-server port 
+// start in current folder
+// traversing upwards in case of mono repo tests and dev-server running in root folder of repository
+let devServerFolder = process.cwd();
+let devServerPort;
+while (true) {
+    try {
+        devServerPort = readFileSync(path.join(devServerFolder, ".dev-server-port")).toString();
+        break; // found
+    } catch (e) {
+        // file not found
+        if (devServerFolder === path.dirname(devServerFolder)) {
+            break; // reached root folder "/"
+        }
+        devServerFolder = path.dirname(devServerFolder);
+    }
+}
+
+// check if we are in a monorepo and extract path from package.json
+let packageRepositoryPath = "";
+const pkg = require(path.join(process.cwd(), "package.json"));
+packageRepositoryPath = pkg.repository.directory;
+
+// construct base url
+// use devServerPort if a dev server is running, otherwise let the baseUrl in the wdio config be used
+// if a dev server is running in the root of a mono repo, append tha package path like this
+// http://localhost:${devServerPort}/packages/main/
+let baseUrl = "";
+if (devServerPort) {
+    console.log(`Found port ${devServerPort} from '${path.join(devServerFolder, ".dev-server-port")}'`);
+    const devServerInRoot = !devServerFolder.includes(packageRepositoryPath);
+    if (devServerInRoot) {
+        baseUrl = `--base-url http://localhost:${devServerPort}/${packageRepositoryPath}/`;
+    } else {
+        baseUrl = `--base-url http://localhost:${devServerPort}/`;
+    }
+}
+
+if (!baseUrl) {
+    console.log("No dev server running, running tests served from `dist`, make sure it is up to date");
+}
+
+// add single spec parameter if passed
+let spec = "";
+if (process.argv.length === 3) {
+    const specFile = process.argv[2];
+    spec = `--spec ${specFile}`;
+}
+
+// more parameters - pass them to wdio
+let restParams = "";
+if (process.argv.length > 3) {
+    restParams = process.argv.slice(2).join(" ");
+}
+
+// run wdio with calculated parameters
+const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js ${spec} ${baseUrl} ${restParams}`;
+console.log(`executing: ${cmd}`);
+child_process.execSync(cmd, {stdio: 'inherit'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,20 +21,17 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.95.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@wdio/cli": "^7.12.2",
-    "@wdio/dot-reporter": "^7.10.1",
-    "@wdio/local-runner": "^7.12.2",
-    "@wdio/mocha-framework": "^7.12.2",
-    "@wdio/spec-reporter": "^7.10.1",
+    "@wdio/cli": "^7.19.7",
+    "@wdio/devtools-service": "^7.19.7",
+    "@wdio/dot-reporter": "^7.19.7",
+    "@wdio/local-runner": "^7.19.7",
+    "@wdio/mocha-framework": "^7.19.7",
+    "@wdio/spec-reporter": "^7.19.7",
+    "@wdio/static-server-service": "^7.19.5",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^3.0.0",
-    "cli-color": "^2.0.1",
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
@@ -44,10 +41,10 @@
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
     "esprima": "^4.0.1",
-    "folder-hash": "^4.0.1",
     "getopts": "^2.3.0",
     "glob": "^7.1.6",
     "glob-parent": "^6.0.2",
+    "globby": "^13.1.1",
     "handlebars": "^4.7.7",
     "is-port-reachable": "^3.1.0",
     "jsdoc": "^3.6.6",
@@ -62,15 +59,15 @@
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.41.4",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "serve": "^12.0.0",
     "slash": "3.0.0",
-    "wdio-chromedriver-service": "^7.0.0",
+    "vite": "^2.9.12",
+    "wdio-chromedriver-service": "^7.3.2",
     "zx": "^4.3.0"
   },
   "peerDependencies": {
     "chromedriver": "*"
+  },
+  "devDependencies": {
+    "yargs": "^17.5.1"
   }
 }

package/components-package/rollup-plugins/empty-module.js

@@ -1,15 +0,0 @@
-const slash = require("slash");
-
-function emptyModulePlugin({ emptyModules }) {
-	return {
-		name: "ui5-dev-empty-module-plugin",
-		load(id) {
-			if (emptyModules.some(mod => slash(id).includes(mod))) {
-				return `export default ""`;
-			}
-			return null;
-		},
-	};
-}
-
-module.exports = emptyModulePlugin;

package/components-package/rollup.js

@@ -1,150 +0,0 @@
-const process = require("process");
-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 packageFile = JSON.parse(fs.readFileSync("./package.json"));
-const packageName = packageFile.name;
-
-const warningsToSkip = [{
-	warningCode: "THIS_IS_UNDEFINED",
-	filePath: /.+zxing.+/,
-}];
-
-function ui5DevImportCheckerPlugin() {
-	return {
-		name: "ui5-dev-import-checker-plugin",
-		transform(code, file) {
-			const re = new RegExp(`^import.*"${packageName}/`);
-			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 = () => {
-	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(json({
-		include: [
-			/.*assets\/.*\.json/,
-		],
-		namedExports: false,
-	}));
-
-	plugins.push(nodeResolve());
-
-	if (!process.env.DEV) {
-		plugins.push(terser({
-			numWorkers: 1,
-		}));
-	}
-
-	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 = (input = "bundle.esm.js") => {
-	return [{
-		input,
-		output: {
-			dir: "dist/resources",
-			format: "esm",
-			sourcemap: true,
-		},
-		watch: {
-			clearScreen: false,
-		},
-		plugins: getPlugins(),
-		onwarn: onwarn,
-	}];
-};
-
-let config = getES6Config();
-
-if (process.env.SCOPE) {
-	if (fs.existsSync("bundle.scoped.esm.js")) {
-		config = config.concat(getES6Config("bundle.scoped.esm.js"));
-	}
-}
-
-module.exports = config;