keycloakify 5.4.4 → 6.0.0-beta.3

package/src/lib/components/Register.tsx

@@ -2,19 +2,19 @@ import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
+import type { I18n } from "../i18n";
 import { useCssAndCx } from "tss-react";
 
-export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register } & KcProps) => {
+export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Register; useI18n: () => I18n } & KcProps) => {
     const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = useI18n();
 
     const { cx } = useCssAndCx();
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, useI18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("registerTitle")}
             formNode={

package/src/lib/components/RegisterUserProfile.tsx

@@ -2,79 +2,91 @@ import { useMemo, memo, useEffect, useState, Fragment } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
+import type { I18n } from "../i18n";
 import { useCssAndCx } from "tss-react";
 import type { ReactComponent } from "../tools/ReactComponent";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { useFormValidationSlice } from "../useFormValidationSlice";
 
-export const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
-    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+export const RegisterUserProfile = memo(
+    ({ kcContext, useI18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; useI18n: () => I18n } & KcProps) => {
+        const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-    const { msg, msgStr } = getMsg(kcContext);
+        const { msg, msgStr } = useI18n();
 
-    const { cx, css } = useCssAndCx();
-
-    const props = useMemo(
-        () => ({
-            ...props_,
-            "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 })),
-        }),
-        [cx, css],
-    );
-
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+        const { cx, css } = useCssAndCx();
 
-    return (
-        <Template
-            {...{ kcContext, ...props }}
-            displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields={true}
-            doFetchDefaultThemeResources={true}
-            headerNode={msg("registerTitle")}
-            formNode={
-                <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} {...props} />
-                    {recaptchaRequired && (
-                        <div className="form-group">
-                            <div className={cx(props.kcInputWrapperClass)}>
-                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
+        const props = useMemo(
+            () => ({
+                ...props_,
+                "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 })),
+            }),
+            [cx, css],
+        );
+
+        const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+        return (
+            <Template
+                {...{ kcContext, useI18n, ...props }}
+                displayMessage={messagesPerField.exists("global")}
+                displayRequiredFields={true}
+                doFetchDefaultThemeResources={true}
+                headerNode={msg("registerTitle")}
+                formNode={
+                    <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
+                        <UserProfileFormFields
+                            kcContext={kcContext}
+                            onIsFormSubmittableValueChange={setIsFomSubmittable}
+                            useI18n={useI18n}
+                            {...props}
+                        />
+                        {recaptchaRequired && (
+                            <div className="form-group">
+                                <div className={cx(props.kcInputWrapperClass)}>
+                                    <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
+                                </div>
                             </div>
-                        </div>
-                    )}
-                    <div className={cx(props.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                            <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                <span>
-                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                </span>
+                        )}
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                                <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                    <span>
+                                        <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                    </span>
+                                </div>
                             </div>
-                        </div>
 
-                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                            <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
-                                type="submit"
-                                value={msgStr("doRegister")}
-                                disabled={!isFomSubmittable}
-                            />
+                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass,
+                                    )}
+                                    type="submit"
+                                    value={msgStr("doRegister")}
+                                    disabled={!isFomSubmittable}
+                                />
+                            </div>
                         </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-});
-
-type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile } & KcProps &
+                    </form>
+                }
+            />
+        );
+    },
+);
+
+type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; useI18n: () => I18n } & KcProps &
     Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
         onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
     };
 
