keycloakify 10.1.4 → 11.0.0

package/src/account/Template.useInitialize.ts

@@ -0,0 +1,35 @@
+import { assert } from "keycloakify/tools/assert";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import type { KcContext } from "keycloakify/account/KcContext";
+
+export type KcContextLike = {
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+    };
+};
+
+assert<keyof KcContextLike extends keyof KcContext ? true : false>();
+assert<KcContext extends KcContextLike ? true : false>();
+
+export function useInitialize(params: {
+    kcContext: KcContextLike;
+    doUseDefaultCss: boolean;
+}) {
+    const { kcContext, doUseDefaultCss } = params;
+
+    const { url } = kcContext;
+
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+                  `${url.resourcesPath}/css/account.css`
+              ]
+    });
+
+    return { isReadyToRender: areAllStyleSheetsLoaded };
+}

package/src/account/i18n/index.ts

@@ -1,5 +1,5 @@
-import type { GenericI18n } from "./GenericI18n";
-import type { MessageKey_defaultSet, KcContextLike } from "./i18n";
-export type { MessageKey_defaultSet, KcContextLike };
-export type I18n = GenericI18n<MessageKey_defaultSet>;
-export { createUseI18n } from "./useI18n";
+export * from "./withJsx";
+import type { GenericI18n } from "./withJsx/GenericI18n";
+import type { MessageKey as MessageKey_defaultSet } from "./messages_defaultSet/types";
+/** INTERNAL: DO NOT IMPORT THIS */
+export type I18n = GenericI18n<MessageKey_defaultSet, string>;

package/src/account/i18n/messages_defaultSet/types.ts

@@ -0,0 +1,30 @@
+
+export const languageTags = [
+  "ar",
+  "ca",
+  "cs",
+  "da",
+  "de",
+  "en",
+  "es",
+  "fi",
+  "fr",
+  "hu",
+  "it",
+  "ja",
+  "lt",
+  "lv",
+  "nl",
+  "no",
+  "pl",
+  "pt-BR",
+  "ru",
+  "sk",
+  "sv",
+  "tr",
+  "zh-CN"
+] as const;
+
+export type LanguageTag = typeof languageTags[number];
+
+export type MessageKey = keyof typeof import("./en")["default"];

package/src/account/i18n/noJsx/GenericI18n_noJsx.ts

@@ -0,0 +1,64 @@
+export type GenericI18n_noJsx<MessageKey extends string, LanguageTag extends string> = {
+    currentLanguage: {
+        /**
+         * e.g: "en", "fr", "zh-CN"
+         *
+         * The current language
+         */
+        languageTag: LanguageTag;
+        /**
+         * e.g: "English", "Français", "中文（简体）"
+         *
+         * The current language
+         */
+        label: string;
+    };
+    /**
+     * Array of languages enabled on the realm.
+     */
+    enabledLanguages: {
+        languageTag: LanguageTag;
+        label: string;
+        href: string;
+    }[];
+    /**
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "impersonateTitleHtml": "<strong>{0}</strong> Impersonate User",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * msgStr("access-denied") === "Access denied"
+     * msgStr("not-a-message-key") Throws an error
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     * msgStr("${bar}", "<strong>c</strong>") === "Bar &lt;strong&gt;XXX&lt;/strong&gt;"
+     *  The html in the arg is partially escaped for security reasons, it might come from an untrusted source, it's not safe to render it as html.
+     */
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *   }
+     * }
+     *
+     * advancedMsgStr("${access-denied}") === advancedMsgStr("access-denied") === msgStr("access-denied") === "Access denied"
+     * advancedMsgStr("${not-a-message-key}") === advancedMsgStr("not-a-message-key") === "not-a-message-key"
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+
+    /**
+     * Initially the messages are in english (fallback language).
+     * The translations in the current language are being fetched dynamically.
+     * This property is true while the translations are being fetched.
+     */
+    isFetchingTranslations: boolean;
+};

package/src/account/i18n/noJsx/getI18n.tsx

