keycloakify 10.0.0-rc.36 → 10.0.0-rc.38

package/src/account/pages/Password.tsx

@@ -1,24 +1,26 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "password")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        classes: {
-            ...classes,
-            kcBodyClass: clsx(classes?.kcBodyClass, "password")
-        }
+        classes
     });
 
     const { url, password, account, stateChecker } = kcContext;
 
-    const { msgStr, msg } = i18n;
+    const { msgStr, msg } = useI18n({ kcContext });
 
     const [currentPassword, setCurrentPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
@@ -75,7 +77,6 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                         return kcContext.message;
                     })()
                 },
-                i18n,
                 doUseDefaultCss,
                 classes
             }}
@@ -192,11 +193,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                             <button
                                 disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >

package/src/account/pages/Sessions.tsx

@@ -1,23 +1,22 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { url, stateChecker, sessions } = kcContext;
 
-    const { msg } = i18n;
+    const { msg } = useI18n({ kcContext });
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
-            <div className={getClassName("kcContentWrapperClass")}>
+        <Template {...{ kcContext, doUseDefaultCss, classes }} active="sessions">
+            <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("sessionsHtmlTitle")}</h2>
                 </div>
@@ -56,7 +55,7 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
 
             <form action={url.sessionsUrl} method="post">
                 <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
-                <button id="logout-all-sessions" type="submit" className={clsx(getClassName("kcButtonDefaultClass"), getClassName("kcButtonClass"))}>
+                <button id="logout-all-sessions" type="submit" className={kcClsx("kcButtonDefaultClass", "kcButtonClass")}>
                     {msg("doLogOutAllSessions")}
                 </button>
             </form>

package/src/account/pages/Totp.tsx

@@ -1,20 +1,20 @@
 import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
 
-    const { msg, msgStr, advancedMsg } = i18n;
+    const { msg, msgStr, advancedMsg } = useI18n({ kcContext });
 
     const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
         HmacSHA1: "SHA1",
@@ -23,7 +23,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
     };
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
+        <Template {...{ kcContext, doUseDefaultCss, classes }} active="totp">
             <>
                 <div className="row">
                     <div className="col-md-10">
@@ -140,9 +140,9 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                             </li>
                         </ol>
                         <hr />
-                        <form action={url.totpUrl} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                        <form action={url.totpUrl} className={kcClsx("kcFormClass")} id="kc-totp-settings-form" method="post">
                             <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
-                            <div className={getClassName("kcFormGroupClass")}>
+                            <div className={kcClsx("kcFormGroupClass")}>
                                 <div className="col-sm-2 col-md-2">
                                     <label htmlFor="totp" className="control-label">
                                         {msg("authenticatorCode")}
@@ -155,12 +155,12 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                         id="totp"
                                         name="totp"
                                         autoComplete="off"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         aria-invalid={messagesPerField.existsError("totp")}
                                     />
 
                                     {messagesPerField.existsError("totp") && (
-                                        <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                        <span id="input-error-otp-code" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                             {messagesPerField.get("totp")}
                                         </span>
                                     )}
@@ -169,9 +169,9 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                 {mode && <input type="hidden" id="mode" value={mode} />}
                             </div>
 
-                            <div className={getClassName("kcFormGroupClass")}>
+                            <div className={kcClsx("kcFormGroupClass")}>
                                 <div className="col-sm-2 col-md-2">
