keycloakify 6.0.0-beta.2 → 6.0.0-beta.8

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

@@ -0,0 +1,64 @@
+import * as crypto from "crypto";
+import type { BuildOptions } from "../BuildOptions";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { Reflect } from "tsafe/Reflect";
+
+export type BuildOptionsLike = {
+    urlPathname: string | undefined;
+};
+
+{
+    const buildOptions = Reflect<BuildOptions>();
+
+    assert(!is<BuildOptions.ExternalAssets.CommonExternalAssets>(buildOptions));
+
+    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
+}
+
+export function replaceImportsInCssCode(params: { cssCode: string }): {
+    fixedCssCode: string;
+    cssGlobalsToDefine: Record<string, string>;
+} {
+    const { cssCode } = params;
+
+    const cssGlobalsToDefine: Record<string, string> = {};
+
+    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
+        match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match)
+    );
+
+    let fixedCssCode = cssCode;
+
+    Object.keys(cssGlobalsToDefine).forEach(
+        cssVariableName =>
+            //NOTE: split/join pattern ~ replace all
+            (fixedCssCode = fixedCssCode.split(cssGlobalsToDefine[cssVariableName]).join(`var(--${cssVariableName})`))
+    );
+
+    return { fixedCssCode, cssGlobalsToDefine };
+}
+
+export function generateCssCodeToDefineGlobals(params: { cssGlobalsToDefine: Record<string, string>; buildOptions: BuildOptionsLike }): {
+    cssCodeToPrependInHead: string;
+} {
+    const { cssGlobalsToDefine, buildOptions } = params;
+
+    return {
+        "cssCodeToPrependInHead": [
+            ":root {",
+            ...Object.keys(cssGlobalsToDefine)
+                .map(cssVariableName =>
+                    [
+                        `--${cssVariableName}:`,
+                        cssGlobalsToDefine[cssVariableName].replace(
+                            new RegExp(`url\\(${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`, "g"),
+                            "url(${url.resourcesPath}/build/"
+                        )
+                    ].join(" ")
+                )
+                .map(line => `    ${line};`),
+            "}"
+        ].join("\n")
+    };
+}

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

@@ -0,0 +1,47 @@
+import type { BuildOptions } from "../BuildOptions";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { Reflect } from "tsafe/Reflect";
+
+export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
+
+export namespace BuildOptionsLike {
+    export type Common = {
+        urlPathname: string | undefined;
+    };
+
+    export type Standalone = Common & {
+        isStandalone: true;
+    };
+
+    export type ExternalAssets = Common & {
+        isStandalone: false;
+        urlOrigin: string;
+    };
+}
+
+{
+    const buildOptions = Reflect<BuildOptions>();
+
+    assert(!is<BuildOptions.ExternalAssets.CommonExternalAssets>(buildOptions));
+
+    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
+}
+
+export function replaceImportsInInlineCssCode(params: { cssCode: string; buildOptions: BuildOptionsLike }): {
+    fixedCssCode: string;
+} {
+    const { cssCode, buildOptions } = params;
+
+    const fixedCssCode = cssCode.replace(
+        buildOptions.urlPathname === undefined
+            ? /url\(["']?\/([^/][^)"']+)["']?\)/g
+            : new RegExp(`url\\(["']?${buildOptions.urlPathname}([^)"']+)["']?\\)`, "g"),
+        (...[, group]) =>
+            `url(${
+                buildOptions.isStandalone ? "${url.resourcesPath}/build/" + group : buildOptions.urlOrigin + (buildOptions.urlPathname ?? "/") + group
+            })`
+    );
+
+    return { fixedCssCode };
+}

package/src/bin/link_in_test_app.ts

@@ -1,5 +1,6 @@
 import { execSync } from "child_process";
 import { join as pathJoin, relative as pathRelative } from "path";
+import { exclude } from "tsafe/exclude";
 import * as fs from "fs";
 
 const keycloakifyDirPath = pathJoin(__dirname, "..", "..");
