keycloakify 11.6.0 → 11.6.2

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

@@ -119,7 +119,9 @@ export async function initializeAccountTheme_singlePage(params: {
         JSON.stringify(parsedPackageJson, undefined, 4)
     );
 
-    npmInstall({ packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath) });
+    await npmInstall({
+        packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath)
+    });
 
     copyBoilerplate({
         accountThemeType: "Single-Page",

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

@@ -0,0 +1,146 @@
+import { dirname as pathDirname, join as pathJoin, relative as pathRelative } from "path";
+import type { BuildContext } from "./shared/buildContext";
+import * as fs from "fs";
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+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";
+
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "initialize-admin-theme",
+        buildContext
+    });
+
+    if (hasBeenHandled) {
+        return;
+    }
+
+    {
+        const adminThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "admin");
+
+        if (
+            fs.existsSync(adminThemeSrcDirPath) &&
+            fs.readdirSync(adminThemeSrcDirPath).length > 0
+        ) {
+            console.warn(
+                chalk.red(
+                    `There is already a ${pathRelative(
+                        process.cwd(),
+                        adminThemeSrcDirPath
+                    )} directory in your project. Aborting.`
+                )
+            );
+
+            process.exit(-1);
+        }
+    }
+
+    const parsedPackageJson = (() => {
+        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(
+            fs.readFileSync(buildContext.packageJsonFilePath).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    addSyncExtensionsToPostinstallScript({
+        parsedPackageJson,
+        buildContext
+    });
+
+    const uiSharedMajor = (() => {
+        const dependencies = {
+            ...parsedPackageJson.devDependencies,
+            ...parsedPackageJson.dependencies
+        };
+
+        const version = dependencies["@keycloakify/keycloak-ui-shared"];
+
+        if (version === undefined) {
+            return undefined;
+        }
+
+        const match = version.match(/^[^~]?(\d+)\./);
+
+        if (match === null) {
+            return undefined;
+        }
+
+        return match[1];
+    })();
+
+    const moduleName = "@keycloakify/keycloak-admin-ui";
+
+    const version = (
+        JSON.parse(
+            child_process
+                .execSync(`npm show ${moduleName} versions --json`)
+                .toString("utf8")
+                .trim()
+        ) as string[]
+    )
+        .reverse()
+        .filter(version => !version.includes("-"))
+        .find(version =>
+            uiSharedMajor === undefined ? true : version.startsWith(`${uiSharedMajor}.`)
+        );
+
+    assert(version !== undefined);
+
+    (parsedPackageJson.dependencies ??= {})[moduleName] = `~${version}`;
+
+    if (parsedPackageJson.devDependencies !== undefined) {
+        delete parsedPackageJson.devDependencies[moduleName];
+    }
+
+    {
+        let sourceCode = JSON.stringify(parsedPackageJson, undefined, 2);
+
+        if (await getIsPrettierAvailable()) {
+            sourceCode = await runPrettier({
+                sourceCode,
+                filePath: buildContext.packageJsonFilePath
+            });
+        }
+
+        fs.writeFileSync(
+            buildContext.packageJsonFilePath,
+            Buffer.from(sourceCode, "utf8")
+        );
+    }
+
+    await npmInstall({
+        packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath)
+    });
+}

package/src/bin/main.ts

@@ -191,7 +191,7 @@ program
 program
     .command({
         name: "initialize-account-theme",
-        description: "Initialize the account theme."
+        description: "Initialize an Account Single-Page or Multi-Page custom Account UI."
     })
     .task({
         skip,
@@ -202,6 +202,20 @@ program
         }
     });
 
