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

package/lib/icons-hash/icons-hash.mjs

@@ -0,0 +1,149 @@
+import fs from "fs/promises";
+import path from "path";
+import ignore from "ignore";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// -------------------
+// FNV-1a 32-bit hash
+// -------------------
+function fnv1aHash(str) {
+	let hash = 0x811c9dc5;
+	for (let i = 0; i < str.length; i++) {
+		hash ^= str.charCodeAt(i);
+		hash = (hash * 0x01000193) >>> 0;
+	}
+	return hash.toString(16);
+}
+
+async function findGitignoreFiles(startDir) {
+	const gitignores = [];
+	let currentDir = path.resolve(startDir);
+	while (true) {
+		const candidate = path.join(currentDir, ".gitignore");
+		try {
+			await fs.access(candidate);
+			gitignores.push(candidate);
+		} catch { }
+		const parentDir = path.dirname(currentDir);
+		if (parentDir === currentDir) break;
+		currentDir = parentDir;
+	}
+	return gitignores;
+}
+
+async function loadIgnoreRules(dir) {
+	const files = await findGitignoreFiles(dir);
+	const ig = ignore();
+	for (const file of files) {
+		const content = await fs.readFile(file, "utf8");
+		ig.add(content);
+	}
+	return ig;
+}
+
+async function walkDir(dir, ig, baseDir) {
+	const results = [];
+	const entries = await fs.readdir(dir, { withFileTypes: true });
+
+	for (const entry of entries) {
+		const absPath = path.join(dir, entry.name);
+		let relPath = path.relative(baseDir, absPath).replace(/\\/g, "/"); // normalize for .gitignore
+
+		if (ig.ignores(relPath) || relPath.startsWith("dist/")) continue;
+
+		if (entry.isDirectory()) {
+			results.push(...await walkDir(absPath, ig, baseDir));
+		} else {
+			results.push(relPath);
+		}
+	}
+	return results;
+}
+
+// Hash file content + mtime
+async function hashFile(filePath) {
+	const stat = await fs.stat(filePath);
+	const content = await fs.readFile(filePath, "utf8");
+	return fnv1aHash(String(stat.mtimeMs) + content);
+}
+
+function getRepoName(repoPath) {
+	return repoPath.split("/").pop();
+}
+
+async function computeHashes(repoPath, ig) {
+	const files = await walkDir(repoPath, ig, repoPath);
+	const hashEntries = await Promise.all(
+		files.map(async (file) => {
+			const absPath = path.join(repoPath, file);
+			const hash = await hashFile(absPath);
+			return [path.relative(process.cwd(), absPath), hash];
+		})
+	);
+	return Object.fromEntries(hashEntries);
+}
+
+async function saveHashes(repoPath, ig) {
+	const distPath = path.join(repoPath, "dist");
+	await fs.mkdir(distPath, { recursive: true });
+	const ui5iconsHashPath = path.join(distPath, ".ui5iconsHash");
+
+	// Cache the hashes for both the icons and tools packages, since the output depends on the content of both.
+	const hashes = {
+		...(await computeHashes(repoPath, ig)),
+		...(await computeHashes(path.resolve(__dirname, "../../"), ig)),
+	};
+
+	await fs.writeFile(ui5iconsHashPath, JSON.stringify(hashes, null, 2), "utf8");
+	console.log(`Saved build hashes for the ${getRepoName(repoPath)} package.`);
+}
+
+async function checkHashes(repoPath, ig) {
+	const ui5iconsHashPath = path.join(repoPath, "dist", ".ui5iconsHash");
+	let oldHashes = {};
+	try {
+		const raw = await fs.readFile(ui5iconsHashPath, "utf8");
+		oldHashes = JSON.parse(raw);
+	} catch {
+		console.log(`No build hashes found for the ${getRepoName(repoPath)} package. Building it now.`);
+		process.exit(1);
+	}
+
+	// Compare the hashes for both the icons and tools packages, since the output depends on the content of both.
+	const newHashes = {
+		...(await computeHashes(repoPath, ig)),
+		...(await computeHashes(path.resolve(__dirname, "../../"), ig)),
+	};
+
+	let changed = false;
+	for (const file of new Set([...Object.keys(oldHashes), ...Object.keys(newHashes)])) {
+		if (oldHashes[file] !== newHashes[file]) {
+			changed = true;
+		}
+	}
+
+	if (!changed) {
+		console.log(`No changes detected in the ${getRepoName(repoPath)} package.`);
+	} else {
+		console.log(`Changes detected in the ${getRepoName(repoPath)} package. Rebuilding it.`);
+		process.exit(1);
+	}
+}
+
+async function main() {
+	const mode = process.argv[2];
+	if (!["save", "check"].includes(mode)) {
+		throw new Error("Usage: node hashes.js <save|check>");
+	}
+
+	const repoPath = process.cwd();
+	const ig = await loadIgnoreRules(repoPath);
+
+	if (mode === "save") await saveHashes(repoPath, ig);
+	if (mode === "check") await checkHashes(repoPath, ig);
+}
+
+main().catch(console.error);

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

