@ui5/webcomponents-tools 2.15.0-rc.0 → 2.15.0-rc.3

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

@@ -7,72 +7,82 @@ import chokidar from "chokidar";
 import scopeVariables from "./scope-variables.mjs";
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 
-const tsMode = process.env.UI5_TS === "true";
-const extension = tsMode ? ".css.ts" : ".css.js";
+const generate = async (argv) => {
+    const tsMode = process.env.UI5_TS === "true";
+    const extension = tsMode ? ".css.ts" : ".css.js";
 
-const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
-const inputFilesGlob = "src/themes/*.css";
-const restArgs = process.argv.slice(2);
+    const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+    const inputFilesGlob = "src/themes/*.css";
+    const restArgs = argv.slice(2);
 
-let customPlugin = {
-    name: 'ui5-tools',
-    setup(build) {
-        build.initialOptions.write = false;
+    let customPlugin = {
+        name: 'ui5-tools',
+        setup(build) {
+            build.initialOptions.write = false;
 
-        build.onEnd(result => {
-            result.outputFiles.forEach(async f => {
-                // scoping
-                let newText = scopeVariables(f.text, packageJSON);
-                newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
-                await mkdir(path.dirname(f.path), {recursive: true});
-                writeFile(f.path, newText);
+            build.onEnd(result => {
+                result.outputFiles.forEach(async f => {
+                    // scoping
+                    let newText = scopeVariables(f.text, packageJSON);
+                    newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
+                    await mkdir(path.dirname(f.path), { recursive: true });
+                    writeFile(f.path, newText);
 
-                // JS/TS
-                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
-                writeFileIfChanged(jsPath, jsContent);
-            });
-        })
-    },
-}
+                    // JS/TS
+                    const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
+                    const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
+                    writeFileIfChanged(jsPath, jsContent);
+                });
+            })
+        },
+    }
 
-const getConfig = async () => {
-    const config = {
-        entryPoints: await globby(inputFilesGlob),
-        bundle: true,
-        minify: true,
-        outdir: 'dist/css',
-        outbase: 'src',
-        plugins: [
-            customPlugin,
-        ]
-    };
-    return config;
-}
+    const getConfig = async () => {
+        const config = {
+            entryPoints: await globby(inputFilesGlob),
+            bundle: true,
+            minify: true,
+            outdir: 'dist/css',
+            outbase: 'src',
+            plugins: [
+                customPlugin,
+            ]
+        };
+        return config;
+    }
 
-if (restArgs.includes("-w")) {
-    let ready;
-    let config = await getConfig();
-    let ctx = await esbuild.context(config);
-    await ctx.watch()
-    console.log('watching...')
+    if (restArgs.includes("-w")) {
+        let ready;
+        let config = await getConfig();
+        let ctx = await esbuild.context(config);
+        await ctx.watch()
+        console.log('watching...')
 
-    // when new component css files are added, they do not trigger a build as no one directly imports them
-    // restart the watch mode with the new entry points if a css file is added.
-    const watcher = chokidar.watch(inputFilesGlob);
-    watcher.on("ready", () => {
-        ready = true; // Initial scan is over -> waiting for new files
-    });
-    watcher.on("add", async path => {
-        if (ready) {
-            // new file
-            ctx.dispose();
-            config = await getConfig();
-            ctx = await esbuild.context(config);
-            ctx.watch();
-        }
-    });
-} else {
-    const config = await getConfig();
-    const result = await esbuild.build(config);
+        // when new component css files are added, they do not trigger a build as no one directly imports them
+        // restart the watch mode with the new entry points if a css file is added.
+        const watcher = chokidar.watch(inputFilesGlob);
+        watcher.on("ready", () => {
+            ready = true; // Initial scan is over -> waiting for new files
+        });
+        watcher.on("add", async path => {
+            if (ready) {
+                // new file
+                ctx.dispose();
+                config = await getConfig();
+                ctx = await esbuild.context(config);
+                ctx.watch();
+            }
+        });
+    } else {
+        const config = await getConfig();
+        const result = await esbuild.build(config);
+    }
 }
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+    generate(process.argv)
+}
+
+export default {
+    _ui5mainFn: generate
+}

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

@@ -8,81 +8,91 @@ import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 import scopeVariables from "./scope-variables.mjs";
 
