keycloakify 10.0.0-rc.10 → 10.0.0-rc.101

package/src/tools/clsx_withTransform.ts

@@ -0,0 +1,55 @@
+import { assert } from "tsafe/assert";
+import { typeGuard } from "tsafe/typeGuard";
+
+export type CxArg<ClassName extends string = string> =
+    | undefined
+    | null
+    | ClassName
+    | boolean
+    | Partial<Record<ClassName, boolean | null | undefined>>
+    | readonly CxArg<ClassName>[];
+
+export function clsx_withTransform(params: {
+    args: CxArg[];
+    transform: (arg: string) => string;
+}): string {
+    const { args, transform } = params;
+
+    const len = args.length;
+    let i = 0;
+    let cls = "";
+    for (; i < len; i++) {
+        const arg = args[i];
+        if (arg == null) continue;
+
+        let toAdd;
+        switch (typeof arg) {
+            case "boolean":
+                break;
+            case "object": {
+                if (Array.isArray(arg)) {
+                    toAdd = clsx_withTransform({ args: arg, transform });
+                } else {
+                    assert(!typeGuard<{ length: number }>(arg, false));
+
+                    toAdd = "";
+                    for (const k in arg) {
+                        if (arg[k] && k) {
+                            toAdd && (toAdd += " ");
+                            toAdd += transform(k);
+                        }
+                    }
+                }
+                break;
+            }
+            default: {
+                toAdd = transform(arg);
+            }
+        }
+        if (toAdd) {
+            cls && (cls += " ");
+            cls += toAdd;
+        }
+    }
+    return cls;
+}

package/src/tools/deepAssign.ts

@@ -1,44 +1,82 @@
 import { assert } from "tsafe/assert";
 import { is } from "tsafe/is";
-import { deepClone } from "./deepClone";
+import { structuredCloneButFunctions } from "./structuredCloneButFunctions";
 
