keycloakify 11.0.1 → 11.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "11.0.1",
+    "version": "11.2.0",
     "description": "Framework to create custom Keycloak UIs",
     "repository": {
         "type": "git",
@@ -663,8 +663,6 @@
         "src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl",
         "src/bin/keycloakify/generateResources/generateMessageProperties.ts",
         "src/bin/keycloakify/generateResources/generateResources.ts",
-        "src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts",
-        "src/bin/keycloakify/generateResources/generateResourcesForThemeVariant.ts",
         "src/bin/keycloakify/generateResources/index.ts",
         "src/bin/keycloakify/generateResources/readExtraPageNames.ts",
         "src/bin/keycloakify/generateResources/readFieldNameUsage.ts",
@@ -981,20 +979,20 @@
         "bin/main.js",
         "bin/193.index.js",
         "bin/20.index.js",
-        "bin/246.index.js",
         "bin/266.index.js",
         "bin/304.index.js",
         "bin/31.index.js",
         "bin/33.index.js",
         "bin/36.index.js",
         "bin/453.index.js",
-        "bin/499.index.js",
         "bin/526.index.js",
+        "bin/573.index.js",
         "bin/599.index.js",
         "bin/720.index.js",
         "bin/743.index.js",
         "bin/780.index.js",
         "bin/786.index.js",
+        "bin/860.index.js",
         "bin/877.index.js",
         "bin/903.index.js",
         "bin/932.index.js",
@@ -1040,6 +1038,7 @@
         "@babel/core": "^7.24.5",
         "@babel/generator": "^7.24.5",
         "@babel/parser": "^7.24.5",
+        "@babel/preset-env": "7.24.8",
         "@babel/types": "^7.24.5",
         "@emotion/react": "^11.11.4",
         "@octokit/rest": "^20.1.1",
@@ -1047,20 +1046,27 @@
         "@storybook/builder-webpack5": "^6.5.13",
         "@storybook/manager-webpack5": "^6.5.13",
         "@storybook/react": "^6.5.13",
-        "eslint-plugin-storybook": "^0.6.7",
         "@types/babel__generator": "^7.6.4",
+        "@types/dompurify": "^2.0.0",
         "@types/make-fetch-happen": "^10.0.1",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.15.3",
+        "@types/properties-parser": "^0.3.3",
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
         "@types/yauzl": "^2.10.3",
         "@vercel/ncc": "^0.38.1",
+        "babel-loader": "9.1.3",
         "chalk": "^4.1.2",
         "cheerio": "1.0.0-rc.12",
         "chokidar-cli": "^3.0.0",
         "cli-select": "^1.1.2",
+        "dompurify": "^3.1.6",
+        "eslint-plugin-storybook": "^0.6.7",
+        "evt": "^2.5.7",
+        "html-entities": "^2.5.2",
         "husky": "^4.3.8",
+        "isomorphic-dompurify": "^2.15.0",
         "lint-staged": "^11.0.0",
         "magic-string": "^0.30.7",
         "make-fetch-happen": "^11.0.3",
@@ -1075,20 +1081,13 @@
         "termost": "^v0.12.1",
         "tsc-alias": "^1.8.10",
         "tss-react": "^4.9.10",
+        "tsx": "^4.15.5",
         "typescript": "^4.9.4",
         "vite": "^5.2.11",
         "vitest": "^1.6.0",
-        "yauzl": "^2.10.0",
-        "zod": "^3.17.10",
-        "evt": "^2.5.7",
-        "tsx": "^4.15.5",
-        "html-entities": "^2.5.2",
-        "isomorphic-dompurify": "^2.15.0",
-        "dompurify": "^3.1.6",
-        "@types/dompurify": "^2.0.0",
         "webpack": "5.93.0",
         "webpack-cli": "5.1.4",
-        "babel-loader": "9.1.3",
-        "@babel/preset-env": "7.24.8"
+        "yauzl": "^2.10.0",
+        "zod": "^3.17.10"
     }
 }

package/src/bin/keycloakify/generateResources/generateResources.ts

@@ -1,16 +1,56 @@
 import type { BuildContext } from "../../shared/buildContext";
-import { assert } from "tsafe/assert";
-import {
-    generateResourcesForMainTheme,
-    type BuildContextLike as BuildContextLike_generateResourcesForMainTheme
-} from "./generateResourcesForMainTheme";
-import { generateResourcesForThemeVariant } from "./generateResourcesForThemeVariant";
 import fs from "fs";
 import { rmSync } from "../../tools/fs.rmSync";
