@ui5/webcomponents-tools 0.0.0-5f8ce9393 → 0.0.0-6d98d0c29

package/lib/jsdoc/plugin.js

@@ -29,7 +29,11 @@
  *
  *   appenddocs
  *
- *   customtag
+ *   tagname
+ *
+ *   native
+ *
+ *   allowPreventDefault
  *
  * It furthermore listens to the following JSDoc3 events to implement additional functionality
  *
@@ -2060,9 +2064,11 @@ exports.defineTags = function(dictionary) {
 	});
 
 	dictionary.defineTag('slot', {
-		mustNotHaveValue: true,
 		onTagged: function(doclet, tag) {
 			doclet.slot = true;
+			if (tag.value) {
+				doclet.propertyName = tag.value;
+			}
 		}
 	});
 
@@ -2073,10 +2079,24 @@ exports.defineTags = function(dictionary) {
 		}
 	});
 
-	dictionary.defineTag('customtag', {
+	dictionary.defineTag('tagname', {
 		mustHaveValue: true,
 		onTagged: function(doclet, tag) {
-			doclet.customtag = tag.value;
+			doclet.tagname = tag.value;
+		}
+	});
+
+	dictionary.defineTag('allowPreventDefault', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.allowPreventDefault = true;
+		}
+	});
+
+	dictionary.defineTag('native', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.native = true;
 		}
 	});
 };

package/lib/jsdoc/template/publish.js

@@ -2651,8 +2651,8 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 
 	attrib("name", symbol.longname);
 	attrib("basename", symbol.name);