-const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, ...props }: UserProfileFormFieldsProps) => {
+const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableValueChange, ...props }: UserProfileFormFieldsProps) => {
     const { cx, css } = useCssAndCx();
 
-    const { advancedMsg } = getMsg(kcContext);
+    const { advancedMsg } = useI18n();
 
     const {
         formValidationState: { fieldStateByAttributeName, isFormSubmittable },
@@ -82,6 +94,7 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
         attributesWithPassword,
     } = useFormValidationSlice({
         kcContext,
+        useI18n,
     });
 
     useEffect(() => {

package/src/lib/components/Template.tsx

@@ -1,6 +1,7 @@
 import { useReducer, useEffect, memo } from "react";
 import type { ReactNode } from "react";
-import { getMsg, getCurrentKcLanguageTag, changeLocale, getTagLabel } from "../i18n";
+import { getCurrentKcLanguageTag, changeLocale, getTagLabel } from "../i18n";
+import type { I18n } from "../i18n";
 import type { KcLanguageTag } from "../i18n";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { assert } from "../tools/assert";
@@ -25,7 +26,7 @@ export type TemplateProps = {
      * to avoid pulling the default theme assets.
      */
     doFetchDefaultThemeResources: boolean;
-} & { kcContext: KcContextBase } & KcTemplateProps;
+} & { kcContext: KcContextBase; useI18n: () => I18n } & KcTemplateProps;
 
 export const Template = memo((props: TemplateProps) => {
     const {
@@ -40,6 +41,7 @@ export const Template = memo((props: TemplateProps) => {
         infoNode = null,
         kcContext,
         doFetchDefaultThemeResources,
+        useI18n,
     } = props;
 
     const { cx } = useCssAndCx();
@@ -48,7 +50,7 @@ export const Template = memo((props: TemplateProps) => {
         console.log("Rendering this page with react using keycloakify");
     }, []);
 
-    const { msg } = getMsg(kcContext);
+    const { msg } = useI18n();
 
     const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [KcLanguageTag]) =>
         changeLocale({

package/src/lib/components/Terms.tsx

@@ -2,32 +2,38 @@ import { useReducer, useEffect, memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
 import { useCssAndCx } from "tss-react";
-import { kcMessages, getCurrentKcLanguageTag } from "../i18n";
-import type { KcLanguageTag } from "../i18n";
+import { getCurrentKcLanguageTag } from "../i18n";
+import type { KcLanguageTag, I18n } from "../i18n";
 
 /** Allow to avoid bundling the terms and download it on demand*/
 export function useDownloadTerms(params: {
     kcContext: KcContextBase;
     downloadTermMarkdown: (params: { currentKcLanguageTag: KcLanguageTag }) => Promise<string>;
+    useI18n: () => I18n;
 }) {
-    const { kcContext, downloadTermMarkdown } = params;
+    const { kcContext, downloadTermMarkdown, useI18n } = params;
 
     const [, forceUpdate] = useReducer(x => x + 1, 0);
 
+    const { evtKcMessages } = useI18n();
+
     useEffect(() => {
         const currentKcLanguageTag = getCurrentKcLanguageTag(kcContext);
 
         downloadTermMarkdown({ currentKcLanguageTag }).then(thermMarkdown => {
-            kcMessages[currentKcLanguageTag].termsText = thermMarkdown;
+            evtKcMessages.$attachOnce(
+                kcMessages => (kcMessages !== undefined ? [kcMessages] : null),
+                kcMessages => (kcMessages[currentKcLanguageTag].termsText = thermMarkdown),
+            );
+
             forceUpdate();
         });
     }, []);
 }
 
-export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms } & KcProps) => {
-    const { msg, msgStr } = getMsg(kcContext);
+export const Terms = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Terms; useI18n: () => I18n } & KcProps) => {
+    const { msg, msgStr } = useI18n();
 
     const { cx } = useCssAndCx();
 
@@ -35,7 +41,7 @@ export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.T
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, useI18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("termsTitle")}

package/src/lib/i18n/index.tsx

@@ -1,35 +1,17 @@
 import "minimal-polyfills/Object.fromEntries";
 //NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 import ReactMarkdown from "react-markdown";
-import memoize from "memoizee";
-import { kcMessages as kcMessagesBase } from "./generated_kcMessages/15.0.2/login";
+import type { kcMessages as t_kcMessages } from "./kcMessages";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
+import { Evt } from "evt";
+import { useRerenderOnStateChange } from "evt/hooks";
+import { useMemo } from "react";
+import type { StatefulReadonlyEvt } from "evt";
 
-export const kcMessages = {
-    ...kcMessagesBase,
-    "en": {
-        ...kcMessagesBase["en"],
-        "termsText": "⏳",
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option",
-    },
-    "fr": {
-        ...kcMessagesBase["fr"],
-        /* spell-checker: disable */
-        "shouldBeEqual": "{0} doit être egale à {1}",
-        "shouldBeDifferent": "{0} doit être différent de {1}",
-        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
-        "mustBeAnInteger": "Doit être un nombre entiers",
-        "notAValidOption": "N'est pas une option valide",
-        /* spell-checker: enable */
-    },
-};
+export type KcMessages = typeof t_kcMessages;
 
-export type KcLanguageTag = keyof typeof kcMessages;
+export type KcLanguageTag = keyof KcMessages;
 
 export const kcLanguageTags = [
     "en",
@@ -106,15 +88,16 @@ export function changeLocale(params: {
     assert(false, "never");
 }
 
-export type MessageKey = keyof typeof kcMessages["en"];
+export type MessageKey = keyof KcMessages["en"];
 
 function resolveMsg<Key extends string, DoRenderMarkdown extends boolean>(props: {
     key: Key;
     args: (string | undefined)[];
     kcLanguageTag: string;
     doRenderMarkdown: DoRenderMarkdown;
+    kcMessages: KcMessages;
 }): Key extends MessageKey ? (DoRenderMarkdown extends true ? JSX.Element : string) : undefined {
-    const { key, args, kcLanguageTag, doRenderMarkdown } = props;
+    const { key, args, kcLanguageTag, doRenderMarkdown, kcMessages } = props;
 
     let str = kcMessages[kcLanguageTag as any as "en"][key as MessageKey] ?? kcMessages["en"][key as MessageKey];
 
@@ -160,8 +143,9 @@ function resolveMsgAdvanced<Key extends string, DoRenderMarkdown extends boolean
     args: (string | undefined)[];
     kcLanguageTag: string;
     doRenderMarkdown: DoRenderMarkdown;
+    kcMessages: KcMessages;
 }): DoRenderMarkdown extends true ? JSX.Element : string {
-    const { key, args, kcLanguageTag, doRenderMarkdown } = props;
+    const { key, args, kcLanguageTag, doRenderMarkdown, kcMessages } = props;
 
     const match = key.match(/^\$\{([^{]+)\}$/);
 
@@ -172,35 +156,83 @@ function resolveMsgAdvanced<Key extends string, DoRenderMarkdown extends boolean
         args,
         kcLanguageTag,
         doRenderMarkdown,
+        kcMessages,
     });
 
     return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
 }
 
+export type I18n = {
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+    evtKcMessages: StatefulReadonlyEvt<KcMessages | undefined>;
+};
+
+export { StatefulReadonlyEvt };
+
 /**
- * When the language is switched the page is reloaded, this may appear
- * as a bug as you might notice that the language successfully switch before
- * reload.
- * However we need to tell Keycloak that the user have changed the language
- * during login so we can retrieve the "local" field of the JWT encoded accessToken.
- * https://user-images.githubusercontent.com/6702424/138096682-351bb61f-f24e-4caf-91b7-cca8cfa2cb58.mov
- *
  * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied")
  * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
- *
- *
- * NOTE: This function is memoized, it always returns the same object for a given kcContext)
- *
  */
-export const getMsg = memoize((kcContext: KcContextLike) => {
+export function createUseI18n(props: { kcMessages: KcMessages | (() => Promise<KcMessages>); kcContext: KcContextLike | undefined }) {
+    const { kcContext, kcMessages: kcMessagesOrFetchKcMessages } = props;
+
+    if (kcContext === undefined) {
+        return {
+            "useI18n": (): I18n => {
+                throw new Error("Can't use Keycloakify i18n outside of keycloak");
+            },
+        };
+    }
+
+    const { evtKcMessages } = (() => {
+        const evtKcMessages = Evt.create<KcMessages | undefined>(undefined);
+
+        if (typeof kcMessagesOrFetchKcMessages === "function") {
+            kcMessagesOrFetchKcMessages().then(kcMessages => (evtKcMessages.state = kcMessages));
+        } else {
+            evtKcMessages.state = kcMessagesOrFetchKcMessages;
+        }
+
+        return { evtKcMessages };
+    })();
+    Evt.factorize(
+        typeof kcMessagesOrFetchKcMessages === "function"
+            ? Evt.from(kcMessagesOrFetchKcMessages()).toStateful()
+            : Evt.create(kcMessagesOrFetchKcMessages),
+    );
+
     const kcLanguageTag = getCurrentKcLanguageTag(kcContext);
 
-    return {
-        "msgStr": (key: MessageKey, ...args: (string | undefined)[]): string => resolveMsg({ key, args, kcLanguageTag, "doRenderMarkdown": false }),
-        "msg": (key: MessageKey, ...args: (string | undefined)[]): JSX.Element => resolveMsg({ key, args, kcLanguageTag, "doRenderMarkdown": true }),
-        "advancedMsg": <Key extends string>(key: Key, ...args: (string | undefined)[]): JSX.Element =>
-            resolveMsgAdvanced({ key, args, kcLanguageTag, "doRenderMarkdown": true }),
-        "advancedMsgStr": <Key extends string>(key: Key, ...args: (string | undefined)[]): string =>
-            resolveMsgAdvanced({ key, args, kcLanguageTag, "doRenderMarkdown": false }),
-    };
-});
+    function useI18n() {
+        useRerenderOnStateChange(evtKcMessages);
+
+        const i18n = useMemo((): I18n => {
+            const kcMessages = evtKcMessages.state;
+
+            if (kcMessages === undefined) {
+                return {
+                    "msgStr": () => "",
+                    "msg": () => <></>,
+                    "advancedMsg": () => <></>,
+                    "advancedMsgStr": () => "",
+                    evtKcMessages,
+                };
+            }
+
+            return {
+                "msgStr": (key, ...args) => resolveMsg({ key, args, kcLanguageTag, "doRenderMarkdown": false, kcMessages }),
+                "msg": (key, ...args): JSX.Element => resolveMsg({ key, args, kcLanguageTag, "doRenderMarkdown": true, kcMessages }),
+                "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, kcLanguageTag, "doRenderMarkdown": true, kcMessages }),
+                "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, kcLanguageTag, "doRenderMarkdown": false, kcMessages }),
+                evtKcMessages,
+            };
+        }, [evtKcMessages.state]);
+
+        return i18n;
+    }
+
+    return { useI18n };
+}

package/src/lib/i18n/kcMessages.ts

@@ -0,0 +1,24 @@
+import { kcMessages as kcMessagesBase } from "./generated_kcMessages/15.0.2/login";
+
+export const kcMessages = {
+    ...kcMessagesBase,
+    "en": {
+        ...kcMessagesBase["en"],
+        "termsText": "⏳",
+        "shouldBeEqual": "{0} should be equal to {1}",
+        "shouldBeDifferent": "{0} should be different to {1}",
+        "shouldMatchPattern": "Pattern should match: `/{0}/`",
+        "mustBeAnInteger": "Must be an integer",
+        "notAValidOption": "Not a valid option",
+    },
+    "fr": {
+        ...kcMessagesBase["fr"],
+        /* spell-checker: disable */
+        "shouldBeEqual": "{0} doit être egale à {1}",
+        "shouldBeDifferent": "{0} doit être différent de {1}",
+        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
+        "mustBeAnInteger": "Doit être un nombre entiers",
+        "notAValidOption": "N'est pas une option valide",
+        /* spell-checker: enable */
+    },
+};

package/src/lib/useFormValidationSlice.tsx

@@ -1,11 +1,10 @@
 import "./tools/Array.prototype.every";
 import { useMemo, useReducer, Fragment } from "react";
 import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
-import { getMsg } from "./i18n";
 import type { KcLanguageTag } from "./i18n";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import { id } from "tsafe/id";
-import type { MessageKey } from "./i18n";
+import type { I18n, MessageKey } from "./i18n";
 import { emailRegexp } from "./tools/emailRegExp";
 
 export function useGetErrors(params: {
@@ -16,15 +15,16 @@ export function useGetErrors(params: {
         };
         locale?: { currentLanguageTag: KcLanguageTag };
     };
+    useI18n: () => I18n;
 }) {
-    const { kcContext } = params;
+    const { kcContext, useI18n } = params;
 
     const {
         messagesPerField,
         profile: { attributes },
     } = kcContext;
 
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = getMsg(kcContext);
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n();
 
     const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
         const { name, fieldValueByAttributeName } = params;
@@ -314,11 +314,13 @@ export function useFormValidationSlice(params: {
         passwordRequired: boolean;
         realm: { registrationEmailAsUsername: boolean };
     };
+    useI18n: () => I18n;
     /** NOTE: Try to avoid passing a new ref every render for better performances. */
     passwordValidators?: Validators;
 }) {
     const {
         kcContext,
+        useI18n,
         passwordValidators = {
             "length": {
                 "ignore.empty.value": true,
@@ -383,6 +385,7 @@ export function useFormValidationSlice(params: {
                 "attributes": attributesWithPassword,
             },
         },
+        useI18n,
     });
 
     const initialInternalState = useMemo(