+import { transformCodebase } from "../../tools/transformCodebase";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    dirname as pathDirname,
+    extname as pathExtname,
+    sep as pathSep
+} from "path";
+import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
+import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
+import {
+    generateFtlFilesCodeFactory,
+    type BuildContextLike as BuildContextLike_kcContextExclusionsFtlCode
+} from "../generateFtl";
+import {
+    type ThemeType,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    WELL_KNOWN_DIRECTORY_BASE_NAME
+} from "../../shared/constants";
+import { assert, type Equals } from "tsafe/assert";
+import { readFieldNameUsage } from "./readFieldNameUsage";
+import { readExtraPagesNames } from "./readExtraPageNames";
+import {
+    generateMessageProperties,
+    type BuildContextLike as BuildContextLike_generateMessageProperties
+} from "./generateMessageProperties";
+import { readThisNpmPackageVersion } from "../../tools/readThisNpmPackageVersion";
+import {
+    writeMetaInfKeycloakThemes,
+    type MetaInfKeycloakTheme
+} from "../../shared/metaInfKeycloakThemes";
+import { objectEntries } from "tsafe/objectEntries";
+import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
+import * as child_process from "child_process";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
+import propertiesParser from "properties-parser";
 
-export type BuildContextLike = BuildContextLike_generateResourcesForMainTheme & {
-    themeNames: string[];
-};
+export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
+    BuildContextLike_generateMessageProperties & {
+        themeNames: string[];
+        extraThemeProperties: string[] | undefined;
+        projectDirPath: string;
+        projectBuildDirPath: string;
+        environmentVariables: { name: string; default: string }[];
+        implementedThemeTypes: BuildContext["implementedThemeTypes"];
+        themeSrcDirPath: string;
+        bundler: "vite" | "webpack";
+        packageJsonFilePath: string;
+    };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
@@ -20,25 +60,443 @@ export async function generateResources(params: {
 }): Promise<void> {
     const { resourcesDirPath, buildContext } = params;
 
-    const [themeName, ...themeVariantNames] = buildContext.themeNames;
+    const [themeName] = buildContext.themeNames;
 
     if (fs.existsSync(resourcesDirPath)) {
         rmSync(resourcesDirPath, { recursive: true });
     }
 
-    const { writeMessagePropertiesFilesForThemeVariant } =
-        await generateResourcesForMainTheme({
-            resourcesDirPath,
+    const getThemeTypeDirPath = (params: {
+        themeType: ThemeType | "email";
+        themeName: string;
+    }) => {
+        const { themeType, themeName } = params;
+        return pathJoin(resourcesDirPath, "theme", themeName, themeType);
+    };
+
+    const writeMessagePropertiesFilesByThemeType: Partial<
+        Record<ThemeType, (params: { messageDirPath: string; themeName: string }) => void>
+    > = {};
+
+    for (const themeType of ["login", "account"] as const) {
+        if (!buildContext.implementedThemeTypes[themeType].isImplemented) {
+            continue;
+        }
+
+        const isForAccountSpa =
+            themeType === "account" &&
+            (assert(buildContext.implementedThemeTypes.account.isImplemented),
+            buildContext.implementedThemeTypes.account.type === "Single-Page");
+
+        const themeTypeDirPath = getThemeTypeDirPath({ themeName, themeType });
+
+        apply_replacers_and_move_to_theme_resources: {
+            const destDirPath = pathJoin(
+                themeTypeDirPath,
+                "resources",
+                WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
+            );
+
+            // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
+            rmSync(destDirPath, { recursive: true, force: true });
+
+            if (
+                themeType === "account" &&
+                buildContext.implementedThemeTypes.login.isImplemented
+            ) {
+                // NOTE: We prevent doing it twice, it has been done for the login theme.
+
+                transformCodebase({
+                    srcDirPath: pathJoin(
+                        getThemeTypeDirPath({
+                            themeName,
+                            themeType: "login"
+                        }),
+                        "resources",
+                        WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
+                    ),
+                    destDirPath
+                });
+
+                break apply_replacers_and_move_to_theme_resources;
+            }
+
+            {
+                const dirPath = pathJoin(
+                    buildContext.projectBuildDirPath,
+                    WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
+                );
+
+                if (fs.existsSync(dirPath)) {
+                    assert(buildContext.bundler === "webpack");
+
+                    throw new Error(
+                        [
+                            `Keycloakify build error: The ${WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES} directory shouldn't exist in your build directory.`,
+                            `(${pathRelative(process.cwd(), dirPath)}).\n`,
+                            `Theses assets are only required for local development with Storybook.",
+                            "Please remove this directory as an additional step of your command.\n`,
+                            `For example: \`"build": "... && rimraf ${pathRelative(buildContext.projectDirPath, dirPath)}"\``
+                        ].join(" ")
+                    );
+                }
+            }
+
+            transformCodebase({
+                srcDirPath: buildContext.projectBuildDirPath,
+                destDirPath,
+                transformSourceCode: ({ filePath, fileRelativePath, sourceCode }) => {
+                    if (filePath.endsWith(".css")) {
+                        const { fixedCssCode } = replaceImportsInCssCode({
+                            cssCode: sourceCode.toString("utf8"),
+                            cssFileRelativeDirPath: pathDirname(fileRelativePath),
+                            buildContext
+                        });
+
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedCssCode, "utf8")
+                        };
+                    }
+
+                    if (filePath.endsWith(".js")) {
+                        const { fixedJsCode } = replaceImportsInJsCode({
+                            jsCode: sourceCode.toString("utf8"),
+                            buildContext
+                        });
+
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedJsCode, "utf8")
+                        };
+                    }
+
+                    return { modifiedSourceCode: sourceCode };
+                }
+            });
+        }
+
+        const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
             themeName,