-	if (symbol.customtag) {
-		attrib("customTag", symbol.customtag);
+	if (symbol.tagname) {
+		attrib("tagname", symbol.tagname);
 	}
 	if (symbol.appenddocs) {
 		attrib("appenddocs", symbol.appenddocs);
@@ -2838,6 +2838,9 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 				if (member.slot) {
 					tag("property");
 					attrib("name", member.name);
+					if (member.propertyName) {
+						attrib("propertyName", member.propertyName);
+					}
 					if (member.__ui5.module && member.__ui5.module !== symbol.__ui5.module) {
 						attrib("module", member.__ui5.module);
 						attrib("export", undefined, '', true);
@@ -2879,6 +2882,12 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 					attrib("module", member.__ui5.module);
 					attrib("export", undefined, '', true);
 				}
+				if (member.allowPreventDefault) {
+					attrib("allowPreventDefault", true);
+				}
+				if (member.native) {
+					attrib("native", true);
+				}
 				attrib("visibility", visibility(member), 'public');
 				if ( member.scope === 'static' ) {
 					attrib("static", true, false, /* raw = */true);

package/lib/polyfill-placeholder/index.js

@@ -0,0 +1,5 @@
+const mkdirp = require("mkdirp");
+const fs = require("fs");
+
+mkdirp.sync("dist/webcomponentsjs/");
+fs.writeFileSync("dist/webcomponentsjs/webcomponents-loader.js", "");

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

@@ -1,33 +1,45 @@
-const postcss = require('postcss');
 const fs = require('fs');
 const path = require('path');
 const mkdirp = require('mkdirp');
+const assets = require("../../assets-meta.js");
 
-const getDefaultThemeCode = packageName => {
-	return `import "@ui5/webcomponents-theme-base/dist/DefaultTheme.js";
-	
-import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+const DEFAULT_THEME = assets.themes.default;
 
-import fiori3 from "./sap_fiori_3/parameters-bundle.css.js";
+const getDefaultThemeCode = packageName => {
+	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
-registerThemeProperties("${packageName}", "sap_fiori_3", fiori3);
+import defaultThemeBase from "@ui5/webcomponents-theme-base/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
+import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
 
+registerThemePropertiesLoader("@ui5/webcomponents-theme-base", "${DEFAULT_THEME}", () => defaultThemeBase);
+registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
 `;
 };
 
-module.exports = postcss.plugin('add css to esm transform plugin', function (opts) {
-	opts = opts || {};
-
-	return function (root) {
-		const css = JSON.stringify(root.toString());
-		const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
+const proccessCSS = css => {
+	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
+	css = css.replace(/\.background-image.*{.*}/, "");
+	css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
+	css = css.replace(/--sapFontUrl.*\);?/, "");
+	return JSON.stringify(css);
+}
 
-		mkdirp.sync(path.dirname(targetFile));
+module.exports = function (opts) {
+	opts = opts || {};
 
-		const filePath = `${targetFile}.js`;
+	return {
+		postcssPlugin: 'postcss-css-to-esm',
+		Once (root) {
+			let css = root.toString();
+			css = proccessCSS(css);
 
-		const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
+			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
+			mkdirp.sync(path.dirname(targetFile));
 
-		fs.writeFileSync(filePath, `${defaultTheme}export default ${css};`);
-	}
-});
+			const filePath = `${targetFile}.js`;
+			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
+			fs.writeFileSync(filePath, `${defaultTheme}export default ${css};`);
+		}
+	};
+};
+module.exports.postcss = true;

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

@@ -1,20 +1,31 @@
-const postcss = require('postcss');
 const fs = require('fs');
 const path = require('path');
 const mkdirp = require('mkdirp');
 
-module.exports = postcss.plugin('add css to JSON transform plugin', function (opts) {
-	opts = opts || {};
+const proccessCSS = css => {
+	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
+	css = css.replace(/\.background-image.*{.*}/, "");
+	css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
+	css = css.replace(/--sapFontUrl.*\);?/, "");
+	return css;
+}
 
-	return function (root) {
-		const css = root.toString();
-		const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
+module.exports = function (opts) {
+	opts = opts || {};
 
-		mkdirp.sync(path.dirname(targetFile));
+	return {
+		postcssPlugin: 'postcss-css-to-json',
+		Once (root) {
+			let css = root.toString();
+			css = proccessCSS(css);
 
-		const filePath = `${targetFile}.json`;
+			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
+			mkdirp.sync(path.dirname(targetFile));
 
-		fs.writeFileSync(filePath, JSON.stringify({_: css}));
+			const filePath = `${targetFile}.json`;
+			fs.writeFileSync(filePath, JSON.stringify({_: css}));
+		}
+	};
+};
 
-	}
-});
+module.exports.postcss = true;

package/lib/postcss-new-files/index.js

@@ -0,0 +1,36 @@
+const chokidar = require("chokidar");
+const commandLineArgs = require("command-line-args");
+const { exec } = require("child_process");
+
+const options = commandLineArgs([
+	{ name: "srcFiles", type: String },
+]);
+
+const runPostcss = path => {
+	let command = `postcss ${path} --config config/postcss.components --base src --dir dist/css/`;
+	console.log(`Executing: ${command}`);
+	exec(command, (err, stdout, stderr) => {
+		if (err) {
+			console.log(`Could not run postcss for ${path}. Error: ${err}`);
+		}
+	});
+
+	command = `${command} -w`;
+	console.log(`Executing: ${command}`);
+	exec(command, (err, stdout, stderr) => {
+		if (err) {
+			console.log(`Could not run postcss in watch mode for ${path}. Error: ${err}`);
+		}
+	});
+};
+
+let ready = false; // Do nothing until the ready event has been fired (we don't want to recompile all files initially)
+const watcher = chokidar.watch(options.srcFiles);
+watcher.on("ready", () => {
+	ready = true; // Initial scan is over -> waiting for new files
+});
+watcher.on("add", path => {
+	if (ready) {
+		runPostcss(path);
+	}
+});

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

@@ -0,0 +1,20 @@
+const fs = require("fs");
+const glob = require("glob");
+
+const basePath = process.argv[2];
+
+const replaceGlobalCoreUsage = (srcPath) => {
+
+	const original = fs.readFileSync(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);
+	}
+};
+
+const fileNames = glob.sync(basePath + "**/*.js");
+fileNames.forEach(replaceGlobalCoreUsage);
+console.log("Success: Replaced global core usage in:", basePath);

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

@@ -0,0 +1,44 @@
+const fs = require("fs");
+const path = require("path");
+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;
+};
+
+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];
+	}).filter(item => !!item);
+};
+
+const isComponentsPackage = (packageFileContent) => {
+	return packageFileContent.ui5 && packageFileContent.ui5.webComponentsPackage;
+};
+
+const getDepComponentPackages = packageDir => {
+	const packageFile = path.join(packageDir, "package.json");
+	const packageFileContent = JSON.parse(fs.readFileSync(packageFile));
+	if (!isComponentsPackage(packageFileContent)) {
+		return [];
+	}
+
+	return Object.keys(packageFileContent.dependencies || {}).map(dep => path.dirname(require.resolve(path.join(dep, "package.json"))));
+};
+
+const getAllTags = (packageDir) => {
+	return getPackageTags(packageDir).concat(getDepComponentPackages(packageDir).flatMap(getPackageTags));
+};
+
+module.exports = getAllTags;

package/lib/scoping/lint-src.js

@@ -0,0 +1,31 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const getAllTags = require("./get-all-tags.js");
+
+const tags = getAllTags(process.cwd());
+
+const errors = [];
+
+glob.sync(path.join(process.cwd(), "src/**/*.css")).forEach(file => {
+	let content = 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}`);
+		}
+	});
+});
+
+glob.sync(path.join(process.cwd(), "src/**/*.js")).forEach(file => {
+	let content = 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}`);
+		}
+	});
+});
+
+if (errors.length) {
+	errors.forEach(error => console.log(error));
+	throw new Error("Errors found.");
+}

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