@@ -0,0 +1,341 @@
+import "keycloakify/tools/Object.fromEntries";
+import { assert } from "tsafe/assert";
+import messages_defaultSet_fallbackLanguage from "../messages_defaultSet/en";
+import { fetchMessages_defaultSet } from "../messages_defaultSet";
+import type { KcContext } from "../../KcContext";
+import { FALLBACK_LANGUAGE_TAG } from "keycloakify/bin/shared/constants";
+import { id } from "tsafe/id";
+import { is } from "tsafe/is";
+import { Reflect } from "tsafe/Reflect";
+import {
+    type LanguageTag as LanguageTag_defaultSet,
+    type MessageKey as MessageKey_defaultSet,
+    languageTags as languageTags_defaultSet
+} from "../messages_defaultSet/types";
+import type { GenericI18n_noJsx } from "./GenericI18n_noJsx";
+
+export type KcContextLike = {
+    themeName: string;
+    locale?: {
+        currentLanguageTag: string;
+        supported: { languageTag: string; url: string; label: string }[];
+    };
+    "x-keycloakify": {
+        messages: Record<string, string>;
+    };
+};
+
+assert<KcContext extends KcContextLike ? true : false>();
+
+export type ReturnTypeOfCreateGetI18n<MessageKey_themeDefined extends string, LanguageTag_notInDefaultSet extends string> = {
+    getI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+        prI18n_currentLanguage:
+            | Promise<GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>>
+            | undefined;
+    };
+    ofTypeI18n: GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+};
+
+export function createGetI18n<
+    ThemeName extends string = string,
+    MessageKey_themeDefined extends string = never,
+    LanguageTag_notInDefaultSet extends string = never
+>(params: {
+    extraLanguageTranslations: {
+        [languageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{ default: Record<MessageKey_defaultSet, string> }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+            [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+        };
+    }>;
+}): ReturnTypeOfCreateGetI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+    const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+
+    Object.keys(extraLanguageTranslations).forEach(languageTag_notInDefaultSet => {
+        if (id<readonly string[]>(languageTags_defaultSet).includes(languageTag_notInDefaultSet)) {
+            throw new Error(
+                [
+                    `Language "${languageTag_notInDefaultSet}" is already in the default set, you don't need to provide your own base translations for it`,
+                    `If you want to override some translations for this language, you can use the "withCustomTranslations" method`
+                ].join(" ")
+            );
+        }
+    });
+
+    type LanguageTag = LanguageTag_defaultSet | LanguageTag_notInDefaultSet;
+
+    type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+
+    type I18n = GenericI18n_noJsx<MessageKey, LanguageTag>;
+
+    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };
+
+    const cachedResultByKcContext = new WeakMap<KcContextLike, Result>();
+
+    function getI18n(params: { kcContext: KcContextLike }): Result {
+        const { kcContext } = params;
+
+        use_cache: {
+            const cachedResult = cachedResultByKcContext.get(kcContext);
+
+            if (cachedResult === undefined) {
+                break use_cache;
+            }
+
+            return cachedResult;
+        }
+
+        {
+            const currentLanguageTag = kcContext.locale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG;
+            const html = document.querySelector("html");
+            assert(html !== null);
+            html.lang = currentLanguageTag;
+        }
+
+        const getLanguageLabel = (languageTag: LanguageTag) => {
+            form_user_added_languages: {
+                if (!(languageTag in extraLanguageTranslations)) {
+                    break form_user_added_languages;
+                }
+                assert(is<Exclude<LanguageTag, LanguageTag_defaultSet>>(languageTag));
+
+                const entry = extraLanguageTranslations[languageTag];
+
+                return entry.label;
+            }
+
+            from_server: {
+                if (kcContext.locale === undefined) {
+                    break from_server;
+                }
+
+                const supportedEntry = kcContext.locale.supported.find(entry => entry.languageTag === languageTag);
+
+                if (supportedEntry === undefined) {
+                    break from_server;
+                }
+
+                // cspell: disable-next-line
+                // from "Espagnol (Español)" we want to extract "Español"
+                const match = supportedEntry.label.match(/[^(]+\(([^)]+)\)/);
+
+                if (match !== null) {
+                    return match[1];
+                }
+
+                return supportedEntry.label;
+            }
+
+            // NOTE: This should never happen
+            return languageTag;
+        };
+
+        const currentLanguage: I18n["currentLanguage"] = (() => {
+            const languageTag = id<string>(kcContext.locale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG) as LanguageTag;
+
+            return {
+                languageTag,
+                label: getLanguageLabel(languageTag)
+            };
+        })();
+
+        const enabledLanguages: I18n["enabledLanguages"] = (() => {
+            const enabledLanguages: I18n["enabledLanguages"] = [];
+
+            if (kcContext.locale !== undefined) {
+                for (const entry of kcContext.locale.supported ?? []) {
+                    const languageTag = id<string>(entry.languageTag) as LanguageTag;
+
+                    enabledLanguages.push({
+                        languageTag,
+                        label: getLanguageLabel(languageTag),
+                        href: entry.url
+                    });
+                }
+            }
+
+            if (enabledLanguages.find(({ languageTag }) => languageTag === currentLanguage.languageTag) === undefined) {
+                enabledLanguages.push({
+                    languageTag: currentLanguage.languageTag,
+                    label: getLanguageLabel(currentLanguage.languageTag),
+                    href: "#"
+                });
+            }
+
+            return enabledLanguages;
+        })();
+
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey_themeDefined>({
+            themeName: kcContext.themeName,
+            messages_themeDefined:
+                messagesByLanguageTag_themeDefined[currentLanguage.languageTag] ??
+                messagesByLanguageTag_themeDefined[id<string>(FALLBACK_LANGUAGE_TAG) as LanguageTag] ??
+                (() => {
+                    const firstLanguageTag = Object.keys(messagesByLanguageTag_themeDefined)[0];
+                    if (firstLanguageTag === undefined) {
+                        return undefined;
+                    }
+                    return messagesByLanguageTag_themeDefined[firstLanguageTag as LanguageTag];
+                })(),
+            messages_fromKcServer: kcContext["x-keycloakify"].messages
+        });
+
+        const isCurrentLanguageFallbackLanguage = currentLanguage.languageTag === FALLBACK_LANGUAGE_TAG;
+
+        const result: Result = {
+            i18n: {
+                currentLanguage,
+                enabledLanguages,
+                ...createI18nTranslationFunctions({
+                    messages_defaultSet_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_defaultSet_fallbackLanguage : undefined
+                }),
+                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
+            },
+            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
+                ? undefined
+                : (async () => {
+                      const messages_defaultSet_currentLanguage = await (async () => {
+                          const currentLanguageTag = currentLanguage.languageTag;
+
+                          const fromDefaultSet = await fetchMessages_defaultSet(currentLanguageTag);
+
+                          const isEmpty = (() => {
+                              for (let _key in fromDefaultSet) {
+                                  return false;
+                              }
+
+                              return true;
+                          })();
+
+                          if (isEmpty) {
+                              assert(is<Exclude<LanguageTag, LanguageTag_defaultSet>>(currentLanguageTag));
+
+                              const entry = extraLanguageTranslations[currentLanguageTag];
+
+                              assert(entry !== undefined);
+
+                              return entry.getMessages().then(({ default: messages }) => messages);
+                          }
+
+                          return fromDefaultSet;
+                      })();
+
+                      const i18n_currentLanguage: I18n = {
+                          currentLanguage,
+                          enabledLanguages,
+                          ...createI18nTranslationFunctions({ messages_defaultSet_currentLanguage }),
+                          isFetchingTranslations: false
+                      };
+
+                      // NOTE: This promise.resolve is just because without it we TypeScript
+                      // gives a Variable 'result' is used before being assigned. error
+                      await Promise.resolve().then(() => {
+                          result.i18n = i18n_currentLanguage;
+                          result.prI18n_currentLanguage = undefined;
+                      });
+
+                      return i18n_currentLanguage;
+                  })()
+        };
+
+        cachedResultByKcContext.set(kcContext, result);
+
+        return result;
+    }
+
+    return {
+        getI18n,
+        ofTypeI18n: Reflect<I18n>()
+    };
+}
+
+function createI18nTranslationFunctionsFactory<MessageKey_themeDefined extends string>(params: {
+    themeName: string;
+    messages_themeDefined: Record<MessageKey_themeDefined, string | Record<string, string>> | undefined;
+    messages_fromKcServer: Record<string, string>;
+}) {
+    const { themeName, messages_themeDefined, messages_fromKcServer } = params;
+
+    function createI18nTranslationFunctions(params: {
+        messages_defaultSet_currentLanguage: Partial<Record<MessageKey_defaultSet, string>> | undefined;
+    }): Pick<GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined, string>, "msgStr" | "advancedMsgStr"> {
+        const { messages_defaultSet_currentLanguage } = params;
+
+        function resolveMsg(props: { key: string; args: (string | undefined)[] }): string | undefined {
+            const { key, args } = props;
+
+            const message =
+                id<Record<string, string | undefined>>(messages_fromKcServer)[key] ??
+                (() => {
+                    const messageOrMap = id<Record<string, string | Record<string, string> | undefined> | undefined>(messages_themeDefined)?.[key];
+
+                    if (messageOrMap === undefined) {
+                        return undefined;
+                    }
+
+                    if (typeof messageOrMap === "string") {
+                        return messageOrMap;
+                    }
+
+                    const message = messageOrMap[themeName];
+
+                    assert(message !== undefined, `No translation for theme variant "${themeName}" for key "${key}"`);
+
+                    return message;
+                })() ??
+                id<Record<string, string | undefined> | undefined>(messages_defaultSet_currentLanguage)?.[key] ??
+                id<Record<string, string | undefined>>(messages_defaultSet_fallbackLanguage)[key];
+
+            if (message === undefined) {
+                return undefined;
+            }
+
+            const startIndex = message
+                .match(/{[0-9]+}/g)
+                ?.map(g => g.match(/{([0-9]+)}/)![1])
+                .map(indexStr => parseInt(indexStr))
+                .sort((a, b) => a - b)[0];
+
+            if (startIndex === undefined) {
+                // No {0} in message (no arguments expected)
+                return message;
+            }
+
+            let messageWithArgsInjected = message;
+
+            args.forEach((arg, i) => {
+                if (arg === undefined) {
+                    return;
+                }
+
+                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+            });
+
+            return messageWithArgsInjected;
+        }
+
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[] }): string {
+            const { key, args } = props;
+
+            const match = key.match(/^\$\{(.+)\}$/);
+
+            return resolveMsg({ key: match !== null ? match[1] : key, args }) ?? key;
+        }
+
+        return {
+            msgStr: (key, ...args) => {
+                const resolvedMessage = resolveMsg({ key, args });
+                assert(resolvedMessage !== undefined, `Message with key "${key}" not found`);
+                return resolvedMessage;
+            },
+            advancedMsgStr: (key, ...args) => resolveMsgAdvanced({ key, args })
+        };
+    }
+
+    return { createI18nTranslationFunctions };
+}

