keycloakify 10.0.0-rc.12 → 10.0.0-rc.120

package/src/bin/keycloakify/replacers/replaceImportsInJsCode/webpack.ts

@@ -1,64 +1,96 @@
-import { nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir } from "../../../shared/constants";
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
-import type { BuildOptions } from "../../../shared/buildOptions";
+import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
 import { replaceAll } from "../../../tools/String.prototype.replaceAll";
 
-export type BuildOptionsLike = {
-    reactAppBuildDirPath: string;
+export type BuildContextLike = {
+    projectBuildDirPath: string;
     assetsDirPath: string;
     urlPathname: string | undefined;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
-export function replaceImportsInJsCode_webpack(params: { jsCode: string; buildOptions: BuildOptionsLike; systemType?: "posix" | "win32" }): {
+export function replaceImportsInJsCode_webpack(params: {
+    jsCode: string;
+    buildContext: BuildContextLike;
+    systemType?: "posix" | "win32";
+}): {
     fixedJsCode: string;
 } {
-    const { jsCode, buildOptions, systemType = nodePath.sep === "/" ? "posix" : "win32" } = params;
+    const {
+        jsCode,
+        buildContext,
+        systemType = nodePath.sep === "/" ? "posix" : "win32"
+    } = params;
 
     const { relative: pathRelative, sep: pathSep } = nodePath[systemType];
 
     let fixedJsCode = jsCode;
 
-    if (buildOptions.urlPathname !== undefined) {
+    if (buildContext.urlPathname !== undefined) {
         // "__esModule",{value:!0})},n.p="/foo-bar/",function(){if("undefined"  -> ... n.p="/" ...
         fixedJsCode = fixedJsCode.replace(
-            new RegExp(`,([a-zA-Z]\\.[a-zA-Z])="${replaceAll(buildOptions.urlPathname, "/", "\\/")}",`, "g"),
+            new RegExp(
+                `,([a-zA-Z]\\.[a-zA-Z])="${replaceAll(
+                    buildContext.urlPathname,
+                    "/",
+                    "\\/"
+                )}",`,
+                "g"
+            ),
             (...[, assignTo]) => `,${assignTo}="/",`
         );
     }
 
     // Example: "static/ or "foo/bar/"
     const staticDir = (() => {
-        let out = pathRelative(buildOptions.reactAppBuildDirPath, buildOptions.assetsDirPath);
+        let out = pathRelative(
+            buildContext.projectBuildDirPath,
+            buildContext.assetsDirPath
+        );
 
         out = replaceAll(out, pathSep, "/") + "/";
 
         if (out === "/") {
-            throw new Error(`The assetsDirPath must be a subdirectory of reactAppBuildDirPath`);
+            throw new Error(
+                `The assetsDirPath must be a subdirectory of projectBuildDirPath`
+            );
         }
 
         return out;
     })();
 
-    const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [
-        new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"${staticDir.replace(/\//g, "\\/")}${language}\\/"`, "g"),
+    const getReplaceArgs = (
+        language: "js" | "css"
+    ): Parameters<typeof String.prototype.replace> => [
+        new RegExp(
+            `([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"${staticDir.replace(
+                /\//g,
+                "\\/"
+            )}${language}\\/"`,
+            "g"
+        ),
         (...[, n, u, matchedFunction, eForFunction]) => {
             const isArrowFunction = matchedFunction.includes("=>");
-            const e = isArrowFunction ? matchedFunction.replace("=>", "").trim() : eForFunction;
+            const e = isArrowFunction
+                ? matchedFunction.replace("=>", "").trim()
+                : eForFunction;
 
             return `
             ${n}[(function(){
                 var pd = Object.getOwnPropertyDescriptor(${n}, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(${n}, "p", {
-                        get: function() { return window.${nameOfTheGlobal}.url.resourcesPath; },
+                        get: function() { return window.kcContext["x-keycloakify"].resourcesPath; },
                         set: function() {}
                     });
                 }
                 return "${u}";
-            })()] = ${isArrowFunction ? `${e} =>` : `function(${e}) { return `} "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}${language}/"`
+            })()] = ${
+                isArrowFunction ? `${e} =>` : `function(${e}) { return `
+            } "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${staticDir}${language}/"`
                 .replace(/\s+/g, " ")
                 .trim();
         }
@@ -68,8 +100,11 @@ export function replaceImportsInJsCode_webpack(params: { jsCode: string; buildOp
         .replace(...getReplaceArgs("js"))
         .replace(...getReplaceArgs("css"))
         .replace(
-            new RegExp(`[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`, "g"),
-            `window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}`
+            new RegExp(
+                `[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`,
+                "g"
+            ),
+            `window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${staticDir}`
         );
 
     return { fixedJsCode };

package/src/bin/main.ts

@@ -3,19 +3,22 @@
 import { termost } from "termost";
 import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
 import * as child_process from "child_process";
+import { assertNoPnpmDlx } from "./tools/assertNoPnpmDlx";
 
 export type CliCommandOptions = {
-    reactAppRootDirPath: string | undefined;
+    projectDirPath: string | undefined;
 };
 
+assertNoPnpmDlx();
+
 const program = termost<CliCommandOptions>(
     {
-        "name": "keycloakify",
-        "description": "Keycloakify CLI",
-        "version": readThisNpmPackageVersion()
+        name: "keycloakify",
+        description: "Keycloakify CLI",
+        version: readThisNpmPackageVersion()
     },
     {
-        "onException": error => {
+        onException: error => {
             console.error(error);
             process.exit(1);
         }
@@ -25,8 +28,8 @@ const program = termost<CliCommandOptions>(
 const optionsKeys: string[] = [];
 
 program.option({
-    "key": "reactAppRootDirPath",
-    "name": (() => {
+    key: "projectDirPath",
+    name: (() => {
         const long = "project";
         const short = "p";
 
@@ -34,19 +37,25 @@ program.option({
 
         return { long, short };
     })(),
-    "description": [
+    description: [
         `For monorepos, path to the keycloakify project.`,
         "Example: `npx keycloakify build --project packages/keycloak-theme`",
         "https://docs.keycloakify.dev/build-options#project-or-p-cli-option"
     ].join(" "),
-    "defaultValue": undefined
+    defaultValue: undefined
 });
 
 function skip(_context: any, argv: { options: Record<string, unknown> }) {
-    const unrecognizedOptionKey = Object.keys(argv.options).find(key => !optionsKeys.includes(key));
+    const unrecognizedOptionKey = Object.keys(argv.options).find(
+        key => !optionsKeys.includes(key)
+    );
 
     if (unrecognizedOptionKey !== undefined) {
-        console.error(`keycloakify: Unrecognized option: ${unrecognizedOptionKey.length === 1 ? "-" : "--"}${unrecognizedOptionKey}`);
+        console.error(
+            `keycloakify: Unrecognized option: ${
+                unrecognizedOptionKey.length === 1 ? "-" : "--"
+            }${unrecognizedOptionKey}`
+        );
         process.exit(1);
     }
 
@@ -55,12 +64,12 @@ function skip(_context: any, argv: { options: Record<string, unknown> }) {
 
 program
     .command({
-        "name": "build",
-        "description": "Build the theme (default subcommand)."
+        name: "build",
+        description: "Build the theme (default subcommand)."
     })
     .task({
         skip,
-        "handler": async cliCommandOptions => {
+        handler: async cliCommandOptions => {
             const { command } = await import("./keycloakify");
 
             await command({ cliCommandOptions });
@@ -68,37 +77,60 @@ program
     });
 
 program
-    .command<{ port: number; keycloakVersion: string | undefined }>({
-        "name": "start-keycloak",
-        "description": "Spin up a pre configured Docker image of Keycloak to test your theme."
+    .command<{
+        port: number;
+        keycloakVersion: string | undefined;
+        realmJsonFilePath: string | undefined;
+    }>({
+        name: "start-keycloak",
+        description:
+            "Spin up a pre configured Docker image of Keycloak to test your theme."
     })
     .option({
-        "key": "port",
-        "name": (() => {
+        key: "port",
+        name: (() => {
             const name = "port";
 
             optionsKeys.push(name);
 
             return name;
         })(),
-        "description": "Keycloak server port.",
-        "defaultValue": 8080
+        description: ["Keycloak server port.", "Example `--port 8085`"].join(" "),
+        defaultValue: 8080
     })
     .option({
-        "key": "keycloakVersion",
-        "name": (() => {
+        key: "keycloakVersion",
+        name: (() => {
             const name = "keycloak-version";
 
             optionsKeys.push(name);
 
             return name;
         })(),
-        "description": "Use a specific version of Keycloak.",
-        "defaultValue": undefined
+        description: [
+            "Use a specific version of Keycloak.",
+            "Example `--keycloak-version 21.1.1`"
+        ].join(" "),
+        defaultValue: undefined
+    })
+    .option({
+        key: "realmJsonFilePath",
+        name: (() => {
+            const name = "import";
+
+            optionsKeys.push(name);
+
+            return name;
+        })(),
+        defaultValue: undefined,
+        description: [
+            "Import your own realm configuration file",
+            "Example `--import path/to/myrealm-realm.json`"
+        ].join(" ")
     })
     .task({
         skip,
-        "handler": async cliCommandOptions => {
+        handler: async cliCommandOptions => {
             const { command } = await import("./start-keycloak");
 
             await command({ cliCommandOptions });
@@ -107,13 +139,13 @@ program
 
 program
     .command({
-        "name": "download-builtin-keycloak-theme",
-        "description": "Download the built-in Keycloak theme."
+        name: "eject-page",
+        description: "Eject a Keycloak page."
     })
     .task({
         skip,
-        "handler": async cliCommandOptions => {
-            const { command } = await import("./download-builtin-keycloak-theme");
+        handler: async cliCommandOptions => {
+            const { command } = await import("./eject-page");
 
             await command({ cliCommandOptions });
         }
@@ -121,13 +153,13 @@ program
 
 program
     .command({
-        "name": "eject-keycloak-page",
-        "description": "Eject a Keycloak page."
+        name: "add-story",
+        description: "Add *.stories.tsx file for a specific page to in your Storybook."
     })
     .task({
         skip,
-        "handler": async cliCommandOptions => {
-            const { command } = await import("./eject-keycloak-page");
+        handler: async cliCommandOptions => {
+            const { command } = await import("./add-story");
 
             await command({ cliCommandOptions });
         }
@@ -135,12 +167,12 @@ program
 
 program
     .command({
-        "name": "initialize-email-theme",
-        "description": "Initialize an email theme."
+        name: "initialize-email-theme",
+        description: "Initialize an email theme."
     })
     .task({
         skip,
-        "handler": async cliCommandOptions => {
+        handler: async cliCommandOptions => {
             const { command } = await import("./initialize-email-theme");
 
             await command({ cliCommandOptions });
@@ -149,26 +181,63 @@ program
 
 program
     .command({
-        "name": "copy-keycloak-resources-to-public",
-        "description": "(Webpack/Create-React-App only) Copy Keycloak default theme resources to the public directory."
+        name: "initialize-account-theme",
+        description: "Initialize the account theme."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./initialize-account-theme");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command({
+        name: "copy-keycloak-resources-to-public",
+        description:
+            "(Webpack/Create-React-App only) Copy Keycloak default theme resources to the public directory."
     })
     .task({
         skip,
-        "handler": async cliCommandOptions => {
+        handler: async cliCommandOptions => {
             const { command } = await import("./copy-keycloak-resources-to-public");
 
             await command({ cliCommandOptions });
         }
     });
 
+program
+    .command({
+        name: "update-kc-gen",
+        description:
+            "(Webpack/Create-React-App only) Create/update the kc.gen.ts file in your project."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./update-kc-gen");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
 // Fallback to build command if no command is provided
 {
     const [, , ...rest] = process.argv;
 
-    if (rest.length === 0 || (rest[0].startsWith("-") && rest[0] !== "--help" && rest[0] !== "-h")) {
-        const { status } = child_process.spawnSync("npx", ["keycloakify", "build", ...rest], {
-            "stdio": "inherit"
-        });
+    if (
+        rest.length === 0 ||
+        (rest[0].startsWith("-") && rest[0] !== "--help" && rest[0] !== "-h")
+    ) {
+        const { status } = child_process.spawnSync(
+            "npx",
+            ["keycloakify", "build", ...rest],
+            {
+                stdio: "inherit"
+            }
+        );
 
         process.exit(status ?? 1);
     }

package/src/bin/shared/KeycloakVersionRange.ts

@@ -1,7 +1,9 @@
-export type KeycloakVersionRange = KeycloakVersionRange.WithAccountTheme | KeycloakVersionRange.WithoutAccountTheme;
+export type KeycloakVersionRange =
+    | KeycloakVersionRange.WithAccountV1Theme
+    | KeycloakVersionRange.WithoutAccountV1Theme;
 
 export namespace KeycloakVersionRange {
-    export type WithoutAccountTheme = "21-and-below" | "22-and-above";
+    export type WithoutAccountV1Theme = "21-and-below" | "22-and-above";
 
-    export type WithAccountTheme = "21-and-below" | "23" | "24-and-above";
+    export type WithAccountV1Theme = "21-and-below" | "23" | "24" | "25-and-above";
 }