keycloakify 11.8.46 → 11.8.47-rc.1

package/src/bin/init/setupVitePluginIfNeeded.ts

@@ -0,0 +1,143 @@
+import { join as pathJoin } from "path";
+import { existsAsync } from "../tools/fs.existsAsync";
+import * as fs from "fs/promises";
+import * as recast from "recast";
+import { runPrettier, getIsPrettierAvailable } from "../tools/runPrettier";
+import * as babelParser from "@babel/parser";
+import babelGenerate from "@babel/generator";
+import * as babelTypes from "@babel/types";
+
+/** Best effort to setup the Keycloakify vite plugin automatically */
+export async function setupVitePluginIfNeeded(params: { projectDirPath: string }) {
+    const { projectDirPath } = params;
+
+    const viteConfigTsFilePath = pathJoin(projectDirPath, "vite.config.ts");
+
+    if (!(await existsAsync(viteConfigTsFilePath))) {
+        return;
+    }
+
+    const viteConfigTsContent = (await fs.readFile(viteConfigTsFilePath)).toString(
+        "utf8"
+    );
+
+    if (viteConfigTsContent.includes("keycloakify")) {
+        return;
+    }
+
+    const root = recast.parse(viteConfigTsContent, {
+        parser: {
+            parse: (code: string) =>
+                babelParser.parse(code, {
+                    sourceType: "module",
+                    plugins: ["typescript"]
+                }),
+            generator: babelGenerate,
+            types: babelTypes
+        }
+    });
+
+    /* Before: 
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [ react() ]
+});
+        */
+
+    /* After: 
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { keycloakify } from "keycloakify/vite-plugin";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        react(),
+        keycloakify({
+            accountThemeImplementation: "none"
+        })
+    ]
+});
+        */
+
+    recast.visit(root, {
+        visitProgram(path) {
+            const body = path.node.body;
+
+            // Add import: import { keycloakify } from "keycloakify/vite-plugin";
+            const importDeclaration = babelTypes.importDeclaration(
+                [
+                    babelTypes.importSpecifier(
+                        babelTypes.identifier("keycloakify"),
+                        babelTypes.identifier("keycloakify")
+                    )
+                ],
+                babelTypes.stringLiteral("keycloakify/vite-plugin")
+            );
+            // @ts-expect-error
+            body.unshift(importDeclaration);
+
+            this.traverse(path);
+        },
+        visitCallExpression(path) {
+            const { node } = path;
+
+            if (
+                // @ts-expect-error
+                babelTypes.isIdentifier(node.callee, { name: "defineConfig" }) &&
+                node.arguments.length === 1 &&
+                // @ts-expect-error
+                babelTypes.isObjectExpression(node.arguments[0])
+            ) {
+                const configObject = node.arguments[0];
+                const pluginsProp = configObject.properties.find(
+                    prop =>
+                        // @ts-expect-error
+                        babelTypes.isObjectProperty(prop) &&
+                        babelTypes.isIdentifier(prop.key, { name: "plugins" }) &&
+                        babelTypes.isArrayExpression(prop.value)
+                ) as babelTypes.ObjectProperty | undefined;
+
+                if (pluginsProp && babelTypes.isArrayExpression(pluginsProp.value)) {
+                    // Append keycloakify plugin config
+                    const keycloakifyCall = babelTypes.callExpression(
+                        babelTypes.identifier("keycloakify"),
+                        [
+                            babelTypes.objectExpression([
+                                babelTypes.objectProperty(
+                                    babelTypes.identifier("accountThemeImplementation"),
+                                    babelTypes.stringLiteral("none")
+                                )
+                            ])
+                        ]
+                    );
+
+                    pluginsProp.value.elements.push(keycloakifyCall);
+                }
+            }
+
+            this.traverse(path);
+        }
+    });
+
+    let viteConfigTsContent_modified = babelGenerate(root).code;
+
+    format: {
+        if (!(await getIsPrettierAvailable())) {
+            break format;
+        }
+
+        viteConfigTsContent_modified = await runPrettier({
+            sourceCode: viteConfigTsContent_modified,
+            filePath: viteConfigTsFilePath
+        });
+    }
+
+    await fs.writeFile(
+        viteConfigTsFilePath,
+        Buffer.from(viteConfigTsContent_modified, "utf8")
+    );
+}

package/src/bin/initialize-account-theme/initialize-account-theme.ts

@@ -26,12 +26,16 @@ export async function command(params: { buildContext: BuildContext }) {
         projectDirPath: buildContext.projectDirPath
     });
 
