@ui5/webcomponents-tools 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/lib/css-processors/postcss-plugin.mjs

@@ -0,0 +1,153 @@
+
+import postcss from "postcss";
+
+const hostVariables = new Map();
+
+const SELECTOR = ":host";
+
+const saveVariable = (variable, value, density) => {
+    if (!hostVariables.has(variable)) {
+        hostVariables.set(variable, {});
+    }
+    hostVariables.get(variable)[density] = value;
+}
+
+/**
+ * PostCSS plugin for handling CSS variables across density modes (cozy and compact).
+ *
+ * The plugin scans CSS for `:host` rules that define density-specific custom properties.
+ * Variables declared in a root-level `:host` rule are treated as **cozy** values, while
+ * variables declared inside `@container style(--ui5_content_density: compact)` `:host` rules
+ * are treated as **compact** values.
+ *
+ * All discovered variables are merged into a single root `:host` rule. For variables that
+ * exist in both modes, the plugin generates a value that uses CSS variable fallbacks to
+ * dynamically switch between compact and cozy values based on the active density.
+ *
+ * Variables that exist in only one mode are preserved, with appropriate fallbacks added
+ * when needed.
+ *
+ * Example input:
+ *
+ * ```css
+ * :host {
+ *   --my-variable: cozy-value;
+ *   --cozy-only-variable: cozy-only-value;
+ * }
+ *
+ * @container style(--ui5_content_density: compact) {
+ *   :host {
+ *     --my-variable: compact-value;
+ *     --compact-only-variable: compact-only;
+ *   }
+ * }
+ * ```
+ *
+ * Output:
+ *
+ * ```css
+ * :host {
+ *   --my-variable: var(--_ui5-compact-size, compact-value) var(--_ui5-cozy-size, cozy-value);
+ *   --compact-only-variable: var(--_ui5-compact-size, compact-only) var(--_ui5-cozy-size, initial);
+ *   --cozy-only-variable: cozy-only-value;
+ * }
+ * ```
+ *
+ * This enables seamless runtime switching between density modes using CSS variables alone.
+ */
+
+export default function postcssPlugin() {
+    return {
+        postcssPlugin: 'postcss-content-density-variables',
+        Once(root) {
+            let hasRootHost = false;
+            let hostRule;
+
+            root.walkRules((rule) => {
+                // Only process :host rules
+                if (rule.selector !== SELECTOR) {
+                    return;
+                }
+
+                // Handle root-level :host rules (cozy)
+                if (rule.parent.type === "root") {
+                    if (!hasRootHost) {
+                        hasRootHost = true;
+                        hostRule = rule;
+                    }
+
+                    rule.walkDecls((decl) => {
+                        if (decl.prop.startsWith('--')) {
+                            saveVariable(decl.prop, decl.value, 'cozy');
+                            decl.remove();
+                        }
+                    });
+                }
+
+                // Handle :host rules inside @container (compact)
+                if (rule.parent.type === "atrule") {
+                    if (rule.parent.params.replaceAll("\s", "") === 'style(--ui5_content_density: compact)'.replaceAll("\s", "")) {
+                        rule.walkDecls((decl) => {
+                            if (decl.prop.startsWith('--')) {
+                                saveVariable(decl.prop, decl.value, 'compact');
+                                decl.remove();
+                            }
+                        });
+                    }
+                }
+
+                let current = rule;
+                // Remove up empty rules
+                while (current) {
+                    if (current.nodes.length === 0) {
+                        const parent = current.parent;
+                        current.remove();
+                        current = parent;
+                    }
+
+                    if (current.type === "root") {
+                        break;
+                    }
+                }
+            });
+
+            if (!hasRootHost) {
+                hostRule = postcss.rule({ selector: SELECTOR });
+            }
+
+            // Construct merged variable declarations depending on available modes
+            for (const [variable, variableData] of hostVariables) {
+                if (variableData.cozy && variableData.compact) {
+                    hostRule.append({
+                        prop: variable,
+                        value: `var(--_ui5-compact-size, ${variableData.compact})  var(--_ui5-cozy-size, ${variableData.cozy})`,
+                    });
+                } else if (variableData.compact) {
+
+                    // Use a non-existent variable to always trigger the fallback.
+                    // Because this variable is never defined, the fallback is used
+                    // in all cases.
+
+                    // Using `initial` as a fallback can work only for properties
+                    // that treat it as an invalid value. To avoid this inconsistency,
+                    // we intentionally reference an undefined variable, which is
+                    // always considered invalid and undefined.
+                    hostRule.append({
+                        prop: variable,
+                        value: `var(--_ui5-compact-size, ${variableData.compact}) var(--_ui5-cozy-size, var(--_ui5-f2d95f8))`,
+                    });
+                } else {
+                    hostRule.append({
+                        prop: variable,
+                        value: variableData.cozy,
+                    });
+                }
+            }
+
+            root.prepend(hostRule);
+            hostVariables.clear();
+        }
+    }
+}
+
+postcssPlugin.postcss = true;

