keycloakify 5.8.1 → 6.0.0-beta.10

package/src/lib/components/Template.tsx

@@ -1,15 +1,14 @@
-import { useReducer, useEffect, memo } from "react";
+import React, { useReducer, useEffect, memo } from "react";
 import type { ReactNode } from "react";
-import { getMsg, getCurrentKcLanguageTag, changeLocale, getTagLabel } from "../i18n";
-import type { KcLanguageTag } from "../i18n";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { assert } from "../tools/assert";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
 export type TemplateProps = {
     displayInfo?: boolean;
@@ -25,9 +24,9 @@ export type TemplateProps = {
      * to avoid pulling the default theme assets.
      */
     doFetchDefaultThemeResources: boolean;
-} & { kcContext: KcContextBase } & KcTemplateProps;
+} & { kcContext: KcContextBase; i18n: I18n } & KcTemplateProps;
 
-export const Template = memo((props: TemplateProps) => {
+const Template = memo((props: TemplateProps) => {
     const {
         displayInfo = false,
         displayMessage = true,
@@ -39,23 +38,15 @@ export const Template = memo((props: TemplateProps) => {
         formNode,
         infoNode = null,
         kcContext,
-        doFetchDefaultThemeResources,
+        i18n,
+        doFetchDefaultThemeResources
     } = props;
 
     const { cx } = useCssAndCx();
 
-    useEffect(() => {
-        console.log("Rendering this page with react using keycloakify");
-    }, []);
-
-    const { msg } = getMsg(kcContext);
+    const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
-    const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [KcLanguageTag]) =>
-        changeLocale({
-            kcContext,
-            kcLanguageTag,
-        }),
-    );
+    const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));
 
     const onTryAnotherWayClick = useConstCallback(() => (document.forms["kc-select-try-another-way-form" as never].submit(), false));
 
@@ -77,16 +68,16 @@ export const Template = memo((props: TemplateProps) => {
         Promise.all(
             [
                 ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
-                ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath)),
+                ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
             ]
                 .reverse()
                 .map(href =>
                     headInsert({
                         "type": "css",
                         href,
-                        "position": "prepend",
-                    }),
-                ),
+                        "position": "prepend"
+                    })
+                )
         ).then(() => {
             if (isUnmounted) {
                 return;
@@ -98,8 +89,8 @@ export const Template = memo((props: TemplateProps) => {
         toArr(props.scripts).forEach(relativePath =>
             headInsert({
                 "type": "javascript",
-                "src": pathJoin(url.resourcesPath, relativePath),
-            }),
+                "src": pathJoin(url.resourcesPath, relativePath)
+            })
         );
 
         if (props.kcHtmlClass !== undefined) {
@@ -138,13 +129,13 @@ export const Template = memo((props: TemplateProps) => {
                             <div id="kc-locale-wrapper" className={cx(props.kcLocaleWrapperClass)}>
                                 <div className="kc-dropdown" id="kc-locale-dropdown">
                                     <a href="#" id="kc-current-locale-link">
-                                        {getTagLabel({ "kcLanguageTag": getCurrentKcLanguageTag(kcContext), kcContext })}
+                                        {labelBySupportedLanguageTag[currentLanguageTag]}
                                     </a>
                                     <ul>
                                         {locale.supported.map(({ languageTag }) => (
                                             <li key={languageTag} className="kc-dropdown-item">
                                                 <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
-                                                    {getTagLabel({ "kcLanguageTag": languageTag, kcContext })}
+                                                    {labelBySupportedLanguageTag[languageTag]}
                                                 </a>
                                             </li>
                                         ))}
@@ -220,7 +211,7 @@ export const Template = memo((props: TemplateProps) => {
                                 <span
                                     className="kc-feedback-text"
                                     dangerouslySetInnerHTML={{
-                                        "__html": message.summary,
+                                        "__html": message.summary
                                     }}
                                 />
                             </div>
@@ -256,3 +247,5 @@ export const Template = memo((props: TemplateProps) => {
         </div>
     );
 });
+
+export default Template;

package/src/lib/components/Terms.tsx

@@ -1,47 +1,80 @@
-import { useReducer, useEffect, memo } from "react";
-import { Template } from "./Template";
+import React, { 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 { useCssAndCx } from "../tools/useCssAndCx";
+import { Evt } from "evt";
+import { useRerenderOnStateChange } from "evt/hooks";
+import { assert } from "tsafe/assert";
+import { fallbackLanguageTag } from "../i18n";
+import type { I18n } from "../i18n";
+import memoize from "memoizee";
+import { useConst } from "powerhooks/useConst";
+import { useConstCallback } from "powerhooks/useConstCallback";
+
+export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
+
+export type KcContextLike = {
+    pageId: KcContextBase["pageId"];
+    locale?: {
+        currentLanguageTag: string;
+    };
+};
+
+assert<KcContextBase extends KcContextLike ? true : false>();
 
 /** Allow to avoid bundling the terms and download it on demand*/
 export function useDownloadTerms(params: {
-    kcContext: KcContextBase;
-    downloadTermMarkdown: (params: { currentKcLanguageTag: KcLanguageTag }) => Promise<string>;
+    kcContext: KcContextLike;
+    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
 }) {
-    const { kcContext, downloadTermMarkdown } = params;
+    const { kcContext } = params;
+
+    const { downloadTermMarkdownMemoized } = (function useClosure() {
+        const { downloadTermMarkdown } = params;
+
+        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
 
-    const [, forceUpdate] = useReducer(x => x + 1, 0);
+        const downloadTermMarkdownMemoized = useConst(() =>
+            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }), { "promise": true })
+        );
+
+        return { downloadTermMarkdownMemoized };
+    })();
 
     useEffect(() => {
-        const currentKcLanguageTag = getCurrentKcLanguageTag(kcContext);
+        if (kcContext.pageId !== "terms.ftl") {
+            return;
+        }
 
-        downloadTermMarkdown({ currentKcLanguageTag }).then(thermMarkdown => {
-            kcMessages[currentKcLanguageTag].termsText = thermMarkdown;
-            forceUpdate();
-        });
+        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
+            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
+        );
     }, []);
 }
 
-export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms } & KcProps) => {
-    const { msg, msgStr } = getMsg(kcContext);
+const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Terms; i18n: I18n } & KcProps) => {
+    const { msg, msgStr } = i18n;
+
+    useRerenderOnStateChange(evtTermMarkdown);
 
     const { cx } = useCssAndCx();
 
     const { url } = kcContext;
 
+    if (evtTermMarkdown.state === undefined) {
+        return null;
+    }
+
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("termsTitle")}
             formNode={
                 <>
-                    <div id="kc-terms-text">{msg("termsText")}</div>
+                    <div id="kc-terms-text">{evtTermMarkdown.state}</div>
                     <form className="form-actions" action={url.loginAction} method="POST">
                         <input
                             className={cx(
@@ -49,7 +82,7 @@ export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.T
                                 props.kcButtonClass,
                                 props.kcButtonClass,
                                 props.kcButtonPrimaryClass,
-                                props.kcButtonLargeClass,
+                                props.kcButtonLargeClass
                             )}
                             name="accept"
                             id="kc-accept"
@@ -70,3 +103,5 @@ export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.T
         />
     );
 });
