Refactor of the main component and i18n

src/Fallback.tsx

@@ -1,11 +1,7 @@
 import { lazy, Suspense } from "react";
-import { __unsafe_useI18n as useI18n } from "./i18n";
+import type { KcContext } from "keycloakify/kcContext";
-import type { KcContext } from "./kcContext/KcContext";
 import type { PageProps } from "keycloakify/pages/PageProps";
-import type { I18nBase } from "./i18n";
+import type { I18n } from "keycloakify/i18n";
-import type { SetOptional } from "./tools/SetOptional";
-
-const DefaultTemplate = lazy(() => import("keycloakify/Template"));
 
 const Login = lazy(() => import("keycloakify/pages/Login"));
 const Register = lazy(() => import("keycloakify/pages/Register"));
@@ -29,71 +25,55 @@ const LogoutConfirm = lazy(() => import("keycloakify/pages/LogoutConfirm"));
 const UpdateUserProfile = lazy(() => import("keycloakify/pages/UpdateUserProfile"));
 const IdpReviewUserProfile = lazy(() => import("keycloakify/pages/IdpReviewUserProfile"));
 
-export default function KcApp(props_: SetOptional<PageProps<KcContext, I18nBase>, "Template">) {
+export default function Fallback(props: PageProps<KcContext, I18n>) {
-    const { kcContext, i18n: userProvidedI18n, Template = DefaultTemplate, ...kcProps } = props_;
+    const { kcContext, ...rest } = props;
-
-    const i18n = (function useClosure() {
-        const i18n = useI18n({
-            kcContext,
-            "extraMessages": {},
-            "doSkip": userProvidedI18n !== undefined
-        });
-
-        return userProvidedI18n ?? i18n;
-    })();
-
-    if (i18n === null) {
-        return null;
-    }
-
-    const commonProps = { i18n, Template, ...kcProps };
 
     return (
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
                     case "login.ftl":
-                        return <Login {...{ kcContext, ...commonProps }} />;
+                        return <Login kcContext={kcContext} {...rest} />;
                     case "register.ftl":
-                        return <Register {...{ kcContext, ...commonProps }} />;
+                        return <Register kcContext={kcContext} {...rest} />;
                     case "register-user-profile.ftl":
-                        return <RegisterUserProfile {...{ kcContext, ...commonProps }} />;
+                        return <RegisterUserProfile kcContext={kcContext} {...rest} />;
                     case "info.ftl":
-                        return <Info {...{ kcContext, ...commonProps }} />;
+                        return <Info kcContext={kcContext} {...rest} />;
                     case "error.ftl":
-                        return <Error {...{ kcContext, ...commonProps }} />;
+                        return <Error kcContext={kcContext} {...rest} />;
                     case "login-reset-password.ftl":
-                        return <LoginResetPassword {...{ kcContext, ...commonProps }} />;
+                        return <LoginResetPassword kcContext={kcContext} {...rest} />;
                     case "login-verify-email.ftl":
-                        return <LoginVerifyEmail {...{ kcContext, ...commonProps }} />;
+                        return <LoginVerifyEmail kcContext={kcContext} {...rest} />;
                     case "terms.ftl":
-                        return <Terms {...{ kcContext, ...commonProps }} />;
+                        return <Terms kcContext={kcContext} {...rest} />;
                     case "login-otp.ftl":
-                        return <LoginOtp {...{ kcContext, ...commonProps }} />;
+                        return <LoginOtp kcContext={kcContext} {...rest} />;
                     case "login-username.ftl":
-                        return <LoginUsername {...{ kcContext, ...commonProps }} />;
+                        return <LoginUsername kcContext={kcContext} {...rest} />;
                     case "login-password.ftl":
-                        return <LoginPassword {...{ kcContext, ...commonProps }} />;
+                        return <LoginPassword kcContext={kcContext} {...rest} />;
                     case "webauthn-authenticate.ftl":
-                        return <WebauthnAuthenticate {...{ kcContext, ...commonProps }} />;
+                        return <WebauthnAuthenticate kcContext={kcContext} {...rest} />;
                     case "login-update-password.ftl":
-                        return <LoginUpdatePassword {...{ kcContext, ...commonProps }} />;
+                        return <LoginUpdatePassword kcContext={kcContext} {...rest} />;
                     case "login-update-profile.ftl":
-                        return <LoginUpdateProfile {...{ kcContext, ...commonProps }} />;
+                        return <LoginUpdateProfile kcContext={kcContext} {...rest} />;
                     case "login-idp-link-confirm.ftl":
-                        return <LoginIdpLinkConfirm {...{ kcContext, ...commonProps }} />;
+                        return <LoginIdpLinkConfirm kcContext={kcContext} {...rest} />;
                     case "login-idp-link-email.ftl":
-                        return <LoginIdpLinkEmail {...{ kcContext, ...commonProps }} />;
+                        return <LoginIdpLinkEmail kcContext={kcContext} {...rest} />;
                     case "login-page-expired.ftl":
-                        return <LoginPageExpired {...{ kcContext, ...commonProps }} />;
+                        return <LoginPageExpired kcContext={kcContext} {...rest} />;
                     case "login-config-totp.ftl":
-                        return <LoginConfigTotp {...{ kcContext, ...commonProps }} />;
+                        return <LoginConfigTotp kcContext={kcContext} {...rest} />;
                     case "logout-confirm.ftl":
-                        return <LogoutConfirm {...{ kcContext, ...commonProps }} />;
+                        return <LogoutConfirm kcContext={kcContext} {...rest} />;
                     case "update-user-profile.ftl":
-                        return <UpdateUserProfile {...{ kcContext, ...commonProps }} />;
+                        return <UpdateUserProfile kcContext={kcContext} {...rest} />;
                     case "idp-review-user-profile.ftl":
-                        return <IdpReviewUserProfile {...{ kcContext, ...commonProps }} />;
+                        return <IdpReviewUserProfile kcContext={kcContext} {...rest} />;
                 }
             })()}
         </Suspense>