-            buildContext
+            indexHtmlCode: fs
+                .readFileSync(pathJoin(buildContext.projectBuildDirPath, "index.html"))
+                .toString("utf8"),
+            buildContext,
+            keycloakifyVersion: readThisNpmPackageVersion(),
+            themeType,
+            fieldNames: readFieldNameUsage({
+                themeSrcDirPath: buildContext.themeSrcDirPath,
+                themeType
+            })
+        });
+
+        [
+            ...(() => {
+                switch (themeType) {
+                    case "login":
+                        return LOGIN_THEME_PAGE_IDS;
+                    case "account":
+                        return isForAccountSpa ? ["index.ftl"] : ACCOUNT_THEME_PAGE_IDS;
+                }
+            })(),
+            ...(isForAccountSpa
+                ? []
+                : readExtraPagesNames({
+                      themeType,
+                      themeSrcDirPath: buildContext.themeSrcDirPath
+                  }))
+        ].forEach(pageId => {
+            const { ftlCode } = generateFtlFilesCode({ pageId });
+
+            fs.writeFileSync(
+                pathJoin(themeTypeDirPath, pageId),
+                Buffer.from(ftlCode, "utf8")
+            );
         });
 
-    for (const themeVariantName of themeVariantNames) {
-        generateResourcesForThemeVariant({
+        let languageTags: string[] | undefined = undefined;
+
+        i18n_messages_generation: {
+            if (isForAccountSpa) {
+                break i18n_messages_generation;
+            }
+
+            const wrap = generateMessageProperties({
+                buildContext,
+                themeType
+            });
+
+            languageTags = wrap.languageTags;
+            const { writeMessagePropertiesFiles } = wrap;
+
+            writeMessagePropertiesFilesByThemeType[themeType] =
+                writeMessagePropertiesFiles;
+        }
+
+        bring_in_account_v3_i18n_messages: {
+            if (!buildContext.implementedThemeTypes.account.isImplemented) {
+                break bring_in_account_v3_i18n_messages;
+            }
+            if (buildContext.implementedThemeTypes.account.type !== "Single-Page") {
+                break bring_in_account_v3_i18n_messages;
+            }
+
+            const accountUiDirPath = child_process
+                .execSync("npm list @keycloakify/keycloak-account-ui --parseable", {
+                    cwd: pathDirname(buildContext.packageJsonFilePath)
+                })
+                .toString("utf8")
+                .trim();
+
+            const messageDirPath_defaults = pathJoin(accountUiDirPath, "messages");
+
+            if (!fs.existsSync(messageDirPath_defaults)) {
+                throw new Error(
+                    `Please update @keycloakify/keycloak-account-ui to 25.0.4-rc.5 or later.`
+                );
+            }
+
+            const messagesDirPath_dest = pathJoin(
+                getThemeTypeDirPath({ themeName, themeType: "account" }),
+                "messages"
+            );
+
+            transformCodebase({
+                srcDirPath: messageDirPath_defaults,
+                destDirPath: messagesDirPath_dest
+            });
+
+            apply_theme_changes: {
+                const messagesDirPath_theme = pathJoin(
+                    buildContext.themeSrcDirPath,
+                    "account",
+                    "messages"
+                );
+
+                if (!fs.existsSync(messagesDirPath_theme)) {
+                    break apply_theme_changes;
+                }
+
+                fs.readdirSync(messagesDirPath_theme).forEach(basename => {
+                    const filePath_src = pathJoin(messagesDirPath_theme, basename);
+                    const filePath_dest = pathJoin(messagesDirPath_dest, basename);
+
+                    if (!fs.existsSync(filePath_dest)) {
+                        fs.cpSync(filePath_src, filePath_dest);
+                    }
+
+                    const messages_src = propertiesParser.parse(
+                        fs.readFileSync(filePath_src).toString("utf8")
+                    );
+                    const messages_dest = propertiesParser.parse(
+                        fs.readFileSync(filePath_dest).toString("utf8")
+                    );
+
+                    const messages = {
+                        ...messages_dest,
+                        ...messages_src
+                    };
+
+                    const editor = propertiesParser.createEditor();
+
+                    Object.entries(messages).forEach(([key, value]) => {
+                        editor.set(key, value);
+                    });
+
+                    fs.writeFileSync(
+                        filePath_dest,
+                        Buffer.from(editor.toString(), "utf8")
+                    );
+                });
+            }
+
+            languageTags = fs
+                .readdirSync(messagesDirPath_dest)
+                .map(basename =>
+                    basename.replace(/^messages_/, "").replace(/\.properties$/, "")
+                );
+        }
+
+        keycloak_static_resources: {
+            if (isForAccountSpa) {
+                break keycloak_static_resources;
+            }
+
+            transformCodebase({
+                srcDirPath: pathJoin(
+                    getThisCodebaseRootDirPath(),
+                    "res",
+                    "public",
+                    WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES,
+                    themeType
+                ),
+                destDirPath: pathJoin(themeTypeDirPath, "resources")
+            });
+        }
+
+        fs.writeFileSync(
+            pathJoin(themeTypeDirPath, "theme.properties"),
+            Buffer.from(
+                [
+                    `parent=${(() => {
+                        switch (themeType) {
+                            case "account":
+                                return isForAccountSpa ? "base" : "account-v1";
+                            case "login":
+                                return "keycloak";
+                        }
+                        assert<Equals<typeof themeType, never>>(false);
+                    })()}`,
+                    ...(isForAccountSpa ? ["deprecatedMode=false"] : []),
+                    ...(buildContext.extraThemeProperties ?? []),
+                    ...buildContext.environmentVariables.map(
+                        ({ name, default: defaultValue }) =>
+                            `${name}=\${env.${name}:${escapeStringForPropertiesFile(defaultValue)}}`
+                    ),
+                    ...(languageTags === undefined
+                        ? []
+                        : [`locales=${languageTags.join(",")}`])
+                ].join("\n\n"),
+                "utf8"
+            )
+        );
+    }
+
+    email: {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
+            break email;
+        }
+
+        const emailThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "email");
+
+        transformCodebase({
+            srcDirPath: emailThemeSrcDirPath,
+            destDirPath: getThemeTypeDirPath({ themeName, themeType: "email" })
+        });
+    }
+
+    bring_in_account_v1: {
+        if (!buildContext.implementedThemeTypes.account.isImplemented) {
+            break bring_in_account_v1;
+        }
+
+        if (buildContext.implementedThemeTypes.account.type !== "Multi-Page") {
+            break bring_in_account_v1;
+        }
+
+        transformCodebase({
+            srcDirPath: pathJoin(getThisCodebaseRootDirPath(), "res", "account-v1"),
+            destDirPath: getThemeTypeDirPath({
+                themeName: "account-v1",
+                themeType: "account"
+            })
+        });
+    }
+
+    {
+        const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };
+
+        for (const themeName of buildContext.themeNames) {
+            metaInfKeycloakThemes.themes.push({
+                name: themeName,
+                types: objectEntries(buildContext.implementedThemeTypes)
+                    .filter(([, { isImplemented }]) => isImplemented)
+                    .map(([themeType]) => themeType)
+            });
+        }
+
+        if (buildContext.implementedThemeTypes.account.isImplemented) {
+            metaInfKeycloakThemes.themes.push({
+                name: "account-v1",
+                types: ["account"]
+            });
+        }
+
+        writeMetaInfKeycloakThemes({
             resourcesDirPath,
-            themeName,
-            themeVariantName,
-            writeMessagePropertiesFiles: writeMessagePropertiesFilesForThemeVariant
+            getNewMetaInfKeycloakTheme: () => metaInfKeycloakThemes
+        });
+    }
+
+    for (const themeVariantName of buildContext.themeNames) {
+        if (themeVariantName === themeName) {
+            continue;
+        }
+
+        transformCodebase({
+            srcDirPath: pathJoin(resourcesDirPath, "theme", themeName),
+            destDirPath: pathJoin(resourcesDirPath, "theme", themeVariantName),
+            transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+                if (
+                    pathExtname(fileRelativePath) === ".ftl" &&
+                    fileRelativePath.split(pathSep).length === 2
+                ) {
+                    const modifiedSourceCode = Buffer.from(
+                        Buffer.from(sourceCode)
+                            .toString("utf-8")
+                            .replace(
+                                `"themeName": "${themeName}"`,
+                                `"themeName": "${themeVariantName}"`
+                            ),
+                        "utf8"
+                    );
+
+                    assert(Buffer.compare(modifiedSourceCode, sourceCode) !== 0);
+
+                    return { modifiedSourceCode };
+                }
+
+                return { modifiedSourceCode: sourceCode };
+            }
         });
     }
