keycloakify 10.0.0-rc.97 → 10.0.0

package/src/tools/useInsertLinkTags.ts

@@ -22,7 +22,15 @@ export function useInsertLinkTags(params: {
             alreadyMountedComponentOrHookNames.has(componentOrHookName);
 
         if (isAlreadyMounted) {
-            window.location.reload();
+            reload: {
+                if (
+                    new URL(window.location.href).searchParams.get("viewMode") === "docs"
+                ) {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
             return;
         }
 

package/src/tools/useInsertScriptTags.ts

@@ -40,7 +40,15 @@ export function useInsertScriptTags(params: {
             alreadyMountedComponentOrHookNames.has(componentOrHookName);
 
         if (isAlreadyMounted) {
-            window.location.reload();
+            reload: {
+                if (
+                    new URL(window.location.href).searchParams.get("viewMode") === "docs"
+                ) {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
             return;
         }
 

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

@@ -1,9 +1,9 @@
 import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
 import type { Plugin } from "vite";
 import {
-    basenameOfTheKeycloakifyResourcesDir,
-    keycloak_resources,
-    vitePluginSubScriptEnvNames
+    BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR,
+    KEYCLOAK_RESOURCES,
+    VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES
 } from "../bin/shared/constants";
 import { id } from "tsafe/id";
 import { rm } from "../bin/tools/fs.rm";
@@ -18,12 +18,14 @@ import {
 import MagicString from "magic-string";
 import { generateKcGenTs } from "../bin/shared/generateKcGenTs";
 
-export type Params = BuildOptions & {
-    postBuild?: (buildContext: Omit<BuildContext, "bundler">) => Promise<void>;
-};
+export namespace keycloakify {
+    export type Params = BuildOptions & {
+        postBuild?: (buildContext: Omit<BuildContext, "bundler">) => Promise<void>;
+    };
+}
 
-export function keycloakify(params?: Params) {
-    const { postBuild, ...buildOptions } = params ?? {};
+export function keycloakify(params: keycloakify.Params) {
+    const { postBuild, ...buildOptions } = params;
 
     let projectDirPath: string | undefined = undefined;
     let urlPathname: string | undefined = undefined;
@@ -38,7 +40,7 @@ export function keycloakify(params?: Params) {
 
             run_post_build_script_case: {
                 const envValue =
-                    process.env[vitePluginSubScriptEnvNames.runPostBuildScript];
+                    process.env[VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES.RUN_POST_BUILD_SCRIPT];
 
                 if (envValue === undefined) {
                     break run_post_build_script_case;
@@ -94,13 +96,13 @@ export function keycloakify(params?: Params) {
 
             resolve_vite_config_case: {
                 const envValue =
-                    process.env[vitePluginSubScriptEnvNames.resolveViteConfig];
+                    process.env[VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES.RESOLVE_VITE_CONFIG];
 
                 if (envValue === undefined) {
                     break resolve_vite_config_case;
                 }
 
-                console.log(vitePluginSubScriptEnvNames.resolveViteConfig);
+                console.log(VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES.RESOLVE_VITE_CONFIG);
 
                 console.log(
                     JSON.stringify(
@@ -172,7 +174,7 @@ export function keycloakify(params?: Params) {
                     `(`,
                     `(window.kcContext === undefined || import.meta.env.MODE === "development")?`,
                     `"${urlPathname ?? "/"}":`,
-                    `(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/")`,
+                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/")`,
                     `)`
                 ].join("")
             );
@@ -205,7 +207,7 @@ export function keycloakify(params?: Params) {
 
             assert(buildDirPath !== undefined);
 
-            await rm(pathJoin(buildDirPath, keycloak_resources), {
+            await rm(pathJoin(buildDirPath, KEYCLOAK_RESOURCES), {
                 recursive: true,
                 force: true
             });

package/stories/account/pages/Applications.stories.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "applications.ftl" });
+
+const meta = {
+    title: "account/applications.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "applications.ftl",
+                applications: {
+                    applications: [
+                        {
+                            realmRolesAvailable: [
+                                {
+                                    name: "realmRoleName1",
+                                    description: "realm role description 1"
+                                },
+                                {
+                                    name: "realmRoleName2",
+                                    description: "realm role description 2"
+                                }
+                            ],
+                            resourceRolesAvailable: {
+                                resource1: [
+                                    {
+                                        roleName: "Resource Role Name 1",
+                                        roleDescription: "Resource role 1 description",
+                                        clientName: "Client Name 1",
+                                        clientId: "client1"
+                                    }
+                                ],
+                                resource2: [
+                                    {
+                                        roleName: "Resource Role Name 2",
+                                        clientName: "Client Name 1",
+                                        clientId: "client1"
+                                    }
+                                ]
+                            },
+                            additionalGrants: ["grant1", "grant2"],
+                            clientScopesGranted: ["scope1", "scope2"],
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application1",
+                                name: "Application 1",
+                                consentRequired: true
+                            }
+                        },
+                        {
+                            realmRolesAvailable: [
+                                {
+                                    name: "Realm Role Name 1"
+                                }
+                            ],
+                            resourceRolesAvailable: {},
+                            additionalGrants: [],
+                            clientScopesGranted: [],
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application2",
+                                name: "Application 2"
+                            }
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};

package/stories/account/pages/Log.stories.tsx

@@ -15,6 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+// NOTE: Enable in your Keycloak realm with: https://github.com/user-attachments/assets/5fc5e49e-a172-4cb0-897a-49baac284b47
 export const Default: Story = {
     render: () => (
         <KcPageStory

package/stories/account-spa/index.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { tss } from "../tss";
+// @ts-expect-error
+import screenshotPngUrl from "./screenshot.png";
+
+const meta = {
+    title: "Account SPA/index.ftl"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NotInStorybookButSupported: Story = {
+    render: () => <AccountSpa />
+};
+
+function AccountSpa() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <p>
+                    Keycloakify offers two option for creating an account theme:{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page" target="_blank">
+                        Multi Page
+                    </a>{" "}
+                    or{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#single-page" target="_blank">
+                        Single Page
+                    </a>
+                    . Since the account Single Page does not support Storybook, here is a screenshot of it's default look:
+                    <br />
+                    <br />
+                    <img className={classes.screenshot} alt="image" src={screenshotPngUrl} />
+                    <br />
+                    <a href="https://docs.keycloakify.dev/account-theme" target="_blank">
+                        Learn more
+                    </a>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ AccountSpa }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center",
+        marginTop: 100
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    },
+    screenshot: {
+        maxWidth: "100%"
+    }
+}));

package/stories/intro/intro.stories.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { useOnFistMount } from "../../dist/tools/useOnFirstMount";
+import { tss } from "../tss";
+
+const meta = {
+    title: "Introduction"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WhatIsThisWebsite: Story = {
+    render: () => <Introduction />
+};
+
+function Introduction() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <div className={classes.keycloakifyLogoWrapper}>
+                    <KeycloakifyRotatingLogo className={classes.keycloakifyLogo} />
+                </div>
+                <h1>
+                    <a href={theme.brandUrl}>Keycloakify </a> Storybook
+                </h1>
+
+                <p>
+                    This website showcases all the Keycloak user-facing pages of the Login and{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page">Account Multi-Page theme</a>.<br />
+                    The storybook serves as a reference to help you determine which pages you would like to personalize.
+                    <br />
+                    These pages are a direct React adaptation of the{" "}
+                    <a href="https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base" target="_blank">
+                        built-in FreeMarker Keycloak pages
+                    </a>
+                    .
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ Introduction }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center"
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    }
+}));

package/stories/login/pages/Info.stories.tsx

@@ -43,9 +43,14 @@ export const WithRequiredActions: Story = {
         <KcPageStory
             kcContext={{
                 message: {
-                    summary: "Server message"
+                    summary: "Required actions: "
                 },
-                requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"]
+                requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL", "CUSTOM_ACTION"],
+                "x-keycloakify": {
+                    messages: {
+                        "requiredAction.CUSTOM_ACTION": "Custom action"
+                    }
+                }
             }}
         />
     )

package/stories/login/pages/Login.stories.tsx

@@ -122,73 +122,85 @@ export const WithSocialProviders: Story = {
                             loginUrl: "google",
                             alias: "google",
                             providerId: "google",
-                            displayName: "Google"
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
                         },
                         {
                             loginUrl: "microsoft",
                             alias: "microsoft",
                             providerId: "microsoft",
-                            displayName: "Microsoft"
+                            displayName: "Microsoft",
+                            iconClasses: "fa fa-windows"
                         },
                         {
                             loginUrl: "facebook",
                             alias: "facebook",
                             providerId: "facebook",
-                            displayName: "Facebook"
+                            displayName: "Facebook",
+                            iconClasses: "fa fa-facebook"
                         },
                         {
                             loginUrl: "instagram",
                             alias: "instagram",
                             providerId: "instagram",
-                            displayName: "Instagram"
+                            displayName: "Instagram",
+                            iconClasses: "fa fa-instagram"
                         },
                         {
                             loginUrl: "twitter",
                             alias: "twitter",
                             providerId: "twitter",
-                            displayName: "Twitter"
+                            displayName: "Twitter",
+                            iconClasses: "fa fa-twitter"
                         },
                         {
                             loginUrl: "linkedin",
                             alias: "linkedin",
                             providerId: "linkedin",
-                            displayName: "LinkedIn"
+                            displayName: "LinkedIn",
+                            iconClasses: "fa fa-linkedin"
                         },
                         {
                             loginUrl: "stackoverflow",
                             alias: "stackoverflow",
                             providerId: "stackoverflow",
-                            displayName: "Stackoverflow"
+                            displayName: "Stackoverflow",
+                            iconClasses: "fa fa-stack-overflow"
                         },
                         {
                             loginUrl: "github",
                             alias: "github",
                             providerId: "github",
-                            displayName: "Github"
+                            displayName: "Github",
+                            iconClasses: "fa fa-github"
                         },
                         {
                             loginUrl: "gitlab",
                             alias: "gitlab",
                             providerId: "gitlab",
-                            displayName: "Gitlab"
+                            displayName: "Gitlab",
+                            iconClasses: "fa fa-gitlab"
                         },
                         {
                             loginUrl: "bitbucket",
                             alias: "bitbucket",
                             providerId: "bitbucket",
-                            displayName: "Bitbucket"
+                            displayName: "Bitbucket",
+                            iconClasses: "fa fa-bitbucket"
                         },
                         {
                             loginUrl: "paypal",
                             alias: "paypal",
                             providerId: "paypal",
-                            displayName: "PayPal"
+                            displayName: "PayPal",
+                            iconClasses: "fa fa-paypal"
                         },
                         {
                             loginUrl: "openshift",
                             alias: "openshift",
                             providerId: "openshift",
-                            displayName: "OpenShift"
+                            displayName: "OpenShift",
+                            iconClasses: "fa fa-cloud"
                         }
                     ]
                 }
@@ -212,7 +224,7 @@ export const WithErrorMessage: Story = {
         <KcPageStory
             kcContext={{
                 message: {
-                    summary: "The time allotted for the connection has elapsed. The login process will restart from the beginning.",
+                    summary: "The time allotted for the connection has elapsed.<br/>The login process will restart from the beginning.",
                     type: "error"
                 }
             }}

package/stories/login/pages/Register.stories.tsx

@@ -69,9 +69,9 @@ export const WithRestrictedToMITStudents: Story = {
                     }
                 },
                 "x-keycloakify": {
-                    realmMessageBundleUserProfile: {
-                        "${profile.attributes.email.inputHelperTextBefore}": "Please use your MIT or Berkeley email.",
-                        "${profile.attributes.email.pattern.error}":
+                    messages: {
+                        "profile.attributes.email.inputHelperTextBefore": "Please use your MIT or Berkeley email.",
+                        "profile.attributes.email.pattern.error":
                             "This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email."
                     }
                 }
@@ -103,11 +103,11 @@ export const WithFavoritePet: Story = {
                     }
                 },
                 "x-keycloakify": {
-                    realmMessageBundleUserProfile: {
-                        "${profile.attributes.favoritePet}": "Favorite Pet",
-                        "${profile.attributes.favoritePet.options.cat}": "Fluffy Cat",
-                        "${profile.attributes.favoritePet.options.dog}": "Loyal Dog",
-                        "${profile.attributes.favoritePet.options.fish}": "Peaceful Fish"
+                    messages: {
+                        "profile.attributes.favoritePet": "Favorite Pet",
+                        "profile.attributes.favoritePet.options.cat": "Fluffy Cat",
+                        "profile.attributes.favoritePet.options.dog": "Loyal Dog",
+                        "profile.attributes.favoritePet.options.fish": "Peaceful Fish"
                     }
                 }
             }}
@@ -177,7 +177,9 @@ export const WithTermsAcceptance: Story = {
             kcContext={{
                 termsAcceptanceRequired: true,
                 "x-keycloakify": {
-                    realmMessageBundleTermsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                    messages: {
+                        termsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                    }
                 }
             }}
         />

package/stories/login/pages/SelectAuthenticator.stories.tsx

@@ -41,3 +41,44 @@ export const WithDifferentAuthenticationMethods: Story = {
         />
     )
 };
+
+export const WithRealmTranslations: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                auth: {
+                    authenticationSelections: [
+                        {
+                            authExecId: "f0c22855-eda7-4092-8565-0c22f77d2ffb",
+                            displayName: "home-idp-discovery-display-name",
+                            helpText: "home-idp-discovery-help-text",
+                            iconCssClass: "kcAuthenticatorDefaultClass"
+                        },
+                        {
+                            authExecId: "20456f5a-8b2b-45f3-98e0-551dcb27e3e1",
+                            displayName: "identity-provider-redirctor-display-name",
+                            helpText: "identity-provider-redirctor-help-text",
+                            iconCssClass: "kcAuthenticatorDefaultClass"
+                        },
+                        {
+                            authExecId: "eb435db9-474e-473a-8da7-c184fa510b96",
+                            displayName: "auth-username-password-form-display-name",
+                            helpText: "auth-username-password-help-text",
+                            iconCssClass: "kcAuthenticatorDefaultClass"
+                        }
+                    ]
+                },
+                "x-keycloakify": {
+                    messages: {
+                        "home-idp-discovery-display-name": "Home identity provider",
+                        "home-idp-discovery-help-text":
+                            "Sign in via your home identity provider which will be automatically determined based on your provided email address.",
+                        "identity-provider-redirctor-display-name": "Identity Provider Redirector",
+                        "identity-provider-redirctor-help-text": "Sign in via your identity provider.",
+                        "auth-username-password-help-text": "Sign in via your username and password."
+                    }
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/Terms.stories.tsx

@@ -18,7 +18,9 @@ export const Default: Story = {
         <KcPageStory
             kcContext={{
                 "x-keycloakify": {
-                    realmMessageBundleTermsText: "<p>My terms in <strong>English</strong></p>"
+                    messages: {
+                        termsText: "<p>My terms in <strong>English</strong></p>"
+                    }
                 }
             }}
         />
@@ -34,7 +36,9 @@ export const French: Story = {
                 },
                 "x-keycloakify": {
                     // cSpell: disable
-                    realmMessageBundleTermsText: "<p>Mes terme en <strong>Français</strong></p>"
+                    messages: {
+                        termsText: "<p>Mes terme en <strong>Français</strong></p>"
+                    }
                     // cSpell: enable
                 }
             }}

package/tools/useInsertLinkTags.js

@@ -14,7 +14,13 @@ export function useInsertLinkTags(params) {
     useOnFistMount(() => {
         const isAlreadyMounted = alreadyMountedComponentOrHookNames.has(componentOrHookName);
         if (isAlreadyMounted) {
-            window.location.reload();
+            reload: {
+                if (new URL(window.location.href).searchParams.get("viewMode") === "docs") {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
             return;
         }
         alreadyMountedComponentOrHookNames.add(componentOrHookName);

package/tools/useInsertLinkTags.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInsertLinkTags.js","sourceRoot":"","sources":["../src/tools/useInsertLinkTags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,kCAAkC,GAAG,IAAI,GAAG,EAAU,CAAC;AAE7D;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAGjC;IACG,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAE9C,cAAc,CAAC,GAAG,EAAE;QAChB,MAAM,gBAAgB,GAClB,kCAAkC,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAEhE,IAAI,gBAAgB,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACzB,OAAO;SACV;QAED,kCAAkC,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,GAAG,UAAU,CACjE,GAAG,EAAE,CAAC,IAAI,EACV,KAAK,CACR,CAAC;IAEF,MAAM,wBAAwB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7C,OAAO,EAAE,EAAE,CAA4B,SAAS,CAAC;KACpD,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;;QACX,IAAI,QAAQ,GAAG,IAAI,CAAC;QAEpB,OAAC,wBAAwB,CAAC,OAAO,oCAAhC,wBAAwB,CAAC,OAAO,GAAK,CAAC,KAAK,IAAI,EAAE;YAC9C,IAAI,sBAAsB,GAAgC,SAAS,CAAC;YAEpE,MAAM,GAAG,GAAoB,EAAE,CAAC;YAEhC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACtB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAEnD,GAAG,CAAC,IAAI,CACJ,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE,CACxB,WAAW,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CACxD,CACJ,CAAC;gBAEF,WAAW,CAAC,GAAG,GAAG,YAAY,CAAC;gBAE/B,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC;gBAExB,IAAI,sBAAsB,KAAK,SAAS,EAAE;oBACtC,sBAAsB,CAAC,qBAAqB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;iBACzE;qBAAM;oBACH,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;iBACtC;gBAED,sBAAsB,GAAG,WAAW,CAAC;aACxC;YAED,MAAM,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC,CAAC,EAAE,EAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,QAAQ,EAAE;gBACX,OAAO;aACV;YAED,uBAAuB,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,QAAQ,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACvC,CAAC"}
+{"version":3,"file":"useInsertLinkTags.js","sourceRoot":"","sources":["../src/tools/useInsertLinkTags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,kCAAkC,GAAG,IAAI,GAAG,EAAU,CAAC;AAE7D;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAGjC;IACG,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAE9C,cAAc,CAAC,GAAG,EAAE;QAChB,MAAM,gBAAgB,GAClB,kCAAkC,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAEhE,IAAI,gBAAgB,EAAE;YAClB,MAAM,EAAE;gBACJ,IACI,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,MAAM,EACvE;oBACE,2EAA2E;oBAC3E,MAAM,MAAM,CAAC;iBAChB;gBACD,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;aAC5B;YACD,OAAO;SACV;QAED,kCAAkC,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,GAAG,UAAU,CACjE,GAAG,EAAE,CAAC,IAAI,EACV,KAAK,CACR,CAAC;IAEF,MAAM,wBAAwB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7C,OAAO,EAAE,EAAE,CAA4B,SAAS,CAAC;KACpD,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;;QACX,IAAI,QAAQ,GAAG,IAAI,CAAC;QAEpB,OAAC,wBAAwB,CAAC,OAAO,oCAAhC,wBAAwB,CAAC,OAAO,GAAK,CAAC,KAAK,IAAI,EAAE;YAC9C,IAAI,sBAAsB,GAAgC,SAAS,CAAC;YAEpE,MAAM,GAAG,GAAoB,EAAE,CAAC;YAEhC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACtB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAEnD,GAAG,CAAC,IAAI,CACJ,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE,CACxB,WAAW,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CACxD,CACJ,CAAC;gBAEF,WAAW,CAAC,GAAG,GAAG,YAAY,CAAC;gBAE/B,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC;gBAExB,IAAI,sBAAsB,KAAK,SAAS,EAAE;oBACtC,sBAAsB,CAAC,qBAAqB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;iBACzE;qBAAM;oBACH,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;iBACtC;gBAED,sBAAsB,GAAG,WAAW,CAAC;aACxC;YAED,MAAM,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC,CAAC,EAAE,EAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,QAAQ,EAAE;gBACX,OAAO;aACV;YAED,uBAAuB,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,QAAQ,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACvC,CAAC"}

package/tools/useInsertScriptTags.js

@@ -17,7 +17,13 @@ export function useInsertScriptTags(params) {
     useOnFistMount(() => {
         const isAlreadyMounted = alreadyMountedComponentOrHookNames.has(componentOrHookName);
         if (isAlreadyMounted) {
-            window.location.reload();
+            reload: {
+                if (new URL(window.location.href).searchParams.get("viewMode") === "docs") {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
             return;
         }
         alreadyMountedComponentOrHookNames.add(componentOrHookName);