+    console.log(chalk.cyan("Which account theme type?"));
+
     const { value: accountThemeType } = await cliSelect({
         values: ["Single-Page" as const, "Multi-Page" as const]
     }).catch(() => {
         process.exit(-1);
     });
 
+    console.log(`${accountThemeType}\n`);
+
     switch (accountThemeType) {
         case "Multi-Page":
             {

package/src/bin/initialize-login-theme.ts

@@ -0,0 +1,323 @@
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+import { dirname as pathDirname, join as pathJoin } from "path";
+import type { BuildContext } from "./shared/buildContext";
+import * as fs from "fs/promises";
+import { assert, is, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
+import { addSyncExtensionsToPostinstallScript } from "./shared/addSyncExtensionsToPostinstallScript";
+import { getIsPrettierAvailable, runPrettier } from "./tools/runPrettier";
+import { npmInstall } from "./tools/npmInstall";
+import * as child_process from "child_process";
+import { z } from "zod";
+import chalk from "chalk";
+import cliSelect from "cli-select";
+import { existsAsync } from "./tools/fs.existsAsync";
+
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    const { hasBeenHandled } = await maybeDelegateCommandToCustomHandler({
+        commandName: "initialize-login-theme",
+        buildContext
+    });
+
+    if (hasBeenHandled) {
+        return;
+    }
+
+    if (
+        buildContext.implementedThemeTypes.login.isImplemented ||
+        buildContext.implementedThemeTypes.login.isImplemented_native
+    ) {
+        console.warn(chalk.red("There is already a login theme in your project"));
+
+        process.exit(-1);
+    }
+
+    const parsedPackageJson = await (async () => {
+        type ParsedPackageJson = {
+            scripts?: Record<string, string | undefined>;
+            dependencies?: Record<string, string | undefined>;
+            devDependencies?: Record<string, string | undefined>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+                scripts: z.record(z.union([z.string(), z.undefined()])).optional(),
+                dependencies: z.record(z.union([z.string(), z.undefined()])).optional(),
+                devDependencies: z.record(z.union([z.string(), z.undefined()])).optional()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>;
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+        const parsedPackageJson = JSON.parse(
+            (await fs.readFile(buildContext.packageJsonFilePath)).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    addSyncExtensionsToPostinstallScript({
+        parsedPackageJson,
+        buildContext
+    });
+
+    const doInstallStories = await (async () => {
+        console.log(chalk.cyan(`\nDo you want to install the Stories?`));
+
+        const YES = "Yes (Recommended)";
+        const NO = "No";
+
+        const { value } = await cliSelect({
+            values: [YES, NO]
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        console.log(`${value}\n`);
+
+        return value === YES;
+    })();
+
+    install_storybook: {
+        if (!doInstallStories) {
+            break install_storybook;
+        }
+
+        if (buildContext.bundler !== "vite") {
+            break install_storybook;
+        }
+
+        if (
+            Object.keys({
+                ...parsedPackageJson.dependencies,
+                ...parsedPackageJson.devDependencies
+            }).includes("storybook")
+        ) {
+            break install_storybook;
+        }
+
+        (parsedPackageJson.scripts ??= {})["storybook"] = "storybook dev -p 6006";
+        parsedPackageJson.scripts["build-storybook"] = "storybook build";
+
+        (parsedPackageJson.devDependencies ??= {})["storybook"] = "^9.0.4";
+        parsedPackageJson.devDependencies["@storybook/react-vite"] = "^9.0.4";
+
+        const files: { relativeFilePath: string; fileContent: string }[] = [
+            {
+                relativeFilePath: "main.ts",
+                fileContent: [
+                    `import type { StorybookConfig } from "@storybook/react-vite";`,
+                    ``,
+                    `const config: StorybookConfig = {`,
+                    `    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],`,
+                    `    addons: [],`,
+                    `    framework: {`,
+                    `        name: "@storybook/react-vite",`,
+                    `        options: {}`,
+                    `    },`,
+                    `};`,
+                    `export default config;`,
+                    ``
+                ].join("\n")
+            },
+            {
+                relativeFilePath: "preview.ts",
+                fileContent: storybookPreviewTsFileContent
+            }
+        ];
+
+        for (let { relativeFilePath, fileContent } of files) {
+            const filePath = pathJoin(
+                buildContext.projectDirPath,
+                ".storybook",
+                relativeFilePath
+            );
+
+            {
+                const dirPath = pathDirname(filePath);
+
+                if (!(await existsAsync(dirPath))) {
+                    await fs.mkdir(dirPath, { recursive: true });
+                }
+            }
+
+            run_prettier: {
+                if (!(await getIsPrettierAvailable())) {
+                    break run_prettier;
+                }
+
+                fileContent = await runPrettier({
+                    filePath: filePath,
+                    sourceCode: fileContent
+                });
+            }
+
+            await fs.writeFile(filePath, Buffer.from(fileContent, "utf8"));
+        }
+    }
+
+    {
+        const moduleName = "@keycloakify/login-ui";
+
+        const latestVersion = await getModuleLatestVersion({ moduleName });
+
+        (parsedPackageJson.dependencies ??= {})[moduleName] = `~${latestVersion}`;
+
+        if (parsedPackageJson.devDependencies !== undefined) {
+            delete parsedPackageJson.devDependencies[moduleName];
+        }
+    }
+
+    install_stories: {
+        if (!doInstallStories) {
+            break install_stories;
+        }
+
+        const moduleName = "@keycloakify/login-ui-storybook";
+
+        const latestVersion = await getModuleLatestVersion({ moduleName });
+
+        (parsedPackageJson.devDependencies ??= {})[moduleName] = `~${latestVersion}`;
+
+        delete parsedPackageJson.dependencies[moduleName];
+    }
+
+    {
+        let sourceCode = JSON.stringify(parsedPackageJson, null, 2);
+
+        if (await getIsPrettierAvailable()) {
+            sourceCode = await runPrettier({
+                sourceCode,
+                filePath: buildContext.packageJsonFilePath
+            });
+        }
+
+        await fs.writeFile(
+            buildContext.packageJsonFilePath,
+            Buffer.from(sourceCode, "utf8")
+        );
+    }
+
+    await npmInstall({
+        packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath)
+    });
+}
+
+async function getModuleLatestVersion(params: { moduleName: string }) {
+    const { moduleName } = params;
+
+    const versions = ((): string[] => {
+        const cmdOutput = child_process
+            .execSync(`npm show ${moduleName} versions --json`)
+            .toString("utf8")
+            .trim();
+
+        const versions = JSON.parse(cmdOutput) as string | string[];
+
+        // NOTE: Bug in some older npm versions
+        if (typeof versions === "string") {
+            return [versions];
+        }
+
+        return versions;
+    })();
+
+    const version = versions.reverse().filter(version => !version.includes("-"))[0];
+
+    assert(version !== undefined);
+
+    return version;
+}
+
+const storybookPreviewTsFileContent = [
+    `import type { Preview } from "@storybook/react-vite";`,
+    ``,
+    `const preview: Preview = {`,
+    `    parameters: {`,
+    `        controls: {`,
+    `            matchers: {`,
+    `                color: /(background|color)$/i,`,
+    `                date: /Date$/i`,
+    `            }`,
+    `        },`,
+    `        options: {`,
+    `            storySort: (a, b)=> {`,
+    ``,
+    `                const orderedPagesPrefix = [`,
+    `                    "Introduction",`,
+    `                    "login/login.ftl",`,
+    `                    "login/register.ftl",`,
+    `                    "login/terms.ftl",`,
+    `                    "login/error.ftl",`,
+    `                    "login/code.ftl",`,
+    `                    "login/delete-account-confirm.ftl",`,
+    `                    "login/delete-credential.ftl",`,
+    `                    "login/frontchannel-logout.ftl",`,
+    `                    "login/idp-review-user-profile.ftl",`,
+    `                    "login/info.ftl",`,
+    `                    "login/login-config-totp.ftl",`,
+    `                    "login/login-idp-link-confirm.ftl",`,
+    `                    "login/login-idp-link-email.ftl",`,
+    `                    "login/login-oauth-grant.ftl",`,
+    `                    "login/login-otp.ftl",`,
+    `                    "login/login-page-expired.ftl",`,
+    `                    "login/login-password.ftl",`,
+    `                    "login/login-reset-otp.ftl",`,
+    `                    "login/login-reset-password.ftl",`,
+    `                    "login/login-update-password.ftl",`,
+    `                    "login/login-update-profile.ftl",`,
+    `                    "login/login-username.ftl",`,
+    `                    "login/login-verify-email.ftl",`,
+    `                    "login/login-x509-info.ftl",`,
+    `                    "login/logout-confirm.ftl",`,
+    `                    "login/saml-post-form.ftl",`,
+    `                    "login/select-authenticator.ftl",`,
+    `                    "login/update-email.ftl",`,
+    `                    "login/webauthn-authenticate.ftl",`,
+    `                    "login/webauthn-error.ftl",`,
+    `                    "login/webauthn-register.ftl",`,
+    `                    "login/login-oauth2-device-verify-user-code.ftl",`,
+    `                    "login/login-recovery-authn-code-config.ftl",`,
+    `                    "login/login-recovery-authn-code-input.ftl",`,
+    `                    "account/account.ftl",`,
+    `                    "account/password.ftl",`,
+    `                    "account/federatedIdentity.ftl",`,
+    `                    "account/log.ftl",`,
+    `                    "account/sessions.ftl",`,
+    `                    "account/totp.ftl"`,
+    `                ];`,
+    ``,
+    `                function getHardCodedWeight(title) {`,
+    `                    for (let i = 0; i < orderedPagesPrefix.length; i++) {`,
+    `                        if (`,
+    `                            title`,
+    `                                .toLowerCase()`,
+    `                                .startsWith(orderedPagesPrefix[i].toLowerCase())`,
+    `                        ) {`,
+    `                            return orderedPagesPrefix.length - i;`,
+    `                        }`,
+    `                    }`,
+    ``,
+    `                    return 0;`,
+    `                }`,
+    ``,
+    `                return getHardCodedWeight(b.title) - getHardCodedWeight(a.title);`,
+    ``,
+    `            }`,
+    ``,
+    `        }`,
+    `    }`,
+    `};`,
+    ``,
+    `export default preview;`,
+    ``
+].join("\n");

package/src/bin/main.ts

@@ -146,6 +146,20 @@ program
         }
     });
 
+program
+    .command({
+        name: "init",
+        description: "(BETA) Initialize a new theme type (login/account/admin/email)"
+    })
+    .task({
+        skip,
+        handler: async ({ projectDirPath }) => {
+            const { command } = await import("./init");
+
+            await command({ projectDirPath: projectDirPath ?? process.cwd() });
+        }
+    });
+
 program
     .command({
         name: "eject-page",

package/src/bin/shared/buildContext.ts

@@ -2,7 +2,6 @@ import { parse as urlParse } from "url";
 import {
     join as pathJoin,
     sep as pathSep,
-    relative as pathRelative,
     resolve as pathResolve,
     dirname as pathDirname
 } from "path";
@@ -13,8 +12,7 @@ import { assert, type Equals, is } from "tsafe/assert";
 import * as child_process from "child_process";
 import {
     VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES,
-    BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME,
-    THEME_TYPES
+    BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME
 } from "./constants";
 import type { KeycloakVersionRange } from "./KeycloakVersionRange";
 import { exclude } from "tsafe";
@@ -167,40 +165,7 @@ export function getBuildContext(params: {
             return { themeSrcDirPath };
         }
 
-        {
-            const basenames = fs.readdirSync(srcDirPath);
-
-            for (const basename of basenames) {
-                const path = pathJoin(srcDirPath, basename);
-
-                if (!fs.statSync(path).isFile()) {
-                    continue;
-                }
-
-                if (fs.readFileSync(path).toString("utf8").includes("./kc.gen")) {
-                    return { themeSrcDirPath: srcDirPath };
-                }
-            }
-        }
-
-        for (const themeType of [...THEME_TYPES, "email"]) {
-            if (!fs.existsSync(pathJoin(srcDirPath, themeType))) {
-                continue;
-            }
-            return { themeSrcDirPath: srcDirPath };
-        }
-
-        console.log(
-            chalk.red(
-                [
-                    `Can't locate your Keycloak theme source directory in .${pathSep}${pathRelative(process.cwd(), srcDirPath)}`,
-                    `Make sure to either use the Keycloakify CLI in the root of your Keycloakify project or use the --project CLI option`,
-                    `If you are collocating your Keycloak theme with your app you must have a directory named '${KEYCLOAK_THEME}' or '${KEYCLOAK_THEME.replace(/-/g, "_")}' in your 'src' directory`
-                ].join("\n")
-            )
-        );
-
-        process.exit(1);
+        return { themeSrcDirPath: srcDirPath };
     })();
 
     const { resolvedViteConfig } = (() => {

package/src/bin/shared/customHandler.ts

@@ -10,11 +10,13 @@ export type CommandName =
     | "update-kc-gen"
     | "eject-page"
     | "add-story"
+    | "initialize-login-theme"
     | "initialize-account-theme"
     | "initialize-admin-theme"
     | "initialize-admin-theme"
     | "initialize-email-theme"
-    | "copy-keycloak-resources-to-public";
+    | "copy-keycloak-resources-to-public"
+    | "init";
 
 export type ApiVersion = "v1";