keycloakify 10.0.0-rc.14 → 10.0.0-rc.140

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

@@ -0,0 +1,70 @@
+import { join as pathJoin, extname as pathExtname, sep as pathSep } from "path";
+import { transformCodebase } from "../../tools/transformCodebase";
+import type { BuildContext } from "../../shared/buildContext";
+import { writeMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
+import { assert } from "tsafe/assert";
+
+export type BuildContextLike = {
+    keycloakifyBuildDirPath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function generateResourcesForThemeVariant(params: {
+    resourcesDirPath: string;
+    themeName: string;
+    themeVariantName: string;
+}) {
+    const { resourcesDirPath, themeName, themeVariantName } = params;
+
+    const mainThemeDirPath = pathJoin(resourcesDirPath, "theme", themeName);
+
+    transformCodebase({
+        srcDirPath: mainThemeDirPath,
+        destDirPath: pathJoin(mainThemeDirPath, "..", 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 };
+        }
+    });
+
+    writeMetaInfKeycloakThemes({
+        resourcesDirPath,
+        getNewMetaInfKeycloakTheme: ({ metaInfKeycloakTheme }) => {
+            assert(metaInfKeycloakTheme !== undefined);
+
+            const newMetaInfKeycloakTheme = metaInfKeycloakTheme;
+
+            newMetaInfKeycloakTheme.themes.push({
+                name: themeVariantName,
+                types: (() => {
+                    const theme = newMetaInfKeycloakTheme.themes.find(
+                        ({ name }) => name === themeName
+                    );
+                    assert(theme !== undefined);
+                    return theme.types;
+                })()
+            });
+
+            return newMetaInfKeycloakTheme;
+        }
+    });
+}

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

@@ -0,0 +1 @@
+export * from "./generateResources";

package/src/bin/keycloakify/{generateSrcMainResources → generateResources}/readExtraPageNames.ts

@@ -3,17 +3,26 @@ import { id } from "tsafe/id";
 import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
-import { type ThemeType, accountThemePageIds, loginThemePageIds } from "../../shared/constants";
-
-export function readExtraPagesNames(params: { themeSrcDirPath: string; themeType: ThemeType }): string[] {
+import {
+    type ThemeType,
+    ACCOUNT_THEME_PAGE_IDS,
+    LOGIN_THEME_PAGE_IDS
+} from "../../shared/constants";
+
+export function readExtraPagesNames(params: {
+    themeSrcDirPath: string;
+    themeType: ThemeType;
+}): string[] {
     const { themeSrcDirPath, themeType } = params;
 
     const filePaths = crawl({
-        "dirPath": pathJoin(themeSrcDirPath, themeType),
-        "returnedPathsType": "absolute"
+        dirPath: pathJoin(themeSrcDirPath, themeType),
+        returnedPathsType: "absolute"
     }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
 
-    const candidateFilePaths = filePaths.filter(filePath => /kcContext\.[^.]+$/.test(filePath));
+    const candidateFilePaths = filePaths.filter(filePath =>
+        /[kK]cContext\.[^.]+$/.test(filePath)
+    );
 
     if (candidateFilePaths.length === 0) {
         candidateFilePaths.push(...filePaths);
@@ -24,15 +33,17 @@ export function readExtraPagesNames(params: { themeSrcDirPath: string; themeType
     for (const candidateFilPath of candidateFilePaths) {
         const rawSourceFile = fs.readFileSync(candidateFilPath).toString("utf8");
 
-        extraPages.push(...Array.from(rawSourceFile.matchAll(/["']?pageId["']?\s*:\s*["']([^.]+.ftl)["']/g), m => m[1]));
+        extraPages.push(
+            ...Array.from(rawSourceFile.matchAll(/["']([^.\s]+.ftl)["']:/g), m => m[1])
+        );
     }
 
     return extraPages.reduce(...removeDuplicates<string>()).filter(pageId => {
         switch (themeType) {
             case "account":
-                return !id<readonly string[]>(accountThemePageIds).includes(pageId);
+                return !id<readonly string[]>(ACCOUNT_THEME_PAGE_IDS).includes(pageId);
             case "login":
-                return !id<readonly string[]>(loginThemePageIds).includes(pageId);
+                return !id<readonly string[]>(LOGIN_THEME_PAGE_IDS).includes(pageId);
         }
     });
 }

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

@@ -0,0 +1,91 @@
+import { crawl } from "../../tools/crawl";
+import { join as pathJoin } from "path";
+import * as fs from "fs";
+import type { ThemeType } from "../../shared/constants";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
+
+/** Assumes the theme type exists */
+export function readFieldNameUsage(params: {
+    themeSrcDirPath: string;
+    themeType: ThemeType;
+}): string[] {
+    const { themeSrcDirPath, themeType } = params;
+
+    // NOTE: We pre-populate with the synthetic user attributes defined in useUserProfileForm (can't be parsed automatically)
+    const fieldNames = new Set<string>([
+        "firstName",
+        "lastName",
+        "email",
+        "username",
+        "password",
+        "password-confirm"
+    ]);
+
+    for (const srcDirPath of [
+        pathJoin(getThisCodebaseRootDirPath(), "src", themeType),
+        pathJoin(themeSrcDirPath, themeType)
+    ]) {
+        const filePaths = crawl({
+            dirPath: srcDirPath,
+            returnedPathsType: "absolute"
+        }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
+
+        for (const filePath of filePaths) {
+            const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
+
+            if (!rawSourceFile.includes("messagesPerField")) {
+                continue;
+            }
+
+            for (const functionName of [
+                "printIfExists",
+                "existsError",
+                "get",
+                "exists",
+                "getFirstError"
+            ] as const) {
+                if (!rawSourceFile.includes(functionName)) {
+                    continue;
+                }
+
+                try {
+                    rawSourceFile
+                        .split(functionName)
+                        .filter(part => part.startsWith("("))
+                        .map(part => {
+                            let [p1] = part.split(")");
+
+                            p1 = p1.slice(1);
+
+                            return p1;
+                        })
+                        .map(part => {
+                            return part
+                                .split(",")
+                                .map(a => a.trim())
+                                .filter((...[, i]) =>
+                                    functionName !== "printIfExists" ? true : i === 0
+                                )
+                                .filter(
+                                    a =>
+                                        a.startsWith('"') ||
+                                        a.startsWith("'") ||
+                                        a.startsWith("`")
+                                )
+                                .filter(
+                                    a =>
+                                        a.endsWith('"') ||
+                                        a.endsWith("'") ||
+                                        a.endsWith("`")
+                                )
+                                .map(a => a.slice(1).slice(0, -1));
+                        })
+                        .flat()
+                        .forEach(fieldName => fieldNames.add(fieldName));
+                } catch {}
+            }
+        }
+    }
+
+    return Array.from(fieldNames);
+}

package/src/bin/keycloakify/keycloakify.ts

@@ -1,21 +1,24 @@
-import { generateSrcMainResources } from "./generateSrcMainResources";
+import { generateResources } from "./generateResources";
 import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
 import * as child_process from "child_process";
 import * as fs from "fs";
-import { readBuildOptions } from "../shared/buildOptions";
-import { vitePluginSubScriptEnvNames } from "../shared/constants";
+import { getBuildContext } from "../shared/buildContext";
+import { VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES } from "../shared/constants";
 import { buildJars } from "./buildJars";
 import type { CliCommandOptions } from "../main";
 import chalk from "chalk";
 import { readThisNpmPackageVersion } from "../tools/readThisNpmPackageVersion";
 import * as os from "os";
+import { rmSync } from "../tools/fs.rmSync";
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
     exit_if_maven_not_installed: {
         let commandOutput: Buffer | undefined = undefined;
 
         try {
-            commandOutput = child_process.execSync("mvn --version", { "stdio": ["ignore", "pipe", "ignore"] });
+            commandOutput = child_process.execSync("mvn --version", {
+                stdio: ["ignore", "pipe", "ignore"]
+            });
         } catch {}
 
         if (commandOutput?.toString("utf8").includes("Apache Maven")) {
@@ -34,49 +37,82 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             }
         })();
 
-        console.log(`${chalk.red("Apache Maven required.")} Install it with \`${chalk.bold(installationCommand)}\` (for example)`);
+        console.log(
+            `${chalk.red("Apache Maven required.")} Install it with \`${chalk.bold(
+                installationCommand
+            )}\` (for example)`
+        );
 
         process.exit(1);
     }
 
     const { cliCommandOptions } = params;
 
-    const buildOptions = readBuildOptions({ cliCommandOptions });
+    const buildContext = getBuildContext({ cliCommandOptions });
 
     console.log(
         [
             chalk.cyan(`keycloakify v${readThisNpmPackageVersion()}`),
-            chalk.green(`Building the keycloak theme in .${pathSep}${pathRelative(process.cwd(), buildOptions.keycloakifyBuildDirPath)} ...`)
+            chalk.green(
+                `Building the keycloak theme in .${pathSep}${pathRelative(
+                    process.cwd(),
+                    buildContext.keycloakifyBuildDirPath
+                )} ...`
+            )
         ].join(" ")
     );
 
     const startTime = Date.now();
 
     {
-        if (!fs.existsSync(buildOptions.keycloakifyBuildDirPath)) {
-            fs.mkdirSync(buildOptions.keycloakifyBuildDirPath, { "recursive": true });
+        if (!fs.existsSync(buildContext.keycloakifyBuildDirPath)) {
+            fs.mkdirSync(buildContext.keycloakifyBuildDirPath, {
+                recursive: true
+            });
         }
 
-        fs.writeFileSync(pathJoin(buildOptions.keycloakifyBuildDirPath, ".gitignore"), Buffer.from("*", "utf8"));
+        fs.writeFileSync(
+            pathJoin(buildContext.keycloakifyBuildDirPath, ".gitignore"),
+            Buffer.from("*", "utf8")
+        );
     }
 
-    await generateSrcMainResources({ buildOptions });
+    const resourcesDirPath = pathJoin(buildContext.keycloakifyBuildDirPath, "resources");
+
+    await generateResources({
+        resourcesDirPath,
+        buildContext
+    });
 
     run_post_build_script: {
-        if (buildOptions.bundler !== "vite") {
+        if (buildContext.bundler !== "vite") {
             break run_post_build_script;
         }
 
         child_process.execSync("npx vite", {
-            "cwd": buildOptions.reactAppRootDirPath,
-            "env": {
+            cwd: buildContext.projectDirPath,
+            env: {
                 ...process.env,
-                [vitePluginSubScriptEnvNames.runPostBuildScript]: JSON.stringify(buildOptions)
+                [VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES.RUN_POST_BUILD_SCRIPT]: JSON.stringify(
+                    {
+                        resourcesDirPath,
+                        buildContext
+                    }
+                )
             }
         });
     }
 
-    await buildJars({ buildOptions });
+    await buildJars({
+        resourcesDirPath,
+        buildContext
+    });
+
+    rmSync(resourcesDirPath, { recursive: true });
 
-    console.log(chalk.green(`✓ built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`));
+    console.log(
+        chalk.green(
+            `✓ keycloak theme built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`
+        )
+    );
 }

package/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -1,57 +1,67 @@
-import * as crypto from "crypto";
-import type { BuildOptions } from "../../shared/buildOptions";
+import type { BuildContext } from "../../shared/buildContext";
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../shared/constants";
 import { assert } from "tsafe/assert";
-import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
+import { posix } from "path";
 
-export type BuildOptionsLike = {
+export type BuildContextLike = {
     urlPathname: string | undefined;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
-export function replaceImportsInCssCode(params: { cssCode: string }): {
+export function replaceImportsInCssCode(params: {
+    cssCode: string;
+    cssFileRelativeDirPath: string | undefined;
+    buildContext: BuildContextLike;
+}): {
     fixedCssCode: string;
-    cssGlobalsToDefine: Record<string, string>;
 } {
-    const { cssCode } = params;
+    const { cssCode, cssFileRelativeDirPath, buildContext } = params;
 
-    const cssGlobalsToDefine: Record<string, string> = {};
+    let fixedCssCode = cssCode;
 
-    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*?/g) ?? []).forEach(
-        match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match)
-    );
+    [
+        /url\("(\/[^/][^"]+)"\)/g,
+        /url\('(\/[^/][^']+)'\)/g,
+        /url\((\/[^/][^)]+)\)/g
+    ].forEach(
+        regex =>
+            (fixedCssCode = fixedCssCode.replace(
+                regex,
+                (match, assetFileAbsoluteUrlPathname) => {
+                    if (buildContext.urlPathname !== undefined) {
+                        if (
+                            !assetFileAbsoluteUrlPathname.startsWith(
+                                buildContext.urlPathname
+                            )
+                        ) {
+                            // NOTE: Should never happen
+                            return match;
+                        }
+                        assetFileAbsoluteUrlPathname =
+                            assetFileAbsoluteUrlPathname.replace(
+                                buildContext.urlPathname,
+                                "/"
+                            );
+                    }
 
-    let fixedCssCode = cssCode;
+                    inline_style_in_html: {
+                        if (cssFileRelativeDirPath !== undefined) {
+                            break inline_style_in_html;
+                        }
 
-    Object.keys(cssGlobalsToDefine).forEach(
-        cssVariableName =>
-            //NOTE: split/join pattern ~ replace all
-            (fixedCssCode = fixedCssCode.split(cssGlobalsToDefine[cssVariableName]).join(`var(--${cssVariableName})`))
-    );
+                        return `url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname}")`;
+                    }
 
-    return { fixedCssCode, cssGlobalsToDefine };
-}
+                    const assetFileRelativeUrlPathname = posix.relative(
+                        cssFileRelativeDirPath.replace(/\\/g, "/"),
+                        assetFileAbsoluteUrlPathname.replace(/^\//, "")
+                    );
 
-export function generateCssCodeToDefineGlobals(params: { cssGlobalsToDefine: Record<string, string>; buildOptions: BuildOptionsLike }): {
-    cssCodeToPrependInHead: string;
-} {
-    const { cssGlobalsToDefine, buildOptions } = params;
-
-    return {
-        "cssCodeToPrependInHead": [
-            ":root {",
-            ...Object.keys(cssGlobalsToDefine)
-                .map(cssVariableName =>
-                    [
-                        `--${cssVariableName}:`,
-                        cssGlobalsToDefine[cssVariableName].replace(
-                            new RegExp(`url\\(${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`, "g"),
-                            `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
-                        )
-                    ].join(" ")
-                )
-                .map(line => `    ${line};`),
-            "}"
-        ].join("\n")
-    };
+                    return `url("${assetFileRelativeUrlPathname}")`;
+                }
+            ))
+    );
+
+    return { fixedCssCode };
 }

package/src/bin/keycloakify/replacers/replaceImportsInJsCode/replaceImportsInJsCode.ts

@@ -1,35 +1,38 @@
 import { assert } from "tsafe/assert";
-import type { BuildOptions } from "../../../shared/buildOptions";
+import type { BuildContext } from "../../../shared/buildContext";
 import { replaceImportsInJsCode_vite } from "./vite";
 import { replaceImportsInJsCode_webpack } from "./webpack";
 import * as fs from "fs";
 
-export type BuildOptionsLike = {
-    reactAppBuildDirPath: string;
+export type BuildContextLike = {
+    projectBuildDirPath: string;
     assetsDirPath: string;
     urlPathname: string | undefined;
     bundler: "vite" | "webpack";
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
-export function replaceImportsInJsCode(params: { jsCode: string; buildOptions: BuildOptionsLike }) {
-    const { jsCode, buildOptions } = params;
+export function replaceImportsInJsCode(params: {
+    jsCode: string;
+    buildContext: BuildContextLike;
+}) {
+    const { jsCode, buildContext } = params;
 
     const { fixedJsCode } = (() => {
-        switch (buildOptions.bundler) {
+        switch (buildContext.bundler) {
             case "vite":
                 return replaceImportsInJsCode_vite({
                     jsCode,
-                    buildOptions,
-                    "basenameOfAssetsFiles": readAssetsDirSync({
-                        "assetsDirPath": params.buildOptions.assetsDirPath
+                    buildContext,
+                    basenameOfAssetsFiles: readAssetsDirSync({
+                        assetsDirPath: params.buildContext.assetsDirPath
                     })
                 });
             case "webpack":
                 return replaceImportsInJsCode_webpack({
                     jsCode,
-                    buildOptions
+                    buildContext
                 });
         }
     })();

package/src/bin/keycloakify/replacers/replaceImportsInJsCode/vite.ts

@@ -1,59 +1,74 @@
-import { nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir } from "../../../shared/constants";
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
-import type { BuildOptions } from "../../../shared/buildOptions";
+import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
 import { replaceAll } from "../../../tools/String.prototype.replaceAll";
 
-export type BuildOptionsLike = {
-    reactAppBuildDirPath: string;
+export type BuildContextLike = {
+    projectBuildDirPath: string;
     assetsDirPath: string;
     urlPathname: string | undefined;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export function replaceImportsInJsCode_vite(params: {
     jsCode: string;
-    buildOptions: BuildOptionsLike;
+    buildContext: BuildContextLike;
     basenameOfAssetsFiles: string[];
     systemType?: "posix" | "win32";
 }): {
     fixedJsCode: string;
 } {
-    const { jsCode, buildOptions, basenameOfAssetsFiles, systemType = nodePath.sep === "/" ? "posix" : "win32" } = params;
+    const {
+        jsCode,
+        buildContext,
+        basenameOfAssetsFiles,
+        systemType = nodePath.sep === "/" ? "posix" : "win32"
+    } = params;
 
     const { relative: pathRelative, sep: pathSep } = nodePath[systemType];
 
     let fixedJsCode = jsCode;
 
-    replace_base_javacript_import: {
-        if (buildOptions.urlPathname === undefined) {
-            break replace_base_javacript_import;
+    replace_base_js_import: {
+        if (buildContext.urlPathname === undefined) {
+            break replace_base_js_import;
         }
         // Optimization
-        if (!jsCode.includes(buildOptions.urlPathname)) {
-            break replace_base_javacript_import;
+        if (!jsCode.includes(buildContext.urlPathname)) {
+            break replace_base_js_import;
         }
 
         // Replace `Hv=function(e){return"/abcde12345/"+e}` by `Hv=function(e){return"/"+e}`
         fixedJsCode = fixedJsCode.replace(
             new RegExp(
-                `([\\w\\$][\\w\\d\\$]*)=function\\(([\\w\\$][\\w\\d\\$]*)\\)\\{return"${replaceAll(buildOptions.urlPathname, "/", "\\/")}"\\+\\2\\}`,
+                `([\\w\\$][\\w\\d\\$]*)=function\\(([\\w\\$][\\w\\d\\$]*)\\)\\{return"${replaceAll(
+                    buildContext.urlPathname,
+                    "/",
+                    "\\/"
+                )}"\\+\\2\\}`,
                 "g"
             ),
-            (...[, funcName, paramName]) => `${funcName}=function(${paramName}){return"/"+${paramName}}`
+            (...[, funcName, paramName]) =>
+                `${funcName}=function(${paramName}){return"/"+${paramName}}`
         );
     }
 
     replace_javascript_relatives_import_paths: {
         // Example: "assets/ or "foo/bar/"
         const staticDir = (() => {
-            let out = pathRelative(buildOptions.reactAppBuildDirPath, buildOptions.assetsDirPath);
+            let out = pathRelative(
+                buildContext.projectBuildDirPath,
+                buildContext.assetsDirPath
+            );
 
             out = replaceAll(out, pathSep, "/") + "/";
 
             if (out === "/") {
-                throw new Error(`The assetsDirPath must be a subdirectory of reactAppBuildDirPath`);
+                throw new Error(
+                    `The assetsDirPath must be a subdirectory of projectBuildDirPath`
+                );
             }
 
             return out;
@@ -70,13 +85,13 @@ export function replaceImportsInJsCode_vite(params: {
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${relativePathOfAssetFile}"`,
-                    `(window.${nameOfTheGlobal}.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath.substring(1) + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${relativePathOfAssetFile}")`
                 );
 
                 fixedJsCode = replaceAll(
                     fixedJsCode,
-                    `"${buildOptions.urlPathname ?? "/"}${relativePathOfAssetFile}"`,
-                    `(window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                    `"${buildContext.urlPathname ?? "/"}${relativePathOfAssetFile}"`,
+                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${relativePathOfAssetFile}")`
                 );
             });
     }