@ui5/webcomponents-tools 2.17.0-rc.3 → 2.17.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.17.0-rc.5](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.4...v2.17.0-rc.5) (2025-12-04)
+
+
+### Bug Fixes
+
+* **tools:** dependencies usage ([#12716](https://github.com/UI5/webcomponents/issues/12716)) ([89bb0dd](https://github.com/UI5/webcomponents/commit/89bb0dd62322598bd1ea7ce984eaf0618546a6f2))
+
+
+### Features
+
+* **framework:** introduce loadBaseThemingCSSVariables configuration ([#12699](https://github.com/UI5/webcomponents/issues/12699)) ([f01b2eb](https://github.com/UI5/webcomponents/commit/f01b2eb6256f2032bd802d0a60c4625b0d1af5fe))
+
+
+
+
+
+# [2.17.0-rc.4](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.3...v2.17.0-rc.4) (2025-11-27)
+
+
+### Bug Fixes
+
+* **build:** fix issue with legacy dev setup ([#12706](https://github.com/UI5/webcomponents/issues/12706)) ([89fa5ca](https://github.com/UI5/webcomponents/commit/89fa5ca9f83551363e8c1d9980269cd58fa09d85))
+
+
+
+
+
 # [2.17.0-rc.3](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.2...v2.17.0-rc.3) (2025-11-20)
 
 

package/bin/ui5nps.js

@@ -165,7 +165,12 @@ class Parser {
 			return new Promise(async (resolve, reject) => {
 				if (command.trim().startsWith("ui5nps-script")) {
 					const argv = parseArgsStringToArgv(command);
-					const importedContent = require(argv[1]);
+					if (!path.isAbsolute(argv[1])) {
+						throw new Error(`Script path must be absolute: ${argv[1]}`);
+					}
+
+					const importPath = argv[1];
+					const importedContent = require(importPath);
 					let _ui5mainFn;
 
 					if (importedContent.__esModule) {
@@ -174,6 +179,10 @@ class Parser {
 						_ui5mainFn = importedContent._ui5mainFn;
 					}
 
+					if (!_ui5mainFn) {
+						return reject(new Error(`No valid _ui5mainFn function exported from ${importPath} tried to be executed with ui5nps-script. Either provide a valid _ui5mainFn function or use another way to execute the script (via node).`));
+					}
+
 					console.log(` |  Executing command ${commandName} as module.`);
 					const result = _ui5mainFn(argv);
 

package/components-package/nps.js

@@ -66,15 +66,6 @@ const getScripts = (options) => {
 		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
 	}
 
-	let eslintConfig;
-	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
-		// preferred way of custom configuration in root project folder
-		eslintConfig = "";
-	} else {
-		// no custom configuration - use default from tools project
-		eslintConfig = `--config "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
-	}
-
 	const scripts = {
 		__ui5envs: {
 			UI5_CEM_MODE: options.dev,
@@ -86,8 +77,8 @@ const getScripts = (options) => {
 			"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
 			"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
 		},
-		lint: `eslint . ${eslintConfig}`,
-		lintfix: `eslint . ${eslintConfig} --fix`,
+		lint: `ui5nps-script "${LIB}eslint/eslint.js"`,
+		lintfix: `ui5nps-script "${LIB}eslint/eslint.js" --fix`,
 		generate: {
 			default: `ui5nps prepare.all`,
 			all: `ui5nps-p build.templates build.i18n prepare.styleRelated copyProps build.illustrations`, // concurently
@@ -101,7 +92,7 @@ const getScripts = (options) => {
 		},
 		build: {
 			default: "ui5nps prepare lint build.bundle", // build.bundle2
-			templates: options.legacy ? `mkdirp src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
+			templates: options.legacy ? `mkdir -p src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
 			styles: {
 				default: `ui5nps-p build.styles.themes build.styles.components`, // concurently
 				themes: `ui5nps-script "${LIB}css-processors/css-processor-themes.mjs"`,
@@ -123,12 +114,13 @@ const getScripts = (options) => {
 				default: "ui5nps build.jsImports.illustrationsLoaders",
 				illustrationsLoaders: createIllustrationsLoadersScript,
 			},
-			bundle: `vite build ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
+			bundle: `ui5nps-script "${LIB}vite-bundler/vite-bundler.mjs" ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
 			bundle2: ``,
 			illustrations: createIllustrationsJSImportsScript,
 		},
 		copyProps: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/`,
 		copyPropsWithWatch: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/ --watch --safe --skip-initial-copy`,
+		copySrcWithWatch: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/ --watch --safe --skip-initial-copy`,
 		copy: {
 			default: options.legacy ? "ui5nps copy.src copy.props" : "",
 			src: options.legacy ? `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/` : "",
@@ -137,7 +129,7 @@ const getScripts = (options) => {
 		watch: {
 			default: `ui5nps-p watch.templates watch.typescript watch.src watch.styles watch.i18n watch.props`, // concurently
 			devServer: 'ui5nps-p watch.default watch.bundle', // concurently
-			src: options.legacy ? 'ui5nps "copy.src --watch --safe --skip-initial-copy"' : "",
+			src: options.legacy ? 'ui5nps copySrcWithWatch' : "",
 			typescript: tsWatchCommandStandalone,
 			props: 'ui5nps copyPropsWithWatch',
 			bundle: `ui5nps-script ${LIB}dev-server/dev-server.mjs ${viteConfig}`,
@@ -146,8 +138,8 @@ const getScripts = (options) => {
 				themes: 'ui5nps build.styles.themesWithWatch',
 				components: `ui5nps build.styles.componentsWithWatch`,
 			},
-			templates: options.legacy ? 'chokidar "src/**/*.hbs" -i "src/generated" -c "ui5nps build.templates"' : "",
-			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "ui5nps build.i18n.defaultsjs"'
+			templates: options.legacy ? `ui5nps-script "${LIB}chokidar/chokidar.js" "src/**/*.hbs" "ui5nps build.templates"` : "",
+			i18n: `ui5nps-script "${LIB}chokidar/chokidar.js" "src/i18n/messagebundle.properties" "ui5nps build.i18n.defaultsjs"`
 		},
 		start: "ui5nps prepare watch.devServer",
 		test: `ui5nps-script "${LIB}/test-runner/test-runner.js"`,

package/lib/chokidar/chokidar.js

@@ -0,0 +1,28 @@
+const chokidar = require('chokidar');
+const { exec } = require("child_process");
+
+const main = async (argv) => {
+	if (argv.length < 4) {
+		console.error("Please provide a file pattern to watch and a command to execute on changes.");
+		console.error("<file-pattern> <command>");
+		process.exit(1);
+	}
+
+	const filePattern = argv[2];
+	const command = argv.slice(3).join(' ');
+
+	const watcher = new chokidar.FSWatcher();
+
+	watcher.add(filePattern);
+	watcher.unwatch("src/generated");
+
+	watcher.on('change', async () => {
+		exec(command);
+	});
+};
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;

package/lib/css-processors/css-processor-themes.mjs

@@ -9,24 +9,28 @@ import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 import { scopeUi5Variables, scopeThemingVariables } from "./scope-variables.mjs";
 import { pathToFileURL } from "url";
 
-async function processThemingPackageFile(f) {
+async function processThemingPackageFile(f, scope = true) {
     const selector = ':root';
     const newRule = postcss.rule({ selector });
     const result = await postcss().process(f.text);
 
     result.root.walkRules(selector, rule => {
         for (const decl of rule.nodes) {
-            if (decl.type !== 'decl' ) {
+            if (decl.type !== 'decl') {
                 continue;
             } else if (decl.prop.startsWith('--sapFontUrl')) {
                 continue;
             } else if (!decl.prop.startsWith('--sap')) {
                 newRule.append(decl.clone());
             } else {
-                const originalProp = decl.prop;
-                const originalValue = decl.value;
-
-                newRule.append(decl.clone({ prop: originalProp.replace("--sap", "--ui5-sap"), value: `var(${originalProp}, ${originalValue})` }));
+                if (scope) {
+                    const originalProp = decl.prop;
+                    const originalValue = decl.value;
+
+                    newRule.append(decl.clone({ prop: originalProp.replace("--sap", "--ui5-sap"), value: `var(${originalProp}, ${originalValue})` }));
+                } else {
+                    newRule.append(decl.clone());
+                }
             }
         }
     });
@@ -43,6 +47,24 @@ async function processComponentPackageFile(f, packageJSON) {
 
     return result;
 }
+async function writeProcessedContent(basePath, content, packageJSON, extension) {
+    const cssPath = basePath;
+    const jsonPath = basePath.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
+    const jsPath = basePath.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
+
+    // Write CSS file
+    await mkdir(path.dirname(cssPath), { recursive: true });
+    await writeFile(cssPath, content);
+
+    // Write JSON file
+    await mkdir(path.dirname(jsonPath), { recursive: true });
+    await writeFileIfChanged(jsonPath, JSON.stringify(content));
+
+    // Write JS/TS file
+    const jsContent = getFileContent(packageJSON.name, `\`${content}\``);
+    await mkdir(path.dirname(jsPath), { recursive: true });
+    await writeFileIfChanged(jsPath, jsContent);
+}
 
 async function generate(argv) {
     const tsMode = process.env.UI5_TS === "true";
@@ -55,27 +77,27 @@ async function generate(argv) {
     ]);
     const restArgs = argv.slice(2);
 
-    let scopingPlugin = {
+    const scopingPlugin = {
         name: 'scoping',
         setup(build) {
             build.initialOptions.write = false;
 
             build.onEnd(result => {
                 result.outputFiles.forEach(async f => {
-                    let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f, packageJSON);
-
-                    await mkdir(path.dirname(f.path), { recursive: true });
-                    writeFile(f.path, newText);
-
-                    // JSON
-                    const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
-                    await mkdir(path.dirname(jsonPath), { recursive: true });
-                    writeFileIfChanged(jsonPath, JSON.stringify(newText));
-
-                    // JS/TS
-                    const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                    const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
-                    writeFileIfChanged(jsPath, jsContent);
+                    if (f.path.includes("packages/theming")) {
+                        const scopedText = await processThemingPackageFile(f);
+                        const originalText = await processThemingPackageFile(f, false);
+
+                        // Write scoped version
+                        await writeProcessedContent(f.path, scopedText, packageJSON, extension);
+
+                        // Write raw version
+                        const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-raw.css");
+                        await writeProcessedContent(originalPath, originalText, packageJSON, extension);
+                    } else {
+                        const processedText = await processComponentPackageFile(f, packageJSON);
+                        await writeProcessedContent(f.path, processedText, packageJSON, extension);
+                    }
                 });
             })
         },

package/lib/eslint/eslint.js

@@ -0,0 +1,44 @@
+const fs = require("fs");
+const { ESLint: ESLint7 } = require("eslint"); // isolated v7
+const path = require("path");
+
+const main = async argv => {
+	let eslintConfig;
+	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
+		// preferred way of custom configuration in root project folder
+		eslintConfig = null;
+	} else {
+		// no custom configuration - use default from tools project
+		eslintConfig = require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")
+	};
+
+	const packageDir = path.dirname(require.resolve("@ui5/webcomponents-tools/package.json"));
+	const eslint = new ESLint7({
+		overrideConfigFile: eslintConfig,
+		fix: argv.includes("--fix"),
+		resolvePluginsRelativeTo: packageDir,
+	});
+	console.log("Running ESLint v7...");
+
+	// Lint files
+	const results = await eslint.lintFiles(["."]);
+
+	// Format results
+	const formatter = await eslint.loadFormatter("stylish");
+	const resultText = formatter.format(results);
+
+	// Output results
+	console.log(resultText);
+
+	// Exit with error code if there are errors
+	const hasErrors = results.some(result => result.errorCount > 0);
+	if (hasErrors) {
+		process.exit(1);
+	}
+}
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;

package/lib/generate-json-imports/themes.js

@@ -7,9 +7,10 @@ const ext = isTypeScript ? 'ts' : 'js';
 
 const generate = async (argv) => {
 	const inputFolder = path.normalize(argv[2]);
-	const outputFileDynamic = path.normalize(`${argv[3]}/Themes.${ext}`);
-	const outputFileDynamicImportJSONAttr = path.normalize(`${argv[3]}/Themes-node.${ext}`);
-	const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/Themes-fetch.${ext}`);
+	const outputSuffix = argv[4] || "";
+	const outputFileDynamic = path.normalize(`${argv[3]}/Themes${outputSuffix}.${ext}`);
+	const outputFileDynamicImportJSONAttr = path.normalize(`${argv[3]}/Themes${outputSuffix}-node.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/Themes${outputSuffix}-fetch.${ext}`);
 
 	// All supported optional themes
 	const allThemes = assets.themes.all;
@@ -24,9 +25,9 @@ const generate = async (argv) => {
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
 	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
-	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
-	const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json", {with: { type: 'json'}})).default;`).join("\n");
-	const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n");
+	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json")).default;`).join("\n");
+	const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json", {with: { type: 'json'}})).default;`).join("\n");
+	const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json", import.meta.url))).json();`).join("\n");
 
 	// dynamic imports file content
 	const contentDynamic = function (lines) {
@@ -49,7 +50,7 @@ const loadAndCheck = async (themeName) => {
 };
 
 ${availableThemesArray}
-  .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck));
+  .forEach(themeName => registerThemePropertiesLoader(${`${packageName + outputSuffix}`.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck));
 `;
 	}
 

package/lib/i18n/toJSON.js

@@ -19,8 +19,7 @@ const convertToJSON = async (file, distPath) => {
 	const filename = path.basename(file, path.extname(file));
 	const language = filename.match(/^messagebundle_(.*?)$/)[1];
 	if (!allLanguages.includes(language)) {
-		console.log("Not supported language: ", language);
-		return;
+		console.warn("Not supported language or script: ", language);
 	}
 	const outputFile = path.normalize(`${distPath}/${filename}.json`);
 

package/lib/test-runner/test-runner.js

@@ -3,7 +3,7 @@ const { readFileSync } = require("fs");
 const path = require("path");
 const fs = require("fs");
 
-function testFn() {
+function testFn(outArgv) {
 // 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
@@ -48,15 +48,15 @@ function testFn() {
 
 // add single spec parameter if passed
 	let spec = "";
-	if (process.argv.length === 3) {
-		const specFile = process.argv[2];
+	if (outArgv.length === 3) {
+		const specFile = outArgv[2];
 		spec = `--spec ${specFile}`;
 	}
 
 // more parameters - pass them to wdio
 	let restParams = "";
-	if (process.argv.length > 3) {
-		restParams = process.argv.slice(2).join(" ");
+	if (outArgv.length > 3) {
+		restParams = outArgv.slice(2).join(" ");
 	}
 
 	let wdioConfig = "";
@@ -67,7 +67,7 @@ function testFn() {
 	}
 
 // run wdio with calculated parameters
-	const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
+	const cmd = `npx cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
 	console.log(`executing: ${cmd}`);
 	child_process.execSync(cmd, {stdio: 'inherit'});
 }

package/lib/vite-bundler/vite-bundler.mjs

@@ -0,0 +1,35 @@
+import { build } from 'vite';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { pathToFileURL } from "url";
+
+async function start(outArgv) {
+    const argv = yargs(hideBin(outArgv))
+        .alias("c", "config")
+        .alias("mode", "mode")
+        .alias("base", "base")
+        .argv;
+
+    try {
+        await build({
+            configFile: argv.config || undefined,
+            mode: argv.mode || undefined,
+            base: argv.base || undefined,
+            logLevel: 'info',
+        });
+    } catch (e) {
+        console.error(e)
+        process.exit(1);
+    }
+};
+
+const filePath = process.argv[1];
+const fileUrl = pathToFileURL(filePath).href;
+
+if (import.meta.url === fileUrl) {
+    start(process.argv)
+}
+
+export default {
+    _ui5mainFn: start
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.17.0-rc.3",
+  "version": "2.17.0-rc.5",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,6 @@
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.6.0",
-    "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
     "comment-parser": "^1.4.0",
     "cross-env": "^7.0.3",
@@ -54,7 +53,6 @@
     "ignore": "^7.0.5",
     "is-port-reachable": "^3.1.0",
     "json-beautify": "^1.1.1",
-    "mkdirp": "^1.0.4",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-selector-parser": "^6.0.10",
@@ -84,5 +82,5 @@
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "45ac45d27dd4c95cc840c51c95fef9d38e7586f0"
+  "gitHead": "affb457b35f4a92b8d6632de0042c8a9da7c244e"
 }