@ui5/webcomponents-tools 0.0.0-dc606098a → 0.0.0-ddc5fe31b

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

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const getAllTags = require("./get-all-tags.js");
+
+const root = process.argv[2];
+const suffix = process.argv[3];
+
+const tags = getAllTags(process.cwd());
+
+// Replaces tags in HTML content, f.e. <ui5-button> with <ui5-button-ver> or </ui5-button> with </ui5-button-ver>
+const replaceTagsHTML = content => {
+	tags.forEach(tag => {
+		content = content.replace(new RegExp(`(<\/?)(${tag})(\/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
+	});
+	return 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`);
+	});
+	return 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("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
+	content = replaceTagsHTML(content);
+	fs.writeFileSync(file, content);
+});
+
+// Replace tag names everywhere
+glob.sync(path.join(root, "/**/*.{html,css,js}")).forEach(file => {
+	let content = String(fs.readFileSync(file));
+	content = replaceTagsAny(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'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-dc606098a",
+  "version": "0.0.0-ddc5fe31b",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -13,8 +13,7 @@
   "scripts": {},
   "bin": {
     "wc-dev": "bin/dev.js",
-    "wc-create-ui5-element": "bin/create-ui5-element.js",
-    "wc-init-ui5-package": "bin/init-ui5-package.js"
+    "wc-create-ui5-element": "bin/create-ui5-element.js"
   },
   "repository": {
     "type": "git",
@@ -22,60 +21,62 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/preset-env": "^7.1.0",
-    "@wdio/cli": "^6.1.3",
-    "@wdio/dot-reporter": "^6.0.16",
-    "@wdio/local-runner": "^6.1.3",
-    "@wdio/mocha-framework": "^6.1.0",
-    "@wdio/spec-reporter": "^6.0.16",
-    "@wdio/sync": "^6.1.0",
-    "@webcomponents/webcomponentsjs": "^2.4.0",
-    "chai": "^4.2.0",
-    "chokidar-cli": "^2.0.0",
-    "chromedriver": "^81.0.0",
-    "clean-css": "^4.2.1",
+    "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "@wdio/cli": "^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",
+    "ajv": "^8.12.0",
+    "chai": "^4.3.4",
+    "child_process": "^1.0.2",
+    "chokidar": "^3.5.1",
+    "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
-    "concurrently": "^5.0.0",
-    "copy-and-watch": "^0.1.4",
-    "cross-env": "^5.2.0",
-    "cssnano": "^4.1.10",
-    "escodegen": "^1.11.0",
-    "eslint": "^5.10.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.14.0",
+    "comment-parser": "^1.4.0",
+    "concurrently": "^6.0.0",
+    "cross-env": "^7.0.3",
+    "escodegen": "^2.0.0",
+    "eslint": "^7.22.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
     "esprima": "^4.0.1",
-    "getopts": "^2.2.3",
-    "glob": "^7.1.3",
-    "handlebars": "^4.1.2",
-    "jsdoc": "^3.6.3",
+    "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",
     "json-beautify": "^1.1.1",
-    "mkdirp": "^0.5.1",
-    "npm-run-all": "^4.1.3",
-    "nps": "^5.9.8",
-    "postcss": "^7.0.18",
-    "postcss-cli": "^6.1.3",
-    "postcss-combine-duplicated-selectors": "^7.0.0",
-    "postcss-import": "^12.0.1",
-    "properties-reader": "^0.3.1",
-    "puppeteer": "^1.11.0",
-    "rimraf": "^2.6.2",
-    "rollup": "^1.1.2",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-livereload": "^1.0.4",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-notify": "^1.1.0",
-    "rollup-plugin-string": "^2.0.2",
-    "rollup-plugin-terser": "^5.1.3",
-    "rollup-plugin-url": "^2.2.0",
-    "rollup-plugin-visualizer": "^0.9.2",
-    "serve": "^10.1.1",
-    "wdio-chromedriver-service": "^6.0.2"
+    "mkdirp": "^1.0.4",
+    "nps": "^5.10.0",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
+    "postcss-selector-parser": "^6.0.10",
+    "prompts": "^2.4.2",
+    "properties-reader": "^2.2.0",
+    "recursive-readdir": "^2.2.2",
+    "resolve": "^1.20.0",
+    "rimraf": "^3.0.2",
+    "slash": "3.0.0",
+    "vite": "^4.4.9",
+    "wdio-chromedriver-service": "^7.3.2"
   },
-  "resolutions": {
-    "rollup-plugin-livereload/livereload/chokidar": "^3.x"
+  "peerDependencies": {
+    "chromedriver": "*",
+    "typescript": "^4.9.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "esbuild": "^0.19.9",
+    "yargs": "^17.5.1"
   }
 }

package/bin/init-ui5-package.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require("../lib/init-package/index.js");

package/components-package/rollup.js

@@ -1,134 +0,0 @@
-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 packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
-
-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}`);
-			}
-		}
-	};
-}
-
-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(ui5DevImportCheckerPlugin());
-
-	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/**",
-			sourcemap: true,
-		}));
-	}
-
-	plugins.push(resolve());
-
-	if (!process.env.DEV) {
-		plugins.push(terser());
-	}
-
-	if (process.env.DEV) {
-		plugins.push(notify());
-	}
-
-	const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
-	if (es6DevMain && os.platform() !== "win32") {
-		plugins.push(livereload({
-			watch: [
-				"dist/resources/bundle.esm.js",
-				"dist/**/*.html",
-				"dist/**/*.json",
-			]
-		}));
-	}
-
-	return plugins;
-};
-
-const getES6Config = () => {
-	return [{
-		input: "bundle.esm.js",
-		output: {
-			dir: "dist/resources",
-			format: "esm",
-			sourcemap: true
-		},
-		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
-		},
-		plugins: getPlugins({transpile: false}),
-	}];
-};
-
-const getES5Config = () => {
-	return [ {
-		input: "bundle.es5.js",
-		output: {
-			dir: "dist/resources",
-			format: "iife",
-			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
-		},
-		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
-		},
-		plugins: getPlugins({transpile: true}),
-	}];
-};
-
-let config = getES6Config();
-
-if (process.env.ES5_BUILD) {
-	config = config.concat(getES5Config());
-}
-
-module.exports = config;

package/components-package/serve.json

@@ -1,3 +0,0 @@
-{
-  "cleanUrls": false
-}

package/lib/documentation/index.js

@@ -1,143 +0,0 @@
-const cssVariables = {};
-const template = require('./templates/template').template;
-const sinceTemplate = require('./templates/api-component-since').template;
-const propertiesTemplate = require('./templates/api-properties-section').template;
-const slotsTemplate = require('./templates/api-slots-section').template;
-const eventsTemplate = require('./templates/api-events-section').template;
-const methodsTemplate = require('./templates/api-methods-section').template;
-const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
-const Handlebars = require('handlebars/dist/handlebars.min.js');
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-
-const api = JSON.parse(fs.readFileSync(path.normalize(process.argv[2])));
-
-const entries = api['symbols'];
-const compiledHandlebars = Handlebars.compile(template);
-const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
-const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
-const sinceMarker = "<!--since_tag_marker-->";
-
-const getComponentByName = name => {
-	return entries.find(element => {
-		return element.basename === name;
-	})
-};
-
-const getCSSVarsByName = name => {
-	return cssVariables[name] || [];
-};
-
-const capitalize = str => {
-	return str.replace(/^./, str => str.toUpperCase());
-};
-
-Handlebars.registerHelper('toLowerCase', function (str) {
-	return str ? str.toLowerCase() : "";
-});
-
-Handlebars.registerHelper('toKebabCase', function (str) {
-	const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-	return kebab !== str ? kebab : undefined;
-});
-
-Handlebars.registerHelper('checkEven', function (iIndex) {
-	return (iIndex % 2 === 0) ? "api-table-roll-even" : "api-table-roll-odd";
-});
-
-Handlebars.registerPartial('properties', propertiesTemplate);
-Handlebars.registerPartial('slots', slotsTemplate);
-Handlebars.registerPartial('events', eventsTemplate);
-Handlebars.registerPartial('methods', methodsTemplate);
-Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
-
-mkdirp.sync(`dist/test-resources/api`);
-
-let entriesAPI = [];
-
-const appendCSSVarsAPI = entry => {
-	entry.cssVariables = getCSSVarsByName(entry.basename);
-	return entry;
-}
-
-const calculateAPI = entry => {
-	if (entriesAPI.indexOf(entry.basename) !== -1) {
-		return entry;
-	}
-
-	let parent = getComponentByName(entry.extends) || {};
-
-	entry = appendCSSVarsAPI(entry);
-	parent = appendCSSVarsAPI(parent);
-
-	parent = { ...{ properties: [], events: [], slots: [], cssVariables: [] }, ...parent };
-
-	// extend component documentation
-	entry.properties = [...(entry.properties || []), ...(parent.properties || [])];
-	entry.events = [...(entry.events || []), ...(parent.events || [])];
-	entry.slots = [...(entry.slots || []), ...(parent.slots || [])];
-	entry.cssVariables = [...(entry.cssVariables || []), ...(parent.cssVariables || [])];
-
-	entriesAPI.push(entry.basename);
-
-	return entry;
-}
-
-const appendAdditionalEntriesAPI = entry => {
-	if (entry.appenddocs) {
-		const additionalEntries = entry.appenddocs.split(" ");
-		entry.additionalDocs = [];
-
-		additionalEntries.forEach(entryName => {
-			let additionalEntry = getComponentByName(entryName);
-			additionalEntry = calculateAPI(additionalEntry);
-			entry.additionalDocs.push(additionalEntry);
-		});
-	}
-
-	return entry;
-}
-
-const generateSamplePage = entry => {
-	let content = "";
-
-	try {
-		content = fs.readFileSync(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
-	} catch (err) { }
-
-	if (content) {
-		const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
-		const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
-
-		content = content.replace('<!-- JSDoc marker -->', APIReference);
-		content = content.replace(sinceMarker, EntitySince);
-
-		content = content.replace(linkMatcher, match => {
-			const component = linkMatcher.exec(match)[2];
-
-			// reset the regex
-			linkMatcher.lastIndex = 0;
-
-			return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
-		});
-
-		fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content, (err) => {
-			// console.log(err);
-		});
-	}
-}
-
-const generateComponentAPI = entry => {
-	// (1) calculate the API
-	entry = calculateAPI(entry);
-
-	// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
-	entry = appendAdditionalEntriesAPI(entry);
-
-	// (3) generate sample page
-	generateSamplePage(entry);
-}
-
-entries.forEach(generateComponentAPI);
-entriesAPI = [];

package/lib/documentation/templates/api-component-since.js

@@ -1,3 +0,0 @@
-module.exports = {
-	template: `{{#if this.since}}v{{this.since}}{{/if}}`
-};

package/lib/documentation/templates/api-css-variables-section.js

@@ -1,24 +0,0 @@
-module.exports = {
-    template: `
-      {{#if cssVariables}}
-        <h3 class="comment-api-title" >CSS variables</h3>
-        <p class="small-space-top">You can use the following CSS varialbes to change the component styling.</p>
-  
-        <div class="small-space-top api-table">
-          <div class="head api-table-header-roll">
-            <div class="cell api-table-header-cell">Name</div>
-            <div class="cell api-table-header-cell">Description</div>
-          </div>
-  
-          {{#each cssVariables}}
-            <div class="row {{checkEven @index}}">
-              <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-              <div class="cell api-table-content-cell api-table-content-cell-description">
-                  {{{this.description}}}
-              </div>
-            </div>
-          {{/each}}
-  
-        </div>
-      {{/if}}`
-};