@@ -0,0 +1,185 @@
+/*
+ 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);
+					}
+				},
+				OnceExit(root) {
+					root.nodes.forEach(node => {
+						if (node.type === "rule") {
+							removeDupProperties(node, options.removeDuplicatedValues);
+						}
+					})
+				}
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

package/lib/remove-dev-mode/remove-dev-mode.mjs

@@ -0,0 +1,51 @@
+import { globby } from "globby";
+import * as esbuild from 'esbuild'
+import * as fs from "fs";
+import { pathToFileURL } from "url";
+
+const generate = async () => {
+  let customPlugin = {
+    name: 'ui5-tools',
+    setup(build) {
+      build.onLoad({ filter: /UI5Element.ts$/ }, async (args) => {
+        let text = await fs.promises.readFile(args.path, 'utf8');
+        text = text.replaceAll(/const DEV_MODE = true/g, "");
+        text = text.replaceAll(/if \(DEV_MODE\)/g, "if (false)");
+        return {
+          contents: text,
+          loader: 'ts',
+        }
+      })
+    },
+  }
+
+  const getConfig = async () => {
+    const config = {
+      entryPoints: await globby("src/**/*.ts"),
+      bundle: false,
+      minify: true,
+      sourcemap: true,
+      outdir: 'dist/prod',
+      outbase: 'src',
+      plugins: [
+        customPlugin,
+      ]
+    };
+    return config;
+  }
+
+
+  const config = await getConfig();
+  const result = await esbuild.build(config);
+}
+
+const filePath = process.argv[1];
+const fileUrl = pathToFileURL(filePath).href;
+
+if (import.meta.url === fileUrl) {
+  generate()
+}
+
+export default {
+  _ui5mainFn: generate
+}

package/lib/rimraf/rimraf.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+
+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);
+	}
+};
+
+const main = argv => {
+	if (argv.length < 3) {
+		console.error("rimraf <dir>");
+		process.exit(1);
+	}
+	const dir = argv[2];
+	rimraf(dir);
+};
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;

package/lib/scoping/get-all-tags.js

@@ -4,22 +4,22 @@ const glob = require("glob");
 
 const getTag = file => {
 	const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
-	const matches = fileContent.match(/\btag\b:\s*\"(.*?)\"/);
-	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;
+	let matches = fileContent.match(/\btag\b:\s*\"(.*?)\"/);
+	if (matches) {
+		return matches[1];
+	}
+	matches = fileContent.match(/@customElement\("(.*?)"\)/);
+	if (matches) {
+		return matches[1];
+	}
+	return undefined;
 };
 
 const getPackageTags = (packageDir) => {
 	const srcDir = path.join(packageDir, "src/");
-	return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
+	return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
 		const tag = getTag(file);
-		const altTag = getAltTag(file);
-		return [tag, altTag];
+		return [tag];
 	}).filter(item => !!item);
 };
 

package/lib/scoping/lint-src.js

