Bump version

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.0.0-beta.8",
+    "version": "6.0.0-beta.11",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

src/lib/components/KcApp.tsx

@@ -21,7 +21,7 @@ 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 KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
     const i18n = (function useClosure() {
         const i18n = useI18n({
             kcContext,
@@ -36,42 +36,44 @@ const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...props }: { kcContext
         return null;
     }
 
+    const props = { i18n, ...kcProps };
+
     return (
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
                     case "login.ftl":
-                        return <Login {...{ kcContext, i18n, ...props }} />;
+                        return <Login {...{ kcContext, ...props }} />;
                     case "register.ftl":
-                        return <Register {...{ kcContext, i18n, ...props }} />;
+                        return <Register {...{ kcContext, ...props }} />;
                     case "register-user-profile.ftl":
-                        return <RegisterUserProfile {...{ kcContext, i18n, ...props }} />;
+                        return <RegisterUserProfile {...{ kcContext, ...props }} />;
                     case "info.ftl":
-                        return <Info {...{ kcContext, i18n, ...props }} />;
+                        return <Info {...{ kcContext, ...props }} />;
                     case "error.ftl":
-                        return <Error {...{ kcContext, i18n, ...props }} />;
+                        return <Error {...{ kcContext, ...props }} />;
                     case "login-reset-password.ftl":
-                        return <LoginResetPassword {...{ kcContext, i18n, ...props }} />;
+                        return <LoginResetPassword {...{ kcContext, ...props }} />;
                     case "login-verify-email.ftl":
-                        return <LoginVerifyEmail {...{ kcContext, i18n, ...props }} />;
+                        return <LoginVerifyEmail {...{ kcContext, ...props }} />;
                     case "terms.ftl":
-                        return <Terms {...{ kcContext, i18n, ...props }} />;
+                        return <Terms {...{ kcContext, ...props }} />;
                     case "login-otp.ftl":
-                        return <LoginOtp {...{ kcContext, i18n, ...props }} />;
+                        return <LoginOtp {...{ kcContext, ...props }} />;
                     case "login-update-password.ftl":
-                        return <LoginUpdatePassword {...{ kcContext, i18n, ...props }} />;
+                        return <LoginUpdatePassword {...{ kcContext, ...props }} />;
                     case "login-update-profile.ftl":
-                        return <LoginUpdateProfile {...{ kcContext, i18n, ...props }} />;
+                        return <LoginUpdateProfile {...{ kcContext, ...props }} />;
                     case "login-idp-link-confirm.ftl":
-                        return <LoginIdpLinkConfirm {...{ kcContext, i18n, ...props }} />;
+                        return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
                     case "login-idp-link-email.ftl":
-                        return <LoginIdpLinkEmail {...{ kcContext, i18n, ...props }} />;
+                        return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
                     case "login-page-expired.ftl":
-                        return <LoginPageExpired {...{ kcContext, i18n, ...props }} />;
+                        return <LoginPageExpired {...{ kcContext, ...props }} />;
                     case "login-config-totp.ftl":
-                        return <LoginConfigTotp {...{ kcContext, i18n, ...props }} />;
+                        return <LoginConfigTotp {...{ kcContext, ...props }} />;
                     case "logout-confirm.ftl":
-                        return <LogoutConfirm {...{ kcContext, i18n, ...props }} />;
+                        return <LogoutConfirm {...{ kcContext, ...props }} />;
                 }
             })()}
         </Suspense>

src/lib/i18n/index.tsx

@@ -1,6 +1,6 @@
 import "minimal-polyfills/Object.fromEntries";
 //NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import type baseMessages from "./generated_messages/18.0.1/login/en";
 import { assert } from "tsafe/assert";
@@ -76,13 +76,17 @@ export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params:
 
     const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
 
+    const refHasStartedFetching = useRef(false);
+
     useEffect(() => {
-        if (doSkip) {
+        if (doSkip || refHasStartedFetching.current) {
             return;
         }
 
         let isMounted = true;
 
+        refHasStartedFetching.current = true;
+
         (async () => {
             const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
 

src/lib/tsconfig.json

@@ -4,7 +4,7 @@
         "outDir": "../../dist/lib",
         "rootDir": ".",
         "module": "ES2020",
-        "target": "ES2020",
+        "target": "ES2017",
         "lib": ["es2015", "DOM", "ES2019.Object"],
         "moduleResolution": "node",
         "jsx": "react",