@@ -14,14 +15,14 @@ fs.writeFileSync(
                 return {
                     ...packageJsonParsed,
                     "main": packageJsonParsed["main"].replace(/^dist\//, ""),
-                    "types": packageJsonParsed["types"].replace(/^dist\//, ""),
+                    "types": packageJsonParsed["types"].replace(/^dist\//, "")
                 };
             })(),
             null,
-            2,
+            2
         ),
-        "utf8",
-    ),
+        "utf8"
+    )
 );
 
 const commonThirdPartyDeps = (() => {
@@ -33,10 +34,10 @@ const commonThirdPartyDeps = (() => {
             .map(namespaceModuleName =>
                 fs
                     .readdirSync(pathJoin(keycloakifyDirPath, "node_modules", namespaceModuleName))
-                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`),
+                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
             )
             .reduce((prev, curr) => [...prev, ...curr], []),
-        ...standaloneModuleNames,
+        ...standaloneModuleNames
     ];
 })();
 
@@ -55,16 +56,39 @@ const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
         cwd,
         "env": {
             ...process.env,
-            "HOME": yarnHomeDirPath,
-        },
+            "HOME": yarnHomeDirPath
+        }
     });
 };
 
-const testAppNames = ["keycloakify-demo-app"] as const;
+const testAppPaths = (() => {
+    const arg = process.argv[2];
 
-const getTestAppPath = (testAppName: typeof testAppNames[number]) => pathJoin(keycloakifyDirPath, "..", testAppName);
+    const testAppNames = arg !== undefined ? [arg] : ["keycloakify-starter", "keycloakify-advanced-starter"];
 
-testAppNames.forEach(testAppName => execSync("yarn install", { "cwd": getTestAppPath(testAppName) }));
+    return testAppNames
+        .map(testAppName => {
+            const testAppPath = pathJoin(keycloakifyDirPath, "..", testAppName);
+
+            if (fs.existsSync(testAppPath)) {
+                return testAppPath;
+            }
+
+            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
+
+            return undefined;
+        })
+        .filter(exclude(undefined));
+})();
+
+console.log(testAppPaths);
+
+if (testAppPaths.length === 0) {
+    console.error("No test app to link into!");
+    process.exit(-1);
+}
+
+testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
 
 console.log("=== Linking common dependencies ===");
 
@@ -77,26 +101,28 @@ commonThirdPartyDeps.forEach(commonThirdPartyDep => {
     console.log(`${current}/${total} ${commonThirdPartyDep}`);
 
     const localInstallPath = pathJoin(
-        ...[keycloakifyDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])],
+        ...[keycloakifyDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
     );
 
     execYarnLink({ "cwd": localInstallPath });
+});
 
-    testAppNames.forEach(testAppName =>
+commonThirdPartyDeps.forEach(commonThirdPartyDep =>
+    testAppPaths.forEach(testAppPath =>
         execYarnLink({
-            "cwd": getTestAppPath(testAppName),
-            "targetModuleName": commonThirdPartyDep,
-        }),
-    );
-});
+            "cwd": testAppPath,
+            "targetModuleName": commonThirdPartyDep
+        })
+    )
+);
 
 console.log("=== Linking in house dependencies ===");
 
 execYarnLink({ "cwd": pathJoin(keycloakifyDirPath, "dist") });
 
-testAppNames.forEach(testAppName =>
+testAppPaths.forEach(testAppPath =>
     execYarnLink({
-        "cwd": getTestAppPath(testAppName),
-        "targetModuleName": "keycloakify",
-    }),
+        "cwd": testAppPath,
+        "targetModuleName": "keycloakify"
+    })
 );

package/src/bin/mockTestingResourcesPath.ts

@@ -0,0 +1,5 @@
+import { pathJoin } from "./tools/pathJoin";
+
+export const mockTestingSubDirOfPublicDirBasename = "keycloak_static";
+export const mockTestingResourcesPath = pathJoin(mockTestingSubDirOfPublicDirBasename, "resources");
+export const mockTestingResourcesCommonPath = pathJoin(mockTestingResourcesPath, "resources_common");

package/src/bin/promptKeycloakVersion.ts

@@ -24,9 +24,9 @@ export async function promptKeycloakVersion() {
             "count": 10,
             "doIgnoreBeta": true,
             "owner": "keycloak",
-            "repo": "keycloak",
+            "repo": "keycloak"
         }).then(arr => arr.map(({ tag }) => tag))),
-        "11.0.3",
+        "11.0.3"
     ];
 
     if (process.env["GITHUB_ACTIONS"] === "true") {
@@ -34,7 +34,7 @@ export async function promptKeycloakVersion() {
     }
 
     const { value: keycloakVersion } = await cliSelect<string>({
-        "values": tags,
+        "values": tags
     }).catch(() => {
         console.log("Aborting");
 

package/src/bin/tools/NpmModuleVersion.ts

@@ -20,7 +20,7 @@ export namespace NpmModuleVersion {
             ...(() => {
                 const str = match[4];
                 return str === undefined ? {} : { "betaPreRelease": parseInt(str) };
-            })(),
+            })()
         };
     }
 

package/src/bin/tools/downloadAndUnzip.ts

@@ -1,32 +1,75 @@
 import { basename as pathBasename, join as pathJoin } from "path";
 import { execSync } from "child_process";
-import fs from "fs";
+import * as fs from "fs";
 import { transformCodebase } from "./transformCodebase";
-import { rm_rf, rm, rm_r } from "./rm";
+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 }) {
-    const { url, destDirPath, pathOfDirToExtractInArchive } = params;
+export function downloadAndUnzip(params: { url: string; destDirPath: string; pathOfDirToExtractInArchive?: string; cacheDirPath: string }) {
+    const { url, destDirPath, pathOfDirToExtractInArchive, cacheDirPath } = params;
 
-    const tmpDirPath = pathJoin(destDirPath, "..", "tmp_xxKdOxnEdx");
-    const zipFilePath = pathBasename(url);
+    const extractDirPath = pathJoin(
+        cacheDirPath,
+        `_${crypto.createHash("sha256").update(JSON.stringify({ url, pathOfDirToExtractInArchive })).digest("hex").substring(0, 15)}`
+    );
 
-    rm_rf(tmpDirPath);
+    fs.mkdirSync(cacheDirPath, { "recursive": true });
 
-    fs.mkdirSync(tmpDirPath, { "recursive": true });
+    const { readIsSuccessByExtractDirPath, writeIsSuccessByExtractDirPath } = (() => {
+        const filePath = pathJoin(cacheDirPath, "isSuccessByExtractDirPath.json");
 
-    execSync(`curl -L ${url} -o ${zipFilePath}`, { "cwd": tmpDirPath });
+        type IsSuccessByExtractDirPath = Record<string, boolean | undefined>;
 
-    execSync(`unzip ${zipFilePath}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/*"`}`, {
-        "cwd": tmpDirPath,
-    });
+        function readIsSuccessByExtractDirPath(): IsSuccessByExtractDirPath {
+            if (!fs.existsSync(filePath)) {
+                return {};
+            }
+
+            return JSON.parse(fs.readFileSync(filePath).toString("utf8"));
+        }
+
+        function writeIsSuccessByExtractDirPath(isSuccessByExtractDirPath: IsSuccessByExtractDirPath): void {
+            fs.writeFileSync(filePath, Buffer.from(JSON.stringify(isSuccessByExtractDirPath, null, 2), "utf8"));
+        }
+
+        return { readIsSuccessByExtractDirPath, writeIsSuccessByExtractDirPath };
+    })();
+
+    downloadAndUnzip: {
+        const isSuccessByExtractDirPath = readIsSuccessByExtractDirPath();
+
+        if (isSuccessByExtractDirPath[extractDirPath]) {
+            break downloadAndUnzip;
+        }
+
+        writeIsSuccessByExtractDirPath({
+            ...isSuccessByExtractDirPath,
+            [extractDirPath]: false
+        });
 
-    rm(pathBasename(url), { "cwd": tmpDirPath });
+        rm_rf(extractDirPath);
+
+        fs.mkdirSync(extractDirPath);
+
+        const zipFileBasename = pathBasename(url);
+
+        execSync(`curl -L ${url} -o ${zipFileBasename}`, { "cwd": extractDirPath });
+
+        execSync(`unzip -o ${zipFileBasename}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/**/*"`}`, {
+            "cwd": extractDirPath
+        });
+
+        rm(zipFileBasename, { "cwd": extractDirPath });
+
+        writeIsSuccessByExtractDirPath({
+            ...isSuccessByExtractDirPath,
+            [extractDirPath]: true
+        });
+    }
 
     transformCodebase({
-        "srcDirPath": pathOfDirToExtractInArchive === undefined ? tmpDirPath : pathJoin(tmpDirPath, pathOfDirToExtractInArchive),
-        destDirPath,
+        "srcDirPath": pathOfDirToExtractInArchive === undefined ? extractDirPath : pathJoin(extractDirPath, pathOfDirToExtractInArchive),
+        destDirPath
     });
-
-    rm_r(tmpDirPath);
 }

package/src/bin/tools/getProjectRoot.ts

@@ -2,7 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 
 function getProjectRootRec(dirPath: string): string {
-    if (fs.existsSync(path.join(dirPath, "tsconfig.json"))) {
+    if (fs.existsSync(path.join(dirPath, "package.json"))) {
         return dirPath;
     }
     return getProjectRootRec(path.join(dirPath, ".."));

package/src/bin/tools/grant-exec-perms.ts

@@ -1,9 +1,10 @@
 import { getProjectRoot } from "./getProjectRoot";
 import { join as pathJoin } from "path";
-import child_process from "child_process";
+import * as child_process from "child_process";
+import * as fs from "fs";
 
-Object.entries<string>(require(pathJoin(getProjectRoot(), "package.json"))["bin"]).forEach(([, scriptPath]) =>
+Object.entries<string>(JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["bin"]).forEach(([, scriptPath]) =>
     child_process.execSync(`chmod +x ${scriptPath}`, {
-        "cwd": getProjectRoot(),
-    }),
+        "cwd": getProjectRoot()
+    })
 );

package/src/bin/tools/octokit-addons/listTags.ts

@@ -19,7 +19,7 @@ export function listTagsFactory(params: { octokit: Octokit }) {
                 owner,
                 repo,
                 per_page,
-                "page": page++,
+                "page": page++
             });
 
             for (const branch of resp.data.map(({ name }) => name)) {

package/src/bin/tools/rm.ts

@@ -10,7 +10,7 @@ export function rm(pathToRemove: string, options?: { cwd: string }) {
     rmInternal({
         pathToRemove,
         "args": undefined,
-        "cwd": options?.cwd,
+        "cwd": options?.cwd
     });
 }
 
@@ -18,7 +18,7 @@ export function rm_r(pathToRemove: string, options?: { cwd: string }) {
     rmInternal({
         pathToRemove,
         "args": "r",
-        "cwd": options?.cwd,
+        "cwd": options?.cwd
     });
 }
 
@@ -26,6 +26,6 @@ export function rm_rf(pathToRemove: string, options?: { cwd: string }) {
     rmInternal({
         pathToRemove,
         "args": "rf",
-        "cwd": options?.cwd,
+        "cwd": options?.cwd
     });
 }

package/src/bin/tools/transformCodebase.ts

@@ -16,8 +16,8 @@ export function transformCodebase(params: { srcDirPath: string; destDirPath: str
         srcDirPath,
         destDirPath,
         transformSourceCode = id<TransformSourceCode>(({ sourceCode }) => ({
-            "modifiedSourceCode": sourceCode,
-        })),
+            "modifiedSourceCode": sourceCode
+        }))
     } = params;
 
     for (const file_relative_path of crawl(srcDirPath)) {
@@ -25,7 +25,7 @@ export function transformCodebase(params: { srcDirPath: string; destDirPath: str
 
         const transformSourceCodeResult = transformSourceCode({
             "sourceCode": fs.readFileSync(filePath),
-            "filePath": path.join(srcDirPath, file_relative_path),
+            "filePath": path.join(srcDirPath, file_relative_path)
         });
 
         if (transformSourceCodeResult === undefined) {
@@ -33,14 +33,14 @@ export function transformCodebase(params: { srcDirPath: string; destDirPath: str
         }
 
         fs.mkdirSync(path.dirname(path.join(destDirPath, file_relative_path)), {
-            "recursive": true,
+            "recursive": true
         });
 
         const { newFileName, modifiedSourceCode } = transformSourceCodeResult;
 
         fs.writeFileSync(
             path.join(path.dirname(path.join(destDirPath, file_relative_path)), newFileName ?? path.basename(file_relative_path)),
-            modifiedSourceCode,
+            modifiedSourceCode
         );
     }
 }

package/src/bin/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsproject.json",
+    "compilerOptions": {
+        "module": "CommonJS",
+        "target": "ES5",
+        "esModuleInterop": true,
+        "lib": ["es2015", "DOM", "ES2019.Object"],
+        "outDir": "../../dist/bin",
+        "rootDir": "."
+    }
+}

package/src/lib/components/Error.tsx

@@ -1,17 +1,17 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-export const Error = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Error; useI18n: () => I18n } & KcProps) => {
-    const { msg } = useI18n();
-
+const Error = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Error; i18n: I18n } & KcProps) => {
     const { message, client } = kcContext;
 
+    const { msg } = i18n;
+
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("errorTitle")}
@@ -30,3 +30,5 @@ export const Error = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
         />
     );
 });
+
+export default Error;

package/src/lib/components/Info.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import { assert } from "../tools/assert";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-export const Info = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Info; useI18n: () => I18n } & KcProps) => {
+const Info = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Info; i18n: I18n } & KcProps) => {
+    const { msgStr, msg } = i18n;
+
     assert(kcContext.message !== undefined);
 
     const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
 
-    const { msg } = useI18n();
-
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
@@ -24,7 +24,7 @@ export const Info = memo(({ kcContext, useI18n, ...props }: { kcContext: KcConte
                         {message.summary}
 
                         {requiredActions !== undefined && (
-                            <b>{requiredActions.map(requiredAction => msg(`requiredAction.${requiredAction}` as const)).join(",")}</b>
+                            <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
                         )}
                     </p>
                     {!skipLink && pageRedirectUri !== undefined ? (
@@ -47,3 +47,5 @@ export const Info = memo(({ kcContext, useI18n, ...props }: { kcContext: KcConte
         />
     );
 });
+
+export default Info;