@@ -7,25 +7,26 @@ const tags = getAllTags(process.cwd());
 
 const errors = [];
 
+const removeComments = str => str.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "");
+
 glob.sync(path.join(process.cwd(), "src/**/*.css")).forEach(file => {
-	let content = String(fs.readFileSync(file));
+	let content = removeComments(String(fs.readFileSync(file)));
 	tags.forEach(tag => {
 		if (content.match(new RegExp(`(^|[^\.\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
-			errors.push(`Warning! ${tag} found in ${file}`);
+			errors.push(`${tag} found in ${file}`);
 		}
 	});
 });
 
-glob.sync(path.join(process.cwd(), "src/**/*.js")).forEach(file => {
-	let content = String(fs.readFileSync(file));
+glob.sync(path.join(process.cwd(), "src/**/*.ts")).forEach(file => {
+	let content = removeComments(String(fs.readFileSync(file)));
 	tags.forEach(tag => {
 		if (content.match(new RegExp(`querySelector[A-Za-z]*..${tag}`, "g"))) {
-			errors.push(`Warning! querySelector for ${tag} found in ${file}`);
+			errors.push(`querySelector for ${tag} found in ${file}`);
 		}
 	});
 });
 
 if (errors.length) {
-	errors.forEach(error => console.log(error));
-	throw new Error("Errors found.");
+	throw new Error(`Scoping-related errors found (f.e. used ui5-input instead of [ui5-input]): \n ${errors.join("\n")}`);
 }

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

@@ -18,6 +18,7 @@ const replaceTagsHTML = content => {
 
 // Replace tags in any content
 const replaceTagsAny = content => {
+	console.log(tags.length);
 	tags.forEach(tag => {
 		content = content.replace(new RegExp(`(^|[^\-_A-Za-z0-9])(${tag})([^\-_A-Za-z0-9]|$)`, "g"), `$1$2-${suffix}$3`);
 	});
@@ -27,7 +28,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("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
 	content = replaceTagsHTML(content);
 	fs.writeFileSync(file, content);
 });

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

@@ -0,0 +1,79 @@
+const child_process = require("child_process");
+const { readFileSync } = require("fs");
+const path = require("path");
+const fs = require("fs");
+
+function testFn(outArgv) {
+// 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 ? 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 (outArgv.length === 3) {
+		const specFile = outArgv[2];
+		spec = `--spec ${specFile}`;
+	}
+
+// more parameters - pass them to wdio
+	let restParams = "";
+	if (outArgv.length > 3) {
+		restParams = outArgv.slice(2).join(" ");
+	}
+
+	let wdioConfig = "";
+	if (fs.existsSync("config/wdio.conf.cjs")) {
+		wdioConfig = "config/wdio.conf.cjs";
+	} else if (fs.existsSync("config/wdio.conf.js")) {
+		wdioConfig = "config/wdio.conf.js";
+	}
+
+// run wdio with calculated parameters
+	const cmd = `npx cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
+	console.log(`executing: ${cmd}`);
+	child_process.execSync(cmd, {stdio: 'inherit'});
+}
+
+if (require.main === module) {
+	testFn(process.argv)
+}
+
+exports._ui5mainFn = testFn;

package/lib/vite-bundler/vite-bundler.mjs

@@ -0,0 +1,35 @@
+import { build } from 'vite';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { pathToFileURL } from "url";
+
+async function start(outArgv) {
+    const argv = yargs(hideBin(outArgv))
+        .alias("c", "config")
+        .alias("mode", "mode")
+        .alias("base", "base")
+        .argv;
+
+    try {
+        await build({
+            configFile: argv.config || undefined,
+            mode: argv.mode || undefined,
+            base: argv.base || undefined,
+            logLevel: 'info',
+        });
+    } catch (e) {
+        console.error(e)
+        process.exit(1);
+    }
+};
+
+const filePath = process.argv[1];
+const fileUrl = pathToFileURL(filePath).href;
+
+if (import.meta.url === fileUrl) {
+    start(process.argv)
+}
+
+export default {
+    _ui5mainFn: start
+}