keycloakify 6.0.0-beta.3 → 6.0.0-beta.7

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

@@ -0,0 +1,64 @@
+import * as crypto from "crypto";
+import type { BuildOptions } from "../BuildOptions";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { Reflect } from "tsafe/Reflect";
+
+export type BuildOptionsLike = {
+    urlPathname: string | undefined;
+};
+
+{
+    const buildOptions = Reflect<BuildOptions>();
+
+    assert(!is<BuildOptions.ExternalAssets.CommonExternalAssets>(buildOptions));
+
+    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
+}
+
+export function replaceImportsInCssCode(params: { cssCode: string }): {
+    fixedCssCode: string;
+    cssGlobalsToDefine: Record<string, string>;
+} {
+    const { cssCode } = params;
+
+    const cssGlobalsToDefine: Record<string, string> = {};
+
+    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
+        match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match)
+    );
+
+    let fixedCssCode = cssCode;
+
+    Object.keys(cssGlobalsToDefine).forEach(
+        cssVariableName =>
+            //NOTE: split/join pattern ~ replace all
+            (fixedCssCode = fixedCssCode.split(cssGlobalsToDefine[cssVariableName]).join(`var(--${cssVariableName})`))
+    );
+
+    return { fixedCssCode, cssGlobalsToDefine };
+}
+
+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}/build/"
+                        )
+                    ].join(" ")
+                )
+                .map(line => `    ${line};`),
+            "}"
+        ].join("\n")
+    };
+}

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

@@ -0,0 +1,47 @@
+import type { BuildOptions } from "../BuildOptions";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { Reflect } from "tsafe/Reflect";
+
+export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
+
+export namespace BuildOptionsLike {
+    export type Common = {
+        urlPathname: string | undefined;
+    };
+
+    export type Standalone = Common & {
+        isStandalone: true;
+    };
+
+    export type ExternalAssets = Common & {
+        isStandalone: false;
+        urlOrigin: string;
+    };
+}
+
+{
+    const buildOptions = Reflect<BuildOptions>();
+
+    assert(!is<BuildOptions.ExternalAssets.CommonExternalAssets>(buildOptions));
+
+    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
+}
+
+export function replaceImportsInInlineCssCode(params: { cssCode: string; buildOptions: BuildOptionsLike }): {
+    fixedCssCode: string;
+} {
+    const { cssCode, buildOptions } = params;
+
+    const fixedCssCode = cssCode.replace(
+        buildOptions.urlPathname === undefined
+            ? /url\(["']?\/([^/][^)"']+)["']?\)/g
+            : new RegExp(`url\\(["']?${buildOptions.urlPathname}([^)"']+)["']?\\)`, "g"),
+        (...[, group]) =>
+            `url(${
+                buildOptions.isStandalone ? "${url.resourcesPath}/build/" + group : buildOptions.urlOrigin + (buildOptions.urlPathname ?? "/") + group
+            })`
+    );
+
+    return { fixedCssCode };
+}

package/src/bin/link_in_test_app.ts

