fix(tools): generation of json imports for themes

packages/tools/lib/css-processors/shared.mjs

@@ -1,4 +1,5 @@
 import { writeFile, readFile, mkdir } from "fs/promises";
+import fsSync from "fs";
 import * as path from "path";
 import assets from "../../assets-meta.js";
 
@@ -18,7 +19,7 @@ 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);
     }
@@ -27,20 +28,27 @@ const writeFileIfChanged = async (fileName, content) => {
 const DEFAULT_THEME = assets.themes.default;
 
 const getDefaultThemeCode = packageName => {
-	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+    const defaultThemeFile = fsSync.existsSync(path.join(process.cwd(), 'src', "themes", DEFAULT_THEME, "parameters-bundle.css"));
+    let defaultThemeText = `const defaultTheme = "";`;
+
+    if (defaultThemeFile) {
+        defaultThemeText = `import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.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";
+${defaultThemeText}
 
 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);
 `;
 };
 
 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 }

packages/tools/lib/generate-json-imports/themes.js

@@ -21,13 +21,21 @@ const generate = async (argv) => {
 		return matches ? dir : undefined;
 	}).filter(key => !!key && allThemes.includes(key));
 
+	// Themes that doesn't exist on the file system
+	const missingThemes = allThemes.filter(theme => !themesOnFileSystem.includes(theme));
+
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
-	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
+	// Contain all supported themes from assets-meta.js
+	const availableThemesArray = `[${allThemes.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");
 
+	// Lines for missing themes to avoid runtime errors. By default parameters-bundle.css.json returns a strings.
+	const missingThemesLines = missingThemes.map(theme => `\t\tcase "${theme}": return "";`).join("\n");
+
 	// dynamic imports file content
 	const contentDynamic = function (lines) {
 		return `// @ts-nocheck
@@ -55,9 +63,9 @@ ${availableThemesArray}
 
 	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
-		fs.writeFile(outputFileDynamicImportJSONAttr, contentDynamic(dynamicImportJSONAttrLines)),
-		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
+		fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines.concat("\n", missingThemesLines))),
+		fs.writeFile(outputFileDynamicImportJSONAttr, contentDynamic(dynamicImportJSONAttrLines.concat("\n", missingThemesLines))),
+		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines.concat("\n", missingThemesLines))),
 	]).
 		then(() => {
 			console.log("Generated themes JSON imports.");