-const tsMode = process.env.UI5_TS === "true";
-const extension = tsMode ? ".css.ts" : ".css.js";
+const generate = async (argv) => {
+    const tsMode = process.env.UI5_TS === "true";
+    const extension = tsMode ? ".css.ts" : ".css.js";
 
-const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+    const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
-const inputFiles = await globby([
-    "src/**/parameters-bundle.css",
-]);
-const restArgs = process.argv.slice(2);
+    const inputFiles = await globby([
+        "src/**/parameters-bundle.css",
+    ]);
+    const restArgs = argv.slice(2);
 
-const processThemingPackageFile = async (f) => {
-    const selector = ':root';
-    const result = await postcss().process(f.text);
+    const processThemingPackageFile = async (f) => {
+        const selector = ':root';
+        const result = await postcss().process(f.text);
 
-    const newRule = postcss.rule({ selector });
+        const newRule = postcss.rule({ selector });
 
-    result.root.walkRules(selector, rule => {
-        rule.walkDecls(decl => {
-            if (!decl.prop.startsWith('--sapFontUrl')) {
-                newRule.append(decl.clone());
-            }
+        result.root.walkRules(selector, rule => {
+            rule.walkDecls(decl => {
+                if (!decl.prop.startsWith('--sapFontUrl')) {
+                    newRule.append(decl.clone());
+                }
+            });
         });
-    });
-
-    return newRule.toString();
-};
 
-const processComponentPackageFile = async (f) => {
-    const result = await postcss(combineDuplicatedSelectors).process(f.text);
-
-    return scopeVariables(result.css, packageJSON, f.path);
+        return newRule.toString();
+    };
+
+    const processComponentPackageFile = async (f) => {
+        const result = await postcss(combineDuplicatedSelectors).process(f.text);
+
+        return scopeVariables(result.css, packageJSON, f.path);
+    }
+
+    let 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);
+
+                    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);
+                });
+            })
+        },
+    }
+
+    const config = {
+        entryPoints: inputFiles,
+        bundle: true,
+        minify: true,
+        outdir: 'dist/css',
+        outbase: 'src',
+        plugins: [
+            scopingPlugin,
+        ],
+        external: ["*.ttf", "*.woff", "*.woff2"],
+    };
+
+    if (restArgs.includes("-w")) {
+        let ctx = await esbuild.context(config);
+        console.log('watching...')
+        await ctx.watch()
+    } else {
+        await esbuild.build(config);
+    }
 }
 
-let 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);
-
-                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 (import.meta.url === `file://${process.argv[1]}`) {
+    generate(process.argv)
 }
 
