@ui5/webcomponents-tools 0.0.0-fb61e9889 → 0.0.0-fca1107e7

package/lib/jsdoc/plugin.js

@@ -33,6 +33,12 @@
  *
  *   native
  *
+ *   noattribute
+ * 
+ *   formEvents
+ * 
+ *   formProperty
+ *
  *   allowPreventDefault
  *
  * It furthermore listens to the following JSDoc3 events to implement additional functionality
@@ -2099,6 +2105,41 @@ exports.defineTags = function(dictionary) {
 			doclet.native = true;
 		}
 	});
+
+	dictionary.defineTag('noattribute', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.noattribute = true;
+		}
+	});
+
+	dictionary.defineTag('formEvents', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			if (tag.value) {
+				doclet.formEvents = doclet.formEvents || [];
+				tag.value.split(" ").forEach(function($) {
+					if ( doclet.formEvents.indexOf($) < 0 ) {
+						doclet.formEvents.push($);
+					}
+				});
+			}
+		}
+	});
+
+	dictionary.defineTag('formProperty', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.formProperty = true;
+		}
+	});
+
+	dictionary.defineTag('formAssociated', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.formAssociated = doclet.formAssociated || true;
+		}
+	});
 };
 
 exports.handlers = {

package/lib/jsdoc/preprocess.js

@@ -0,0 +1,146 @@
+const process = require("process");
+const path = require("path");
+const fs = require("fs/promises");
+
+const inputDir = process.argv[2];
+const sourceDir = process.argv[3];
+
+const preprocessTypes = async () => {
+	try {
+		const { globby } = await import("globby");
+		const fileNames = await globby(inputDir.replace(/\\/g, "/") + "**/types/*.js");
+
+		return Promise.all(fileNames.map(processTypeFile));
+	} catch(e) {
+		console.log("JSDoc types preprocess failed: ", e);
+	}
+};
+
+const processTypeFile = async (fileName) => {
+	let fileContent = `${await fs.readFile(fileName)}`;
+
+	const re = new RegExp(`(\\/\\*\\*\\s*\\n([^\\*]|(\\*(?!\\/)))*\\*\\/)\\s+[\\w\\d]+\\[\\"([\\w\\d]+)\\"\\]\\s*=\\s*\\"([\\w\\d]+)\\";`, "gm")
+	let matches = [...fileContent.matchAll(re)];
+
+	// Get all type values
+	const typeData = matches.map(match => {
+		return {
+			comment: match[1],
+			key: match[4],
+			value: match[5],
+		};
+	});
+	if (typeData.length === 0) {
+		return;
+	}
+
+	const typeName = path.parse(fileName).name;
+
+	matches = fileContent.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//gm);
+	const comment = matches[0];
+
+	const propsCode = typeData.map(item => {
+		return `${item.comment}\n get ${item.key}() { return "${item.value}"; }`;
+	}).join("\n");
+
+	const newClassCode = `
+	${comment}
+	class ${typeName} {
+		${propsCode}
+	};
+
+	export default ${typeName};`;
+
+	fileContent = newClassCode;
+
+	return fs.writeFile(fileName, fileContent);
+};
+
+const preprocessComponents = async () => {
+	if (!sourceDir) {
+		return; // if the second param was not passed, there are no components
+	}
+
+	try {
+		const { globby } = await import("globby");
+		const fileNames = await globby(sourceDir.replace(/\\/g, "/") + "/*.ts");
+
+		return Promise.all(fileNames.map(processComponentFile));
+	} catch(e) {
+		console.log("JSDoc components preprocess failed: ", e);
+	}
+};
+
+const isClass = text => {
+	return text.includes("@abstract") || text.includes("@class");
+};
+
+const isAnnotationComment = (comment) =>  {
+	return comment.includes("@name");
+}
+
+const processComponentFile = async (fileName) => {
+	// source file (src/*.ts)
+	let tsFileContent = `${await fs.readFile(fileName)}`;
+
+	// Skip all non-component files
+	if (!isClass(tsFileContent)) {
+		return;
+	}
+
+	// Gather all JSDocs from the original .ts file
+	const allJSDocsRegExp = new RegExp(`\\/\\*\\*(.|\\n)+?\\s+\\*\\/`, "gm");
+	let allJSDocs = [...tsFileContent.matchAll(allJSDocsRegExp)];
+	allJSDocs = allJSDocs.map(match => match[0]); // all /** ..... */ comments
+
+	// Find where the class is defined in the original file
+	const tsClassDefinitionRegExp = new RegExp(`^(abstract\\s)?class [\\w\\d_]+`, "gm");
+	let tsClassDefinitionMatch = tsFileContent.match(tsClassDefinitionRegExp);
+	if (!tsClassDefinitionMatch) {
+		return; // no class defined in this .ts file
+	}
+	const tsClassDefinition = tsClassDefinitionMatch[0];
+	const tsClassDefinitionIndex = tsFileContent.indexOf(tsClassDefinition);
+
+	// Gather all JSDocs that are before the class definition (except for the @class one)
+	const JSDocsToAppend = [];
+	allJSDocs.forEach(JSDoc => {
+		if (!isClass(JSDoc) && (tsFileContent.indexOf(JSDoc) < tsClassDefinitionIndex || isAnnotationComment(JSDoc, tsFileContent))) {
+			JSDocsToAppend.push(JSDoc);
+		}
+	});
+
+
+
+	// destination file (jsdoc-dist/*.js)
+	const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
+	let jsFileContent = `${await fs.readFile(destFileName)}`;
+
+	const classDefinitionRegExp = new RegExp(`(let.*? = class)|(^class.*?)`, "gm");
+	let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
+	if (!classDefinitionMatch) {
+		return; // not a file, generated by typescript, nothing to do here
+	}
+
+	const classDefinition = classDefinitionMatch[0];
+	const classDefinitionIndex = jsFileContent.indexOf(classDefinition); // classDefinitionIndex is the position in the file where the class is defined
+
+	// All comments before the class definition, except for the @class comment, must be removed
+	allJSDocs.forEach(JSDoc => {
+		if (!isClass(JSDoc) && jsFileContent.indexOf(JSDoc) < classDefinitionIndex) {
+			jsFileContent = jsFileContent.replace(JSDoc, "");
+		}
+	});
+
+	// Put all other comments at the end of the file
+	jsFileContent = jsFileContent + "\n\n" + JSDocsToAppend.join("\n\n");
+	return fs.writeFile(destFileName, jsFileContent);
+};
+
+Promise.all([
+	preprocessTypes(),
+	preprocessComponents(),
+]).then(() => {
+	console.log("JSDoc preprocess ready.");
+});
+

package/lib/jsdoc/template/publish.js

@@ -2804,6 +2804,10 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 						attrib("export", undefined, '', true);
 					}
 