@@ -14,14 +14,14 @@ fs.writeFileSync(
                 return {
                     ...packageJsonParsed,
                     "main": packageJsonParsed["main"].replace(/^dist\//, ""),
-                    "types": packageJsonParsed["types"].replace(/^dist\//, ""),
+                    "types": packageJsonParsed["types"].replace(/^dist\//, "")
                 };
             })(),
             null,
-            2,
+            2
         ),
-        "utf8",
-    ),
+        "utf8"
+    )
 );
 
 const commonThirdPartyDeps = (() => {
@@ -33,10 +33,10 @@ const commonThirdPartyDeps = (() => {
             .map(namespaceModuleName =>
                 fs
                     .readdirSync(pathJoin(keycloakifyDirPath, "node_modules", namespaceModuleName))
-                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`),
+                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
             )
             .reduce((prev, curr) => [...prev, ...curr], []),
-        ...standaloneModuleNames,
+        ...standaloneModuleNames
     ];
 })();
 
@@ -55,12 +55,12 @@ const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
         cwd,
         "env": {
             ...process.env,
-            "HOME": yarnHomeDirPath,
-        },
+            "HOME": yarnHomeDirPath
+        }
     });
 };
 
-const testAppNames = ["keycloakify-demo-app"] as const;
+const testAppNames = [process.argv[2] ?? "keycloakify-demo-app"] as const;
 
 const getTestAppPath = (testAppName: typeof testAppNames[number]) => pathJoin(keycloakifyDirPath, "..", testAppName);
 
@@ -77,7 +77,7 @@ commonThirdPartyDeps.forEach(commonThirdPartyDep => {
     console.log(`${current}/${total} ${commonThirdPartyDep}`);
 
     const localInstallPath = pathJoin(
-        ...[keycloakifyDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])],
+        ...[keycloakifyDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
     );
 
     execYarnLink({ "cwd": localInstallPath });
@@ -85,8 +85,8 @@ commonThirdPartyDeps.forEach(commonThirdPartyDep => {
     testAppNames.forEach(testAppName =>
         execYarnLink({
             "cwd": getTestAppPath(testAppName),
-            "targetModuleName": commonThirdPartyDep,
-        }),
+            "targetModuleName": commonThirdPartyDep
+        })
     );
 });
 
@@ -97,6 +97,6 @@ execYarnLink({ "cwd": pathJoin(keycloakifyDirPath, "dist") });
 testAppNames.forEach(testAppName =>
     execYarnLink({
         "cwd": getTestAppPath(testAppName),
-        "targetModuleName": "keycloakify",
-    }),
+        "targetModuleName": "keycloakify"
+    })
 );

package/src/bin/mockTestingResourcesPath.ts

@@ -0,0 +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");

package/src/bin/promptKeycloakVersion.ts

@@ -24,9 +24,9 @@ export async function promptKeycloakVersion() {
             "count": 10,
             "doIgnoreBeta": true,
             "owner": "keycloak",
-            "repo": "keycloak",
+            "repo": "keycloak"
         }).then(arr => arr.map(({ tag }) => tag))),
-        "11.0.3",
+        "11.0.3"
     ];
 
     if (process.env["GITHUB_ACTIONS"] === "true") {
@@ -34,7 +34,7 @@ export async function promptKeycloakVersion() {
     }
 
     const { value: keycloakVersion } = await cliSelect<string>({
-        "values": tags,
+        "values": tags
     }).catch(() => {
         console.log("Aborting");
 

package/src/bin/tools/NpmModuleVersion.ts

@@ -20,7 +20,7 @@ export namespace NpmModuleVersion {
             ...(() => {
                 const str = match[4];
                 return str === undefined ? {} : { "betaPreRelease": parseInt(str) };
-            })(),
+            })()
         };
     }
 

package/src/bin/tools/downloadAndUnzip.ts

@@ -1,32 +1,75 @@
 import { basename as pathBasename, join as pathJoin } from "path";
 import { execSync } from "child_process";
-import fs from "fs";
+import * as fs from "fs";
 import { transformCodebase } from "./transformCodebase";
-import { rm_rf, rm, rm_r } from "./rm";
+import { rm, rm_rf } from "./rm";
+import * as crypto from "crypto";
 
 /** assert url ends with .zip */
-export function downloadAndUnzip(params: { url: string; destDirPath: string; pathOfDirToExtractInArchive?: string }) {
-    const { url, destDirPath, pathOfDirToExtractInArchive } = params;
+export function downloadAndUnzip(params: { url: string; destDirPath: string; pathOfDirToExtractInArchive?: string; cacheDirPath: string }) {
+    const { url, destDirPath, pathOfDirToExtractInArchive, cacheDirPath } = params;
 
-    const tmpDirPath = pathJoin(destDirPath, "..", "tmp_xxKdOxnEdx");
-    const zipFilePath = pathBasename(url);
+    const extractDirPath = pathJoin(
+        cacheDirPath,
+        `_${crypto.createHash("sha256").update(JSON.stringify({ url, pathOfDirToExtractInArchive })).digest("hex").substring(0, 15)}`
+    );
 
-    rm_rf(tmpDirPath);
+    fs.mkdirSync(cacheDirPath, { "recursive": true });
 
-    fs.mkdirSync(tmpDirPath, { "recursive": true });
+    const { readIsSuccessByExtractDirPath, writeIsSuccessByExtractDirPath } = (() => {
+        const filePath = pathJoin(cacheDirPath, "isSuccessByExtractDirPath.json");
 
-    execSync(`curl -L ${url} -o ${zipFilePath}`, { "cwd": tmpDirPath });
+        type IsSuccessByExtractDirPath = Record<string, boolean | undefined>;
 
-    execSync(`unzip ${zipFilePath}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/*"`}`, {
-        "cwd": tmpDirPath,
-    });
+        function readIsSuccessByExtractDirPath(): IsSuccessByExtractDirPath {
+            if (!fs.existsSync(filePath)) {
+                return {};
+            }
+
+            return JSON.parse(fs.readFileSync(filePath).toString("utf8"));
+        }
+
+        function writeIsSuccessByExtractDirPath(isSuccessByExtractDirPath: IsSuccessByExtractDirPath): void {
+            fs.writeFileSync(filePath, Buffer.from(JSON.stringify(isSuccessByExtractDirPath, null, 2), "utf8"));
+        }
+
+        return { readIsSuccessByExtractDirPath, writeIsSuccessByExtractDirPath };
+    })();
+
+    downloadAndUnzip: {
+        const isSuccessByExtractDirPath = readIsSuccessByExtractDirPath();
+
+        if (isSuccessByExtractDirPath[extractDirPath]) {
+            break downloadAndUnzip;
+        }
+
+        writeIsSuccessByExtractDirPath({
+            ...isSuccessByExtractDirPath,
+            [extractDirPath]: false
+        });
 
-    rm(pathBasename(url), { "cwd": tmpDirPath });
+        rm_rf(extractDirPath);
+
+        fs.mkdirSync(extractDirPath);
+
+        const zipFileBasename = pathBasename(url);
+
+        execSync(`curl -L ${url} -o ${zipFileBasename}`, { "cwd": extractDirPath });
+
+        execSync(`unzip -o ${zipFileBasename}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/**/*"`}`, {
+            "cwd": extractDirPath
+        });
+
+        rm(zipFileBasename, { "cwd": extractDirPath });
+
+        writeIsSuccessByExtractDirPath({
+            ...isSuccessByExtractDirPath,
+            [extractDirPath]: true
+        });
+    }
 
     transformCodebase({
-        "srcDirPath": pathOfDirToExtractInArchive === undefined ? tmpDirPath : pathJoin(tmpDirPath, pathOfDirToExtractInArchive),
-        destDirPath,
+        "srcDirPath": pathOfDirToExtractInArchive === undefined ? extractDirPath : pathJoin(extractDirPath, pathOfDirToExtractInArchive),
+        destDirPath
     });
-
-    rm_r(tmpDirPath);
 }

package/src/bin/tools/getProjectRoot.ts

@@ -2,7 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 
 function getProjectRootRec(dirPath: string): string {
-    if (fs.existsSync(path.join(dirPath, "tsconfig.json"))) {
+    if (fs.existsSync(path.join(dirPath, "package.json"))) {
         return dirPath;
     }
     return getProjectRootRec(path.join(dirPath, ".."));

package/src/bin/tools/grant-exec-perms.ts

@@ -1,9 +1,10 @@
 import { getProjectRoot } from "./getProjectRoot";
 import { join as pathJoin } from "path";
-import child_process from "child_process";
+import * as child_process from "child_process";
+import * as fs from "fs";
 
-Object.entries<string>(require(pathJoin(getProjectRoot(), "package.json"))["bin"]).forEach(([, scriptPath]) =>
+Object.entries<string>(JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["bin"]).forEach(([, scriptPath]) =>
     child_process.execSync(`chmod +x ${scriptPath}`, {
-        "cwd": getProjectRoot(),
-    }),
+        "cwd": getProjectRoot()
+    })
 );

package/src/bin/tools/octokit-addons/listTags.ts

@@ -19,7 +19,7 @@ export function listTagsFactory(params: { octokit: Octokit }) {
                 owner,
                 repo,
                 per_page,
-                "page": page++,
+                "page": page++
             });
 
             for (const branch of resp.data.map(({ name }) => name)) {

package/src/bin/tools/rm.ts

@@ -10,7 +10,7 @@ export function rm(pathToRemove: string, options?: { cwd: string }) {
     rmInternal({
         pathToRemove,
         "args": undefined,
-        "cwd": options?.cwd,
+        "cwd": options?.cwd
     });
 }
 
@@ -18,7 +18,7 @@ export function rm_r(pathToRemove: string, options?: { cwd: string }) {
     rmInternal({
         pathToRemove,
         "args": "r",
-        "cwd": options?.cwd,
+        "cwd": options?.cwd
     });
 }
 
@@ -26,6 +26,6 @@ export function rm_rf(pathToRemove: string, options?: { cwd: string }) {
     rmInternal({
         pathToRemove,
         "args": "rf",
-        "cwd": options?.cwd,
+        "cwd": options?.cwd
     });
 }

package/src/bin/tools/transformCodebase.ts

@@ -16,8 +16,8 @@ export function transformCodebase(params: { srcDirPath: string; destDirPath: str
         srcDirPath,
         destDirPath,
         transformSourceCode = id<TransformSourceCode>(({ sourceCode }) => ({
-            "modifiedSourceCode": sourceCode,
-        })),
+            "modifiedSourceCode": sourceCode
+        }))
     } = params;
 
     for (const file_relative_path of crawl(srcDirPath)) {
@@ -25,7 +25,7 @@ export function transformCodebase(params: { srcDirPath: string; destDirPath: str
 
         const transformSourceCodeResult = transformSourceCode({
             "sourceCode": fs.readFileSync(filePath),
-            "filePath": path.join(srcDirPath, file_relative_path),
+            "filePath": path.join(srcDirPath, file_relative_path)
         });
 
         if (transformSourceCodeResult === undefined) {
@@ -33,14 +33,14 @@ export function transformCodebase(params: { srcDirPath: string; destDirPath: str
         }
 
         fs.mkdirSync(path.dirname(path.join(destDirPath, file_relative_path)), {
-            "recursive": true,
+            "recursive": true
         });
 
         const { newFileName, modifiedSourceCode } = transformSourceCodeResult;
 
         fs.writeFileSync(
             path.join(path.dirname(path.join(destDirPath, file_relative_path)), newFileName ?? path.basename(file_relative_path)),
-            modifiedSourceCode,
+            modifiedSourceCode
         );
     }
 }

package/src/bin/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsproject.json",
+    "compilerOptions": {
+        "module": "CommonJS",
+        "target": "ES5",
+        "esModuleInterop": true,
+        "lib": ["es2015", "DOM", "ES2019.Object"],
+        "outDir": "../../dist/bin",
+        "rootDir": "."
+    }
+}

package/src/lib/components/Error.tsx

@@ -1,17 +1,17 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-export const Error = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Error; useI18n: () => I18n } & KcProps) => {
-    const { msg } = useI18n();
-
+const Error = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Error; i18n: I18n } & KcProps) => {
     const { message, client } = kcContext;
 
+    const { msg } = i18n;
+
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("errorTitle")}
@@ -30,3 +30,5 @@ export const Error = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
         />
     );
 });
