keycloakify 10.0.0-rc.8 → 10.0.0-rc.80

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(() => {

package/src/vite-plugin/vite-plugin.ts

@@ -1,52 +1,72 @@
 import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
 import type { Plugin } from "vite";
-import { nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir, keycloak_resources, vitePluginSubScriptEnvNames } from "../bin/shared/constants";
+import {
+    basenameOfTheKeycloakifyResourcesDir,
+    keycloak_resources,
+    vitePluginSubScriptEnvNames
+} from "../bin/shared/constants";
 import { id } from "tsafe/id";
 import { rm } from "../bin/tools/fs.rm";
 import { copyKeycloakResourcesToPublic } from "../bin/shared/copyKeycloakResourcesToPublic";
 import { assert } from "tsafe/assert";
-import { readBuildOptions, type BuildOptions, type UserProvidedBuildOptions, type ResolvedViteConfig } from "../bin/shared/buildOptions";
+import {
+    getBuildContext,
+    type BuildContext,
+    type BuildOptions,
+    type ResolvedViteConfig
+} from "../bin/shared/buildContext";
 import MagicString from "magic-string";
+import { generateKcGenTs } from "../bin/shared/generateKcGenTs";
 
-export type Params = UserProvidedBuildOptions & {
-    postBuild?: (buildOptions: Omit<BuildOptions, "bundler">) => Promise<void>;
+export type Params = BuildOptions & {
+    postBuild?: (buildContext: Omit<BuildContext, "bundler">) => Promise<void>;
 };
 
 export function keycloakify(params?: Params) {
-    const { postBuild, ...userProvidedBuildOptions } = params ?? {};
+    const { postBuild, ...buildOptions } = params ?? {};
 
-    let reactAppRootDirPath: string | undefined = undefined;
+    let projectDirPath: string | undefined = undefined;
     let urlPathname: string | undefined = undefined;
     let buildDirPath: string | undefined = undefined;
     let command: "build" | "serve" | undefined = undefined;
     let shouldGenerateSourcemap: boolean | undefined = undefined;
 
     const plugin = {
-        "name": "keycloakify" as const,
-        "configResolved": async resolvedConfig => {
+        name: "keycloakify",
+        configResolved: async resolvedConfig => {
             shouldGenerateSourcemap = resolvedConfig.build.sourcemap !== false;
 
             run_post_build_script_case: {
-                const envValue = process.env[vitePluginSubScriptEnvNames.runPostBuildScript];
+                const envValue =
+                    process.env[vitePluginSubScriptEnvNames.runPostBuildScript];
 
                 if (envValue === undefined) {
                     break run_post_build_script_case;
                 }
 
-                const buildOptions = JSON.parse(envValue) as BuildOptions;
+                const { buildContext, resourcesDirPath } = JSON.parse(envValue) as {
+                    buildContext: BuildContext;
+                    resourcesDirPath: string;
+                };
 
-                await postBuild?.(buildOptions);
+                process.chdir(resourcesDirPath);
+
+                await postBuild?.(buildContext);
 
                 process.exit(0);
             }
 
             command = resolvedConfig.command;
 
-            reactAppRootDirPath = resolvedConfig.root;
+            projectDirPath = resolvedConfig.root;
             urlPathname = (() => {
                 let out = resolvedConfig.env.BASE_URL;
 
-                if (out.startsWith(".") && command === "build" && resolvedConfig.envPrefix?.includes("STORYBOOK_") !== true) {
+                if (
+                    out.startsWith(".") &&
+                    command === "build" &&
+                    resolvedConfig.envPrefix?.includes("STORYBOOK_") !== true
+                ) {
                     throw new Error(
                         [
                             `BASE_URL=${out} is not supported By Keycloakify. Use an absolute path instead.`,
@@ -70,10 +90,11 @@ export function keycloakify(params?: Params) {
                 return out;
             })();
 
-            buildDirPath = pathJoin(reactAppRootDirPath, resolvedConfig.build.outDir);
+            buildDirPath = pathJoin(projectDirPath, resolvedConfig.build.outDir);
 
             resolve_vite_config_case: {
-                const envValue = process.env[vitePluginSubScriptEnvNames.resolveViteConfig];
+                const envValue =
+                    process.env[vitePluginSubScriptEnvNames.resolveViteConfig];
 
                 if (envValue === undefined) {
                     break resolve_vite_config_case;
@@ -84,11 +105,14 @@ export function keycloakify(params?: Params) {
                 console.log(
                     JSON.stringify(
                         id<ResolvedViteConfig>({
-                            "publicDir": pathRelative(reactAppRootDirPath, resolvedConfig.publicDir),
-                            "assetsDir": resolvedConfig.build.assetsDir,
-                            "buildDir": resolvedConfig.build.outDir,
+                            publicDir: pathRelative(
+                                projectDirPath,
+                                resolvedConfig.publicDir
+                            ),
+                            assetsDir: resolvedConfig.build.assetsDir,
+                            buildDir: resolvedConfig.build.outDir,
                             urlPathname,
-                            userProvidedBuildOptions
+                            buildOptions
                         })
                     )
                 );
@@ -96,15 +120,22 @@ export function keycloakify(params?: Params) {
                 process.exit(0);
             }
 
-            await copyKeycloakResourcesToPublic({
-                "buildOptions": readBuildOptions({
-                    "cliCommandOptions": {
-                        reactAppRootDirPath
-                    }
-                })
+            const buildContext = getBuildContext({
+                cliCommandOptions: {
+                    projectDirPath
+                }
             });
+
+            await Promise.all([
+                copyKeycloakResourcesToPublic({
+                    buildContext
+                }),
+                generateKcGenTs({
+                    buildContext
+                })
+            ]);
         },
-        "transform": (code, id) => {
+        transform: (code, id) => {
             assert(command !== undefined);
             assert(shouldGenerateSourcemap !== undefined);
 
@@ -112,10 +143,12 @@ export function keycloakify(params?: Params) {
                 return;
             }
 
-            assert(reactAppRootDirPath !== undefined);
+            assert(projectDirPath !== undefined);
 
             {
-                const isWithinSourceDirectory = id.startsWith(pathJoin(reactAppRootDirPath, "src") + pathSep);
+                const isWithinSourceDirectory = id.startsWith(
+                    pathJoin(projectDirPath, "src") + pathSep
+                );
 
                 if (!isWithinSourceDirectory) {
                     return;
@@ -137,9 +170,9 @@ export function keycloakify(params?: Params) {
                 /import\.meta\.env(?:(?:\.BASE_URL)|(?:\["BASE_URL"\]))/g,
                 [
                     `(`,
-                    `(window.${nameOfTheGlobal} === undefined || import.meta.env.MODE === "development")?`,
+                    `(window.kcContext === undefined || import.meta.env.MODE === "development")?`,
                     `"${urlPathname ?? "/"}":`,
-                    `(window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/")`,
+                    `(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/")`,
                     `)`
                 ].join("")
             );
@@ -153,17 +186,17 @@ export function keycloakify(params?: Params) {
             }
 
             const map = transformedCode.generateMap({
-                "source": id,
-                "includeContent": true,
-                "hires": true
+                source: id,
+                includeContent: true,
+                hires: true
             });
 
             return {
-                "code": transformedCode.toString(),
-                "map": map.toString()
+                code: transformedCode.toString(),
+                map: map.toString()
             };
         },
-        "closeBundle": async () => {
+        closeBundle: async () => {
             assert(command !== undefined);
 
             if (command !== "build") {
@@ -172,7 +205,10 @@ export function keycloakify(params?: Params) {
 
             assert(buildDirPath !== undefined);
 
-            await rm(pathJoin(buildDirPath, keycloak_resources), { "recursive": true, "force": true });
+            await rm(pathJoin(buildDirPath, keycloak_resources), {
+                recursive: true,
+                force: true
+            });
         }
     } satisfies Plugin;
 

package/stories/account/pages/Account.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "account.ftl" });
+
+const meta = {
+    title: "account/account.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/account/pages/FederatedIdentity.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "federatedIdentity.ftl" });
+
+const meta = {
+    title: "account/federatedIdentity.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+export const NotConnected: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "federatedIdentity.ftl",
+                federatedIdentity: {
+                    identities: [
+                        {
+                            providerId: "google",
+                            displayName: "keycloak-oidc",
+                            connected: false
+                        }
+                    ],
+                    removeLinkPossible: true
+                }
+            }}
+        />
+    )
+};