@ui5/webcomponents-tools 0.0.0-deac3098a → 0.0.0-df5b4199a

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() {
+// 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'});
+}
+
+if (require.main === module) {
+	testFn(process.argv)
+}
+
+exports._ui5mainFn = testFn;

package/package.json

@@ -1,83 +1,86 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-deac3098a",
+  "version": "0.0.0-df5b4199a",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "private": false,
   "keywords": [
     "openui5",
     "sapui5",
     "ui5"
   ],
-  "scripts": {},
   "bin": {
-    "wc-dev": "bin/dev.js",
-    "wc-create-ui5-element": "bin/create-ui5-element.js"
+    "ui5nps": "bin/ui5nps.js",
+    "wc-create-ui5-element": "bin/create-ui5-element.js",
+    "wc-dev": "bin/dev.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "url": "https://github.com/UI5/webcomponents.git",
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@openui5/sap.ui.core": "1.95.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-url": "^6.0.0",
-    "@wdio/cli": "^7.12.2",
-    "@wdio/dot-reporter": "^7.10.1",
-    "@wdio/local-runner": "^7.12.2",
-    "@wdio/mocha-framework": "^7.12.2",
-    "@wdio/spec-reporter": "^7.10.1",
-    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "@custom-elements-manifest/analyzer": "^0.10.10",
+    "@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",
+    "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
-    "chokidar": "^3.5.1",
-    "chokidar-cli": "^3.0.0",
-    "cli-color": "^2.0.1",
+    "chokidar": "^3.6.0",
     "command-line-args": "^5.1.1",
-    "concurrently": "^6.0.0",
+    "comment-parser": "^1.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.11",
+    "custom-element-jet-brains-integration": "^1.4.4",
+    "dotenv": "^16.5.0",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-no-leaked-values": "^0.1.24",
     "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",
+    "ignore": "^7.0.5",
     "is-port-reachable": "^3.1.0",
-    "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
-    "mkdirp": "^1.0.4",
-    "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-import": "^14.0.2",
+    "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",
-    "rollup": "^2.41.4",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "serve": "^12.0.0",
     "slash": "3.0.0",
-    "wdio-chromedriver-service": "^7.0.0",
-    "zx": "^4.3.0"
+    "string-argv": "^0.3.2",
+    "vite": "^5.4.8",
+    "vite-plugin-istanbul": "^6.0.2",
+    "wdio-chromedriver-service": "^7.3.2"
   },
   "peerDependencies": {
-    "chromedriver": "*"
-  }
-}
+    "chromedriver": "*",
+    "typescript": "^5.6.2"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0",
+    "yargs": "^17.5.1"
+  },
+  "gitHead": "c07b41622cd8f0a2094b38233f6ad89f6cb4ee2b"
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "ES2021",
+		"lib": [
+			"DOM",
+			"DOM.Iterable",
+			"ES2023"
+		],
+		"declaration": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"inlineSources": true,
+		"strict": true,
+		"moduleResolution": "node",
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
+	}
+}

package/components-package/rollup-plugins/empty-module.js

@@ -1,15 +0,0 @@
-const slash = require("slash");
-
-function emptyModulePlugin({ emptyModules }) {
-	return {
-		name: "ui5-dev-empty-module-plugin",
-		load(id) {
-			if (emptyModules.some(mod => slash(id).includes(mod))) {
-				return `export default ""`;
-			}
-			return null;
-		},
-	};
-}
-
-module.exports = emptyModulePlugin;

package/components-package/rollup.js

@@ -1,239 +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 replace = require("@rollup/plugin-replace");
-const commonjs = require("@rollup/plugin-commonjs");
-const colors = require("cli-color");
-const filesize = require("rollup-plugin-filesize");
-const livereload = require("rollup-plugin-livereload");
-const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
-
-const packageFile = JSON.parse(fs.readFileSync("./package.json"));
-const packageName = packageFile.name;
-const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
-
-const warningsToSkip = [{
-	warningCode: "THIS_IS_UNDEFINED",
-	filePath: /.+zxing.+/,
-}];
-
-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}`);
-			}
-		},
-	};
-}
-
-function onwarn(warning, warn) {
-	// Skip warning for known false positives that will otherwise polute the log
-	let skip = warningsToSkip.find(warningToSkip => {
-		let loc, file;
-		return warning.code === warningToSkip.warningCode
-			&& (loc = warning.loc)
-			&& (file = loc.file)
-			&& file.match(warningToSkip.filePath);
-	});
-	if (skip) {
-		return;
-	}
-
-	// warn everything else
-	warn( warning );
-}
-
-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(replace({
-			values: {
-				'const DEV_MODE = false': 'const DEV_MODE = true',
-			},
-			preventAssignment: false,
-		}));
-	}
-
-	if (process.env.DEV && !process.env.ENABLE_CLDR) {
-		// Empty the CLDR assets file for better performance during development
-		plugins.push(emptyModulePlugin({
-			emptyModules: [
-				"localization/dist/Assets.js",
-			],
-		}));
-	}
-
-	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(commonjs());
-		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: false,
-			babelHelpers: "bundled",
-		}));
-	}
-
-	plugins.push(nodeResolve());
-
-	if (!process.env.DEV) {
-		plugins.push(terser({
-			numWorkers: 1,
-		}));
-	}
-
-	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 }),
-		onwarn: onwarn,
-	}];
-};
-
-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 }),
-		onwarn: onwarn,
-	}];
-};
-
-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;