@ui5/webcomponents-tools 0.0.0-cc312800a → 0.0.0-cf50976ce

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

@@ -8,10 +8,10 @@ const DEFAULT_THEME = assets.themes.default;
 const getDefaultThemeCode = packageName => {
 	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
-import defaultThemeBase from "@ui5/webcomponents-theme-base/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
+import defaultThemeBase from "@ui5/webcomponents-theming/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("@ui5/webcomponents-theming", "${DEFAULT_THEME}", () => defaultThemeBase);
 registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
 `;
 };
@@ -38,8 +38,20 @@ module.exports = function (opts) {
 
 			const filePath = `${targetFile}.js`;
 			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
-			fs.writeFileSync(filePath, `${defaultTheme}export default ${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);
+			}
 		}
 	};
 };
-module.exports.postcss = true;
+module.exports.postcss = true;

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

@@ -23,9 +23,25 @@ module.exports = function (opts) {
 			mkdirp.sync(path.dirname(targetFile));
 
 			const filePath = `${targetFile}.json`;
-			fs.writeFileSync(filePath, JSON.stringify({_: css}));
+			const data = {
+				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 = JSON.stringify({_: data});
+			if (content !== oldContent) {
+				fs.writeFileSync(filePath, content);
+			}
 		}
 	};
 };
 
-module.exports.postcss = true;
+module.exports.postcss = true;

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

@@ -0,0 +1,25 @@
+const fs = require("fs").promises;
+
+const basePath = process.argv[2];
+
+const replaceGlobalCoreUsage = async (srcPath) => {
+
+	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}`;
+		return fs.writeFile(srcPath, replaced);
+	}
+};
+
+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/lint-src.js

@@ -10,7 +10,7 @@ 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"))) {
+		if (content.match(new RegExp(`(^|[^\.\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
 			errors.push(`Warning! ${tag} found in ${file}`);
 		}
 	});

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

@@ -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-cc312800a",
+  "version": "0.0.0-cf50976ce",
   "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,65 +21,53 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@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",
+    "@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": "^2.1.0",
-    "clean-css": "^5.1.1",
-    "colors": "^1.4.0",
+    "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.10",
+    "cssnano": "^4.1.11",
     "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",
-    "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.0.0",
+    "is-port-reachable": "^3.1.0",
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
-    "npm-run-all": "^4.1.3",
     "nps": "^5.10.0",
-    "postcss": "^8.2.8",
-    "postcss-cli": "^8.3.1",
-    "postcss-combine-duplicated-selectors": "^10.0.2",
-    "postcss-import": "^14.0.0",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.0.2",
+    "postcss-selector-parser": "^6.0.10",
     "properties-reader": "^2.2.0",
-    "puppeteer": "^8.0.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-notify": "^1.1.0",
-    "rollup-plugin-string": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^4.2.0",
-    "serve": "github:vercel/serve#a85bd9d03ae267a492aac683616e028c0bfc6447",
-    "wdio-chromedriver-service": "^7.0.0"
+    "slash": "3.0.0",
+    "vite": "^2.9.12",
+    "wdio-chromedriver-service": "^7.3.2",
+    "zx": "^4.3.0"
   },
   "peerDependencies": {
     "chromedriver": "*"
+  },
+  "devDependencies": {
+    "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,195 +0,0 @@
-const process = require("process");
-const fs = require("fs");
-const os = require("os");
-const { babel } = require("@rollup/plugin-babel");
-const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const url = require("@rollup/plugin-url");
-const { terser } = require("rollup-plugin-terser");
-const json = require("@rollup/plugin-json");
-const colors = require("colors/safe");
-const notify = require("rollup-plugin-notify");
-const filesize = require("rollup-plugin-filesize");
-const livereload = require("rollup-plugin-livereload");
-
-const packageFile = JSON.parse(fs.readFileSync("./package.json"));
-const packageName = packageFile.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 reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
-function ui5DevReadyMessagePlugin() {
-	return {
-		name: "ui5-dev-message-ready-plugin",
-		writeBundle: (assets, bundle) => {
-			if (reportedForPackages.has(packageName)) {
-				return;
-			}
-			console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
-
-			if (fs.existsSync(".port")) {
-				const port = `${fs.readFileSync(".port")}`;
-				if (port) {
-					console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
-				}
-			}
-			reportedForPackages.add(packageName);
-		},
-	};
-}
-
-const getPlugins = ({ transpile }) => {
-	const plugins = [];
-	if (!process.env.DEV) {
-		plugins.push(filesize(
-			{
-				reporter(options, bundle, {
-					minSize, gzipSize, brotliSize, bundleSize,
-					fileName,
-					// "showBeforeSizes: release"
-					lastVersion,
-					// "showBeforeSizes: "release" or "showBeforeSizes": "build"
-					bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore,
-				}) {
-				// If a promise is returned, it will be awaited before rendering.
-					return `${fileName.padEnd(35)} ${minSize} / gzipped: ${gzipSize}`;
-				},
-			},
-
-		));
-	}
-
-	const publicPath = DEPLOY_PUBLIC_PATH;
-
-	plugins.push(ui5DevImportCheckerPlugin());
-
-	if (!transpile) {
-		plugins.push(json({
-			include: [
-				/.*assets\/.*\.json/,
-			],
-			namedExports: false,
-		}));
-	}
-
-	if (transpile) {
-		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\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
-			sourcemap: true,
-			babelHelpers: "bundled",
-		}));
-	}
-
-	plugins.push(nodeResolve());
-
-	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",
-			],
-		}));
-	}
-
-	if (process.env.DEV) {
-		plugins.push(ui5DevReadyMessagePlugin());
-	}
-
-	return plugins;
-};
-
-const getES6Config = (input = "bundle.esm.js") => {
-	return [{
-		input,
-		output: {
-			dir: "dist/resources",
-			format: "esm",
-			sourcemap: true,
-		},
-		moduleContext: id => {
-			if (typeof id === "string" && 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 = (input = "bundle.es5.js") => {
-	return [{
-		input,
-		output: {
-			dir: "dist/resources",
-			format: "iife",
-			inlineDynamicImports: true,
-			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 && fs.existsSync("bundle.es5.js")) {
-	config = config.concat(getES5Config());
-}
-
-if (process.env.SCOPE) {
-	if (fs.existsSync("bundle.scoped.esm.js")) {
-		config = config.concat(getES6Config("bundle.scoped.esm.js"));
-
-		if (fs.existsSync("bundle.scoped.es5.js") && process.env.ES5_BUILD) {
-			config = config.concat(getES5Config("bundle.scoped.es5.js"));
-		}
-	}
-}
-
-module.exports = config;