package/src/account/i18n/noJsx/i18nBuilder.ts

@@ -0,0 +1,117 @@
+import type {
+    LanguageTag as LanguageTag_defaultSet,
+    MessageKey as MessageKey_defaultSet
+} from "../messages_defaultSet/types";
+import { type ReturnTypeOfCreateGetI18n, createGetI18n } from "./getI18n";
+
+export type I18nBuilder<
+    ThemeName extends string = never,
+    MessageKey_themeDefined extends string = never,
+    LanguageTag_notInDefaultSet extends string = never,
+    ExcludedMethod extends
+        | "withThemeName"
+        | "withExtraLanguages"
+        | "withCustomTranslations" = never
+> = Omit<
+    {
+        withThemeName: <ThemeName extends string>() => I18nBuilder<
+            ThemeName,
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet,
+            ExcludedMethod | "withThemeName"
+        >;
+        withExtraLanguages: <
+            LanguageTag_notInDefaultSet extends string
+        >(extraLanguageTranslations: {
+            [LanguageTag in LanguageTag_notInDefaultSet]: {
+                label: string;
+                getMessages: () => Promise<{
+                    default: Record<MessageKey_defaultSet, string>;
+                }>;
+            };
+        }) => I18nBuilder<
+            ThemeName,
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet,
+            ExcludedMethod | "withExtraLanguages"
+        >;
+        withCustomTranslations: <MessageKey_themeDefined extends string>(
+            messagesByLanguageTag_themeDefined: Partial<{
+                [LanguageTag in
+                    | LanguageTag_defaultSet
+                    | LanguageTag_notInDefaultSet]: Record<
+                    MessageKey_themeDefined,
+                    string | Record<ThemeName, string>
+                >;
+            }>
+        ) => I18nBuilder<
+            ThemeName,
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet,
+            ExcludedMethod | "withCustomTranslations"
+        >;
+        build: () => ReturnTypeOfCreateGetI18n<
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet
+        >;
+    },
+    ExcludedMethod
+>;
+
+function createI18nBuilder<
+    ThemeName extends string = never,
+    MessageKey_themeDefined extends string = never,
+    LanguageTag_notInDefaultSet extends string = never
+>(params: {
+    extraLanguageTranslations: {
+        [LanguageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<
+            MessageKey_themeDefined,
+            string | Record<ThemeName, string>
+        >;
+    }>;
+}): I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+    const i18nBuilder: I18nBuilder<
+        ThemeName,
+        MessageKey_themeDefined,
+        LanguageTag_notInDefaultSet
+    > = {
+        withThemeName: () =>
+            createI18nBuilder({
+                extraLanguageTranslations: params.extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined:
+                    params.messagesByLanguageTag_themeDefined as any
+            }),
+        withExtraLanguages: extraLanguageTranslations =>
+            createI18nBuilder({
+                extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined:
+                    params.messagesByLanguageTag_themeDefined as any
+            }),
+        withCustomTranslations: messagesByLanguageTag_themeDefined =>
+            createI18nBuilder({
+                extraLanguageTranslations: params.extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined
+            }),
+        build: () =>
+            createGetI18n({
+                extraLanguageTranslations: params.extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined:
+                    params.messagesByLanguageTag_themeDefined
+            })
+    };
+
+    return i18nBuilder;
+}
+
+export const i18nBuilder = createI18nBuilder({
+    extraLanguageTranslations: {},
+    messagesByLanguageTag_themeDefined: {}
+});

