keycloakify 10.0.0-rc.5 → 10.0.0-rc.51

package/src/login/pages/WebauthnError.tsx

@@ -1,7 +1,6 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>, I18n>) {
@@ -11,14 +10,21 @@ export default function WebauthnError(props: PageProps<Extract<KcContext, { page
 
     const { msg, msgStr } = i18n;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage headerNode={msg("webauthn-error-title")}>
-            <form id="kc-error-credential-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage
+            headerNode={msg("webauthn-error-title")}
+        >
+            <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <input type="hidden" id="executionValue" name="authenticationExecution" />
                 <input type="hidden" id="isSetRetry" name="isSetRetry" />
             </form>
@@ -33,26 +39,16 @@ export default function WebauthnError(props: PageProps<Extract<KcContext, { page
                     document.getElementById("kc-error-credential-form").submit();
                 }}
                 type="button"
-                className={clsx(
-                    getClassName("kcButtonClass"),
-                    getClassName("kcButtonPrimaryClass"),
-                    getClassName("kcButtonBlockClass"),
-                    getClassName("kcButtonLargeClass")
-                )}
+                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                 name="try-again"
                 id="kc-try-again"
                 value={msgStr("doTryAgain")}
             />
             {isAppInitiatedAction && (
-                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
                     <button
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonDefaultClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         id="cancelWebAuthnAIA"
                         name="cancel-aia"
                         value="true"

package/src/login/pages/WebauthnRegister.tsx

@@ -1,18 +1,15 @@
 import { useEffect } from "react";
-import { clsx } from "keycloakify/tools/clsx";
-import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import { assert } from "tsafe/assert";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
-import type { KcContext } from "../kcContext";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
     const {
         url,
@@ -35,18 +32,19 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        componentOrHookName: "WebauthnRegister",
+        scriptTags: [
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
             },
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesPath}/js/base64url.js`
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
             },
             {
-                "type": "text/javascript",
-                "textContent": `
+                type: "text/javascript",
+                textContent: `
                 function registerSecurityKey() {
 
                     // Check if WebAuthn is supported by this browser
@@ -207,33 +205,31 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             headerNode={
                 <>
-                    <span className={getClassName("kcWebAuthnKeyIcon")} />
+                    <span className={kcClsx("kcWebAuthnKeyIcon")} />
                     {msg("webauthn-registration-title")}
                 </>
             }
         >
-            <form id="register" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcFormGroupClass")}>
+            <form id="register" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
                     <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
                     <input type="hidden" id="attestationObject" name="attestationObject" />
                     <input type="hidden" id="publicKeyCredentialId" name="publicKeyCredentialId" />
                     <input type="hidden" id="authenticatorLabel" name="authenticatorLabel" />
                     <input type="hidden" id="transports" name="transports" />
                     <input type="hidden" id="error" name="error" />
-                    <LogoutOtherSessions {...{ i18n, getClassName }} />
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
                 </div>
             </form>
             <input
                 type="submit"
-                className={clsx(
-                    getClassName("kcButtonClass"),
-                    getClassName("kcButtonPrimaryClass"),
-                    getClassName("kcButtonBlockClass"),
-                    getClassName("kcButtonLargeClass")
-                )}
+                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                 id="registerWebAuthn"
                 value={msgStr("doRegisterSecurityKey")}
                 onClick={() => {
@@ -244,15 +240,10 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
             />
 
             {!isSetRetry && isAppInitiatedAction && (
-                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
                     <button
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonDefaultClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         id="cancelWebAuthnAIA"
                         name="cancel-aia"
                         value="true"
@@ -265,14 +256,14 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
     );
 }
 
-function LogoutOtherSessions(props: { i18n: I18n; getClassName: ReturnType<typeof useGetClassName>["getClassName"] }) {
-    const { getClassName, i18n } = props;
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
 
     const { msg } = i18n;
 
     return (
-        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-            <div className={getClassName("kcFormOptionsWrapperClass")}>
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
                 <div className="checkbox">
                     <label>
                         <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />

package/src/tools/Array.prototype.every.ts

@@ -17,7 +17,10 @@ if (!Array.prototype.every) {
         var len = O.length >>> 0;
 
         // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
-        if (typeof callbackfn !== "function" && Object.prototype.toString.call(callbackfn) !== "[object Function]") {
+        if (
+            typeof callbackfn !== "function" &&
+            Object.prototype.toString.call(callbackfn) !== "[object Function]"
+        ) {
             throw new TypeError();
         }
 

package/src/tools/ExtractAfterStartingWith.ts

@@ -0,0 +1,4 @@
+export type ExtractAfterStartingWith<
+    Prefix extends string,
+    StrEnum
+> = StrEnum extends `${Prefix}${infer U}` ? U : never;

package/src/tools/LazyOrNot.ts

@@ -1,3 +1,5 @@
 import type { LazyExoticComponent, ComponentType } from "react";
 
-export type LazyOrNot<Component extends ComponentType<any>> = LazyExoticComponent<Component> | Component;
+export type LazyOrNot<Component extends ComponentType<any>> =
+    | LazyExoticComponent<Component>
+    | Component;

package/src/tools/Object.fromEntries.ts

@@ -0,0 +1,23 @@
+if (!(Object as any).fromEntries) {
+    Object.defineProperty(Object, "fromEntries", {
+        value: function (entries: any) {
+            if (!entries || !entries[Symbol.iterator]) {
+                throw new Error(
+                    "Object.fromEntries() requires a single iterable argument"
+                );
+            }
+
+            const o: any = {};
+
+            Object.keys(entries).forEach(key => {
+                const [k, v] = entries[key];
+
+                o[k] = v;
+            });
+
+            return o;
+        }
+    });
+}
+
+export {};

package/src/tools/StatefulObservable/README.md

@@ -0,0 +1,16 @@
+`StatefulObservable` is a construct that allow to avoid having to depend on [EVT](https://evt.land).
+
+A `StatefulObservable` can be converted to an evt with:
+
+```ts
+import { statefulObservableToStatefulEvt } from "powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt";
+
+const evtXyz = statefulObservableToStatefulEvt({
+    statefulObservable: $xyz
+    //Optionally you can pass a Ctx
+});
+```
+
+WARNING: Unlike `StatefulEvt`, `StatefulObservable` do not post when we first attach.
+If the current value was not yet evaluated `next()` is called on the initial value returned by the function that
+returns it.

package/src/tools/StatefulObservable/StatefulObservable.ts

@@ -0,0 +1,58 @@
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+
+export type StatefulObservable<T> = {
+    current: T;
+    subscribe: (next: (data: T) => void) => Subscription;
+};
+
+export type Subscription = {
+    unsubscribe(): void;
+};
+
+export function createStatefulObservable<T>(
+    getInitialValue: () => T
+): StatefulObservable<T> {
+    const nextFunctions: ((data: T) => void)[] = [];
+
+    const { get, set } = (() => {
+        let wrappedState: [T] | undefined = undefined;
+
+        function set(data: T) {
+            wrappedState = [data];
+
+            nextFunctions.forEach(next => next(data));
+        }
+
+        return {
+            get: () => {
+                if (wrappedState === undefined) {
+                    set(getInitialValue());
+                    assert(!is<undefined>(wrappedState));
+                }
+                return wrappedState[0];
+            },
+            set
+        };
+    })();
+
+    return Object.defineProperty(
+        {
+            current: null as any as T,
+            subscribe: (next: (data: T) => void) => {
+                nextFunctions.push(next);
+
+                return {
+                    unsubscribe: () =>
+                        nextFunctions.splice(nextFunctions.indexOf(next), 1)
+                };
+            }
+        },
+        "current",
+        {
+            enumerable: true,
+            get,
+            set
+        }
+    );
+}

package/src/tools/StatefulObservable/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useObservable";
+export * from "./useRerenderOnChange";

package/src/tools/StatefulObservable/hooks/useObservable.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import type { Subscription } from "../StatefulObservable";
+
+/**
+ * Equivalent of https://docs.evt.land/api/react-hooks
+ */
+export function useObservable(
+    effect: (params: {
+        registerSubscription: (subscription: Subscription) => void;
+    }) => void,
+    deps: React.DependencyList
+): void {
+    useEffect(() => {
+        const subscriptions: Subscription[] = [];
+
+        effect({
+            registerSubscription: subscription => subscriptions.push(subscription)
+        });
+
+        return () => {
+            subscriptions.forEach(subscription => subscription.unsubscribe());
+            subscriptions.length = 0;
+        };
+    }, deps);
+}

package/src/tools/StatefulObservable/hooks/useRerenderOnChange.ts

@@ -0,0 +1,19 @@
+import { useObservable } from "./useObservable";
+import { useState } from "react";
+import type { StatefulObservable } from "../StatefulObservable";
+
+/**
+ * Equivalent of https://docs.evt.land/api/react-hooks
+ * */
+export function useRerenderOnChange(obs: StatefulObservable<unknown>): void {
+    //NOTE: We use function in case the state is a function
+    const [, setCurrent] = useState(() => obs.current);
+
+    useObservable(
+        ({ registerSubscription }) => {
+            const subscription = obs.subscribe(current => setCurrent(() => current));
+            registerSubscription(subscription);
+        },
+        [obs]
+    );
+}

package/src/tools/StatefulObservable/index.ts

@@ -0,0 +1,2 @@
+export * from "./StatefulObservable";
+export * from "./hooks";

package/src/tools/ValueOf.ts

@@ -0,0 +1,2 @@
+/** Pendant of `keyof T` */
+export type ValueOf<T> = T[keyof T];

package/src/tools/clsx.ts

@@ -1,44 +1,8 @@
-import { assert } from "tsafe/assert";
-import { typeGuard } from "tsafe/typeGuard";
+import { id } from "tsafe";
+import { clsx_withTransform, type CxArg as CxArg_generic } from "./clsx_withTransform";
 
-export type CxArg = undefined | null | string | boolean | Partial<Record<string, boolean | null | undefined>> | readonly CxArg[];
+export type CxArg = CxArg_generic<string>;
 
-export const clsx = (...args: CxArg[]): string => {
-    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(...arg);
-                } else {
-                    assert(!typeGuard<{ length: number }>(arg, false));
-
-                    toAdd = "";
-                    for (const k in arg) {
-                        if (arg[k as string] && k) {
-                            toAdd && (toAdd += " ");
-                            toAdd += k;
-                        }
-                    }
-                }
-                break;
-            }
-            default: {
-                toAdd = arg;
-            }
-        }
-        if (toAdd) {
-            cls && (cls += " ");
-            cls += toAdd;
-        }
-    }
-    return cls;
-};
+export function clsx(...args: CxArg[]): string {
+    return clsx_withTransform({ args, transform: id });
+}

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;