+program
+    .command({
+        name: "initialize-admin-theme",
+        description: "Initialize an Admin Console custom UI."
+    })
+    .task({
+        skip,
+        handler: async ({ projectDirPath }) => {
+            const { command } = await import("./initialize-admin-theme");
+
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
+        }
+    });
+
 program
     .command({
         name: "copy-keycloak-resources-to-public",
@@ -234,13 +248,30 @@ program
 
 program
     .command({
-        name: "postinstall",
-        description: "Initialize all the Keycloakify UI modules installed in the project."
+        name: "sync-extensions",
+        description: [
+            "Synchronizes all installed Keycloakify extension modules with your project.",
+            "",
+            "Example of extension modules: '@keycloakify/keycloak-account-ui', '@keycloakify/keycloak-admin-ui', '@keycloakify/keycloak-ui-shared'",
+            "",
+            "This command ensures that:",
+            "- All required files from installed extensions are copied into your project.",
+            "- The copied files are correctly ignored by Git to help you distinguish between your custom source files",
+            "  and those provided by the extensions.",
+            "- Peer dependencies declared by the extensions are automatically added to your package.json.",
+            "",
+            "You can safely run this command multiple times. It will only update the files and dependencies if needed,",
+            "ensuring your project stays in sync with the installed extensions.",
+            "",
+            "Typical usage:",
+            "- Should be run as a postinstall script of your project.",
+            ""
+        ].join("\n")
     })
     .task({
         skip,
         handler: async ({ projectDirPath }) => {
-            const { command } = await import("./postinstall");
+            const { command } = await import("./sync-extensions");
 
             await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
@@ -248,37 +279,65 @@ program
 
 program
     .command<{
-        file: string;
+        path: string;
+        revert: boolean;
     }>({
-        name: "eject-file",
+        name: "own",
         description: [
-            "WARNING: Not usable yet, will be used for future features",
-            "Take ownership over a given file"
-        ].join(" ")
+            "Manages ownership of auto-generated files provided by Keycloakify extensions.",
+            "",
+            "This command allows you to take ownership of a specific file or directory generated",
+            "by an extension. Once owned, you can freely modify and version-control the file.",
+            "",
+            "You can also use the --revert flag to relinquish ownership and restore the file",
+            "or directory to its original auto-generated state.",
+            "",
+            "For convenience, the exact command to take ownership of any file is included as a comment",
+            "in the header of each extension-generated file.",
+            "",
+            "Examples:",
+            "$ npx keycloakify own --path admin/KcPage.tsx"
+        ].join("\n")
     })
     .option({
-        key: "file",
+        key: "path",
         name: (() => {
-            const long = "file";
-            const short = "f";
+            const long = "path";
+            const short = "p";
 
             optionsKeys.push(long, short);
 
             return { long, short };
         })(),
         description: [
-            "Relative path of the file relative to the directory of your keycloak theme source",
-            "Example `--file src/login/page/Login.tsx`"
+            "Specifies the relative path of the file or directory to take ownership of.",
+            "This path should be relative to your theme directory.",
+            "Example: `--path 'admin/KcPage.tsx'`"
         ].join(" ")
     })
+    .option({
+        key: "revert",
+        name: (() => {
+            const name = "revert";
+
+            optionsKeys.push(name);
+
+            return name;
+        })(),
+        description: [
+            "Restores a file or directory to its original auto-generated state,",
+            "removing your ownership claim and reverting any modifications."
+        ].join(" "),
+        defaultValue: false
+    })
     .task({
         skip,
-        handler: async ({ projectDirPath, file }) => {
-            const { command } = await import("./eject-file");
+        handler: async ({ projectDirPath, path, revert }) => {
+            const { command } = await import("./own");
 
             await command({
                 buildContext: getBuildContext({ projectDirPath }),
-                cliCommandOptions: { file }
+                cliCommandOptions: { path, isRevert: revert }
             });
         }
     });

package/src/bin/own.ts

@@ -0,0 +1,209 @@
+import type { BuildContext } from "./shared/buildContext";
+import { getExtensionModuleFileSourceCodeReadyToBeCopied } from "./sync-extensions/getExtensionModuleFileSourceCodeReadyToBeCopied";
+import type { ExtensionModuleMeta } from "./sync-extensions/extensionModuleMeta";
+import { command as command_syncExtensions } from "./sync-extensions/sync-extension";
+import {
+    readManagedGitignoreFile,
+    writeManagedGitignoreFile
+} from "./sync-extensions/managedGitignoreFile";
+import { getExtensionModuleMetas } from "./sync-extensions/extensionModuleMeta";
+import { getAbsoluteAndInOsFormatPath } from "./tools/getAbsoluteAndInOsFormatPath";
+import { relative as pathRelative, dirname as pathDirname, join as pathJoin } from "path";
+import { getInstalledModuleDirPath } from "./tools/getInstalledModuleDirPath";
+import * as fsPr from "fs/promises";
+import { isInside } from "./tools/isInside";
+import chalk from "chalk";
+
+export async function command(params: {
+    buildContext: BuildContext;
+    cliCommandOptions: {
+        path: string;
+        isRevert: boolean;
+    };
+}) {
+    const { buildContext, cliCommandOptions } = params;
+
+    const extensionModuleMetas = await getExtensionModuleMetas({ buildContext });
+
+    const { targetFileRelativePathsByExtensionModuleMeta } = await (async () => {
+        const fileOrDirectoryRelativePath = pathRelative(
+            buildContext.themeSrcDirPath,
+            getAbsoluteAndInOsFormatPath({
+                cwd: buildContext.themeSrcDirPath,
+                pathIsh: cliCommandOptions.path
+            })
+        );
+
+        const arr = extensionModuleMetas
+            .map(extensionModuleMeta => ({
+                extensionModuleMeta,
+                fileRelativePaths: extensionModuleMeta.files
+                    .map(({ fileRelativePath }) => fileRelativePath)
+                    .filter(
+                        fileRelativePath =>
+                            fileRelativePath === fileOrDirectoryRelativePath ||
+                            isInside({
+                                dirPath: fileOrDirectoryRelativePath,
+                                filePath: fileRelativePath
+                            })
+                    )
+            }))
+            .filter(({ fileRelativePaths }) => fileRelativePaths.length !== 0);
+
+        const targetFileRelativePathsByExtensionModuleMeta = new Map<
+            ExtensionModuleMeta,
+            string[]
+        >();
+
+        for (const { extensionModuleMeta, fileRelativePaths } of arr) {
+            targetFileRelativePathsByExtensionModuleMeta.set(
+                extensionModuleMeta,
+                fileRelativePaths
+            );
+        }
+
+        return { targetFileRelativePathsByExtensionModuleMeta };
+    })();
+
+    if (targetFileRelativePathsByExtensionModuleMeta.size === 0) {
+        console.log(
+            chalk.yellow(
+                "There is no Keycloakify extension modules files matching the provided path."
+            )
+        );
+        process.exit(1);
+    }
+
+    const { ownedFilesRelativePaths: ownedFilesRelativePaths_current } =
+        await readManagedGitignoreFile({
+            buildContext
+        });
+
+    await (cliCommandOptions.isRevert ? command_revert : command_own)({
+        extensionModuleMetas,
+        targetFileRelativePathsByExtensionModuleMeta,
+        ownedFilesRelativePaths_current,
+        buildContext
+    });
+}
+
+type Params_subcommands = {
+    extensionModuleMetas: ExtensionModuleMeta[];
+    targetFileRelativePathsByExtensionModuleMeta: Map<ExtensionModuleMeta, string[]>;
+    ownedFilesRelativePaths_current: string[];
+    buildContext: BuildContext;
+};
+
+async function command_own(params: Params_subcommands) {
+    const {
+        extensionModuleMetas,
+        targetFileRelativePathsByExtensionModuleMeta,
+        ownedFilesRelativePaths_current,
+        buildContext
+    } = params;
+
+    await writeManagedGitignoreFile({
+        buildContext,
+        extensionModuleMetas,
+        ownedFilesRelativePaths: [
+            ...ownedFilesRelativePaths_current,
+            ...Array.from(targetFileRelativePathsByExtensionModuleMeta.values())
+                .flat()
+                .filter(
+                    fileRelativePath =>
+                        !ownedFilesRelativePaths_current.includes(fileRelativePath)
+                )
+        ]
+    });
+
+    const writeActions: (() => Promise<void>)[] = [];
+
+    for (const [
+        extensionModuleMeta,
+        fileRelativePaths
+    ] of targetFileRelativePathsByExtensionModuleMeta.entries()) {
+        const extensionModuleDirPath = await getInstalledModuleDirPath({
+            moduleName: extensionModuleMeta.moduleName,
+            packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath),
+            projectDirPath: buildContext.projectDirPath
+        });
+
+        for (const fileRelativePath of fileRelativePaths) {
+            if (ownedFilesRelativePaths_current.includes(fileRelativePath)) {
+                console.log(
+                    chalk.grey(`You already have ownership over '${fileRelativePath}'.`)
+                );
+                continue;
+            }
+
+            writeActions.push(async () => {
+                const sourceCode = await getExtensionModuleFileSourceCodeReadyToBeCopied({
+                    buildContext,
+                    fileRelativePath,
+                    isOwnershipAction: true,
+                    extensionModuleName: extensionModuleMeta.moduleName,
+                    extensionModuleDirPath,
+                    extensionModuleVersion: extensionModuleMeta.version
+                });
+
+                await fsPr.writeFile(
+                    pathJoin(buildContext.themeSrcDirPath, fileRelativePath),
+                    sourceCode
+                );
+
+                console.log(chalk.green(`Ownership over '${fileRelativePath}' claimed.`));
+            });
+        }
+    }
+
+    if (writeActions.length === 0) {
+        console.log(chalk.yellow("No new file claimed."));
+        return;
+    }
+
+    await Promise.all(writeActions.map(action => action()));
+}
+
+async function command_revert(params: Params_subcommands) {
+    const {
+        extensionModuleMetas,
+        targetFileRelativePathsByExtensionModuleMeta,
+        ownedFilesRelativePaths_current,
+        buildContext
+    } = params;
+
+    const ownedFilesRelativePaths_toRemove = Array.from(
+        targetFileRelativePathsByExtensionModuleMeta.values()
+    )
+        .flat()
+        .filter(fileRelativePath => {
+            if (!ownedFilesRelativePaths_current.includes(fileRelativePath)) {
+                console.log(
+                    chalk.grey(`Ownership over '${fileRelativePath}' wasn't claimed.`)
+                );
+                return false;
+            }
+
+            console.log(
+                chalk.green(`Ownership over '${fileRelativePath}' relinquished.`)
+            );
+
+            return true;
+        });
+
+    if (ownedFilesRelativePaths_toRemove.length === 0) {
+        console.log(chalk.yellow("No file relinquished."));
+        return;
+    }
+
+    await writeManagedGitignoreFile({
+        buildContext,
+        extensionModuleMetas,
+        ownedFilesRelativePaths: ownedFilesRelativePaths_current.filter(
+            fileRelativePath =>
+                !ownedFilesRelativePaths_toRemove.includes(fileRelativePath)
+        )
+    });
+
+    await command_syncExtensions({ buildContext });
+}

package/src/bin/shared/addSyncExtensionsToPostinstallScript.ts

@@ -0,0 +1,70 @@
+import { dirname as pathDirname, relative as pathRelative, sep as pathSep } from "path";
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "./buildContext";
+
+export type BuildContextLike = {
+    projectDirPath: string;
+    packageJsonFilePath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function addSyncExtensionsToPostinstallScript(params: {
+    parsedPackageJson: { scripts?: Record<string, string | undefined> };
+    buildContext: BuildContextLike;
+}) {
+    const { parsedPackageJson, buildContext } = params;
+
+    const cmd_base = "keycloakify sync-extensions";
+
+    const projectCliOptionValue = (() => {
+        const packageJsonDirPath = pathDirname(buildContext.packageJsonFilePath);
+
+        const relativePath = pathRelative(
+            packageJsonDirPath,
+            buildContext.projectDirPath
+        );
+
+        if (relativePath === "") {
+            return undefined;
+        }
+
+        return relativePath.split(pathSep).join("/");
+    })();
+
+    const generateCmd = (params: { cmd_preexisting: string | undefined }) => {
+        const { cmd_preexisting } = params;
+
+        let cmd = cmd_preexisting === undefined ? "" : `${cmd_preexisting} && `;
+
+        cmd += cmd_base;
+
+        if (projectCliOptionValue !== undefined) {
+            cmd += ` -p ${projectCliOptionValue}`;
+        }
+
+        return cmd;
+    };
+
+    {
+        const scripts = (parsedPackageJson.scripts ??= {});
+
+        for (const scriptName of ["postinstall", "prepare"]) {
+            const cmd_preexisting = scripts[scriptName];
+
+            if (cmd_preexisting === undefined) {
+                continue;
+            }
+
+            if (cmd_preexisting.includes(cmd_base)) {
+                scripts[scriptName] = generateCmd({ cmd_preexisting });
+                return;
+            }
+        }
+    }
+
+    parsedPackageJson.scripts = {
+        postinstall: generateCmd({ cmd_preexisting: undefined }),
+        ...parsedPackageJson.scripts
+    };
+}

package/src/bin/shared/customHandler.ts

@@ -12,6 +12,7 @@ export type CommandName =
     | "add-story"
     | "initialize-account-theme"
     | "initialize-admin-theme"
+    | "initialize-admin-theme"
     | "initialize-email-theme"
     | "copy-keycloak-resources-to-public";