-const config = {
-    entryPoints: inputFiles,
-    bundle: true,
-    minify: true,
-    outdir: 'dist/css',
-    outbase: 'src',
-    plugins: [
-        scopingPlugin,
-    ],
-    external: ["*.ttf", "*.woff", "*.woff2"],
-};
-
-if (restArgs.includes("-w")) {
-    let ctx = await esbuild.context(config);
-    await ctx.watch()
-    console.log('watching...')
-} else {
-    const result = await esbuild.build(config);
+export default {
+    _ui5mainFn: generate
 }

package/lib/generate-js-imports/illustrations.js

@@ -2,85 +2,84 @@ const fs = require("fs").promises;
 const path = require("path");
 
 const generateDynamicImportLines = async (fileNames, location, exclusionPatterns = []) => {
-  const packageName = JSON.parse(await fs.readFile("package.json")).name;
-  return fileNames
-    .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
-    .map((fileName) => {
-      const illustrationName = fileName.replace(".js", "");
-      const illustrationPath = `${location}/${illustrationName}`;
-      return `\t\tcase "${fileName.replace('.js', '')}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${illustrationName.toLowerCase()}" */ "${illustrationPath}.js")).default;`;
-    })
-    .join("\n");
-};
-
-const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = []) => {
-  return JSON.stringify(
-    fileNames
-      .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
-      .map((fileName) => fileName.replace(".js", ""))
-  );
+	const packageName = JSON.parse(await fs.readFile("package.json")).name;
+	return fileNames
+		.filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
+		.map((fileName) => {
+			const illustrationName = fileName.replace(".svg", "");
+			const illustrationPath = `${location}/${illustrationName}`;
+			return `\t\tcase "${fileName.replace('.js', '')}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${illustrationName.toLowerCase()}" */ "${illustrationPath}.js")).default;`;
+		})
+		.join("\n");
 };
 
 const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, set, prefix = "") => {
-  return `// @ts-nocheck
-  import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+	return `// @ts-nocheck
+import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
 
 export const loadIllustration = async (illustrationName) => {
-  const collectionAndPrefix = "${set}/${collection}/${prefix}";
-  const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
-  switch (cleanIllustrationName) {
+	const collectionAndPrefix = "${set}/${collection}/${prefix}";
+	const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
+	switch (cleanIllustrationName) {
 ${dynamicImports}
-    default:
-      throw new Error("[Illustrations] Illustration not found: " + illustrationName);
-  }
+		default:
+			throw new Error("[Illustrations] Illustration not found: " + illustrationName);
+	}
 };
 
 const loadAndCheck = async (illustrationName) => {
-  const data = await loadIllustration(illustrationName);
-  return data;
+	const data = await loadIllustration(illustrationName);
+	return data;
 };
 
 ${availableIllustrations}.forEach((illustrationName) =>
-  registerIllustrationLoader(\`${set}/${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
+	registerIllustrationLoader(\`${set}/${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
 );
 `;
 };
 
 const getMatchingFiles = async (folder, pattern) => {
-  const dir = await fs.readdir(folder);
-  return dir.filter((fileName) => fileName.match(pattern));
+	const dir = await fs.readdir(folder);
+	return dir.filter((fileName) => fileName.match(pattern));
 };
 
-const generateIllustrations = async (config) => {
-  const { inputFolder, outputFile, collection, location, prefix, filterOut, set } = config;
+const generateIllustrations = async (argv) => {
+	const config = {
+		inputFolder: argv[2],
+		outputFile: argv[3],
+		set: argv[4],
+		collection: argv[5],
+		location: argv[6],
+		filterOut: argv[7].slice().split(","),
+	};
 
-  const normalizedInputFolder = path.normalize(inputFolder);
-  const normalizedOutputFile = path.normalize(outputFile);
 
-  const illustrations = await getMatchingFiles(normalizedInputFolder, /^.*\.js$/);
+	const { inputFolder, outputFile, collection, location, prefix, filterOut, set } = config;
 
-  const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
-  const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
+	const normalizedInputFolder = path.normalize(inputFolder);
+	const normalizedOutputFile = path.normalize(outputFile);
 
-  const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, set, prefix);
+	const svgFiles = await getMatchingFiles(normalizedInputFolder, /\.svg$/);
 
-  await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
-  await fs.writeFile(normalizedOutputFile, contentDynamic);
+	const illustrations = [
+		...new Set(
+			svgFiles
+				.filter(name => !name.includes("sapIllus-Patterns"))
+				.map(name => name.split("-").pop().replace(".svg", ""))
+		),
+	];
 
-  console.log(`Generated ${normalizedOutputFile}`);
-};
+	const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
+	const contentDynamic = generateDynamicImportsFileContent(dynamicImports, JSON.stringify(illustrations), collection, set, prefix);
 
-// Parse configuration from command-line arguments
-const config = {
-  inputFolder: process.argv[2],
-  outputFile: process.argv[3],
-  set: process.argv[4],
-  collection: process.argv[5],
-  location: process.argv[6],
-  filterOut: process.argv.slice[7],
+	await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
+	await fs.writeFile(normalizedOutputFile, contentDynamic);
+
+	console.log("Generated illustration imports.");
 };
 
-// Run the generation process
-generateIllustrations(config).catch((error) => {
-  console.error("Error generating illustrations:", error);
-});
+if (require.main === module) {
+	generateIllustrations(process.argv)
+}
+
+exports._ui5mainFn = generateIllustrations;

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

@@ -32,19 +32,19 @@ localeIds.forEach(localeId => {
 `;
 }
 
-const generate = async () => {
+const generate = async (argv) => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
-	const inputFolder = path.normalize(process.argv[2]);
-	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
-	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/i18n-fetch.${ext}`);
-	const outputFileDynamicImportJSONImport = path.normalize(`${process.argv[3]}/i18n-node.${ext}`);
+	const inputFolder = path.normalize(argv[2]);
+	const outputFileDynamic = path.normalize(`${argv[3]}/i18n.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/i18n-fetch.${ext}`);
+	const outputFileDynamicImportJSONImport = path.normalize(`${argv[3]}/i18n-node.${ext}`);
 
 	// All languages present in the file system
 	const files = await fs.readdir(inputFolder);
 	const languages = files.map(file => {
-		const matches = file.match(/messagebundle_(.+?).json$/);
+		const matches = file.match(/messagebundle_(.+?).properties$/);
 		return matches ? matches[1] : undefined;
 	}).filter(key => !!key);
 
@@ -79,9 +79,13 @@ const generate = async () => {
 		fs.writeFile(outputFileDynamic, contentDynamic),
 		fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
 		fs.writeFile(outputFileDynamicImportJSONImport, contentDynamicImportJSONAttr),
-	]);
+	]).then(() => {
+		console.log("Generated i18n JSON imports.");
+	});
 }
 