+
+export default Terms;

package/src/lib/getKcContext/KcContextBase.ts

@@ -1,8 +1,7 @@
-import type { PageId } from "../../bin/build-keycloak-theme/generateFtl";
-import type { KcLanguageTag } from "../i18n";
+import type { PageId } from "../../bin/keycloakify/generateFtl";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { MessageKey } from "../i18n";
+import type { MessageKeyBase } from "../i18n";
 
 type ExtractAfterStartingWith<Prefix extends string, StrEnum> = StrEnum extends `${Prefix}${infer U}` ? U : never;
 
@@ -49,9 +48,9 @@ export declare namespace KcContextBase {
             supported: {
                 url: string;
                 label: string;
-                languageTag: KcLanguageTag;
+                languageTag: string;
             }[];
-            currentLanguageTag: KcLanguageTag;
+            currentLanguageTag: string;
         };
         auth?: {
             showUsername?: boolean;
@@ -154,7 +153,7 @@ export declare namespace KcContextBase {
     export type Info = Common & {
         pageId: "info.ftl";
         messageHeader?: string;
-        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
+        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKeyBase>[];
         skipLink: boolean;
         pageRedirectUri?: string;
         actionUri?: string;

package/src/lib/getKcContext/getKcContext.ts

@@ -7,9 +7,9 @@ import { exclude } from "tsafe/exclude";
 import { assert } from "tsafe/assert";
 import type { ExtendsKcContextBase } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
-import { pathJoin } from "../tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 import { pathBasename } from "../tools/pathBasename";
-import { resourcesCommonPath } from "./kcContextMocks/urlResourcesPath";
+import { mockTestingResourcesCommonPath } from "../../bin/mockTestingResourcesPath";
 
 export function getKcContext<KcContextExtended extends { pageId: string } = never>(params?: {
     mockPageId?: ExtendsKcContextBase<KcContextExtended>["pageId"];
@@ -29,8 +29,8 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                 [
                     `WARNING: You declared the non build in page ${mockPageId} but you didn't `,
                     `provide mock data needed to debug the page outside of Keycloak as you are trying to do now.`,
-                    `Please check the documentation of the getKcContext function`,
-                ].join("\n"),
+                    `Please check the documentation of the getKcContext function`
+                ].join("\n")
             );
         }
 
@@ -38,13 +38,13 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
 
         deepAssign({
             "target": kcContext,
-            "source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock },
+            "source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock }
         });
 
         if (partialKcContextCustomMock !== undefined) {
             deepAssign({
                 "target": kcContext,
-                "source": partialKcContextCustomMock,
+                "source": partialKcContextCustomMock
             });
 
             if (partialKcContextCustomMock.pageId === "register-user-profile.ftl") {
@@ -56,7 +56,7 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                 id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributesByName = {};
 
                 const partialAttributes = [
-                    ...((partialKcContextCustomMock as DeepPartial<KcContextBase.RegisterUserProfile>).profile?.attributes ?? []),
+                    ...((partialKcContextCustomMock as DeepPartial<KcContextBase.RegisterUserProfile>).profile?.attributes ?? [])
                 ].filter(exclude(undefined));
 
                 attributes.forEach(attribute => {
@@ -66,7 +66,7 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
 
                     deepAssign({
                         "target": augmentedAttribute,
-                        "source": attribute,
+                        "source": attribute
                     });
 
                     if (partialAttribute !== undefined) {
@@ -74,7 +74,7 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
 
                         deepAssign({
                             "target": augmentedAttribute,
-                            "source": partialAttribute,
+                            "source": partialAttribute
                         });
                     }
 
@@ -101,7 +101,7 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
     if (kcContext !== undefined) {
         const { url } = kcContext;
 
-        url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonPath));
+        url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
     }
 
     return { kcContext };

package/src/lib/getKcContext/getKcContextFromWindow.ts

@@ -1,6 +1,6 @@
 import type { KcContextBase } from "./KcContextBase";
 import type { AndByDiscriminatingKey } from "../tools/AndByDiscriminatingKey";
-import { ftlValuesGlobalName } from "../../bin/build-keycloak-theme/ftlValuesGlobalName";
+import { ftlValuesGlobalName } from "../../bin/keycloakify/ftlValuesGlobalName";
 
 export type ExtendsKcContextBase<KcContextExtended extends { pageId: string }> = [KcContextExtended] extends [never]
     ? KcContextBase