keycloakify 7.7.1 → 7.9.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "7.7.1",
+    "version": "7.9.0-rc.0",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -10,6 +10,7 @@
     "types": "index.d.ts",
     "bin": {
         "keycloakify": "bin/keycloakify/index.js",
+        "copy-keycloak-resources-to-public": "bin/copy-keycloak-resources-to-public.js",
         "initialize-email-theme": "bin/initialize-email-theme.js",
         "download-builtin-keycloak-theme": "bin/download-builtin-keycloak-theme.js",
         "eject-keycloak-page": "bin/eject-keycloak-page.js"
@@ -67,6 +68,7 @@
         "src/account/pages/Account.tsx",
         "src/account/pages/PageProps.ts",
         "src/account/pages/Password.tsx",
+        "src/bin/copy-keycloak-resources-to-public.ts",
         "src/bin/download-builtin-keycloak-theme.ts",
         "src/bin/eject-keycloak-page.ts",
         "src/bin/getSrcDirPath.ts",
@@ -78,8 +80,10 @@
         "src/bin/keycloakify/generateFtl/index.ts",
         "src/bin/keycloakify/generateFtl/pageId.ts",
         "src/bin/keycloakify/generateJavaStackFiles.ts",
-        "src/bin/keycloakify/generateKeycloakThemeResources.ts",
         "src/bin/keycloakify/generateStartKeycloakTestingContainer.ts",
+        "src/bin/keycloakify/generateTheme/downloadKeycloakStaticResources.ts",
+        "src/bin/keycloakify/generateTheme/generateTheme.ts",
+        "src/bin/keycloakify/generateTheme/index.ts",
         "src/bin/keycloakify/index.ts",
         "src/bin/keycloakify/keycloakify.ts",
         "src/bin/keycloakify/parsedPackageJson.ts",
@@ -89,7 +93,6 @@
         "src/bin/mockTestingResourcesPath.ts",
         "src/bin/promptKeycloakVersion.ts",
         "src/bin/tools/NpmModuleVersion.ts",
-        "src/bin/tools/cliOptions.ts",
         "src/bin/tools/crawl.ts",
         "src/bin/tools/crc32.ts",
         "src/bin/tools/deflate.ts",
@@ -314,6 +317,9 @@
         "account/pages/Password.d.ts",
         "account/pages/Password.js",
         "account/pages/Password.js.map",
+        "bin/copy-keycloak-resources-to-public.d.ts",
+        "bin/copy-keycloak-resources-to-public.js",
+        "bin/copy-keycloak-resources-to-public.js.map",
         "bin/download-builtin-keycloak-theme.d.ts",
         "bin/download-builtin-keycloak-theme.js",
         "bin/download-builtin-keycloak-theme.js.map",
@@ -345,12 +351,18 @@
         "bin/keycloakify/generateJavaStackFiles.d.ts",
         "bin/keycloakify/generateJavaStackFiles.js",
         "bin/keycloakify/generateJavaStackFiles.js.map",
-        "bin/keycloakify/generateKeycloakThemeResources.d.ts",
-        "bin/keycloakify/generateKeycloakThemeResources.js",
-        "bin/keycloakify/generateKeycloakThemeResources.js.map",
         "bin/keycloakify/generateStartKeycloakTestingContainer.d.ts",
         "bin/keycloakify/generateStartKeycloakTestingContainer.js",
         "bin/keycloakify/generateStartKeycloakTestingContainer.js.map",
+        "bin/keycloakify/generateTheme/downloadKeycloakStaticResources.d.ts",
+        "bin/keycloakify/generateTheme/downloadKeycloakStaticResources.js",
+        "bin/keycloakify/generateTheme/downloadKeycloakStaticResources.js.map",
+        "bin/keycloakify/generateTheme/generateTheme.d.ts",
+        "bin/keycloakify/generateTheme/generateTheme.js",
+        "bin/keycloakify/generateTheme/generateTheme.js.map",
+        "bin/keycloakify/generateTheme/index.d.ts",
+        "bin/keycloakify/generateTheme/index.js",
+        "bin/keycloakify/generateTheme/index.js.map",
         "bin/keycloakify/index.d.ts",
         "bin/keycloakify/index.js",
         "bin/keycloakify/index.js.map",
@@ -378,9 +390,6 @@
         "bin/tools/NpmModuleVersion.d.ts",
         "bin/tools/NpmModuleVersion.js",
         "bin/tools/NpmModuleVersion.js.map",
-        "bin/tools/cliOptions.d.ts",
-        "bin/tools/cliOptions.js",
-        "bin/tools/cliOptions.js.map",
         "bin/tools/crawl.d.ts",
         "bin/tools/crawl.js",
         "bin/tools/crawl.js.map",
@@ -719,7 +728,7 @@
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
         "@types/yauzl": "^2.10.0",
-        "concurrently": "^7.6.0",
+        "concurrently": "^8.0.1",
         "copyfiles": "^2.4.1",
         "eslint-plugin-storybook": "^0.6.7",
         "husky": "^4.3.8",
@@ -733,7 +742,7 @@
         "storybook-dark-mode": "^1.1.2",
         "ts-node": "^10.9.1",
         "tsc-alias": "^1.8.3",
-        "typescript": "^5.0.4",
+        "typescript": "^4.9.1-beta",
         "vitest": "^0.29.8",
         "zod-to-json-schema": "^3.20.4"
     },