+					if (member.noattribute) {
+						attrib("noattribute", true);
+					}
+
 					if (member.readonly) {
 						attrib("readonly", member.readonly, null);
 					}
@@ -2815,7 +2819,22 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 					if ( member.since ) {
 						attrib("since", extractVersion(member.since));
 					}
-					attrib("type", listTypes(member.type));
+
+					if ( member.formEvents ) {
+						attrib("formEvents", member.formEvents);
+					}
+
+					if ( member.formEvents ) {
+						attrib("formProperty", member.formProperty);
+					}
+
+					var type = listTypes(member.type);
+					attrib("type", type);
+
+					if ((type === "object" || type === "Object") && visibility(member) === "public") {
+						attrib("noattribute", true);
+					}
+
 					tag("description", normalizeWS(member.description), true);
 					if (member.defaultvalue) {
 						attrib("defaultValue", member.defaultvalue);
@@ -3854,7 +3873,7 @@ function createAPIJS(symbols, filename) {
 
 	var output = [];
 
-	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
+	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|formEvents|formProperty|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
 
 	function isNoKeyword($) { return !rkeywords.test($.name); }
 

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/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 => {
+	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/missing-dependencies.js

@@ -0,0 +1,65 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+const projectPath = process.argv[2];
+
+// gather all tags from all files
+const tagsToFiles = new Map();
+const filesToTags = new Map();
+
+let files = [
+	...glob.sync(path.join("packages/main/src/**/*.js")),
+	...glob.sync(path.join("packages/fiori/src/**/*.js")),
+];
+files.forEach(file => {
+	let matches = file.match(/([a-zA-Z0-9_]+)\.js$/);
+	const name = matches[1];
+
+	const content = `${fs.readFileSync(file)}`;
+	matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		const tag = matches[1];
+		tagsToFiles.set(tag, name);
+		filesToTags.set(name, tag);
+	}
+});
+
+// Process the package
+files = glob.sync(path.join(projectPath, "src/**/*.js"));
+tagsToFiles.forEach((file, tag) => {
+	const sourcePath = path.join(projectPath, "src/", `${file}.js`);
+	if (!fs.existsSync(sourcePath)) {
+		return;
+	}
+	const sourceContent = `${fs.readFileSync(sourcePath)}`.split("\n").join(" ");
+
+	const hbsPath = path.join(projectPath, "src/", `${file}.hbs`);
+	const hbsContent = fs.existsSync(hbsPath) ? `${fs.readFileSync(hbsPath)}` : "";
+
+	const hbsPopoverPath = path.join(projectPath, "src/", `${file}Popover.hbs`);
+	const hbsPopoverContent = fs.existsSync(hbsPopoverPath) ? `${fs.readFileSync(hbsPopoverPath)}` : "";
+
+	// deps
+	let deps = [];
+	let matches = sourceContent.match(/static get dependencies\(\) \{\s+return \[(.*?)\]/);
+	if (matches) {
+		deps = matches[1].split(",").map(x => x.trim()).filter(x => !!x);
+	}
+
+	// tags
+	matches = [
+		...hbsContent.matchAll(/<ui5-[a-z0-9-]+/g),
+		...hbsPopoverContent.matchAll(/<ui5-[a-z0-9-]+/g),
+	];
+	if (matches) {
+		matches.forEach(match => {
+			const tagUsed = match[0].substr(1);
+			const dep = tagsToFiles.get(tagUsed);
+			if (!deps.includes(dep)) {
+				console.log(`${file} used ${tagUsed}`);
+			}
+		});
+	}
+});

package/lib/scoping/report-tags-usage.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+// gather all tags from all files
+const tags = new Set();
+const files = glob.sync(path.join(process.argv[2], "src/**/*.js"));
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		tags.add(matches[1]);
+	}
+});
+
+// report all usages of any tag within any file, which is not the tag definition and is not hasAttribute
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const lines = content.split("\n");
+	lines.forEach(line => {
+		tags.forEach(tag => {
+			if (line.includes(`"${tag}"`) && !line.includes(`tag: "${tag}",`) && !line.includes(`hasAttribute("${tag}")`)) {
+				console.log(`${file}: ${line.trim()}`);
+			}
+		});
+	});
+});

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,71 @@
+const child_process = require("child_process");
+const { readFileSync } = require("fs");
+const path = require("path");
+const fs = require("fs");
+
+// 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 (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(" ");
+}
+
+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 = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
+console.log(`executing: ${cmd}`);
+child_process.execSync(cmd, {stdio: 'inherit'});