-//Warning: Be mindful that because of array this is not idempotent.
-export function deepAssign(params: { target: Record<string, unknown>; source: Record<string, unknown> }) {
-    const { target } = params;
-
-    const source = deepClone(params.source);
+/** NOTE: Array a copied over, not merged. */
+export function deepAssign(params: {
+    target: Record<string, unknown>;
+    source: Record<string, unknown>;
+}): void {
+    const { target, source } = params;
 
     Object.keys(source).forEach(key => {
         var dereferencedSource = source[key];
 
-        if (target[key] === undefined || dereferencedSource instanceof Function || !(dereferencedSource instanceof Object)) {
-            Object.defineProperty(target, key, {
-                "enumerable": true,
-                "writable": true,
-                "configurable": true,
-                "value": dereferencedSource
+        if (dereferencedSource === undefined) {
+            delete target[key];
+            return;
+        }
+
+        if (dereferencedSource instanceof Date) {
+            assign({
+                target,
+                key,
+                value: new Date(dereferencedSource.getTime())
             });
 
             return;
         }
 
-        const dereferencedTarget = target[key];
-
         if (dereferencedSource instanceof Array) {
-            assert(is<unknown[]>(dereferencedTarget));
-            assert(is<unknown[]>(dereferencedSource));
+            assign({
+                target,
+                key,
+                value: structuredCloneButFunctions(dereferencedSource)
+            });
 
-            dereferencedSource.forEach(entry => dereferencedTarget.push(entry));
+            return;
+        }
+
+        if (
+            dereferencedSource instanceof Function ||
+            !(dereferencedSource instanceof Object)
+        ) {
+            assign({
+                target,
+                key,
+                value: dereferencedSource
+            });
 
             return;
         }
 
+        if (!(target[key] instanceof Object)) {
+            target[key] = {};
+        }
+
+        const dereferencedTarget = target[key];
+
         assert(is<Record<string, unknown>>(dereferencedTarget));
         assert(is<Record<string, unknown>>(dereferencedSource));
 
         deepAssign({
-            "target": dereferencedTarget,
-            "source": dereferencedSource
+            target: dereferencedTarget,
+            source: dereferencedSource
         });
     });
 }
+
+function assign(params: {
+    target: Record<string, unknown>;
+    key: string;
+    value: unknown;
+}): void {
+    const { target, key, value } = params;
+
+    Object.defineProperty(target, key, {
+        enumerable: true,
+        writable: true,
+        configurable: true,
+        value
+    });
+}

package/src/tools/formatNumber.ts

@@ -1,4 +1,4 @@
-export const formatNumber = (input: string, format: string): string => {
+export const formatNumber = (input: string, format: string) => {
     if (!input) {
         return "";
     }
@@ -11,13 +11,17 @@ export const formatNumber = (input: string, format: string): string => {
     }
 
     // calculate the maximum size of the given pattern based on the sum of the expected digits
-    const maxSize = digitPattern.reduce((total, p) => total + parseInt(p.replace("{", "").replace("}", "")), 0);
+    const maxSize = digitPattern.reduce(
+        (total, p) => total + parseInt(p.replace("{", "").replace("}", "")),
+        0
+    );
 
     // keep only digits
     let rawValue = input.replace(/\D+/g, "");
 
     // make sure the value is a number
-    if (`${parseInt(rawValue)}` !== rawValue) {
+    // @ts-expect-error: It's Keycloak's code, we trust it.
+    if (parseInt(rawValue) != rawValue) {
         return "";
     }
 

package/src/tools/structuredCloneButFunctions.ts

@@ -0,0 +1,24 @@
+import "./Object.fromEntries";
+
+/**
+ * Functionally equivalent to structuredClone but
+ * functions are not cloned but kept as is.
+ * (as opposed to structuredClone that chokes if it encounters a function)
+ */
+export function structuredCloneButFunctions<T>(o: T): T {
+    if (!(o instanceof Object)) {
+        return o;
+    }
+
+    if (typeof o === "function") {
+        return o;
+    }
+
+    if (o instanceof Array) {
+        return o.map(structuredCloneButFunctions) as any;
+    }
+
+    return Object.fromEntries(
+        Object.entries(o).map(([key, value]) => [key, structuredCloneButFunctions(value)])
+    ) as any;
+}

package/src/tools/useConstCallback.ts

@@ -2,7 +2,9 @@ import { useRef, useState } from "react";
 import { Parameters } from "tsafe/Parameters";
 
 /** https://stackoverflow.com/questions/65890278/why-cant-usecallback-always-return-the-same-ref */
-export function useConstCallback<T extends ((...args: any[]) => unknown) | undefined | null>(callback: NonNullable<T>): T {
+export function useConstCallback<
+    T extends ((...args: any[]) => unknown) | undefined | null
+>(callback: NonNullable<T>): T {
     const callbackRef = useRef<typeof callback>(null as any);
 
     callbackRef.current = callback;

package/src/tools/useInsertLinkTags.ts

@@ -1,82 +1,86 @@
-import { useReducer, useEffect } from "react";
-
-export function createUseInsertLinkTags() {
-    let linkTagsContext:
-        | {
-              styleSheetHrefs: string[];
-              prAreAllStyleSheetsLoaded: Promise<void>;
-              remove: () => void;
-          }
-        | undefined = undefined;
-
-    /** NOTE: The hrefs can't changes. There should be only one one call on this. */
-    function useInsertLinkTags(params: { hrefs: string[] }) {
-        const { hrefs } = params;
-
-        const [areAllStyleSheetsLoaded, setAllStyleSheetLoaded] = useReducer(() => true, hrefs.length === 0);
-
-        useEffect(() => {
-            let isActive = true;
-
-            mount_link_tags: {
-                if (linkTagsContext !== undefined) {
-                    if (JSON.stringify(linkTagsContext.styleSheetHrefs) === JSON.stringify(hrefs)) {
-                        break mount_link_tags;
-                    }
-
-                    linkTagsContext.remove();
-
-                    linkTagsContext = undefined;
+import { useEffect, useReducer } from "react";
+import { useConst } from "keycloakify/tools/useConst";
+import { id } from "tsafe/id";
+import { useOnFistMount } from "keycloakify/tools/useOnFirstMount";
+
+const alreadyMountedComponentOrHookNames = new Set<string>();
+
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different hrefs.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports css stylesheet in the head.
+ */
+export function useInsertLinkTags(params: {
+    componentOrHookName: string;
+    hrefs: string[];
+}) {
+    const { hrefs, componentOrHookName } = params;
+
+    useOnFistMount(() => {
+        const isAlreadyMounted =
+            alreadyMountedComponentOrHookNames.has(componentOrHookName);
+
+        if (isAlreadyMounted) {
+            window.location.reload();
+            return;
+        }
+
+        alreadyMountedComponentOrHookNames.add(componentOrHookName);
+    });
+
+    const [areAllStyleSheetsLoaded, setAllStyleSheetsLoaded] = useReducer(
+        () => true,
+        false
+    );
+
+    const refPrAllStyleSheetLoaded = useConst(() => ({
+        current: id<Promise<void> | undefined>(undefined)
+    }));
+
+    useEffect(() => {
+        let isActive = true;
+
+        (refPrAllStyleSheetLoaded.current ??= (async () => {
+            let lastMountedHtmlElement: HTMLLinkElement | undefined = undefined;
+
+            const prs: Promise<void>[] = [];
+
+            for (const href of hrefs) {
+                const htmlElement = document.createElement("link");
+
+                prs.push(
+                    new Promise<void>(resolve =>
+                        htmlElement.addEventListener("load", () => resolve())
+                    )
+                );
+
+                htmlElement.rel = "stylesheet";
+
+                htmlElement.href = href;
+
+                if (lastMountedHtmlElement !== undefined) {
+                    lastMountedHtmlElement.insertAdjacentElement("afterend", htmlElement);
+                } else {
+                    document.head.prepend(htmlElement);
                 }
 
-                let lastMountedHtmlElement: HTMLLinkElement | undefined = undefined;
-
-                const prs: Promise<void>[] = [];
-                const removeFns: (() => void)[] = [];
-
-                for (const href of hrefs) {
-                    const htmlElement = document.createElement("link");
-
-                    prs.push(new Promise<void>(resolve => htmlElement.addEventListener("load", () => resolve())));
-
-                    htmlElement.rel = "stylesheet";
-
-                    htmlElement.href = href;
-
-                    if (lastMountedHtmlElement !== undefined) {
-                        lastMountedHtmlElement.insertAdjacentElement("afterend", htmlElement);
-                    } else {
-                        document.head.prepend(htmlElement);
-                    }
-
-                    removeFns.push(() => {
-                        htmlElement.remove();
-                    });
-
-                    lastMountedHtmlElement = htmlElement;
-                }
-
-                linkTagsContext = {
-                    "styleSheetHrefs": hrefs,
-                    "prAreAllStyleSheetsLoaded": Promise.all(prs).then(() => undefined),
-                    "remove": () => removeFns.forEach(fn => fn())
-                };
+                lastMountedHtmlElement = htmlElement;
             }
 
-            linkTagsContext.prAreAllStyleSheetsLoaded.then(() => {
-                if (!isActive) {
-                    return;
-                }
-                setAllStyleSheetLoaded();
-            });
+            await Promise.all(prs);
+        })()).then(() => {
+            if (!isActive) {
+                return;
+            }
 
-            return () => {
-                isActive = false;
-            };
-        }, []);
+            setAllStyleSheetsLoaded();
+        });
 
-        return { areAllStyleSheetsLoaded };
-    }
+        return () => {
+            isActive = false;
+        };
+    }, []);
 
-    return { useInsertLinkTags };
+    return { areAllStyleSheetsLoaded };
 }

package/src/tools/useInsertScriptTags.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { useConst } from "keycloakify/tools/useConst";
 import { assert } from "tsafe/assert";
+import { useOnFistMount } from "keycloakify/tools/useOnFirstMount";
 
 export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
 
@@ -17,90 +17,86 @@ export namespace ScriptTag {
     };
 }
 
-export function createUseInsertScriptTags() {
-    let areScriptsInserted = false;
-
-    function useInsertScriptTags(params: { scriptTags: ScriptTag[] }) {
-        const { scriptTags } = params;
+const alreadyMountedComponentOrHookNames = new Set<string>();
+
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different scriptTags.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports javascript in the head.
+ *
+ * The returned function is supposed to be called in a useEffect and
+ * will not download the scripts multiple times event if called more than once (react strict mode).
+ *
+ */
+export function useInsertScriptTags(params: {
+    componentOrHookName: string;
+    scriptTags: ScriptTag[];
+}) {
+    const { scriptTags, componentOrHookName } = params;
+
+    useOnFistMount(() => {
+        const isAlreadyMounted =
+            alreadyMountedComponentOrHookNames.has(componentOrHookName);
+
+        if (isAlreadyMounted) {
+            window.location.reload();
+            return;
+        }
+
+        alreadyMountedComponentOrHookNames.add(componentOrHookName);
+    });
 
-        const currentScriptTagsRef = useConst(() => ({ "current": scriptTags }));
+    let areScriptsInserted = false;
 
-        currentScriptTagsRef.current = scriptTags;
+    const insertScriptTags = useCallback(() => {
+        if (areScriptsInserted) {
+            return;
+        }
 
-        const insertScriptTags = useCallback(() => {
+        scriptTags.forEach(scriptTag => {
+            // NOTE: Avoid loading same script twice. (Like jQuery for example)
             {
-                const getFingerprint = (scriptTags: ScriptTag[]) =>
-                    scriptTags
-                        .map((scriptTag): string => {
-                            if ("textContent" in scriptTag) {
-                                return scriptTag.textContent;
-                            }
-                            if ("src" in scriptTag) {
-                                return scriptTag.src;
-                            }
-                            assert(false);
-                        })
-                        .join("---");
-
-                if (getFingerprint(scriptTags) !== getFingerprint(currentScriptTagsRef.current)) {
-                    // NOTE: This is for when the scripts imported in the Template have changed switching
-                    // from one page to another in storybook.
-                    window.location.reload();
-
-                    return;
-                }
-            }
-
-            if (areScriptsInserted) {
-                return;
-            }
-
-            scriptTags.forEach(scriptTag => {
-                // NOTE: Avoid loading same script twice. (Like jQuery for example)
-                {
-                    const scripts = document.getElementsByTagName("script");
-                    for (let i = 0; i < scripts.length; i++) {
-                        const script = scripts[i];
-                        if ("textContent" in scriptTag) {
-                            if (script.textContent === scriptTag.textContent) {
-                                return;
-                            }
-                            continue;
+                const scripts = document.getElementsByTagName("script");
+                for (let i = 0; i < scripts.length; i++) {
+                    const script = scripts[i];
+                    if ("textContent" in scriptTag) {
+                        if (script.textContent === scriptTag.textContent) {
+                            return;
                         }
-                        if ("src" in scriptTag) {
-                            if (script.getAttribute("src") === scriptTag.src) {
-                                return;
-                            }
-                            continue;
+                        continue;
+                    }
+                    if ("src" in scriptTag) {
+                        if (script.getAttribute("src") === scriptTag.src) {
+                            return;
                         }
-                        assert(false);
+                        continue;
                     }
+                    assert(false);
                 }
+            }
 
-                const htmlElement = document.createElement("script");
-
-                htmlElement.type = scriptTag.type;
+            const htmlElement = document.createElement("script");
 
-                (() => {
-                    if ("textContent" in scriptTag) {
-                        htmlElement.textContent = scriptTag.textContent;
-                        return;
-                    }
-                    if ("src" in scriptTag) {
-                        htmlElement.src = scriptTag.src;
-                        return;
-                    }
-                    assert(false);
-                })();
+            htmlElement.type = scriptTag.type;
 
-                document.head.appendChild(htmlElement);
-            });
+            (() => {
+                if ("textContent" in scriptTag) {
+                    htmlElement.textContent = scriptTag.textContent;
+                    return;
+                }
+                if ("src" in scriptTag) {
+                    htmlElement.src = scriptTag.src;
+                    return;
+                }
+                assert(false);
+            })();
 
-            areScriptsInserted = true;
-        }, []);
+            document.head.appendChild(htmlElement);
+        });
 
-        return { insertScriptTags };
-    }
+        areScriptsInserted = true;
+    }, []);
 
-    return { useInsertScriptTags };
+    return { insertScriptTags };
 }

package/src/tools/useOnFirstMount.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useConst } from "./useConst";
+import { id } from "tsafe/id";
+
+/** Callback is guaranteed to be call only once per component mount event in strict mode */
+export function useOnFistMount(callback: () => void) {
+    const refHasCallbackBeenCalled = useConst(() => ({ current: id<boolean>(false) }));
+
+    useEffect(() => {
+        if (refHasCallbackBeenCalled.current) {
+            return;
+        }
+
+        callback();
+
+        refHasCallbackBeenCalled.current = true;
+    }, []);
+}

package/src/tools/useSetClassName.ts

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
-export function useSetClassName(params: { qualifiedName: "html" | "body"; className: string | undefined }) {
+export function useSetClassName(params: {
+    qualifiedName: "html" | "body";
+    className: string | undefined;
+}) {
     const { qualifiedName, className } = params;
 
     useEffect(() => {