@ui5/webcomponents-tools 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/lib/postcss-combine-duplicated-selectors/index.js

@@ -0,0 +1,178 @@
+/*
+ The MIT License (MIT)
+
+Copyright (c) 2016 Christian Murphy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
+const parser = require('postcss-selector-parser');
+const name = "postcss-combine-duplicated-selectors";
+
+/**
+ * Ensure that attributes with different quotes match.
+ * @param {Object} selector - postcss selector node
+ */
+function normalizeAttributes(selector) {
+	selector.walkAttributes((node) => {
+		if (node.value) {
+			// remove quotes
+			node.value = node.value.replace(/'|\\'|"|\\"/g, '');
+		}
+	});
+}
+
+/**
+ * Sort class and id groups alphabetically
+ * @param {Object} selector - postcss selector node
+ */
+function sortGroups(selector) {
+	selector.each((subSelector) => {
+		subSelector.nodes.sort((a, b) => {
+			// different types cannot be sorted
+			if (a.type !== b.type) {
+				return 0;
+			}
+
+			// sort alphabetically
+			return a.value < b.value ? -1 : 1;
+		});
+	});
+
+	selector.sort((a, b) => (a.nodes.join('') < b.nodes.join('') ? -1 : 1));
+}
+
+/**
+ * Remove duplicated properties
+ * @param {Object} selector - postcss selector node
+ * @param {Boolean} exact
+ */
+function removeDupProperties(selector, exact) {
+	if (!exact) { // Remove duplicated properties, regardless of value
+		const retainedProps = new Set();
+
+		for (let actIndex = selector.nodes.length - 1; actIndex >= 1; actIndex--) {
+			const prop = selector.nodes[actIndex].prop;
+			if (prop !== undefined) {
+				if (!retainedProps.has(prop)) {
+					retainedProps.add(prop); // Mark the prop as retained, all other occurrences must be removed
+				} else {
+					selector.nodes[actIndex].remove(); // This occurrence of the prop must be removed
+				}
+			}
+		}
+	} else {
+		// Remove duplicated properties from bottom to top ()
+		for (let actIndex = selector.nodes.length - 1; actIndex >= 1; actIndex--) {
+			for (let befIndex = actIndex - 1; befIndex >= 0; befIndex--) {
+				if (
+					selector.nodes[actIndex].prop === selector.nodes[befIndex].prop &&
+					selector.nodes[actIndex].value === selector.nodes[befIndex].value
+				) {
+					selector.nodes[befIndex].remove();
+					actIndex--;
+				}
+			}
+		}
+	}
+}
+
+const uniformStyle = parser((selector) => {
+	normalizeAttributes(selector);
+	sortGroups(selector);
+});
+
+const defaultOptions = {
+	removeDuplicatedProperties: false,
+};
+
+module.exports = (options) => {
+	options = Object.assign({}, defaultOptions, options);
+	return {
+		postcssPlugin: name,
+		prepare() {
+			// Create a map to store maps
+			const mapTable = new Map();
+			// root map to store root selectors
+			mapTable.set('root', new Map());
+
+			return {
+				Rule: (rule) => {
+					let map;
+					// Check selector parent for any at rule
+					if (rule.parent.type === 'atrule') {
+						// Use name and query params as the key
+						const query =
+							rule.parent.name.toLowerCase() +
+							rule.parent.params.replace(/\s+/g, '');
+
+						// See if this query key is already in the map table
+						map = mapTable.has(query) ? // If it is use it
+							mapTable.get(query) : // if not set it and get it
+							mapTable.set(query, new Map()).get(query);
+					} else {
+						// Otherwise we are dealing with a selector in the root
+						map = mapTable.get('root');
+					}
+
+					// create a uniform selector
+					const selector = uniformStyle.processSync(rule.selector, {
+						lossless: false,
+					});
+
+					if (map.has(selector)) {
+						// store original rule as destination
+						const destination = map.get(selector);
+
+						// check if node has already been processed
+						if (destination === rule) return;
+
+						// move declarations to original rule
+						while (rule.nodes.length > 0) {
+							destination.append(rule.nodes[0]);
+						}
+						// remove duplicated rule
+						rule.remove();
+
+						if (
+							options.removeDuplicatedProperties ||
+							options.removeDuplicatedValues
+						) {
+							removeDupProperties(
+								destination,
+								options.removeDuplicatedValues,
+							);
+						}
+					} else {
+						if (
+							options.removeDuplicatedProperties ||
+							options.removeDuplicatedValues
+						) {
+							removeDupProperties(rule, options.removeDuplicatedValues);
+						}
+						// add new selector to symbol table
+						map.set(selector, rule);
+					}
+				},
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

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

@@ -0,0 +1,14 @@
+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);
+
+// run all postcss processes in parallel as passing the glob directly to postcss makes them processed sequentially.
+// and the amount of imports give a big speed up when run in parallel
+await Promise.all(inputFiles.map(file => {
+  return $`postcss ${file} --config config/postcss.themes --base src --dir dist/css/ ${restArgs}`;
+}));

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/get-all-tags.js

@@ -8,18 +8,11 @@ const getTag = file => {
 	return matches ? matches[1] : undefined;
 };
 
-const getAltTag = file => {
-	const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
-	const matches = fileContent.match(/\baltTag\b:\s*\"(.*?)\"/);
-	return matches ? matches[1] : undefined;
-};
-
 const getPackageTags = (packageDir) => {
 	const srcDir = path.join(packageDir, "src/");
 	return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
 		const tag = getTag(file);
-		const altTag = getAltTag(file);
-		return [tag, altTag];
+		return [tag];
 	}).filter(item => !!item);
 };
 

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": "0.0.0-a3eca7ade",
+  "version": "0.0.0-a7032d86e",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,26 +21,19 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@openui5/sap.ui.core": "1.95.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-url": "^6.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",
-    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.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",
@@ -50,10 +43,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,21 +55,21 @@
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.0.2",
+    "postcss-selector-parser": "^6.0.10",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.41.4",
-    "rollup-plugin-filesize": "^9.1.1",
-    "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;