keycloakify 10.0.0-rc.97 → 10.0.0

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

@@ -3,9 +3,9 @@ import { join as pathJoin } from "path";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../shared/buildContext";
 import {
-    resources_common,
-    lastKeycloakVersionWithAccountV1,
-    accountV1ThemeName
+    RESOURCES_COMMON,
+    LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1,
+    ACCOUNT_V1_THEME_NAME
 } from "../../shared/constants";
 import {
     downloadKeycloakDefaultTheme,
@@ -24,14 +24,14 @@ export async function bringInAccountV1(params: {
     const { resourcesDirPath, buildContext } = params;
 
     const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
-        keycloakVersion: lastKeycloakVersionWithAccountV1,
+        keycloakVersion: LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1,
         buildContext
     });
 
     const accountV1DirPath = pathJoin(
         resourcesDirPath,
         "theme",
-        accountV1ThemeName,
+        ACCOUNT_V1_THEME_NAME,
         "account"
     );
 
@@ -47,7 +47,7 @@ export async function bringInAccountV1(params: {
 
     transformCodebase({
         srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", "common", "resources"),
-        destDirPath: pathJoin(accountV1DirPath, "resources", resources_common)
+        destDirPath: pathJoin(accountV1DirPath, "resources", RESOURCES_COMMON)
     });
 
     fs.writeFileSync(
@@ -69,7 +69,7 @@ export async function bringInAccountV1(params: {
                             "patternfly-additions.min.css"
                         ].map(
                             fileBasename =>
-                                `${resources_common}/node_modules/patternfly/dist/css/${fileBasename}`
+                                `${RESOURCES_COMMON}/node_modules/patternfly/dist/css/${fileBasename}`
                         )
                     ].join(" "),
                 "",

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

@@ -1,4 +1,4 @@
-import { type ThemeType, fallbackLanguageTag } from "../../shared/constants";
+import { type ThemeType, FALLBACK_LANGUAGE_TAG } from "../../shared/constants";
 import { crawl } from "../../tools/crawl";
 import { join as pathJoin } from "path";
 import { symToStr } from "tsafe/symToStr";
@@ -22,7 +22,7 @@ export function generateMessageProperties(params: {
         "src",
         themeType,
         "i18n",
-        "baseMessages"
+        "messages_defaultSet"
     );
 
     const baseMessageBundle: { [languageTag: string]: Record<string, string> } =
@@ -168,7 +168,7 @@ export function generateMessageProperties(params: {
                     ...(messageBundle === undefined
                         ? {}
                         : messageBundle[languageTag] ??
-                          messageBundle[fallbackLanguageTag] ??
+                          messageBundle[FALLBACK_LANGUAGE_TAG] ??
                           messageBundle[Object.keys(messageBundle)[0]] ??
                           {})
                 }

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

@@ -4,7 +4,8 @@ import {
     join as pathJoin,
     resolve as pathResolve,
     relative as pathRelative,
-    dirname as pathDirname
+    dirname as pathDirname,
+    basename as pathBasename
 } from "path";
 import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
 import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
@@ -14,12 +15,12 @@ import {
 } from "../generateFtl";
 import {
     type ThemeType,
-    lastKeycloakVersionWithAccountV1,
-    keycloak_resources,
-    accountV1ThemeName,
-    basenameOfTheKeycloakifyResourcesDir,
-    loginThemePageIds,
-    accountThemePageIds
+    LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1,
+    KEYCLOAK_RESOURCES,
+    ACCOUNT_V1_THEME_NAME,
+    BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS
 } from "../../shared/constants";
 import type { BuildContext } from "../../shared/buildContext";
 import { assert, type Equals } from "tsafe/assert";
@@ -42,6 +43,7 @@ import {
 } from "../../shared/metaInfKeycloakThemes";
 import { objectEntries } from "tsafe/objectEntries";
 import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
+import { downloadAndExtractArchive } from "../../tools/downloadAndExtractArchive";
 
 export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
     BuildContextLike_downloadKeycloakStaticResources &
@@ -51,9 +53,9 @@ export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
         projectDirPath: string;
         projectBuildDirPath: string;
         environmentVariables: { name: string; default: string }[];
-        recordIsImplementedByThemeType: BuildContext["recordIsImplementedByThemeType"];
+        implementedThemeTypes: BuildContext["implementedThemeTypes"];
         themeSrcDirPath: string;
-        bundler: { type: "vite" } | { type: "webpack" };
+        bundler: "vite" | "webpack";
     };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -71,17 +73,22 @@ export async function generateResourcesForMainTheme(params: {
     };
 
     for (const themeType of ["login", "account"] as const) {
-        if (!buildContext.recordIsImplementedByThemeType[themeType]) {
+        if (!buildContext.implementedThemeTypes[themeType].isImplemented) {
             continue;
         }
 
+        const isForAccountSpa =
+            themeType === "account" &&
+            (assert(buildContext.implementedThemeTypes.account.isImplemented),
+            buildContext.implementedThemeTypes.account.type === "Single-Page");
+
         const themeTypeDirPath = getThemeTypeDirPath({ themeType });
 
         apply_replacers_and_move_to_theme_resources: {
             const destDirPath = pathJoin(
                 themeTypeDirPath,
                 "resources",
-                basenameOfTheKeycloakifyResourcesDir
+                BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR
             );
 
             // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
@@ -89,7 +96,7 @@ export async function generateResourcesForMainTheme(params: {
 
             if (
                 themeType === "account" &&
-                buildContext.recordIsImplementedByThemeType.login
+                buildContext.implementedThemeTypes.login.isImplemented
             ) {
                 // NOTE: We prevent doing it twice, it has been done for the login theme.
 
@@ -99,7 +106,7 @@ export async function generateResourcesForMainTheme(params: {
                             themeType: "login"
                         }),
                         "resources",
-                        basenameOfTheKeycloakifyResourcesDir
+                        BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR
                     ),
                     destDirPath
                 });
@@ -110,15 +117,15 @@ export async function generateResourcesForMainTheme(params: {
             {
                 const dirPath = pathJoin(
                     buildContext.projectBuildDirPath,
-                    keycloak_resources
+                    KEYCLOAK_RESOURCES
                 );
 
                 if (fs.existsSync(dirPath)) {
-                    assert(buildContext.bundler.type === "webpack");
+                    assert(buildContext.bundler === "webpack");
 
                     throw new Error(
                         [
-                            `Keycloakify build error: The ${keycloak_resources} directory shouldn't exist in your build directory.`,
+                            `Keycloakify build error: The ${KEYCLOAK_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`,
@@ -178,15 +185,17 @@ export async function generateResourcesForMainTheme(params: {
             ...(() => {
                 switch (themeType) {
                     case "login":
-                        return loginThemePageIds;
+                        return LOGIN_THEME_PAGE_IDS;
                     case "account":
-                        return accountThemePageIds;
+                        return isForAccountSpa ? ["index.ftl"] : ACCOUNT_THEME_PAGE_IDS;
                 }
             })(),
-            ...readExtraPagesNames({
-                themeType,
-                themeSrcDirPath: buildContext.themeSrcDirPath
-            })
+            ...(isForAccountSpa
+                ? []
+                : readExtraPagesNames({
+                      themeType,
+                      themeSrcDirPath: buildContext.themeSrcDirPath
+                  }))
         ].forEach(pageId => {
             const { ftlCode } = generateFtlFilesCode({ pageId });
 
@@ -196,40 +205,52 @@ export async function generateResourcesForMainTheme(params: {
             );
         });
 
-        generateMessageProperties({
-            themeSrcDirPath: buildContext.themeSrcDirPath,
-            themeType
-        }).forEach(({ languageTag, propertiesFileSource }) => {
-            const messagesDirPath = pathJoin(themeTypeDirPath, "messages");
+        i18n_messages_generation: {
+            if (isForAccountSpa) {
+                break i18n_messages_generation;
+            }
 
-            fs.mkdirSync(pathJoin(themeTypeDirPath, "messages"), {
-                recursive: true
-            });
+            generateMessageProperties({
+                themeSrcDirPath: buildContext.themeSrcDirPath,
+                themeType
+            }).forEach(({ languageTag, propertiesFileSource }) => {
+                const messagesDirPath = pathJoin(themeTypeDirPath, "messages");
 
-            const propertiesFilePath = pathJoin(
-                messagesDirPath,
-                `messages_${languageTag}.properties`
-            );
+                fs.mkdirSync(pathJoin(themeTypeDirPath, "messages"), {
+                    recursive: true
+                });
 
-            fs.writeFileSync(
-                propertiesFilePath,
-                Buffer.from(propertiesFileSource, "utf8")
-            );
-        });
+                const propertiesFilePath = pathJoin(
+                    messagesDirPath,
+                    `messages_${languageTag}.properties`
+                );
 
-        await downloadKeycloakStaticResources({
-            keycloakVersion: (() => {
-                switch (themeType) {
-                    case "account":
-                        return lastKeycloakVersionWithAccountV1;
-                    case "login":
-                        return buildContext.loginThemeResourcesFromKeycloakVersion;
-                }
-            })(),
-            themeDirPath: pathResolve(pathJoin(themeTypeDirPath, "..")),
-            themeType,
-            buildContext
-        });
+                fs.writeFileSync(
+                    propertiesFilePath,
+                    Buffer.from(propertiesFileSource, "utf8")
+                );
+            });
+        }
+
+        keycloak_static_resources: {
+            if (isForAccountSpa) {
+                break keycloak_static_resources;
+            }
+
+            await downloadKeycloakStaticResources({
+                keycloakVersion: (() => {
+                    switch (themeType) {
+                        case "account":
+                            return LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1;
+                        case "login":
+                            return buildContext.loginThemeResourcesFromKeycloakVersion;
+                    }
+                })(),
+                themeDirPath: pathResolve(pathJoin(themeTypeDirPath, "..")),
+                themeType,
+                buildContext
+            });
+        }
 
         fs.writeFileSync(
             pathJoin(themeTypeDirPath, "theme.properties"),
@@ -238,12 +259,13 @@ export async function generateResourcesForMainTheme(params: {
                     `parent=${(() => {
                         switch (themeType) {
                             case "account":
-                                return accountV1ThemeName;
+                                return isForAccountSpa ? "base" : ACCOUNT_V1_THEME_NAME;
                             case "login":
                                 return "keycloak";
                         }
                         assert<Equals<typeof themeType, never>>(false);
                     })()}`,
+                    ...(isForAccountSpa ? ["deprecatedMode=false"] : []),
                     ...(buildContext.extraThemeProperties ?? []),
                     ...buildContext.environmentVariables.map(
                         ({ name, default: defaultValue }) =>
@@ -256,7 +278,7 @@ export async function generateResourcesForMainTheme(params: {
     }
 
     email: {
-        if (!buildContext.recordIsImplementedByThemeType.email) {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
             break email;
         }
 
@@ -268,26 +290,70 @@ export async function generateResourcesForMainTheme(params: {
         });
     }
 
-    if (buildContext.recordIsImplementedByThemeType.account) {
+    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;
+        }
+
         await bringInAccountV1({
             resourcesDirPath,
             buildContext
         });
     }
 
+    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 { extractedDirPath } = await downloadAndExtractArchive({
+            url: "https://repo1.maven.org/maven2/org/keycloak/keycloak-account-ui/25.0.1/keycloak-account-ui-25.0.1.jar",
+            cacheDirPath: buildContext.cacheDirPath,
+            fetchOptions: buildContext.fetchOptions,
+            uniqueIdOfOnArchiveFile: "bring_in_account_v3_i18n_messages",
+            onArchiveFile: async ({ fileRelativePath, writeFile }) => {
+                if (
+                    !fileRelativePath.startsWith(
+                        pathJoin("theme", "keycloak.v3", "account", "messages")
+                    )
+                ) {
+                    return;
+                }
+                await writeFile({
+                    fileRelativePath: pathBasename(fileRelativePath)
+                });
+            }
+        });
+
+        transformCodebase({
+            srcDirPath: extractedDirPath,
+            destDirPath: pathJoin(
+                getThemeTypeDirPath({ themeType: "account" }),
+                "messages"
+            )
+        });
+    }
+
     {
         const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };
 
         metaInfKeycloakThemes.themes.push({
             name: themeName,
-            types: objectEntries(buildContext.recordIsImplementedByThemeType)
-                .filter(([, isImplemented]) => isImplemented)
+            types: objectEntries(buildContext.implementedThemeTypes)
+                .filter(([, { isImplemented }]) => isImplemented)
                 .map(([themeType]) => themeType)
         });
 
-        if (buildContext.recordIsImplementedByThemeType.account) {
+        if (buildContext.implementedThemeTypes.account.isImplemented) {
             metaInfKeycloakThemes.themes.push({
-                name: accountV1ThemeName,
+                name: ACCOUNT_V1_THEME_NAME,
                 types: ["account"]
             });
         }

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

@@ -31,8 +31,8 @@ export function generateResourcesForThemeVariant(params: {
                     Buffer.from(sourceCode)
                         .toString("utf-8")
                         .replace(
-                            `kcContext.themeName = "${themeName}";`,
-                            `kcContext.themeName = "${themeVariantName}";`
+                            `"themeName": "${themeName}"`,
+                            `"themeName": "${themeVariantName}"`
                         ),
                     "utf8"
                 );

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

@@ -5,8 +5,8 @@ import * as fs from "fs";
 import { join as pathJoin } from "path";
 import {
     type ThemeType,
-    accountThemePageIds,
-    loginThemePageIds
+    ACCOUNT_THEME_PAGE_IDS,
+    LOGIN_THEME_PAGE_IDS
 } from "../../shared/constants";
 
 export function readExtraPagesNames(params: {
@@ -34,19 +34,16 @@ export function readExtraPagesNames(params: {
         const rawSourceFile = fs.readFileSync(candidateFilPath).toString("utf8");
 
         extraPages.push(
-            ...Array.from(
-                rawSourceFile.matchAll(/["']([^.\s]+.ftl)["']:/g),
-                m => (console.log(m), m[1])
-            )
+            ...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/keycloakify.ts

@@ -3,7 +3,7 @@ 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 { getBuildContext } from "../shared/buildContext";
-import { vitePluginSubScriptEnvNames } from "../shared/constants";
+import { VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES } from "../shared/constants";
 import { buildJars } from "./buildJars";
 import type { CliCommandOptions } from "../main";
 import chalk from "chalk";
@@ -85,7 +85,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
     });
 
     run_post_build_script: {
-        if (buildContext.bundler.type !== "vite") {
+        if (buildContext.bundler !== "vite") {
             break run_post_build_script;
         }
 
@@ -93,10 +93,12 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             cwd: buildContext.projectDirPath,
             env: {
                 ...process.env,
-                [vitePluginSubScriptEnvNames.runPostBuildScript]: JSON.stringify({
-                    resourcesDirPath,
-                    buildContext
-                })
+                [VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES.RUN_POST_BUILD_SCRIPT]: JSON.stringify(
+                    {
+                        resourcesDirPath,
+                        buildContext
+                    }
+                )
             }
         });
     }

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

@@ -1,5 +1,5 @@
 import type { BuildContext } from "../../shared/buildContext";
-import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../shared/constants";
 import { assert } from "tsafe/assert";
 import { posix } from "path";
 
@@ -18,35 +18,49 @@ export function replaceImportsInCssCode(params: {
 } {
     const { cssCode, cssFileRelativeDirPath, buildContext } = params;
 
-    const fixedCssCode = cssCode.replace(
-        /url\(["']?(\/[^/][^)"']+)["']?\)/g,
-        (match, assetFileAbsoluteUrlPathname) => {
-            if (buildContext.urlPathname !== undefined) {
-                if (!assetFileAbsoluteUrlPathname.startsWith(buildContext.urlPathname)) {
-                    // NOTE: Should never happen
-                    return match;
-                }
-                assetFileAbsoluteUrlPathname = assetFileAbsoluteUrlPathname.replace(
-                    buildContext.urlPathname,
-                    "/"
-                );
-            }
-
-            inline_style_in_html: {
-                if (cssFileRelativeDirPath !== undefined) {
-                    break inline_style_in_html;
-                }
+    let fixedCssCode = cssCode;
+
+    [
+        /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,
+                                "/"
+                            );
+                    }
 
-                return `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}${assetFileAbsoluteUrlPathname})`;
-            }
+                    inline_style_in_html: {
+                        if (cssFileRelativeDirPath !== undefined) {
+                            break inline_style_in_html;
+                        }
 
-            const assetFileRelativeUrlPathname = posix.relative(
-                cssFileRelativeDirPath.replace(/\\/g, "/"),
-                assetFileAbsoluteUrlPathname.replace(/^\//, "")
-            );
+                        return `url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname}")`;
+                    }
 
-            return `url(${assetFileRelativeUrlPathname})`;
-        }
+                    const assetFileRelativeUrlPathname = posix.relative(
+                        cssFileRelativeDirPath.replace(/\\/g, "/"),
+                        assetFileAbsoluteUrlPathname.replace(/^\//, "")
+                    );
+
+                    return `url("${assetFileRelativeUrlPathname}")`;
+                }
+            ))
     );
 
     return { fixedCssCode };

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

@@ -8,7 +8,7 @@ export type BuildContextLike = {
     projectBuildDirPath: string;
     assetsDirPath: string;
     urlPathname: string | undefined;
-    bundler: { type: "vite" } | { type: "webpack" };
+    bundler: "vite" | "webpack";
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -20,7 +20,7 @@ export function replaceImportsInJsCode(params: {
     const { jsCode, buildContext } = params;
 
     const { fixedJsCode } = (() => {
-        switch (buildContext.bundler.type) {
+        switch (buildContext.bundler) {
             case "vite":
                 return replaceImportsInJsCode_vite({
                     jsCode,

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

@@ -1,4 +1,4 @@
-import { basenameOfTheKeycloakifyResourcesDir } from "../../../shared/constants";
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
@@ -31,13 +31,13 @@ export function replaceImportsInJsCode_vite(params: {
 
     let fixedJsCode = jsCode;
 
-    replace_base_javacript_import: {
+    replace_base_js_import: {
         if (buildContext.urlPathname === undefined) {
-            break replace_base_javacript_import;
+            break replace_base_js_import;
         }
         // Optimization
         if (!jsCode.includes(buildContext.urlPathname)) {
-            break replace_base_javacript_import;
+            break replace_base_js_import;
         }
 
         // Replace `Hv=function(e){return"/abcde12345/"+e}` by `Hv=function(e){return"/"+e}`
@@ -85,13 +85,13 @@ export function replaceImportsInJsCode_vite(params: {
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${relativePathOfAssetFile}"`,
-                    `(window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath.substring(1) + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${relativePathOfAssetFile}")`
                 );
 
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${buildContext.urlPathname ?? "/"}${relativePathOfAssetFile}"`,
-                    `(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${relativePathOfAssetFile}")`
                 );
             });
     }

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

@@ -1,4 +1,4 @@
-import { basenameOfTheKeycloakifyResourcesDir } from "../../../shared/constants";
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
@@ -83,14 +83,14 @@ export function replaceImportsInJsCode_webpack(params: {
                 var pd = Object.getOwnPropertyDescriptor(${n}, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(${n}, "p", {
-                        get: function() { return window.kcContext.url.resourcesPath; },
+                        get: function() { return window.kcContext["x-keycloakify"].resourcesPath; },
                         set: function() {}
                     });
                 }
                 return "${u}";
             })()] = ${
                 isArrowFunction ? `${e} =>` : `function(${e}) { return `
-            } "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}${language}/"`
+            } "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${staticDir}${language}/"`
                 .replace(/\s+/g, " ")
                 .trim();
         }
@@ -104,7 +104,7 @@ export function replaceImportsInJsCode_webpack(params: {
                 `[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`,
                 "g"
             ),
-            `window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}`
+            `window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${staticDir}`
         );
 
     return { fixedJsCode };