src/Template.tsx

@@ -4,7 +4,7 @@ import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
 import { type TemplateProps, defaultTemplateClasses } from "keycloakify/TemplateProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 type KcContext = import("./kcContext/KcContext").KcContext.Common;
-import type { I18nBase as I18n } from "./i18n";
+import type { I18n } from "./i18n";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {

src/TemplateProps.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
 import type { KcContext } from "keycloakify/kcContext";
-import type { I18nBase } from "keycloakify/i18n";
+import type { I18n } from "keycloakify/i18n";
 
-export type TemplateProps<KcContext extends KcContext.Common, I18n extends I18nBase> = {
+export type TemplateProps<KcContext extends KcContext.Common, I18nExtended extends I18n> = {
     kcContext: KcContext;
-    i18n: I18n;
+    i18n: I18nExtended;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<TemplateClassKey, string>>;
 

src/i18n/i18n.tsx

@@ -19,7 +19,7 @@ assert<KcContext extends KcContextLike ? true : false>();
 
 export type MessageKeyBase = keyof typeof baseMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
 
-export type I18n<MessageKey extends string> = {
+export type GenericI18n<MessageKey extends string> = {
     /**
      * e.g: "en", "fr", "zh-CN"
      *
@@ -67,21 +67,20 @@ export type I18n<MessageKey extends string> = {
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
 };
 
-export type I18nBase = I18n<MessageKeyBase>;
+export type I18n = GenericI18n<MessageKeyBase>;
 
-export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
+export function useI18n<ExtraMessageKey extends string = never>(params: {
     kcContext: KcContextLike;
     extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
-    doSkip: boolean;
+}): GenericI18n<MessageKeyBase | ExtraMessageKey> | null {
-}): I18n<MessageKeyBase | ExtraMessageKey> | null {
+    const { kcContext, extraMessages } = params;
-    const { kcContext, extraMessages, doSkip } = params;
 
-    const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
+    const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
 
     const refHasStartedFetching = useRef(false);
 
     useEffect(() => {
-        if (doSkip || refHasStartedFetching.current) {
+        if (refHasStartedFetching.current) {
             return;
         }
 
@@ -181,22 +180,10 @@ export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params:
     return i18n ?? null;
 }
 
-const useI18n_private = __unsafe_useI18n;
-
-export function useI18n<ExtraMessageKey extends string = never>(params: {
-    kcContext: KcContextLike;
-    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
-}): I18n<MessageKeyBase | ExtraMessageKey> | null {
-    return useI18n_private({
-        ...params,
-        "doSkip": false
-    });
-}
-
 function createI18nTranslationFunctions<MessageKey extends string>(params: {
     fallbackMessages: Record<MessageKey, string>;
     messages: Record<MessageKey, string>;
-}): Pick<I18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
+}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
     const { fallbackMessages, messages } = params;
 
     function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {

src/index.ts

@@ -1,3 +1,3 @@
-import KcApp from "./KcApp";
+import Fallback from "./Fallback";
 
-export default KcApp;
+export default Fallback;

src/lib/useFormValidation.tsx

@@ -6,7 +6,7 @@ import type { Attribute, Validators } from "keycloakify/kcContext";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import { emailRegexp } from "keycloakify/tools/emailRegExp";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 /**
  * NOTE: The attributesWithPassword returned is actually augmented with

src/pages/Error.tsx

@@ -1,6 +1,6 @@
 import { type PageProps } from "keycloakify/pages/PageProps";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function Error(props: PageProps<Extract<KcContext, { pageId: "error.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/IdpReviewUserProfile.tsx

@@ -4,7 +4,7 @@ import { UserProfileFormFields } from "./shared/UserProfileCommons";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function IdpReviewUserProfile(props: PageProps<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/Info.tsx

@@ -1,7 +1,7 @@
 import { assert } from "../tools/assert";
 import { type PageProps } from "keycloakify/pages/PageProps";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/Login.tsx

@@ -4,7 +4,7 @@ import { useConstCallback } from "../tools/useConstCallback";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginConfigTotp.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginIdpLinkConfirm.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginIdpLinkEmail.tsx

@@ -1,6 +1,6 @@
 import type { KcContext } from "keycloakify/kcContext";
 import { type PageProps } from "keycloakify/pages/PageProps";
-import type { I18nBase as I18n } from "keycloakify/i18n";
+import type { I18n } from "keycloakify/i18n";
 
 export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginOtp.tsx

@@ -5,7 +5,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginPageExpired.tsx

@@ -1,6 +1,6 @@
 import { type PageProps } from "keycloakify/pages/PageProps";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginPassword.tsx

@@ -5,7 +5,7 @@ import type { FormEventHandler } from "react";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginPassword(props: PageProps<Extract<KcContext, { "pageId": "login-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginResetPassword.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginUpdatePassword.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginUpdatePassword(props: PageProps<Extract<KcContext, { pageId: "login-update-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginUpdateProfile.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, { pageId: "login-update-profile.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginUsername.tsx

@@ -5,7 +5,7 @@ import type { FormEventHandler } from "react";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LoginVerifyEmail.tsx

@@ -1,6 +1,6 @@
 import { type PageProps } from "keycloakify/pages/PageProps";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/LogoutConfirm.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/PageProps.ts

@@ -1,11 +1,11 @@
 import type { LazyExoticComponent } from "react";
-import type { I18nBase } from "keycloakify/i18n";
+import type { I18n } from "keycloakify/i18n";
 import { type TemplateProps, type TemplateClassKey, defaultTemplateClasses } from "keycloakify/TemplateProps";
 
-export type PageProps<KcContext, I18n extends I18nBase> = {
+export type PageProps<KcContext, I18nExtended extends I18n> = {
     Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
     kcContext: KcContext;
-    i18n: I18n;
+    i18n: I18nExtended;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<TemplateClassKey | ClassKey, string>>;
 };

src/pages/Register.tsx

@@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/RegisterUserProfile.tsx

@@ -4,7 +4,7 @@ import { UserProfileFormFields } from "./shared/UserProfileCommons";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function RegisterUserProfile(props: PageProps<Extract<KcContext, { pageId: "register-user-profile.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/Terms.tsx

@@ -5,7 +5,7 @@ import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import { evtTermMarkdown } from "keycloakify/lib/useDownloadTerms";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/UpdateUserProfile.tsx

@@ -4,7 +4,7 @@ import { UserProfileFormFields } from "./shared/UserProfileCommons";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function UpdateUserProfile(props: PageProps<Extract<KcContext, { pageId: "update-user-profile.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/WebauthnAuthenticate.tsx

@@ -6,7 +6,7 @@ import { useConstCallback } from "../tools/useConstCallback";
 import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
 import { useGetClassName } from "keycloakify/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
-import type { I18nBase as I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

src/pages/shared/UserProfileCommons.tsx

@@ -3,7 +3,7 @@ import type { ClassKey } from "keycloakify/pages/PageProps";
 import { clsx } from "keycloakify/tools/clsx";
 import { useFormValidation } from "keycloakify/lib/useFormValidation";
 import type { Attribute } from "keycloakify/kcContext";
-import type { I18nBase as I18n } from "../../i18n";
+import type { I18n } from "../../i18n";
 
 export type UserProfileFormFieldsProps = {
     kcContext: Parameters<typeof useFormValidation>[0]["kcContext"];