package/src/account/kcContext/createGetKcContext.ts

@@ -4,7 +4,7 @@ import type { ExtendKcContext } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { pathBasename } from "keycloakify/tools/pathBasename";
-import { mockTestingResourcesCommonPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { symToStr } from "tsafe/symToStr";
 import { kcContextMocks, kcContextCommonMock } from "keycloakify/account/kcContext/kcContextMocks";
 import { id } from "tsafe/id";
@@ -30,13 +30,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         if (mockPageId !== undefined && realKcContext === undefined) {
             //TODO maybe trow if no mock fo custom page
 
-            console.log(
-                [
-                    `%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`,
-                    `If assets are missing make sure you have built your Keycloak theme at least once.`
-                ].join(" "),
-                "background: red; color: yellow; font-size: medium"
-            );
+            console.log(`%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`, "background: red; color: yellow; font-size: medium");
 
             const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
 
@@ -100,7 +94,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         {
             const { url } = realKcContext;
 
-            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
+            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonDirPathRelativeToPublicDir));
         }
 
         return { "kcContext": realKcContext as any };

package/src/account/kcContext/kcContextMocks.ts

@@ -1,5 +1,5 @@
 import "minimal-polyfills/Object.fromEntries";
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir, resourcesDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { id } from "tsafe/id";
 import type { KcContext } from "./KcContext";
@@ -9,8 +9,8 @@ const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
     "url": {
-        "resourcesPath": pathJoin(PUBLIC_URL, mockTestingResourcesPath),
-        "resourcesCommonPath": pathJoin(PUBLIC_URL, mockTestingResourcesCommonPath),
+        "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
+        "resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),
         "resourceUrl": "#",
         "accountUrl": "#",
         "applicationsUrl": "#",

package/src/bin/copy-keycloak-resources-to-public.ts

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import { downloadKeycloakStaticResources } from "./keycloakify/generateTheme/downloadKeycloakStaticResources";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { basenameOfKeycloakDirInPublicDir } from "./mockTestingResourcesPath";
+import { readBuildOptions } from "./keycloakify/BuildOptions";
+import { themeTypes } from "./keycloakify/generateFtl";
+import * as fs from "fs";
+
+(async () => {
+    const projectDirPath = process.cwd();
+
+    const buildOptions = readBuildOptions({
+        "processArgv": process.argv.slice(2),
+        "projectDirPath": process.cwd()
+    });
+
+    const keycloakDirInPublicDir = pathJoin(process.env["PUBLIC_DIR_PATH"] || pathJoin(projectDirPath, "public"), basenameOfKeycloakDirInPublicDir);
+
+    if (fs.existsSync(keycloakDirInPublicDir)) {
+        console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} already exists.`);
+        return;
+    }
+
+    for (const themeType of themeTypes) {
+        await downloadKeycloakStaticResources({
+            "isSilent": false,
+            "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
+            "themeType": themeType,
+            "themeDirPath": keycloakDirInPublicDir
+        });
+    }
+
+    fs.writeFileSync(
+        pathJoin(keycloakDirInPublicDir, "README.txt"),
+        Buffer.from(
+            // prettier-ignore
+            [
+                "This is just a test folder that helps develop",
+                "the login and register page without having to run a Keycloak container"
+            ].join(" ")
+        )
+    );
+
+    fs.writeFileSync(pathJoin(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
+
+    console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} directory created.`);
+})();

