keycloakify 6.0.1 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.0.1",
+    "version": "6.1.0",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -46,11 +46,13 @@
         "src/bin/mockTestingResourcesPath.ts",
         "src/bin/promptKeycloakVersion.ts",
         "src/bin/tools/NpmModuleVersion.ts",
+        "src/bin/tools/cliOptions.ts",
         "src/bin/tools/crawl.ts",
         "src/bin/tools/downloadAndUnzip.ts",
         "src/bin/tools/getProjectRoot.ts",
         "src/bin/tools/grant-exec-perms.ts",
         "src/bin/tools/isInside.ts",
+        "src/bin/tools/logger.ts",
         "src/bin/tools/octokit-addons/getLatestsSemVersionedTag.ts",
         "src/bin/tools/octokit-addons/listTags.ts",
         "src/bin/tools/pathJoin.ts",
@@ -391,6 +393,9 @@
         "bin/tools/NpmModuleVersion.d.ts",
         "bin/tools/NpmModuleVersion.js",
         "bin/tools/NpmModuleVersion.js.map",
+        "bin/tools/cliOptions.d.ts",
+        "bin/tools/cliOptions.js",
+        "bin/tools/cliOptions.js.map",
         "bin/tools/crawl.d.ts",
         "bin/tools/crawl.js",
         "bin/tools/crawl.js.map",
@@ -406,6 +411,9 @@
         "bin/tools/isInside.d.ts",
         "bin/tools/isInside.js",
         "bin/tools/isInside.js.map",
+        "bin/tools/logger.d.ts",
+        "bin/tools/logger.js",
+        "bin/tools/logger.js.map",
         "bin/tools/octokit-addons/getLatestsSemVersionedTag.d.ts",
         "bin/tools/octokit-addons/getLatestsSemVersionedTag.js",
         "bin/tools/octokit-addons/getLatestsSemVersionedTag.js.map",
@@ -1237,6 +1245,7 @@
     "devDependencies": {
         "@emotion/react": "^11.4.1",
         "@types/memoizee": "^0.4.7",
+        "@types/minimist": "^1.2.2",
         "@types/node": "^17.0.25",
         "@types/react": "18.0.9",
         "copyfiles": "^2.4.1",
@@ -1255,12 +1264,13 @@
         "evt": "^2.4.0",
         "memoizee": "^0.4.15",
         "minimal-polyfills": "^2.2.2",
+        "minimist": "^1.2.6",
         "path-browserify": "^1.0.1",
         "powerhooks": "^0.20.15",
         "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
         "tsafe": "^1.0.1",
-        "tss-react": "^4.1.1",
+        "tss-react": "^4.1.3",
         "zod": "^3.17.10"
     }
 }

package/src/bin/create-keycloak-email-directory.ts

@@ -6,11 +6,15 @@ import { join as pathJoin, basename as pathBasename } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
 import * as fs from "fs";
+import { getCliOptions } from "./tools/cliOptions";
+import { getLogger } from "./tools/logger";
 
 if (require.main === module) {
     (async () => {
+        const { isSilent } = getCliOptions(process.argv.slice(2));
+        const logger = getLogger({ isSilent });
         if (fs.existsSync(keycloakThemeEmailDirPath)) {
-            console.log(`There is already a ./${pathBasename(keycloakThemeEmailDirPath)} directory in your project. Aborting.`);
+            logger.warn(`There is already a ./${pathBasename(keycloakThemeEmailDirPath)} directory in your project. Aborting.`);
 
             process.exit(-1);
         }
@@ -21,7 +25,8 @@ if (require.main === module) {
 
         downloadBuiltinKeycloakTheme({
             keycloakVersion,
-            "destDirPath": builtinKeycloakThemeTmpDirPath
+            "destDirPath": builtinKeycloakThemeTmpDirPath,
+            isSilent
         });
 
         transformCodebase({
@@ -29,7 +34,7 @@ if (require.main === module) {
             "destDirPath": keycloakThemeEmailDirPath
         });
 
-        console.log(`./${pathBasename(keycloakThemeEmailDirPath)} ready to be customized`);
+        logger.log(`./${pathBasename(keycloakThemeEmailDirPath)} ready to be customized`);
 
         fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
     })();

package/src/bin/download-builtin-keycloak-theme.ts

@@ -4,31 +4,37 @@ import { keycloakThemeBuildingDirPath } from "./keycloakify";
 import { join as pathJoin } from "path";
 import { downloadAndUnzip } from "./tools/downloadAndUnzip";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
+import { getCliOptions } from "./tools/cliOptions";
+import { getLogger } from "./tools/logger";
 
-export function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string }) {
-    const { keycloakVersion, destDirPath } = params;
+export function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; isSilent: boolean }) {
+    const { keycloakVersion, destDirPath, isSilent } = params;
 
     for (const ext of ["", "-community"]) {
         downloadAndUnzip({
             "destDirPath": destDirPath,
             "url": `https://github.com/keycloak/keycloak/archive/refs/tags/${keycloakVersion}.zip`,
             "pathOfDirToExtractInArchive": `keycloak-${keycloakVersion}/themes/src/main/resources${ext}/theme`,
-            "cacheDirPath": pathJoin(keycloakThemeBuildingDirPath, ".cache")
+            "cacheDirPath": pathJoin(keycloakThemeBuildingDirPath, ".cache"),
+            isSilent
         });
     }
 }
 
 if (require.main === module) {
     (async () => {
+        const { isSilent } = getCliOptions(process.argv.slice(2));
+        const logger = getLogger({ isSilent });
         const { keycloakVersion } = await promptKeycloakVersion();
 
         const destDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme");
 
-        console.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
+        logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
 
         downloadBuiltinKeycloakTheme({
             keycloakVersion,
-            destDirPath
+            destDirPath,
+            isSilent
         });
     })();
 }