package/lib/css-processors/scope-variables.mjs

@@ -30,12 +30,37 @@ const getOverrideVersion = filePath => {
 	try {
 		overrideVersion = require(`${packageName}${path.sep}package.json`).version;
 	} catch (e) {
-		console.log(`Error requiring package ${packageName}: ${e.message}`);
+		if (process.env.UI5_VERBOSE === "true") {
+			console.log(`Error requiring package ${packageName}: ${e.message}`);
+		}
 	}
 
 	return overrideVersion;
 }
 
+/**
+ * `packageJSON` should reference the `package.json` of the base package,
+ * as it serves as the starting point for every runtime and carries a unique version.
+ * The `getScopedVarName` function is also defined in the base package
+ * and is consumed by all other packages.
+ *
+ * Runtime (2.19.0)
+ * - base (2.19.0)
+ * - At least one of the following packages: ai / main / fiori / compat (2.19.0)
+ * - Custom package (x.x.x)
+ *
+ * It is not possible to have a runtime with the main package at version 2.19.0
+ * and the base package at a different version (e.g., 2.18.0),
+ * because the main package depends on the base package.
+ * Such a mismatch would create a new runtime.
+ *
+ * Therefore, we can safely assume that the base package version
+ * matches the runtime version and can be reliably used for scoping.
+ *
+ * It is still needed for third-party packages that have not yet migrated to the
+ * component-level variable approach.
+ */
+
 const scopeVariables = (cssText, packageJSON, inputFile) => {
     const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
     const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);

package/lib/css-processors/shared.mjs

@@ -18,29 +18,30 @@ const writeFileIfChanged = async (fileName, content) => {
     const oldContent = await readOldContent(fileName);
     if (content !== oldContent) {
         if (!oldContent) {
-            await mkdir(path.dirname(fileName), {recursive: true});
+            await mkdir(path.dirname(fileName), { recursive: true });
         }
         return writeFile(fileName, content);
     }
 }
 
 const DEFAULT_THEME = assets.themes.default;
+const CSS_VARIABLES_TARGET = process.env.CSS_VARIABLES_TARGET === "host";
 
 const getDefaultThemeCode = packageName => {
-	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+    return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.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-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
-registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme);
+registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, "${DEFAULT_THEME}", async () => defaultTheme${CSS_VARIABLES_TARGET ? ', "host"' : ''});
 `;
 };
 
 const getFileContent = (packageName, css, includeDefaultTheme) => {
-	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
-	return `${defaultTheme}export default ${css.trim()}`
+    const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+    return `${defaultTheme}export default ${css.trim()}`
 }
 
 
-export { writeFileIfChanged, getFileContent}
+export { writeFileIfChanged, getFileContent }

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-js-imports/illustrations.js

@@ -75,7 +75,9 @@ const generateIllustrations = async (argv) => {
 	await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
 	await fs.writeFile(normalizedOutputFile, contentDynamic);
 
-	console.log("Generated illustration imports.");
+	if (process.env.UI5_VERBOSE === "true") {
+		console.log("Generated illustration imports.");
+	}
 };
 
 if (require.main === module) {

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

@@ -80,7 +80,9 @@ const generate = async (argv) => {
 		fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
 		fs.writeFile(outputFileDynamicImportJSONImport, contentDynamicImportJSONAttr),
 	]).then(() => {
-		console.log("Generated i18n JSON imports.");
+		if (process.env.UI5_VERBOSE === "true") {
+			console.log("Generated i18n JSON imports.");
+		}
 	});
 }
 

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

@@ -5,6 +5,8 @@ const assets = require("../../assets-meta.js");
 const isTypeScript = process.env.UI5_TS;
 const ext = isTypeScript ? 'ts' : 'js';
 
+const CSS_VARIABLES_TARGET = process.env.CSS_VARIABLES_TARGET === "host";
+
 const generate = async (argv) => {
 	const inputFolder = path.normalize(argv[2]);
 	const outputFileDynamic = path.normalize(`${argv[3]}/Themes.${ext}`);
@@ -49,7 +51,7 @@ const loadAndCheck = async (themeName) => {
 };
 
 ${availableThemesArray}
-  .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck));
+  .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck${CSS_VARIABLES_TARGET ? ', "host"' : ''}));
 `;
 	}
 