-generate().then(() => {
-	console.log("Generated i18n JSON imports.");
-});
+if (require.main === module) {
+	generate(process.argv)
+}
+
+exports._ui5mainFn = generate;

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

@@ -5,11 +5,11 @@ const assets = require("../../assets-meta.js");
 const isTypeScript = process.env.UI5_TS;
 const ext = isTypeScript ? 'ts' : 'js';
 
-const generate = async () => {
-	const inputFolder = path.normalize(process.argv[2]);
-	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
-	const outputFileDynamicImportJSONAttr = path.normalize(`${process.argv[3]}/Themes-node.${ext}`);
-	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/Themes-fetch.${ext}`);
+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}`);
 
 	// All supported optional themes
 	const allThemes = assets.themes.all;
@@ -49,7 +49,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));
 `;
 	}
 
@@ -58,9 +58,14 @@ ${availableThemesArray}
 		fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
 		fs.writeFile(outputFileDynamicImportJSONAttr, contentDynamic(dynamicImportJSONAttrLines)),
 		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
-	]);
+	]).
+		then(() => {
+			console.log("Generated themes JSON imports.");
+		})
 };
 
-generate().then(() => {
-	console.log("Generated themes JSON imports.");
-});
+if (require.main === module) {
+	generate(process.argv)
+}
+
+exports._ui5mainFn = generate;

package/lib/i18n/defaults.js

@@ -3,14 +3,14 @@ const path = require('path');
 const PropertiesReader = require('properties-reader');
 const assets = require('../../assets-meta.js');
 
-const generate = async () => {
+const generate = async (argv) => {
 	const defaultLanguage = assets.languages.default;
 
-	const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
-	const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
+	const messageBundle = path.normalize(`${argv[2]}/messagebundle.properties`);
+	const messageBundleDefaultLanguage = path.normalize(`${argv[2]}/messagebundle_${defaultLanguage}.properties`);
 	const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
 
-	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.${tsMode ? "ts": "js"}`);
+	const outputFile = path.normalize(`${argv[3]}/i18n-defaults.${tsMode ? "ts" : "js"}`);
 
 	if (!messageBundle || !outputFile) {
 		return;
@@ -76,8 +76,13 @@ export {${textKeys.join()}};`;
 
 	await fs.mkdir(path.dirname(outputFile), { recursive: true });
 	await fs.writeFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
+
+
+	console.log("i18n default file generated.")
 };
 
-generate().then(() => {
-	console.log("i18n default file generated.");
-});
+if (require.main === module) {
+	generate(process.argv)
+}
+
+exports._ui5mainFn = generate;

package/lib/i18n/toJSON.js

@@ -14,10 +14,7 @@ const assets = require('../../assets-meta.js');
 
 const allLanguages = assets.languages.all;
 
-const messagesBundles = path.normalize(`${process.argv[2]}/messagebundle_*.properties`);
-const messagesJSONDist = path.normalize(`${process.argv[3]}`);
-
-const convertToJSON = async (file) => {
+const convertToJSON = async (file, distPath) => {
 	const properties = PropertiesReader(file)._properties;
 	const filename = path.basename(file, path.extname(file));
 	const language = filename.match(/^messagebundle_(.*?)$/)[1];
@@ -25,19 +22,26 @@ const convertToJSON = async (file) => {
 		console.log("Not supported language: ", language);
 		return;
 	}
-	const outputFile = path.normalize(`${messagesJSONDist}/${filename}.json`);
+	const outputFile = path.normalize(`${distPath}/${filename}.json`);
 
 	return fs.writeFile(outputFile, JSON.stringify(properties));
 	// console.log(`[i18n]: "${filename}.json" has been generated!`);
 };
 
-const generate = async () => {
+const generate = async (agrv) => {
 	const { globby } = await import("globby");
+	const messagesBundles = path.normalize(`${agrv[2]}/messagebundle_*.properties`);
+	const messagesJSONDist = path.normalize(`${agrv[3]}`);
 	await fs.mkdir(messagesJSONDist, { recursive: true });
 	const files = await globby(messagesBundles.replace(/\\/g, "/"));
-	return Promise.all(files.map(convertToJSON));
+	return Promise.all(files.map(file => convertToJSON(file, messagesJSONDist)))
+		.then(() => {
+			console.log("Message bundle JSON files generated.");
+		});
 };
 
-generate().then(() => {
-	console.log("Message bundle JSON files generated.");
-});
+if (require.main === module) {
+	generate(process.argv)
+}
+
+exports._ui5mainFn = generate;