package/src/account/i18n/noJsx/index.ts

@@ -0,0 +1,3 @@
+export { i18nBuilder } from "./i18nBuilder";
+export type { KcContextLike } from "./getI18n";
+export type { MessageKey as MessageKey_defaultSet } from "../messages_defaultSet/types";

package/src/account/i18n/withJsx/GenericI18n.tsx

@@ -0,0 +1,81 @@
+import type { GenericI18n_noJsx } from "../noJsx/GenericI18n_noJsx";
+import { assert, type Equals } from "tsafe/assert";
+
+export type GenericI18n<MessageKey extends string, LanguageTag extends string> = {
+    currentLanguage: {
+        /**
+         * e.g: "en", "fr", "zh-CN"
+         *
+         * The current language
+         */
+        languageTag: LanguageTag;
+        /**
+         * e.g: "English", "Français", "中文（简体）"
+         *
+         * The current language
+         */
+        label: string;
+    };
+    /**
+     * Array of languages enabled on the realm.
+     */
+    enabledLanguages: {
+        languageTag: LanguageTag;
+        label: string;
+        href: string;
+    }[];
+    /**
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "impersonateTitleHtml": "<strong>{0}</strong> Impersonate User",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * msgStr("access-denied") === "Access denied"
+     * msgStr("not-a-message-key") Throws an error
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     * msgStr("${bar}", "<strong>c</strong>") === "Bar &lt;strong&gt;XXX&lt;/strong&gt;"
+     *  The html in the arg is partially escaped for security reasons, it might come from an untrusted source, it's not safe to render it as html.
+     */
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *   }
+     * }
+     *
+     * advancedMsgStr("${access-denied}") === advancedMsgStr("access-denied") === msgStr("access-denied") === "Access denied"
+     * advancedMsgStr("${not-a-message-key}") === advancedMsgStr("not-a-message-key") === "not-a-message-key"
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+    /**
+     * Initially the messages are in english (fallback language).
+     * The translations in the current language are being fetched dynamically.
+     * This property is true while the translations are being fetched.
+     */
+    isFetchingTranslations: boolean;
+    /**
+     * Same as msgStr but returns a JSX.Element with the html string rendered as html.
+     */
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    /**
+     * Same as advancedMsgStr but returns a JSX.Element with the html string rendered as html.
+     */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+};
+
+{
+    type A = Omit<GenericI18n<string, string>, "msg" | "advancedMsg">;
+    type B = GenericI18n_noJsx<string, string>;
+
+    assert<Equals<A, B>>;
+}