keycloakify 10.0.0-rc.121 → 10.0.0-rc.123

package/bin/453.index.js

@@ -41,11 +41,63 @@ async function command(params) {
         cliCommandOptions
     });
     console.log(chalk__WEBPACK_IMPORTED_MODULE_9___default().cyan("Theme type:"));
-    const { value: themeType } = await cli_select__WEBPACK_IMPORTED_MODULE_1___default()({
-        values: [..._shared_constants__WEBPACK_IMPORTED_MODULE_2__/* .THEME_TYPES */ .Jh]
-    }).catch(() => {
-        process.exit(-1);
-    });
+    const themeType = await (async () => {
+        const values = _shared_constants__WEBPACK_IMPORTED_MODULE_2__/* .THEME_TYPES.filter */ .Jh.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            (0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(false);
+        });
+        (0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(values.length > 0, "No theme is implemented in this project");
+        if (values.length === 1) {
+            return values[0];
+        }
+        const { value } = await cli_select__WEBPACK_IMPORTED_MODULE_1___default()({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+        return value;
+    })();
+    if (themeType === "account" &&
+        ((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(buildContext.implementedThemeTypes.account.isImplemented),
+            buildContext.implementedThemeTypes.account.type === "Single-Page")) {
+        const srcDirPath = (0,path__WEBPACK_IMPORTED_MODULE_5__.join)((0,path__WEBPACK_IMPORTED_MODULE_5__.dirname)(buildContext.packageJsonFilePath), "node_modules", "@keycloakify", "keycloak-account-ui", "src");
+        console.log([
+            `There isn't an interactive CLI to eject components of the Single-Page Account theme.`,
+            `You can however copy paste into your codebase the any file or directory from the following source directory:`,
+            ``,
+            `${chalk__WEBPACK_IMPORTED_MODULE_9___default().bold((0,path__WEBPACK_IMPORTED_MODULE_5__.join)((0,path__WEBPACK_IMPORTED_MODULE_5__.relative)(process.cwd(), srcDirPath)))}`,
+            ``
+        ].join("\n"));
+        eject_entrypoint: {
+            const kcAccountUiTsxFileRelativePath = "KcAccountUi.tsx";
+            const accountThemeSrcDirPath = (0,path__WEBPACK_IMPORTED_MODULE_5__.join)(buildContext.themeSrcDirPath, "account");
+            const targetFilePath = (0,path__WEBPACK_IMPORTED_MODULE_5__.join)(accountThemeSrcDirPath, kcAccountUiTsxFileRelativePath);
+            if (fs__WEBPACK_IMPORTED_MODULE_4__.existsSync(targetFilePath)) {
+                break eject_entrypoint;
+            }
+            fs__WEBPACK_IMPORTED_MODULE_4__.cpSync((0,path__WEBPACK_IMPORTED_MODULE_5__.join)(srcDirPath, kcAccountUiTsxFileRelativePath), targetFilePath);
+            {
+                const kcPageTsxFilePath = (0,path__WEBPACK_IMPORTED_MODULE_5__.join)(accountThemeSrcDirPath, "KcPage.tsx");
+                const kcPageTsxCode = fs__WEBPACK_IMPORTED_MODULE_4__.readFileSync(kcPageTsxFilePath).toString("utf8");
+                const componentName = (0,path__WEBPACK_IMPORTED_MODULE_5__.basename)(kcAccountUiTsxFileRelativePath).replace(/.tsx$/, "");
+                const modifiedKcPageTsxCode = kcPageTsxCode.replace(`@keycloakify/keycloak-account-ui/${componentName}`, `./${componentName}`);
+                fs__WEBPACK_IMPORTED_MODULE_4__.writeFileSync(kcPageTsxFilePath, Buffer.from(modifiedKcPageTsxCode, "utf8"));
+            }
+            const routesTsxFilePath = (0,path__WEBPACK_IMPORTED_MODULE_5__.relative)(process.cwd(), (0,path__WEBPACK_IMPORTED_MODULE_5__.join)(srcDirPath, "routes.tsx"));
+            console.log([
+                `To help you get started ${chalk__WEBPACK_IMPORTED_MODULE_9___default().bold((0,path__WEBPACK_IMPORTED_MODULE_5__.relative)(process.cwd(), targetFilePath))} has been copied into your project.`,
+                `The next step is usually to eject ${chalk__WEBPACK_IMPORTED_MODULE_9___default().bold(routesTsxFilePath)}`,
+                `with \`cp ${routesTsxFilePath} ${(0,path__WEBPACK_IMPORTED_MODULE_5__.relative)(process.cwd(), accountThemeSrcDirPath)}\``,
+                `then update the import of routes in ${kcAccountUiTsxFileRelativePath}.`
+            ].join("\n"));
+        }
+        process.exit(0);
+    }
     console.log(`→ ${themeType}`);
     console.log(chalk__WEBPACK_IMPORTED_MODULE_9___default().cyan("Select the page you want to customize:"));
     const templateValue = "Template.tsx (Layout common to every page)";

package/bin/97.index.js

@@ -41,11 +41,33 @@ async function command(params) {
         cliCommandOptions
     });
     console.log(chalk__WEBPACK_IMPORTED_MODULE_9___default().cyan("Theme type:"));
-    const { value: themeType } = await cli_select__WEBPACK_IMPORTED_MODULE_1___default()({
-        values: [..._shared_constants__WEBPACK_IMPORTED_MODULE_2__/* .THEME_TYPES */ .Jh]
-    }).catch(() => {
-        process.exit(-1);
-    });
+    const themeType = await (async () => {
+        const values = _shared_constants__WEBPACK_IMPORTED_MODULE_2__/* .THEME_TYPES.filter */ .Jh.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            (0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(false);
+        });
+        (0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(values.length > 0, "No theme is implemented in this project");
+        if (values.length === 1) {
+            return values[0];
+        }
+        const { value } = await cli_select__WEBPACK_IMPORTED_MODULE_1___default()({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+        return value;
+    })();
+    if (themeType === "account" &&
+        ((0,tsafe_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(buildContext.implementedThemeTypes.account.isImplemented),
+            buildContext.implementedThemeTypes.account.type === "Single-Page")) {
+        console.log(`${chalk__WEBPACK_IMPORTED_MODULE_9___default().red("✗")} Sorry, there is no Storybook support for Single-Page Account themes.`);
+        process.exit(0);
+    }
     console.log(`→ ${themeType}`);
     console.log(chalk__WEBPACK_IMPORTED_MODULE_9___default().cyan("Select the page you want to create a Storybook for:"));
     const { value: pageId } = await cli_select__WEBPACK_IMPORTED_MODULE_1___default()({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.121",
+    "version": "10.0.0-rc.123",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -673,6 +673,8 @@
         "stories/account/pages/Password.stories.tsx",
         "stories/account/pages/Sessions.stories.tsx",
         "stories/account/pages/Totp.stories.tsx",
+        "stories/account-spa/index.stories.tsx",
+        "stories/intro/intro.stories.tsx",
         "stories/login/pages/Code.stories.tsx",
         "stories/login/pages/DeleteAccountConfirm.stories.tsx",
         "stories/login/pages/DeleteCredential.stories.tsx",
@@ -854,14 +856,10 @@
         "@emotion/react": "^11.11.4",
         "@octokit/rest": "^20.1.1",
         "@storybook/addon-a11y": "^6.5.16",
-        "@storybook/addon-actions": "^6.5.13",
-        "@storybook/addon-essentials": "^6.5.13",
-        "@storybook/addon-interactions": "^6.5.13",
-        "@storybook/addon-links": "^6.5.13",
         "@storybook/builder-webpack5": "^6.5.13",
         "@storybook/manager-webpack5": "^6.5.13",
         "@storybook/react": "^6.5.13",
-        "@storybook/testing-library": "^0.0.13",
+        "eslint-plugin-storybook": "^0.6.7",
         "@types/babel__generator": "^7.6.4",
         "@types/make-fetch-happen": "^10.0.1",
         "@types/minimist": "^1.2.2",
@@ -874,7 +872,6 @@
         "cheerio": "^1.0.0-rc.12",
         "chokidar-cli": "^3.0.0",
         "cli-select": "^1.1.2",
-        "eslint-plugin-storybook": "^0.6.7",
         "husky": "^4.3.8",
         "lint-staged": "^11.0.0",
         "magic-string": "^0.30.7",

package/src/bin/add-story.ts

@@ -26,11 +26,43 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     console.log(chalk.cyan("Theme type:"));
 
-    const { value: themeType } = await cliSelect<ThemeType>({
-        values: [...THEME_TYPES]
-    }).catch(() => {
-        process.exit(-1);
-    });
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, "No theme is implemented in this project");
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    if (
+        themeType === "account" &&
+        (assert(buildContext.implementedThemeTypes.account.isImplemented),
+        buildContext.implementedThemeTypes.account.type === "Single-Page")
+    ) {
+        console.log(
+            `${chalk.red("✗")} Sorry, there is no Storybook support for Single-Page Account themes.`
+        );
+
+        process.exit(0);
+    }
 
     console.log(`→ ${themeType}`);
 

package/src/bin/eject-page.ts

@@ -12,7 +12,12 @@ import {
 } from "./shared/constants";
 import { capitalize } from "tsafe/capitalize";
 import * as fs from "fs";
-import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    dirname as pathDirname,
+    basename as pathBasename
+} from "path";
 import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
 import { assert, Equals } from "tsafe/assert";
 import type { CliCommandOptions } from "./main";
@@ -28,11 +33,114 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     console.log(chalk.cyan("Theme type:"));
 
-    const { value: themeType } = await cliSelect<ThemeType>({
-        values: [...THEME_TYPES]
-    }).catch(() => {
-        process.exit(-1);
-    });
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, "No theme is implemented in this project");
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    if (
+        themeType === "account" &&
+        (assert(buildContext.implementedThemeTypes.account.isImplemented),
+        buildContext.implementedThemeTypes.account.type === "Single-Page")
+    ) {
+        const srcDirPath = pathJoin(
+            pathDirname(buildContext.packageJsonFilePath),
+            "node_modules",
+            "@keycloakify",
+            "keycloak-account-ui",
+            "src"
+        );
+
+        console.log(
+            [
+                `There isn't an interactive CLI to eject components of the Single-Page Account theme.`,
+                `You can however copy paste into your codebase the any file or directory from the following source directory:`,
+                ``,
+                `${chalk.bold(pathJoin(pathRelative(process.cwd(), srcDirPath)))}`,
+                ``
+            ].join("\n")
+        );
+
+        eject_entrypoint: {
+            const kcAccountUiTsxFileRelativePath = "KcAccountUi.tsx";
+
+            const accountThemeSrcDirPath = pathJoin(
+                buildContext.themeSrcDirPath,
+                "account"
+            );
+
+            const targetFilePath = pathJoin(
+                accountThemeSrcDirPath,
+                kcAccountUiTsxFileRelativePath
+            );
+
+            if (fs.existsSync(targetFilePath)) {
+                break eject_entrypoint;
+            }
+
+            fs.cpSync(
+                pathJoin(srcDirPath, kcAccountUiTsxFileRelativePath),
+                targetFilePath
+            );
+
+            {
+                const kcPageTsxFilePath = pathJoin(accountThemeSrcDirPath, "KcPage.tsx");
+
+                const kcPageTsxCode = fs.readFileSync(kcPageTsxFilePath).toString("utf8");
+
+                const componentName = pathBasename(
+                    kcAccountUiTsxFileRelativePath
+                ).replace(/.tsx$/, "");
+
+                const modifiedKcPageTsxCode = kcPageTsxCode.replace(
+                    `@keycloakify/keycloak-account-ui/${componentName}`,
+                    `./${componentName}`
+                );
+
+                fs.writeFileSync(
+                    kcPageTsxFilePath,
+                    Buffer.from(modifiedKcPageTsxCode, "utf8")
+                );
+            }
+
+            const routesTsxFilePath = pathRelative(
+                process.cwd(),
+                pathJoin(srcDirPath, "routes.tsx")
+            );
+
+            console.log(
+                [
+                    `To help you get started ${chalk.bold(pathRelative(process.cwd(), targetFilePath))} has been copied into your project.`,
+                    `The next step is usually to eject ${chalk.bold(routesTsxFilePath)}`,
+                    `with \`cp ${routesTsxFilePath} ${pathRelative(process.cwd(), accountThemeSrcDirPath)}\``,
+                    `then update the import of routes in ${kcAccountUiTsxFileRelativePath}.`
+                ].join("\n")
+            );
+        }
+
+        process.exit(0);
+    }
 
     console.log(`→ ${themeType}`);
 

package/src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl

@@ -208,6 +208,18 @@ function decodeHtmlEntities(htmlStr){
                 ) || (
                     key == "attributes" &&
                     areSamePath(path, ["realm"])
+                ) || (
+                    xKeycloakify.pageId == "index.ftl" &&
+                    xKeycloakify.themeType == "account" &&
+                    areSamePath(path, ["realm"]) &&
+                    ![ 
+                        "name",
+                        "registrationEmailAsUsername",
+                        "editUsernameAllowed",
+                        "isInternationalizationEnabled",
+                        "identityFederationEnabled",
+                        "userManagedAccessAllowed"
+                    ]?seq_contains(key)
                 )
             >
                 <#-- <#local outSeq += ["/*" + path?join(".") + "." + key + " excluded*/"]> -->

package/src/bin/start-keycloak/myrealm-realm-24.json

@@ -449,7 +449,7 @@
                 "gender": ["prefer_not_to_say"],
                 "bio": ["Hello I'm Test User and I do not exist."],
                 "phone_number": ["1111111111"],
-                "locale": ["fr"],
+                "locale": ["en"],
                 "favorite_media": ["movies", "series"]
             },
             "createdTimestamp": 1716183898408,

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/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/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);

package/tools/useInsertScriptTags.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInsertScriptTags.js","sourceRoot":"","sources":["../src/tools/useInsertScriptTags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAiBnE,MAAM,kCAAkC,GAAG,IAAI,GAAG,EAAU,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAGnC;IACG,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAEnD,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,IAAI,kBAAkB,GAAG,KAAK,CAAC;IAE/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,kBAAkB,EAAE;YACpB,OAAO;SACV;QAED,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAC3B,mEAAmE;YACnE;gBACI,MAAM,OAAO,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;gBACxD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC1B,IAAI,aAAa,IAAI,SAAS,EAAE;wBAC5B,IAAI,MAAM,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW,EAAE;4BAC9C,OAAO;yBACV;wBACD,SAAS;qBACZ;oBACD,IAAI,KAAK,IAAI,SAAS,EAAE;wBACpB,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,GAAG,EAAE;4BAC9C,OAAO;yBACV;wBACD,SAAS;qBACZ;oBACD,MAAM,CAAC,KAAK,CAAC,CAAC;iBACjB;aACJ;YAED,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAErD,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;YAElC,CAAC,GAAG,EAAE;gBACF,IAAI,aAAa,IAAI,SAAS,EAAE;oBAC5B,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;oBAChD,OAAO;iBACV;gBACD,IAAI,KAAK,IAAI,SAAS,EAAE;oBACpB,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;oBAChC,OAAO;iBACV;gBACD,MAAM,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,CAAC,EAAE,CAAC;YAEL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,kBAAkB,GAAG,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAChC,CAAC"}
+{"version":3,"file":"useInsertScriptTags.js","sourceRoot":"","sources":["../src/tools/useInsertScriptTags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAiBnE,MAAM,kCAAkC,GAAG,IAAI,GAAG,EAAU,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAGnC;IACG,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAEnD,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,IAAI,kBAAkB,GAAG,KAAK,CAAC;IAE/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,kBAAkB,EAAE;YACpB,OAAO;SACV;QAED,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAC3B,mEAAmE;YACnE;gBACI,MAAM,OAAO,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;gBACxD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC1B,IAAI,aAAa,IAAI,SAAS,EAAE;wBAC5B,IAAI,MAAM,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW,EAAE;4BAC9C,OAAO;yBACV;wBACD,SAAS;qBACZ;oBACD,IAAI,KAAK,IAAI,SAAS,EAAE;wBACpB,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,GAAG,EAAE;4BAC9C,OAAO;yBACV;wBACD,SAAS;qBACZ;oBACD,MAAM,CAAC,KAAK,CAAC,CAAC;iBACjB;aACJ;YAED,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAErD,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;YAElC,CAAC,GAAG,EAAE;gBACF,IAAI,aAAa,IAAI,SAAS,EAAE;oBAC5B,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;oBAChD,OAAO;iBACV;gBACD,IAAI,KAAK,IAAI,SAAS,EAAE;oBACpB,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;oBAChC,OAAO;iBACV;gBACD,MAAM,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,CAAC,EAAE,CAAC;YAEL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,kBAAkB,GAAG,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAChC,CAAC"}