@@ -60,7 +62,9 @@ ${availableThemesArray}
 		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
 	]).
 		then(() => {
-			console.log("Generated themes JSON imports.");
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Generated themes JSON imports.");
+			}
 		})
 };
 

package/lib/i18n/defaults.js

@@ -78,7 +78,9 @@ export {${textKeys.join()}};`;
 	await fs.writeFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
 
 
-	console.log("i18n default file generated.")
+	if (process.env.UI5_VERBOSE === "true") {
+		console.log("i18n default file generated.");
+	}
 };
 
 if (require.main === module) {

package/lib/i18n/toJSON.js

@@ -14,13 +14,35 @@ const assets = require('../../assets-meta.js');
 
 const allLanguages = assets.languages.all;
 
+/**
+ * The translation system has a configuration whether to return UTF-8 sequences
+ * or the actual characters. This function inlines UTF-8 sequences to actual characters.
+ * 
+ * For example, it converts "Keine Produkte erf\u00FCgbar" to "Keine Produkte verfügbar"
+ * This makes the JSON files more readable and smaller.
+ */
+function inlineUTF(properties) {
+	for (const key in properties) {
+		if (Object.prototype.hasOwnProperty.call(properties, key)) {
+			try {
+				// escape double quotes to avoid JSON parse error
+				const escaped = properties[key].replaceAll("\"", "\\\"");
+				properties[key] = JSON.parse(`"${escaped}"`); // utilize JSON parser to decode UTF-8 sequences
+			} catch (e) {
+				// in case of error, just keep the original string
+				console.log(`Warning: failed to inline UTF-8 for key "${key}" with value "${properties[key]}"`);
+			}
+		}
+	}
+	return properties;
+}
+
 const convertToJSON = async (file, distPath) => {
-	const properties = PropertiesReader(file)._properties;
+	const properties = inlineUTF(PropertiesReader(file)._properties);
 	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`);
 
@@ -36,7 +58,9 @@ const generate = async (agrv) => {
 	const files = await globby(messagesBundles.replace(/\\/g, "/"));
 	return Promise.all(files.map(file => convertToJSON(file, messagesJSONDist)))
 		.then(() => {
-			console.log("Message bundle JSON files generated.");
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Message bundle JSON files generated.");
+			}
 		});
 };
 

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

@@ -3,69 +3,77 @@ const { readFileSync } = require("fs");
 const path = require("path");
 const fs = require("fs");
 
-// search for dev-server port 
+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
-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);
-    }
-}
+	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 : "";
+	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}/`;
-    }
-}
+	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");
-}
+	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}`;
-}
+	let spec = "";
+	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(" ");
+	let restParams = "";
+	if (outArgv.length > 3) {
+		restParams = outArgv.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 = `npx cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
+	console.log(`executing: ${cmd}`);
+	child_process.execSync(cmd, {stdio: 'inherit'});
 }
 
-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";
+if (require.main === module) {
+	testFn(process.argv)
 }
 
-// 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'});
+exports._ui5mainFn = testFn;

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": "0.0.0-47cc17a26",
+  "version": "0.0.0-49bade48d",
   "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": "42ca8b3af7963e8f6d8269fdcaf26052a1b14cab"
+  "gitHead": "11a0183fb2973739e3549bcbc83bc249dd503784"
 }