package/src/bin/generate-i18n-messages.ts

@@ -5,6 +5,8 @@ import { crawl } from "./tools/crawl";
 import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
 import { getProjectRoot } from "./tools/getProjectRoot";
 import { rm_rf, rm_r } from "./tools/rm";
+import { getCliOptions } from "./tools/cliOptions";
+import { getLogger } from "./tools/logger";
 
 //NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
 // update the version array for generating for newer version.
@@ -12,8 +14,11 @@ import { rm_rf, rm_r } from "./tools/rm";
 //@ts-ignore
 const propertiesParser = require("properties-parser");
 
+const { isSilent } = getCliOptions(process.argv.slice(2));
+const logger = getLogger({ isSilent });
+
 for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) {
-    console.log({ keycloakVersion });
+    logger.log(JSON.stringify({ keycloakVersion }));
 
     const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
 
@@ -21,7 +26,8 @@ for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) {
 
     downloadBuiltinKeycloakTheme({
         keycloakVersion,
-        "destDirPath": tmpDirPath
+        "destDirPath": tmpDirPath,
+        isSilent
     });
 
     type Dictionary = { [idiomId: string]: string };
@@ -75,7 +81,7 @@ for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) {
                 )
             );
 
-            console.log(`${filePath} wrote`);
+            logger.log(`${filePath} wrote`);
         });
     });
 }

package/src/bin/keycloakify/BuildOptions.ts

@@ -35,6 +35,7 @@ export type BuildOptions = BuildOptions.Standalone | BuildOptions.ExternalAssets
 
 export namespace BuildOptions {
     export type Common = {
+        isSilent: boolean;
         version: string;
         themeName: string;
         extraPages?: string[];
@@ -71,8 +72,9 @@ export function readBuildOptions(params: {
     packageJson: string;
     CNAME: string | undefined;
     isExternalAssetsCliParamProvided: boolean;
+    isSilent: boolean;
 }): BuildOptions {
-    const { packageJson, CNAME, isExternalAssetsCliParamProvided } = params;
+    const { packageJson, CNAME, isExternalAssetsCliParamProvided, isSilent } = params;
 
     const parsedPackageJson = zParsedPackageJson.parse(JSON.parse(packageJson));
 
@@ -130,7 +132,8 @@ export function readBuildOptions(params: {
             })(),
             "version": version,
             extraPages,
-            extraThemeProperties
+            extraThemeProperties,
+            isSilent
         };
     })();
 

package/src/bin/keycloakify/generateKeycloakThemeResources.ts

@@ -11,6 +11,7 @@ import { isInside } from "../tools/isInside";
 import type { BuildOptions } from "./BuildOptions";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
+import { getLogger } from "../tools/logger";
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
 
@@ -19,6 +20,7 @@ export namespace BuildOptionsLike {
         themeName: string;
         extraPages?: string[];
         extraThemeProperties?: string[];
+        isSilent: boolean;
     };
 
     export type Standalone = Common & {
@@ -60,6 +62,7 @@ export function generateKeycloakThemeResources(params: {
 }): { doBundlesEmailTemplate: boolean } {
     const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, keycloakThemeEmailDirPath, keycloakVersion, buildOptions } = params;
 
+    const logger = getLogger({ isSilent: buildOptions.isSilent });
     const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, "login");
 
     let allCssGlobalsToDefine: Record<string, string> = {};