+
+    for (const themeName of buildContext.themeNames) {
+        for (const [themeType, writeMessagePropertiesFiles] of objectEntries(
+            writeMessagePropertiesFilesByThemeType
+        )) {
+            // NOTE: This is just a quirk of the type system: We can't really differentiate in a record
+            // between the case where the key isn't present and the case where the value is `undefined`.
+            if (writeMessagePropertiesFiles === undefined) {
+                return;
+            }
+            writeMessagePropertiesFiles({
+                messageDirPath: pathJoin(
+                    getThemeTypeDirPath({ themeName, themeType }),
+                    "messages"
+                ),
+                themeName
+            });
+        }
+    }
+
+    modify_email_theme_per_variant: {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
+            break modify_email_theme_per_variant;
+        }
+
+        for (const themeName of buildContext.themeNames) {
+            const emailThemeDirPath = getThemeTypeDirPath({
+                themeName,
+                themeType: "email"
+            });
+
+            transformCodebase({
+                srcDirPath: emailThemeDirPath,
+                destDirPath: emailThemeDirPath,
+                transformSourceCode: ({ filePath, sourceCode }) => {
+                    if (!filePath.endsWith(".ftl")) {
+                        return { modifiedSourceCode: sourceCode };
+                    }
+
+                    return {
+                        modifiedSourceCode: Buffer.from(
+                            sourceCode
+                                .toString("utf8")
+                                .replace(/xKeycloakify\.themeName/g, `"${themeName}"`),
+                            "utf8"
+                        )
+                    };
+                }
+            });
+        }
+    }
 }