package/src/bin/download-builtin-keycloak-theme.ts

@@ -2,7 +2,6 @@
 import { join as pathJoin } from "path";
 import { downloadAndUnzip } from "./tools/downloadAndUnzip";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { getCliOptions } from "./tools/cliOptions";
 import { getLogger } from "./tools/logger";
 import { readBuildOptions } from "./keycloakify/BuildOptions";
 
@@ -21,28 +20,22 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
 }
 
 async function main() {
-    const { isSilent } = getCliOptions(process.argv.slice(2));
-    const logger = getLogger({ isSilent });
+    const buildOptions = readBuildOptions({
+        "projectDirPath": process.cwd(),
+        "processArgv": process.argv.slice(2)
+    });
+
+    const logger = getLogger({ "isSilent": buildOptions.isSilent });
     const { keycloakVersion } = await promptKeycloakVersion();
 
-    const destDirPath = pathJoin(
-        readBuildOptions({
-            "isSilent": true,
-            "isExternalAssetsCliParamProvided": false,
-            "projectDirPath": process.cwd()
-        }).keycloakifyBuildDirPath,
-        "src",
-        "main",
-        "resources",
-        "theme"
-    );
+    const destDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources", "theme");
 
     logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
 
     await downloadBuiltinKeycloakTheme({
         keycloakVersion,
         destDirPath,
-        isSilent
+        "isSilent": buildOptions.isSilent
     });
 }
 

package/src/bin/initialize-email-theme.ts

@@ -4,13 +4,17 @@ import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme"
 import { join as pathJoin, relative as pathRelative } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
+import { readBuildOptions } from "./keycloakify/BuildOptions";
 import * as fs from "fs";