@@ -0,0 +1,40 @@
+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 => {
+	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(/bundle\.(.*?)\.js/g, `bundle.scoped.$1.js`);
+	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/serve/index.js

@@ -0,0 +1,46 @@
+const fs = require("fs");
+const path = require("path");
+const commandLineArgs = require("command-line-args");
+const { exec } = require("child_process");
+const colors = require("colors/safe");
+const isPortReachable = require("is-port-reachable");
+
+const options = commandLineArgs([
+	{ name: "port", type: Number },
+	{ name: "portStep", type: Number },
+	{ name: "packageName", type: String },
+	{ name: "dir", type: String },
+	{ name: "config", type: String },
+]);
+const serveConfig = path.join(__dirname, `serve.json`);
+
+const requestPort = async () => {
+	const serveProcess = (await gen.next()).value;
+	serveProcess.stdout.on('data', data => {
+		const matches = data.match(/Accepting connections at .*?:(\d+)/);
+		if (matches) {
+			console.log(colors.yellow(`Reserved port ${matches[1]} for the ${options.packageName} package.`));
+			fs.writeFileSync(".port", matches[1]);
+		}
+	});
+};
+
+async function* serverGenerator(callback, port = 8080, step = 1) {
+	while (true) {
+		const portInUse = await isPortReachable(port, { host: "127.0.0.1" });
+		if (!portInUse) {
+			const command = `serve --config "${serveConfig}" --no-port-switching --no-clipboard -l ${port} ${options.dir}`;
+			console.log(colors.yellow(`Executing: ${command}`));
+			const serveProcess = exec(command, (err) => {
+				console.log(colors.yellow(`Port ${port} already in use.`));
+				callback();
+			});
+			yield serveProcess;
+		}
+		port += step;
+	}
+}
+
+const gen = serverGenerator(requestPort, options.port, options.portStep);
+
+requestPort();

package/package-lock.json

@@ -0,0 +1,48 @@
+{
+  "name": "@ui5/webcomponents-tools",
+  "version": "1.0.0-rc.8",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "dev": true,
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-5f8ce9393",
+  "version": "0.0.0-6d98d0c29",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -22,61 +22,63 @@
     "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": "^5.12.1",
-    "@wdio/dot-reporter": "^5.12.1",
-    "@wdio/local-runner": "^5.12.1",
-    "@wdio/mocha-framework": "^5.12.1",
-    "@wdio/spec-reporter": "^5.12.1",
-    "@wdio/sync": "^5.12.1",
-    "@webcomponents/webcomponentsjs": "^2.4.0",
-    "chai": "^4.2.0",
-    "chokidar-cli": "^2.0.0",
-    "chromedriver": "^79.0.0",
-    "clean-css": "^4.2.1",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/preset-env": "^7.13.10",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-url": "^6.0.0",
+    "@wdio/cli": "^7.2.0",
+    "@wdio/dot-reporter": "^7.2.0",
+    "@wdio/local-runner": "^7.2.0",
+    "@wdio/mocha-framework": "^7.2.0",
+    "@wdio/spec-reporter": "^7.2.0",
+    "@wdio/sync": "^7.2.0",
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "chai": "^4.3.4",
+    "child_process": "^1.0.2",
+    "chokidar": "^3.5.1",
+    "chokidar-cli": "^2.1.0",
+    "clean-css": "^5.1.1",
+    "colors": "^1.4.0",
     "command-line-args": "^5.1.1",
-    "concurrently": "^5.0.0",
-    "copy-and-watch": "^0.1.4",
-    "cross-env": "^5.2.0",
+    "concurrently": "^6.0.0",
+    "cross-env": "^7.0.3",
     "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",
+    "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",
+    "folder-hash": "^4.0.1",
+    "getopts": "^2.3.0",
+    "glob": "^7.1.6",
+    "handlebars": "^4.7.7",
+    "is-port-reachable": "^3.0.0",
+    "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.4",
     "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-less": "^1.1.2",
-    "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": "^5.0.2"
+    "nps": "^5.10.0",
+    "postcss": "^8.2.10",
+    "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "^10.0.2",
+    "postcss-import": "^14.0.0",
+    "properties-reader": "^2.2.0",
+    "puppeteer": "^8.0.0",
+    "recursive-readdir": "^2.2.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.41.4",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "serve": "^12.0.0",
+    "wdio-chromedriver-service": "^7.0.0"
   },
-  "resolutions": {
-    "rollup-plugin-livereload/livereload/chokidar": "^3.x"
+  "peerDependencies": {
+    "chromedriver": "*"
   }
 }