-                                    <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                    <label htmlFor="userLabel" className={kcClsx("kcLabelClass")}>
                                         {msg("totpDeviceName")}
                                     </label>
                                     {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
@@ -182,37 +182,28 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                         id="userLabel"
                                         name="userLabel"
                                         autoComplete="off"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         aria-invalid={messagesPerField.existsError("userLabel")}
                                     />
                                     {messagesPerField.existsError("userLabel") && (
-                                        <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                        <span id="input-error-otp-label" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                             {messagesPerField.get("userLabel")}
                                         </span>
                                     )}
                                 </div>
                             </div>
 
-                            <div id="kc-form-buttons" className={clsx(getClassName("kcFormGroupClass"), "text-right")}>
-                                <div className={getClassName("kcInputWrapperClass")}>
+                            <div id="kc-form-buttons" className={clsx(kcClsx("kcFormGroupClass"), "text-right")}>
+                                <div className={kcClsx("kcInputWrapperClass")}>
                                     <input
                                         type="submit"
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
+                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                         id="saveTOTPBtn"
                                         value={msgStr("doSave")}
                                     />
                                     <button
                                         type="submit"
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonDefaultClass"),
-                                            getClassName("kcButtonLargeClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
+                                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass", "kcButtonLargeClass")}
                                         id="cancelTOTPBtn"
                                         name="submitAction"
                                         value="Cancel"

package/src/bin/keycloakify/generateSrcMainResources/generateMessageProperties.ts

@@ -8,6 +8,7 @@ import * as recast from "recast";
 import * as babelParser from "@babel/parser";
 import babelGenerate from "@babel/generator";
 import * as babelTypes from "@babel/types";
+import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
 
 export function generateMessageProperties(params: {
     themeSrcDirPath: string;
@@ -146,7 +147,7 @@ export function generateMessageProperties(params: {
 
     for (const [languageTag, keyValueMap] of Object.entries(keyValueMapByLanguageTag)) {
         const propertiesFileSource = Object.entries(keyValueMap)
-            .map(([key, value]) => `${key}=${escapeString(value)}`)
+            .map(([key, value]) => `${key}=${escapeStringForPropertiesFile(value)}`)
             .join("\n");
 
         out.push({
@@ -164,68 +165,3 @@ export function generateMessageProperties(params: {
 
     return out;
 }
-
-// Convert a JavaScript string to UTF-16 encoding
-function toUTF16(codePoint: number): string {
-    if (codePoint <= 0xffff) {
-        // BMP character
-        return "\\u" + codePoint.toString(16).padStart(4, "0");
-    } else {
-        // Non-BMP character
-        codePoint -= 0x10000;
-        let highSurrogate = (codePoint >> 10) + 0xd800;
-        let lowSurrogate = (codePoint % 0x400) + 0xdc00;
-        return (
-            "\\u" +
-            highSurrogate.toString(16).padStart(4, "0") +
-            "\\u" +
-            lowSurrogate.toString(16).padStart(4, "0")
-        );
-    }
-}
-
-// Escapes special characters for use in a .properties file
-function escapeString(str: string): string {
-    let escapedStr = "";
-    for (const char of [...str]) {
-        const codePoint = char.codePointAt(0);
-        if (!codePoint) continue;
-
-        switch (char) {
-            case "\n":
-                escapedStr += "\\n";
-                break;
-            case "\r":
-                escapedStr += "\\r";
-                break;
-            case "\t":
-                escapedStr += "\\t";
-                break;
-            case "\\":
-                escapedStr += "\\\\";
-                break;
-            case ":":
-                escapedStr += "\\:";
-                break;
-            case "=":
-                escapedStr += "\\=";
-                break;
-            case "#":
-                escapedStr += "\\#";
-                break;
-            case "!":
-                escapedStr += "\\!";
-                break;
-            case "'":
-                escapedStr += "''";
-                break;
-            default:
-                if (codePoint > 0x7f) {
-                    escapedStr += toUTF16(codePoint); // Non-ASCII characters
-                } else {
-                    escapedStr += char; // ASCII character needs no escape
-                }
-        }
-    }
-    return escapedStr;
-}

package/src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForMainTheme.ts

@@ -38,6 +38,7 @@ import {
     type MetaInfKeycloakTheme
 } from "../../shared/metaInfKeycloakThemes";
 import { objectEntries } from "tsafe/objectEntries";
+import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
 
 export type BuildOptionsLike = BuildOptionsLike_kcContextExclusionsFtlCode &
     BuildOptionsLike_downloadKeycloakStaticResources &
@@ -50,6 +51,7 @@ export type BuildOptionsLike = BuildOptionsLike_kcContextExclusionsFtlCode &
         urlPathname: string | undefined;
         reactAppRootDirPath: string;
         keycloakifyBuildDirPath: string;
+        environmentVariables: { name: string; default: string }[];
     };
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
@@ -261,7 +263,11 @@ export async function generateSrcMainResourcesForMainTheme(params: {
                         }
                         assert<Equals<typeof themeType, never>>(false);
                     })()}`,
-                    ...(buildOptions.extraThemeProperties ?? [])
+                    ...(buildOptions.extraThemeProperties ?? []),
+                    buildOptions.environmentVariables.map(
+                        ({ name, default: defaultValue }) =>
+                            `${name}=\${env.${name}:${escapeStringForPropertiesFile(defaultValue)}}`
+                    )
                 ].join("\n\n"),
                 "utf8"
             )

package/src/bin/main.ts

@@ -205,6 +205,21 @@ program
         }
     });
 
+program
+    .command({
+        name: "update-kc-gen",
+        description:
+            "(Webpack/Create-React-App only) Create/update the kc.gen.ts file in your project."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./update-kc-gen");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
 // Fallback to build command if no command is provided
 {
     const [, , ...rest] = process.argv;

package/src/bin/shared/buildOptions.ts

@@ -31,15 +31,17 @@ export type BuildOptions = {
     assetsDirPath: string;
     npmWorkspaceRootDirPath: string;
     kcContextExclusionsFtlCode: string | undefined;
+    environmentVariables: { name: string; default: string }[];
 };
 
 export type UserProvidedBuildOptions = {
+    themeName?: string | string[];
+    environmentVariables?: { name: string; default: string }[];
     extraThemeProperties?: string[];
     artifactId?: string;
     groupId?: string;
     loginThemeResourcesFromKeycloakVersion?: string;
     keycloakifyBuildDirPath?: string;
-    themeName?: string | string[];
     kcContextExclusionsFtlCode?: string;
 };
 
@@ -305,6 +307,7 @@ export function readBuildOptions(params: {
             return pathJoin(reactAppBuildDirPath, resolvedViteConfig.assetsDir);
         })(),
         npmWorkspaceRootDirPath,
-        kcContextExclusionsFtlCode: userProvidedBuildOptions.kcContextExclusionsFtlCode
+        kcContextExclusionsFtlCode: userProvidedBuildOptions.kcContextExclusionsFtlCode,
+        environmentVariables: userProvidedBuildOptions.environmentVariables ?? []
     };
 }

package/src/bin/shared/generateKcGenTs.ts

@@ -0,0 +1,61 @@
+import { assert } from "tsafe/assert";
+import type { BuildOptions } from "./buildOptions";
+import { getThemeSrcDirPath } from "./getThemeSrcDirPath";
+import * as fs from "fs/promises";
+import { join as pathJoin } from "path";
+
+export type BuildOptionsLike = {
+    reactAppRootDirPath: string;
+    themeNames: string[];
+    environmentVariables: { name: string; default: string }[];
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function generateKcGenTs(params: {
+    buildOptions: BuildOptionsLike;
+}): Promise<void> {
+    const { buildOptions } = params;
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
+    });
+
+    await fs.writeFile(
+        pathJoin(themeSrcDirPath, "kc.gen.ts"),
+        Buffer.from(
+            [
+                `/* prettier-ignore-start */`,
+                ``,
+                `/* eslint-disable */`,
+                ``,
+                `// @ts-nocheck`,
+                ``,
+                `// noinspection JSUnusedGlobalSymbols`,
+                ``,
+                `// This file is auto-generated by Keycloakify`,
+                ``,
+                `export type ThemeName = ${buildOptions.themeNames.map(themeName => `"${themeName}"`).join(" | ")};`,
+                ``,
+                `export const themeNames: ThemeName[] = [${buildOptions.themeNames.map(themeName => `"${themeName}"`).join(", ")}];`,
+                ``,
+                `export type KcEnvName = ${buildOptions.environmentVariables.length === 0 ? "never" : buildOptions.environmentVariables.map(({ name }) => `"${name}"`).join(" | ")};`,
+                ``,
+                `export const KcEnvNames: KcEnvName[] = [${buildOptions.environmentVariables.map(({ name }) => `"${name}"`).join(", ")}];`,
+                ``,
+                `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
+                    Object.fromEntries(
+                        buildOptions.environmentVariables.map(
+                            ({ name, default: defaultValue }) => [name, defaultValue]
+                        )
+                    ),
+                    null,
+                    2
+                )};`,
+                ``,
+                `/* prettier-ignore-end */`
+            ].join("\n"),
+            "utf8"
+        )
+    );
+}

package/src/bin/tools/escapeStringForPropertiesFile.ts

@@ -0,0 +1,64 @@
+// Convert a JavaScript string to UTF-16 encoding
+function toUTF16(codePoint: number): string {
+    if (codePoint <= 0xffff) {
+        // BMP character
+        return "\\u" + codePoint.toString(16).padStart(4, "0");
+    } else {
+        // Non-BMP character
+        codePoint -= 0x10000;
+        let highSurrogate = (codePoint >> 10) + 0xd800;
+        let lowSurrogate = (codePoint % 0x400) + 0xdc00;
+        return (
+            "\\u" +
+            highSurrogate.toString(16).padStart(4, "0") +
+            "\\u" +
+            lowSurrogate.toString(16).padStart(4, "0")
+        );
+    }
+}
+
+// Escapes special characters for use in a .properties file
+export function escapeStringForPropertiesFile(str: string): string {
+    let escapedStr = "";
+    for (const char of [...str]) {
+        const codePoint = char.codePointAt(0);
+        if (!codePoint) continue;
+
+        switch (char) {
+            case "\n":
+                escapedStr += "\\n";
+                break;
+            case "\r":
+                escapedStr += "\\r";
+                break;
+            case "\t":
+                escapedStr += "\\t";
+                break;
+            case "\\":
+                escapedStr += "\\\\";
+                break;
+            case ":":
+                escapedStr += "\\:";
+                break;
+            case "=":
+                escapedStr += "\\=";
+                break;
+            case "#":
+                escapedStr += "\\#";
+                break;
+            case "!":
+                escapedStr += "\\!";
+                break;
+            case "'":
+                escapedStr += "''";
+                break;
+            default:
+                if (codePoint > 0x7f) {
+                    escapedStr += toUTF16(codePoint); // Non-ASCII characters
+                } else {
+                    escapedStr += char; // ASCII character needs no escape
+                }
+        }
+    }
+    return escapedStr;
+}

package/src/bin/update-kc-gen.ts

@@ -0,0 +1,13 @@
+import type { CliCommandOptions } from "./main";
+import { readBuildOptions } from "./shared/buildOptions";
+import { generateKcGenTs } from "./shared/generateKcGenTs";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({
+        cliCommandOptions
+    });
+
+    await generateKcGenTs({ buildOptions });
+}

package/src/lib/getKcClsx.ts

@@ -0,0 +1,75 @@
+import type { Param0 } from "tsafe";
+import { type CxArg, clsx_withTransform } from "../tools/clsx_withTransform";
+import { clsx } from "../tools/clsx";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+
+export function createGetKcClsx<ClassKey extends string>(params: {
+    defaultClasses: Record<ClassKey, string | undefined>;
+}) {
+    const { defaultClasses } = params;
+
+    function areSameParams(
+        params1: Param0<typeof getKcClsx>,
+        params2: Param0<typeof getKcClsx>
+    ): boolean {
+        if (params1.doUseDefaultCss !== params2.doUseDefaultCss) {
+            return false;
+        }
+
+        if (params1.classes === params2.classes) {
+            return true;
+        }
+
+        return JSON.stringify(params1.classes) === JSON.stringify(params2.classes);
+    }
+
+    let cache:
+        | {
+              params: Param0<typeof getKcClsx>;
+              result: ReturnType<typeof getKcClsx>;
+          }
+        | undefined = undefined;
+
+    function getKcClsx(params: {
+        doUseDefaultCss: boolean;
+        classes: Partial<Record<ClassKey, string>> | undefined;
+    }): { kcClsx: (...args: CxArg<ClassKey>[]) => string } {
+        // NOTE: We implement a cache here only so that getClassName can be stable across renders.
+        // We don't want to use useConstCallback because we want this to be useable outside of React.
+        use_cache: {
+            if (cache === undefined) {
+                break use_cache;
+            }
+
+            if (!areSameParams(cache.params, params)) {
+                break use_cache;
+            }
+
+            return cache.result;
+        }
+
+        const { classes, doUseDefaultCss } = params;
+
+        function kcClsx(...args: CxArg<ClassKey>[]): string {
+            return clsx_withTransform({
+                args,
+                transform: classKey => {
+                    assert(is<ClassKey>(classKey));
+
+                    return clsx(
+                        classKey,
+                        doUseDefaultCss ? defaultClasses[classKey] : undefined,
+                        classes?.[classKey]
+                    );
+                }
+            });
+        }
+
+        cache = { params, result: { kcClsx } };
+
+        return { kcClsx };
+    }
+
+    return { getKcClsx };
+}

package/src/login/Fallback.tsx

@@ -3,7 +3,6 @@ import { assert, type Equals } from "tsafe/assert";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "./KcContext";
-import type { I18n } from "./i18n";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 
 const Login = lazy(() => import("keycloakify/login/pages/Login"));
@@ -41,7 +40,7 @@ const LoginResetOtp = lazy(() => import("keycloakify/login/pages/LoginResetOtp")
 const LoginX509Info = lazy(() => import("keycloakify/login/pages/LoginX509Info"));
 const WebauthnError = lazy(() => import("keycloakify/login/pages/WebauthnError"));
 
-type FallbackProps = PageProps<KcContext, I18n> & {
+type FallbackProps = PageProps<KcContext> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
 };
 

package/src/login/KcContext/KcContext.ts

@@ -10,20 +10,20 @@ import type { Equals } from "tsafe";
 import type { MessageKey } from "../i18n/i18n";
 
 export type ExtendKcContext<
-    KcContextExtraProperties extends { properties?: Record<string, string | undefined> },
-    KcContextExtraPropertiesPerPage extends Record<string, Record<string, unknown>>
+    KcContextExtension extends { properties?: Record<string, string | undefined> },
+    KcContextExtensionPerPage extends Record<string, Record<string, unknown>>
 > = ValueOf<{
-    [PageId in keyof KcContextExtraPropertiesPerPage | KcContext["pageId"]]: Extract<
+    [PageId in keyof KcContextExtensionPerPage | KcContext["pageId"]]: Extract<
         KcContext,
         { pageId: PageId }
     > extends never
         ? KcContext.Common &
-              KcContextExtraProperties & {
+              KcContextExtension & {
                   pageId: PageId;
-              } & KcContextExtraPropertiesPerPage[PageId]
+              } & KcContextExtensionPerPage[PageId]
         : Extract<KcContext, { pageId: PageId }> &
-              KcContextExtraProperties &
-              KcContextExtraPropertiesPerPage[PageId];
+              KcContextExtension &
+              KcContextExtensionPerPage[PageId];
 }>;
 
 /** Take theses type definition with a grain of salt.