-import { getCliOptions } from "./tools/cliOptions";
 import { getLogger } from "./tools/logger";
 import { getEmailThemeSrcDirPath } from "./getSrcDirPath";
 
 export async function main() {
-    const { isSilent } = getCliOptions(process.argv.slice(2));
+    const { isSilent } = readBuildOptions({
+        "projectDirPath": process.cwd(),
+        "processArgv": process.argv.slice(2)
+    });
+
     const logger = getLogger({ isSilent });
 
     const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({

package/src/bin/keycloakify/BuildOptions.ts

@@ -6,6 +6,7 @@ import { symToStr } from "tsafe/symToStr";
 import { bundlers, getParsedPackageJson, type Bundler } from "./parsedPackageJson";
 import * as fs from "fs";
 import { join as pathJoin, sep as pathSep } from "path";
+import parseArgv from "minimist";
 
 /** Consolidated build option gathered form CLI arguments and config in package.json */
 export type BuildOptions = BuildOptions.Standalone | BuildOptions.ExternalAssets;
@@ -53,8 +54,17 @@ export namespace BuildOptions {
     }
 }
 
-export function readBuildOptions(params: { projectDirPath: string; isExternalAssetsCliParamProvided: boolean; isSilent: boolean }): BuildOptions {
-    const { projectDirPath, isExternalAssetsCliParamProvided, isSilent } = params;
+export function readBuildOptions(params: { projectDirPath: string; processArgv: string[] }): BuildOptions {
+    const { projectDirPath, processArgv } = params;
+
+    const { isExternalAssetsCliParamProvided, isSilentCliParamProvided } = (() => {
+        const argv = parseArgv(processArgv);
+
+        return {
+            "isSilentCliParamProvided": typeof argv["silent"] === "boolean" ? argv["silent"] : false,
+            "isExternalAssetsCliParamProvided": typeof argv["external-assets"] === "boolean" ? argv["external-assets"] : false
+        };
+    })();
 
     const parsedPackageJson = getParsedPackageJson({ projectDirPath });
 
@@ -143,7 +153,7 @@ export function readBuildOptions(params: { projectDirPath: string; isExternalAss
             "extraLoginPages": [...(extraPages ?? []), ...(extraLoginPages ?? [])],
             extraAccountPages,
             extraThemeProperties,
-            isSilent,
+            "isSilent": isSilentCliParamProvided,
             "keycloakVersionDefaultAssets": keycloakVersionDefaultAssets ?? "11.0.3",
             "reactAppBuildDirPath": (() => {
                 let { reactAppBuildDirPath = undefined } = parsedPackageJson.keycloakify ?? {};

package/src/bin/keycloakify/generateTheme/downloadKeycloakStaticResources.ts

@@ -0,0 +1,47 @@
+import { transformCodebase } from "../../tools/transformCodebase";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative } from "path";
+import type { ThemeType } from "../generateFtl";
+import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
+import {
+    resourcesCommonDirPathRelativeToPublicDir,
+    resourcesDirPathRelativeToPublicDir,
+    basenameOfKeycloakDirInPublicDir
+} from "../../mockTestingResourcesPath";
+import * as crypto from "crypto";
+
+export async function downloadKeycloakStaticResources(
+    // prettier-ignore
+    params: {
+        themeType: ThemeType;
+        themeDirPath: string;
+        isSilent: boolean;
+        keycloakVersion: string;
+    }
+) {
+    const { themeType, isSilent, themeDirPath, keycloakVersion } = params;
+
+    const tmpDirPath = pathJoin(
+        themeDirPath,
+        "..",
+        `tmp_suLeKsxId_${crypto.createHash("sha256").update(`${themeType}-${keycloakVersion}`).digest("hex").slice(0, 8)}`
+    );
+
+    await downloadBuiltinKeycloakTheme({
+        keycloakVersion,
+        "destDirPath": tmpDirPath,
+        isSilent
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
+        "destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesDirPathRelativeToPublicDir))
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
+        "destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesCommonDirPathRelativeToPublicDir))
+    });
+
+    fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
+}

package/src/bin/keycloakify/{generateKeycloakThemeResources.ts → generateTheme/generateTheme.ts}

@@ -1,14 +1,14 @@
-import { transformCodebase } from "../tools/transformCodebase";
+import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import { join as pathJoin, basename as pathBasename } from "path";
-import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFromStaticInJsCode";
-import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "./generateFtl";
-import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
-import { isInside } from "../tools/isInside";
-import type { BuildOptions } from "./BuildOptions";
+import { join as pathJoin } from "path";
+import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
+import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
+import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "../generateFtl";
+import { basenameOfKeycloakDirInPublicDir } from "../../mockTestingResourcesPath";
+import { isInside } from "../../tools/isInside";
+import type { BuildOptions } from "../BuildOptions";
 import { assert } from "tsafe/assert";
+import { downloadKeycloakStaticResources } from "./downloadKeycloakStaticResources";
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
 
@@ -21,6 +21,7 @@ export namespace BuildOptionsLike {
         isSilent: boolean;
         customUserAttributes: string[];
         themeVersion: string;
+        keycloakVersionDefaultAssets: string;
     };
 
     export type Standalone = Common & {
@@ -49,15 +50,14 @@ export namespace BuildOptionsLike {
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
-export async function generateKeycloakThemeResources(params: {
+export async function generateTheme(params: {
     reactAppBuildDirPath: string;
     keycloakThemeBuildingDirPath: string;
     emailThemeSrcDirPath: string | undefined;
-    keycloakVersion: string;
     buildOptions: BuildOptionsLike;
     keycloakifyVersion: string;
 }): Promise<{ doBundlesEmailTemplate: boolean }> {
-    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, emailThemeSrcDirPath, keycloakVersion, buildOptions, keycloakifyVersion } = params;
+    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, emailThemeSrcDirPath, buildOptions, keycloakifyVersion } = params;
 
     const getThemeDirPath = (themeType: ThemeType | "email") =>
         pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, themeType);
@@ -84,7 +84,7 @@ export async function generateKeycloakThemeResources(params: {
                     if (
                         buildOptions.isStandalone &&
                         isInside({
-                            "dirPath": pathJoin(reactAppBuildDirPath, mockTestingSubDirOfPublicDirBasename),
+                            "dirPath": pathJoin(reactAppBuildDirPath, basenameOfKeycloakDirInPublicDir),
                             filePath
                         })
                     ) {
@@ -172,48 +172,12 @@ export async function generateKeycloakThemeResources(params: {
             fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
         });
 
-        {
-            const tmpDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
-
-            await downloadBuiltinKeycloakTheme({
-                keycloakVersion,
-                "destDirPath": tmpDirPath,
-                isSilent: buildOptions.isSilent
-            });
-
-            const themeResourcesDirPath = pathJoin(themeDirPath, "resources");
-
-            transformCodebase({
-                "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
-                "destDirPath": themeResourcesDirPath
-            });
-
-            const reactAppPublicDirPath = pathJoin(reactAppBuildDirPath, "..", "public");
-
-            transformCodebase({
-                "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
-                "destDirPath": pathJoin(themeResourcesDirPath, pathBasename(mockTestingResourcesCommonPath))
-            });
-
-            transformCodebase({
-                "srcDirPath": themeResourcesDirPath,
-                "destDirPath": pathJoin(reactAppPublicDirPath, mockTestingResourcesPath)
-            });
-
-            const keycloakResourcesWithinPublicDirPath = pathJoin(reactAppPublicDirPath, mockTestingSubDirOfPublicDirBasename);
-
-            fs.writeFileSync(
-                pathJoin(keycloakResourcesWithinPublicDirPath, "README.txt"),
-                Buffer.from(
-                    ["This is just a test folder that helps develop", "the login and register page without having to run a Keycloak container"].join(
-                        " "
-                    )
-                )
-            );
-
-            fs.writeFileSync(pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"), Buffer.from("*", "utf8"));
-            fs.rmSync(tmpDirPath, { recursive: true, force: true });
-        }
+        await downloadKeycloakStaticResources({
+            "isSilent": buildOptions.isSilent,
+            "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
+            themeDirPath,
+            themeType
+        });
 
         fs.writeFileSync(
             pathJoin(themeDirPath, "theme.properties"),

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

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

package/src/bin/keycloakify/keycloakify.ts

@@ -1,4 +1,4 @@
-import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
+import { generateTheme } from "./generateTheme";
 import { generateJavaStackFiles } from "./generateJavaStackFiles";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
 import * as child_process from "child_process";
@@ -6,7 +6,6 @@ import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTe
 import * as fs from "fs";
 import { readBuildOptions } from "./BuildOptions";
 import { getLogger } from "../tools/logger";
-import { getCliOptions } from "../tools/cliOptions";
 import jar from "../tools/jar";
 import { assert } from "tsafe/assert";
 import { Equals } from "tsafe";
@@ -14,19 +13,17 @@ import { getEmailThemeSrcDirPath } from "../getSrcDirPath";
 import { getProjectRoot } from "../tools/getProjectRoot";
 
 export async function main() {
-    const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));
-    const logger = getLogger({ isSilent });
-    logger.log("🔏 Building the keycloak theme...⌚");
-
     const projectDirPath = process.cwd();
 
     const buildOptions = readBuildOptions({
         projectDirPath,
-        "isExternalAssetsCliParamProvided": hasExternalAssets,
-        "isSilent": isSilent
+        "processArgv": process.argv.slice(2)
     });
 
-    const { doBundlesEmailTemplate } = await generateKeycloakThemeResources({
+    const logger = getLogger({ "isSilent": buildOptions.isSilent });
+    logger.log("🔏 Building the keycloak theme...⌚");
+
+    const { doBundlesEmailTemplate } = await generateTheme({
         keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
         "emailThemeSrcDirPath": (() => {
             const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({ projectDirPath });
@@ -39,7 +36,6 @@ export async function main() {
         })(),
         "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
         buildOptions,
-        "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
         "keycloakifyVersion": (() => {
             const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
 

package/src/bin/mockTestingResourcesPath.ts

@@ -1,5 +1,5 @@
 import { pathJoin } from "./tools/pathJoin";
 
-export const mockTestingSubDirOfPublicDirBasename = "keycloak_static";
-export const mockTestingResourcesPath = pathJoin(mockTestingSubDirOfPublicDirBasename, "resources");
-export const mockTestingResourcesCommonPath = pathJoin(mockTestingResourcesPath, "resources_common");
+export const basenameOfKeycloakDirInPublicDir = "keycloak-resources";
+export const resourcesDirPathRelativeToPublicDir = pathJoin(basenameOfKeycloakDirInPublicDir, "resources");
+export const resourcesCommonDirPathRelativeToPublicDir = pathJoin(basenameOfKeycloakDirInPublicDir, "resources_common");

package/src/lib/usePrepareTemplate.ts

@@ -15,7 +15,7 @@ export function usePrepareTemplate(params: {
     htmlClassName: string | undefined;
     bodyClassName: string | undefined;
 }) {
-    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, htmlClassName, bodyClassName } = params;
+    const { doFetchDefaultThemeResources, stylesCommon = [], styles = [], url, scripts = [], htmlClassName, bodyClassName } = params;
 
     const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
 
@@ -26,36 +26,49 @@ export function usePrepareTemplate(params: {
 
         let isUnmounted = false;
 
-        Promise.all(
+        const removeArray: (() => void)[] = [];
+
+        (async () => {
+            const prLoadedArray: Promise<void>[] = [];
+
             [
-                ...(stylesCommon ?? []).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
-                ...(styles ?? []).map(relativePath => pathJoin(url.resourcesPath, relativePath))
+                ...stylesCommon.map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
+                ...styles.map(relativePath => pathJoin(url.resourcesPath, relativePath))
             ]
                 .reverse()
-                .map(href =>
-                    headInsert({
+                .forEach(href => {
+                    const { prLoaded, remove } = headInsert({
                         "type": "css",
-                        href,
-                        "position": "prepend"
-                    })
-                )
-        ).then(() => {
+                        "position": "prepend",
+                        href
+                    });
+
+                    removeArray.push(remove);
+
+                    prLoadedArray.push(prLoaded);
+                });
+
+            await Promise.all(prLoadedArray);
+
             if (isUnmounted) {
                 return;
             }
 
             setReady();
-        });
+        })();
 
-        (scripts ?? []).forEach(relativePath =>
-            headInsert({
+        scripts.forEach(relativePath => {
+            const { remove } = headInsert({
                 "type": "javascript",
                 "src": pathJoin(url.resourcesPath, relativePath)
-            })
-        );
+            });
+
+            removeArray.push(remove);
+        });
 
         return () => {
             isUnmounted = true;
+            removeArray.forEach(remove => remove());
         };
     }, []);
 

package/src/login/kcContext/createGetKcContext.ts

@@ -9,7 +9,7 @@ import type { ExtendKcContext } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { pathBasename } from "keycloakify/tools/pathBasename";
-import { mockTestingResourcesCommonPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { symToStr } from "tsafe/symToStr";
 import { loginThemePageIds } from "keycloakify/bin/keycloakify/generateFtl/pageId";
 
@@ -33,13 +33,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         if (mockPageId !== undefined && realKcContext === undefined) {
             //TODO maybe trow if no mock fo custom page
 
-            console.log(
-                [
-                    `%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`,
-                    `If assets are missing make sure you have built your Keycloak theme at least once.`
-                ].join(" "),
-                "background: red; color: yellow; font-size: medium"
-            );
+            console.log(`%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`, "background: red; color: yellow; font-size: medium");
 
             const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
 
@@ -158,7 +152,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         {
             const { url } = realKcContext;
 
-            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
+            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonDirPathRelativeToPublicDir));
         }
 
         return { "kcContext": realKcContext as any };