@@ -117,7 +120,7 @@ export function generateKeycloakThemeResources(params: {
 
     email: {
         if (!fs.existsSync(keycloakThemeEmailDirPath)) {
-            console.log(
+            logger.log(
                 [
                     `Not bundling email template because ${pathBasename(keycloakThemeEmailDirPath)} does not exist`,
                     `To start customizing the email template, run: 👉 npx create-keycloak-email-directory 👈`
@@ -154,7 +157,8 @@ export function generateKeycloakThemeResources(params: {
 
         downloadBuiltinKeycloakTheme({
             keycloakVersion,
-            "destDirPath": tmpDirPath
+            "destDirPath": tmpDirPath,
+            isSilent: buildOptions.isSilent
         });
 
         const themeResourcesDirPath = pathJoin(themeDirPath, "resources");

package/src/bin/keycloakify/keycloakify.ts

@@ -5,6 +5,8 @@ import * as child_process from "child_process";
 import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTestingContainer";
 import * as fs from "fs";
 import { readBuildOptions } from "./BuildOptions";
+import { getLogger } from "../tools/logger";
+import { getCliOptions } from "../tools/cliOptions";
 
 const reactProjectDirPath = process.cwd();
 
@@ -12,7 +14,9 @@ export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build
 export const keycloakThemeEmailDirPath = pathJoin(keycloakThemeBuildingDirPath, "..", "keycloak_email");
 
 export function main() {
-    console.log("🔏 Building the keycloak theme...⌚");
+    const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));
+    const logger = getLogger({ isSilent });
+    logger.log("🔏 Building the keycloak theme...⌚");
 
     const buildOptions = readBuildOptions({
         "packageJson": fs.readFileSync(pathJoin(reactProjectDirPath, "package.json")).toString("utf8"),
@@ -25,7 +29,8 @@ export function main() {
 
             return fs.readFileSync(cnameFilePath).toString("utf8");
         })(),
-        "isExternalAssetsCliParamProvided": process.argv[2]?.toLowerCase() === "--external-assets"
+        "isExternalAssetsCliParamProvided": hasExternalAssets,
+        "isSilent": isSilent
     });
 
     const { doBundlesEmailTemplate } = generateKeycloakThemeResources({
@@ -59,7 +64,7 @@ export function main() {
         buildOptions
     });
 
-    console.log(
+    logger.log(
         [
             "",
             `✅ Your keycloak theme has been generated and bundled into ./${pathRelative(reactProjectDirPath, jarFilePath)} 🚀`,

package/src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -57,7 +57,7 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; build
                         : `
                     var p= "";
                     Object.defineProperty(${n}, "p", {
-                        get: function() { return "${ftlValuesGlobalName}" in window ? "${buildOptions.urlOrigin}" : p; },
+                        get: function() { return "${ftlValuesGlobalName}" in window ? "${buildOptions.urlOrigin}/" : p; },
                         set: function (value){ p = value;}
                     });
                     `
@@ -73,13 +73,13 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; build
         .replace(/([a-zA-Z]+\.[a-zA-Z]+)\+"static\//g, (...[, group]) =>
             buildOptions.isStandalone
                 ? `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
-                : `("${ftlValuesGlobalName}" in window ? "${buildOptions.urlOrigin}" : ${group}) + "static/`
+                : `("${ftlValuesGlobalName}" in window ? "${buildOptions.urlOrigin}/" : ${group}) + "static/`
         )
         //TODO: Write a test case for this
         .replace(/".chunk.css",([a-zA-Z])+=([a-zA-Z]+\.[a-zA-Z]+)\+([a-zA-Z]+),/, (...[, group1, group2, group3]) =>
             buildOptions.isStandalone
                 ? `".chunk.css",${group1} = window.${ftlValuesGlobalName}.url.resourcesPath + "/build/" + ${group3},`
-                : `".chunk.css",${group1} = ("${ftlValuesGlobalName}" in window ? "${buildOptions.urlOrigin}" : ${group2}) + ${group3},`
+                : `".chunk.css",${group1} = ("${ftlValuesGlobalName}" in window ? "${buildOptions.urlOrigin}/" : ${group2}) + ${group3},`
         );
 
     return { fixedJsCode };

package/src/bin/tools/cliOptions.ts

@@ -0,0 +1,15 @@
+import parseArgv from "minimist";
+
+export type CliOptions = {
+    isSilent: boolean;
+    hasExternalAssets: boolean;
+};
+
+export const getCliOptions = (processArgv: string[]): CliOptions => {
+    const argv = parseArgv(processArgv);
+
+    return {
+        isSilent: typeof argv["silent"] === "boolean" ? argv["silent"] : false,
+        hasExternalAssets: typeof argv["external-assets"] === "boolean" ? argv["external-assets"] : false
+    };
+};

package/src/bin/tools/downloadAndUnzip.ts

@@ -6,7 +6,13 @@ import { rm, rm_rf } from "./rm";
 import * as crypto from "crypto";
 
 /** assert url ends with .zip */
-export function downloadAndUnzip(params: { url: string; destDirPath: string; pathOfDirToExtractInArchive?: string; cacheDirPath: string }) {
+export function downloadAndUnzip(params: {
+    isSilent: boolean;
+    url: string;
+    destDirPath: string;
+    pathOfDirToExtractInArchive?: string;
+    cacheDirPath: string;
+}) {
     const { url, destDirPath, pathOfDirToExtractInArchive, cacheDirPath } = params;
 
     const extractDirPath = pathJoin(
@@ -54,7 +60,7 @@ export function downloadAndUnzip(params: { url: string; destDirPath: string; pat
 
         const zipFileBasename = pathBasename(url);
 
-        execSync(`curl -L ${url} -o ${zipFileBasename}`, { "cwd": extractDirPath });
+        execSync(`curl -L ${url} -o ${zipFileBasename} ${params.isSilent ? "-s" : ""}`, { "cwd": extractDirPath });
 
         execSync(`unzip -o ${zipFileBasename}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/**/*"`}`, {
             "cwd": extractDirPath

package/src/bin/tools/logger.ts

@@ -0,0 +1,27 @@
+type LoggerOpts = {
+    force?: boolean;
+};
+
+type Logger = {
+    log: (message: string, opts?: LoggerOpts) => void;
+    warn: (message: string) => void;
+    error: (message: string) => void;
+};
+
+export const getLogger = ({ isSilent }: { isSilent?: boolean } = {}): Logger => {
+    return {
+        log: (message, { force } = {}) => {
+            if (isSilent && !force) {
+                return;
+            }
+
+            console.log(message);
+        },
+        warn: message => {
+            console.warn(message);
+        },
+        error: message => {
+            console.error(message);
+        }
+    };
+};

package/src/lib/i18n/index.tsx

@@ -83,8 +83,6 @@ export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params:
             return;
         }
 
-        let isMounted = true;
-
         refHasStartedFetching.current = true;
 
         (async () => {
@@ -144,10 +142,6 @@ export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params:
                 })()
             ]).then(modules => modules.map(module => module.default));
 
-            if (!isMounted) {
-                return;
-            }
-
             setI18n({
                 ...createI18nTranslationFunctions({
                     "fallbackMessages": {
@@ -180,10 +174,6 @@ export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params:
                 )
             });
         })();
-
-        return () => {
-            isMounted = false;
-        };
     }, []);
 
     return i18n ?? null;

package/src/test/bin/generateKeycloakThemeResources.ts

@@ -14,6 +14,7 @@ generateKeycloakThemeResources({
         "extraPages": ["my-custom-page.ftl"],
         "extraThemeProperties": ["env=test"],
         "isStandalone": true,
-        "urlPathname": "/keycloakify-demo-app/"
+        "urlPathname": "/keycloakify-demo-app/",
+        "isSilent": false
     }
 });

package/src/test/bin/replaceImportFromStatic.ts

@@ -103,13 +103,13 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
 
         const fixedJsCodeExpected = `
             function f() {
-                return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : a.p) + "static/js/" + ({}[e] || e) + "." + {
+                return ("kcContext" in window ? "https://demo-app.keycloakify.dev/" : a.p) + "static/js/" + ({}[e] || e) + "." + {
                     3: "0664cdc0"
                 }[e] + ".chunk.js"
             }
 
             function sameAsF() {
-                return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : a.p) + "static/js/" + ({}[e] || e) + "." + {
+                return ("kcContext" in window ? "https://demo-app.keycloakify.dev/" : a.p) + "static/js/" + ({}[e] || e) + "." + {
                     3: "0664cdc0"
                 }[e] + ".chunk.js"
             }
@@ -119,7 +119,7 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                 if( pd === undefined || pd.configurable ){
                     var p= "";
                     Object.defineProperty(__webpack_require__, "p", {
-                        get: function() { return "kcContext" in window ? "https://demo-app.keycloakify.dev" : p; },
+                        get: function() { return "kcContext" in window ? "https://demo-app.keycloakify.dev/" : p; },
                         set: function (value){ p = value; }
                     });
                 }
@@ -137,7 +137,7 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                 if( pd === undefined || pd.configurable ){
                     var p= "";
                     Object.defineProperty(t, "p", {
-                        get: function() { return "kcContext" in window ? "https://demo-app.keycloakify.dev" : p; },
+                        get: function() { return "kcContext" in window ? "https://demo-app.keycloakify.dev/" : p; },
                         set: function (value){ p = value; }
                     });
                 }

package/src/test/bin/setupSampleReactProject.ts

@@ -8,6 +8,7 @@ export function setupSampleReactProject() {
     downloadAndUnzip({
         "url": "https://github.com/InseeFrLab/keycloakify/releases/download/v0.0.1/sample_build_dir_and_package_json.zip",
         "destDirPath": sampleReactProjectDirPath,
-        "cacheDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak", ".cache")
+        "cacheDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak", ".cache"),
+        "isSilent": false
     });
 }