package/src/bin/shared/buildContext.ts

@@ -240,8 +240,7 @@ export function getBuildContext(params: {
 
             if (
                 parsedPackageJson.dependencies?.keycloakify === undefined &&
-                parsedPackageJson.devDependencies?.keycloakify === undefined &&
-                parsedPackageJson.name !== "keycloakify" // NOTE: For local storybook build
+                parsedPackageJson.devDependencies?.keycloakify === undefined
             ) {
                 break success;
             }
@@ -470,26 +469,44 @@ export function getBuildContext(params: {
     }
 
     const themeNames = ((): [string, ...string[]] => {
-        if (buildOptions.themeName === undefined) {
-            return parsedPackageJson.name === undefined
-                ? ["keycloakify"]
-                : [
-                      parsedPackageJson.name
-                          .replace(/^@(.*)/, "$1")
-                          .split("/")
-                          .join("-")
-                  ];
-        }
+        const themeNames = ((): [string, ...string[]] => {
+            if (buildOptions.themeName === undefined) {
+                return parsedPackageJson.name === undefined
+                    ? ["keycloakify"]
+                    : [
+                          parsedPackageJson.name
+                              .replace(/^@(.*)/, "$1")
+                              .split("/")
+                              .join("-")
+                      ];
+            }
 
-        if (typeof buildOptions.themeName === "string") {
-            return [buildOptions.themeName];
-        }
+            if (typeof buildOptions.themeName === "string") {
+                return [buildOptions.themeName];
+            }
+
+            const [mainThemeName, ...themeVariantNames] = buildOptions.themeName;
+
+            assert(mainThemeName !== undefined);
 
-        const [mainThemeName, ...themeVariantNames] = buildOptions.themeName;
+            return [mainThemeName, ...themeVariantNames];
+        })();
 
-        assert(mainThemeName !== undefined);
+        for (const themeName of themeNames) {
+            if (!/^[a-zA-Z0-9_-]+$/.test(themeName)) {
+                console.error(
+                    chalk.red(
+                        [
+                            `Invalid theme name: ${themeName}`,
+                            `Theme names should only contain letters, numbers, and "_" or "-"`
+                        ].join(" ")
+                    )
+                );
+                process.exit(-1);
+            }
+        }
 
-        return [mainThemeName, ...themeVariantNames];
+        return themeNames;
     })();
 
     const projectBuildDirPath = (() => {