+
+export default Error;

package/src/lib/components/Info.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import { assert } from "../tools/assert";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-export const Info = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Info; useI18n: () => I18n } & KcProps) => {
+const Info = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Info; i18n: I18n } & KcProps) => {
+    const { msgStr, msg } = i18n;
+
     assert(kcContext.message !== undefined);
 
     const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
 
-    const { msg } = useI18n();
-
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
@@ -24,7 +24,7 @@ export const Info = memo(({ kcContext, useI18n, ...props }: { kcContext: KcConte
                         {message.summary}
 
                         {requiredActions !== undefined && (
-                            <b>{requiredActions.map(requiredAction => msg(`requiredAction.${requiredAction}` as const)).join(",")}</b>
+                            <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
                         )}
                     </p>
                     {!skipLink && pageRedirectUri !== undefined ? (
@@ -47,3 +47,5 @@ export const Info = memo(({ kcContext, useI18n, ...props }: { kcContext: KcConte
         />
     );
 });
+
+export default Info;

package/src/lib/components/KcApp.tsx

@@ -1,51 +1,81 @@
-import { memo } from "react";
+import React, { lazy, memo, Suspense } from "react";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { KcProps } from "./KcProps";
-import { Login } from "./Login";
-import { Register } from "./Register";
-import { RegisterUserProfile } from "./RegisterUserProfile";
-import { Info } from "./Info";
-import { Error } from "./Error";
-import { LoginResetPassword } from "./LoginResetPassword";
-import { LoginVerifyEmail } from "./LoginVerifyEmail";
-import { Terms } from "./Terms";
-import { LoginOtp } from "./LoginOtp";
-import { LoginUpdatePassword } from "./LoginUpdatePassword";
-import { LoginUpdateProfile } from "./LoginUpdateProfile";
-import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
-import { LoginPageExpired } from "./LoginPageExpired";
-import { LoginIdpLinkEmail } from "./LoginIdpLinkEmail";
+import { __unsafe_useI18n as useI18n } from "../i18n";
 import type { I18n } from "../i18n";
 
-export const KcApp = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase; useI18n: () => I18n } & KcProps) => {
-    switch (kcContext.pageId) {
-        case "login.ftl":
-            return <Login {...{ kcContext, useI18n, ...props }} />;
-        case "register.ftl":
-            return <Register {...{ kcContext, useI18n, ...props }} />;
-        case "register-user-profile.ftl":
-            return <RegisterUserProfile {...{ kcContext, useI18n, ...props }} />;
-        case "info.ftl":
-            return <Info {...{ kcContext, useI18n, ...props }} />;
-        case "error.ftl":
-            return <Error {...{ kcContext, useI18n, ...props }} />;
-        case "login-reset-password.ftl":
-            return <LoginResetPassword {...{ kcContext, useI18n, ...props }} />;
-        case "login-verify-email.ftl":
-            return <LoginVerifyEmail {...{ kcContext, useI18n, ...props }} />;
-        case "terms.ftl":
-            return <Terms {...{ kcContext, useI18n, ...props }} />;
-        case "login-otp.ftl":
-            return <LoginOtp {...{ kcContext, useI18n, ...props }} />;
-        case "login-update-password.ftl":
-            return <LoginUpdatePassword {...{ kcContext, useI18n, ...props }} />;
-        case "login-update-profile.ftl":
-            return <LoginUpdateProfile {...{ kcContext, useI18n, ...props }} />;
-        case "login-idp-link-confirm.ftl":
-            return <LoginIdpLinkConfirm {...{ kcContext, useI18n, ...props }} />;
-        case "login-idp-link-email.ftl":
-            return <LoginIdpLinkEmail {...{ kcContext, useI18n, ...props }} />;
-        case "login-page-expired.ftl":
-            return <LoginPageExpired {...{ kcContext, useI18n, ...props }} />;
+const Login = lazy(() => import("./Login"));
+const Register = lazy(() => import("./Register"));
+const RegisterUserProfile = lazy(() => import("./RegisterUserProfile"));
+const Info = lazy(() => import("./Info"));
+const Error = lazy(() => import("./Error"));
+const LoginResetPassword = lazy(() => import("./LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("./LoginVerifyEmail"));
+const Terms = lazy(() => import("./Terms"));
+const LoginOtp = lazy(() => import("./LoginOtp"));
+const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("./LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("./LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
+
+const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...props }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
+    const i18n = (function useClosure() {
+        const i18n = useI18n({
+            kcContext,
+            "extraMessages": {},
+            "doSkip": userProvidedI18n !== undefined
+        });
+
+        return userProvidedI18n ?? i18n;
+    })();
+
+    if (i18n === null) {
+        return null;
     }
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "login.ftl":
+                        return <Login {...{ kcContext, i18n, ...props }} />;
+                    case "register.ftl":
+                        return <Register {...{ kcContext, i18n, ...props }} />;
+                    case "register-user-profile.ftl":
+                        return <RegisterUserProfile {...{ kcContext, i18n, ...props }} />;
+                    case "info.ftl":
+                        return <Info {...{ kcContext, i18n, ...props }} />;
+                    case "error.ftl":
+                        return <Error {...{ kcContext, i18n, ...props }} />;
+                    case "login-reset-password.ftl":
+                        return <LoginResetPassword {...{ kcContext, i18n, ...props }} />;
+                    case "login-verify-email.ftl":
+                        return <LoginVerifyEmail {...{ kcContext, i18n, ...props }} />;
+                    case "terms.ftl":
+                        return <Terms {...{ kcContext, i18n, ...props }} />;
+                    case "login-otp.ftl":
+                        return <LoginOtp {...{ kcContext, i18n, ...props }} />;
+                    case "login-update-password.ftl":
+                        return <LoginUpdatePassword {...{ kcContext, i18n, ...props }} />;
+                    case "login-update-profile.ftl":
+                        return <LoginUpdateProfile {...{ kcContext, i18n, ...props }} />;
+                    case "login-idp-link-confirm.ftl":
+                        return <LoginIdpLinkConfirm {...{ kcContext, i18n, ...props }} />;
+                    case "login-idp-link-email.ftl":
+                        return <LoginIdpLinkEmail {...{ kcContext, i18n, ...props }} />;
+                    case "login-page-expired.ftl":
+                        return <LoginPageExpired {...{ kcContext, i18n, ...props }} />;
+                    case "login-config-totp.ftl":
+                        return <LoginConfigTotp {...{ kcContext, i18n, ...props }} />;
+                    case "logout-confirm.ftl":
+                        return <LogoutConfirm {...{ kcContext, i18n, ...props }} />;
+                }
+            })()}
+        </Suspense>
+    );
 });
+
+export default KcApp;