refactor

src/bin/build-keycloak-theme/generateFtl.ts

@@ -0,0 +1,105 @@
+
+
+import cheerio from "cheerio";
+import {
+    replaceImportFromStaticInJsCode,
+    generateCssCodeToDefineGlobals
+} from "./replaceImportFromStatic";
+
+export function generateFtlFilesCodeFactory(
+    params: {
+        ftlValuesGlobalName: string;
+        cssGlobalsToDefine: Record<string, string>;
+        indexHtmlCode: string;
+    }
+) {
+
+    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode } = params;
+
+    const $ = cheerio.load(indexHtmlCode);
+
+    $("script:not([src])").each((...[, element]) => {
+
+        const { fixedJsCode } = replaceImportFromStaticInJsCode({
+            ftlValuesGlobalName,
+            "jsCode": $(element).html()!
+        });
+
+        $(element).text(fixedJsCode);
+
+    });
+
+
+    ([
+        ["link", "href"],
+        ["script", "src"],
+    ] as const).forEach(([selector, attrName]) =>
+        $(selector).each((...[, element]) => {
+
+            const href = $(element).attr(attrName);
+
+            if (!href?.startsWith("/")) {
+                return;
+            }
+
+            $(element).attr(attrName, "${url.resourcesPath}" + href);
+
+        })
+    );
+
+    $("head").prepend(
+        [
+            '',
+            '<style>',
+            generateCssCodeToDefineGlobals(
+                { cssGlobalsToDefine }
+            ).cssCodeToPrependInHead,
+            '</style>',
+            '',
+            '<script>',
+            '    Object.assign(',
+            `        window.${ftlValuesGlobalName},`,
+            '        {',
+            '            "url": {',
+            '                "loginAction": "${url.loginAction}",',
+            '                "resourcesPath": "${url.resourcesPath}"',
+            '            }',
+            '        }',
+            '    });',
+            '</script>',
+            ''
+        ].join("\n"),
+    );
+
+
+    const partiallyFixedIndexHtmlCode = $.html();
+
+    function generateFtlFilesCode(
+        params: {
+            pageBasename: "login.ftl" | "register.ftl"
+        }
+    ): { ftlCode: string; } {
+
+        const { pageBasename } = params;
+
+        const $ = cheerio.load(partiallyFixedIndexHtmlCode);
+
+        $("head").prepend(
+            [
+                '',
+                '<script>',
+                `   window.${ftlValuesGlobalName} = { "pageBasename": "${pageBasename}" };`,
+                '</script>',
+                ''
+            ].join("\n"),
+
+        );
+
+        return { "ftlCode": $.html() };
+
+    }
+
+    return { generateFtlFilesCode };
+
+
+}

src/bin/build-keycloak-theme/generateJavaStackFiles.ts

@@ -0,0 +1,95 @@
+
+import * as url from "url";
+import * as fs from "fs";
+import { join as pathJoin, dirname as pathDirname } from "path";
+
+export type ParsedPackageJson = {
+    name: string;
+    version: string;
+    homepage?: string;
+};
+
+export function generateJavaStackFiles(
+    params: {
+        parsedPackageJson: ParsedPackageJson;
+        keycloakThemeBuildingDirPath: string;
+    }
+): void {
+
+    const { parsedPackageJson, keycloakThemeBuildingDirPath } = params;
+
+    {
+
+        const { pomFileCode } = (function generatePomFileCode(): { pomFileCode: string; } {
+
+            const { name, version, homepage } = parsedPackageJson;
+
+            const groupId = (() => {
+
+                const fallbackGroupId = `there.was.no.homepage.field.in.the.package.json.${name}.keycloak`;
+
+                return !homepage ?
+                    fallbackGroupId :
+                    url.parse(homepage).host?.split(".").reverse().join(".") ?? fallbackGroupId;
+
+            })();
+
+            const artefactId = `${name}-keycloak-theme`;
+
+            const pomFileCode = [
+                `<?xml version="1.0"?>`,
+                `<project xmlns="http://maven.apache.org/POM/4.0.0"`,
+                `	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
+                `	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
+                `	<modelVersion>4.0.0</modelVersion>`,
+                `	<groupId>${groupId}</groupId>`,
+                `	<artifactId>${artefactId}</artifactId>`,
+                `	<version>${version}</version>`,
+                `	<name>${artefactId}</name>`,
+                `	<description />`,
+                `</project>`
+            ].join("\n");
+
+            return { pomFileCode };
+
+        })();
+
+        fs.writeFileSync(
+            keycloakThemeBuildingDirPath,
+            Buffer.from(pomFileCode, "utf8")
+        );
+
+    }
+
+    {
+
+        const themeManifestFilePath = pathJoin(
+            keycloakThemeBuildingDirPath, "src", "main",
+            "resources", "META-INF", "keycloak-themes.json"
+        );
+
+        try {
+
+            fs.mkdirSync(pathDirname(themeManifestFilePath));
+
+        } catch { }
+
+        fs.writeFileSync(
+            themeManifestFilePath,
+            Buffer.from(
+                JSON.stringify({
+                    "themes": [
+                        {
+                            "name": "onyxia",
+                            "types": ["login", "email", "account", "welcome"]
+                        }
+                    ]
+                }, null, 2),
+                "utf8"
+            )
+        );
+
+    }
+
+}
+

src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts

@@ -0,0 +1,97 @@
+
+import { transformCodebase } from "tools/transformCodebase";
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+import {
+    replaceImportFromStaticInCssCode,
+    replaceImportFromStaticInJsCode
+} from "./replaceImportFromStatic";
+import { generateFtlFilesCodeFactory } from "./generateFtl";
+
+
+/*
+const reactAppBuildDirPath = pathJoin(process.cwd(), "build");
+
+assert(
+    fs.existsSync(reactAppBuildDirPath),
+    "Run 'react-script build' first (the build dir should be present)"
+);
+
+const keycloakDir = pathJoin(reactAppBuildDirPath, "..", "keycloak_build");
+
+
+*/
+
+const ftlValuesGlobalName = "keycloakFtlValues";
+
+export function generateKeycloakThemeResources(
+    params: {
+        themeName: string;
+        reactAppBuildDirPath: string;
+        keycloakThemeBuildingDirPath: string;
+    }
+) {
+
+    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
+
+    const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
+
+    let allCssGlobalsToDefine: Record<string, string> = {};
+
+    transformCodebase({
+        "destDirPath": pathJoin(themeDirPath, "resources"),
+        "srcDirPath": reactAppBuildDirPath,
+        "transformSourceCodeString": ({ filePath, sourceCode }) => {
+
+            if (/\.css?$/i.test(filePath)) {
+
+                const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
+                    { "cssCode": sourceCode.toString("utf8") }
+                );
+
+                allCssGlobalsToDefine = {
+                    ...allCssGlobalsToDefine,
+                    ...cssGlobalsToDefine
+                };
+
+                return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
+
+            }
+
+            if (/\.js?$/i.test(filePath)) {
+
+                const { fixedJsCode } = replaceImportFromStaticInJsCode({
+                    "jsCode": sourceCode.toString("utf8"),
+                    ftlValuesGlobalName
+                });
+
+                return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
+
+            }
+
+            return { "modifiedSourceCode": sourceCode };
+
+        }
+    });
+
+    const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
+        "cssGlobalsToDefine": allCssGlobalsToDefine,
+        ftlValuesGlobalName,
+        "indexHtmlCode": fs.readFileSync(
+            pathJoin(reactAppBuildDirPath, "index.html")
+        ).toString("utf8")
+    });
+
+    (["login.ftl", "register.ftl"] as const).forEach(pageBasename => {
+
+        const { ftlCode } = generateFtlFilesCode({ pageBasename });
+
+        fs.writeFileSync(
+            pathJoin(themeDirPath, pageBasename),
+            Buffer.from(ftlCode, "utf8")
+        )
+
+    });
+
+}
+

src/bin/build-keycloak-theme/index.ts

@@ -0,0 +1,24 @@
+import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
+import { generateJavaStackFiles } from "./generateJavaStackFiles";
+import type { ParsedPackageJson } from "./generateJavaStackFiles";
+import { join as pathJoin } from "path";
+import * as child_process from "child_process";
+
+const reactProjectDirPath = process.cwd();
+
+const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
+
+const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
+
+generateKeycloakThemeResources({
+    keycloakThemeBuildingDirPath,
+    "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
+    "themeName": parsedPackageJson.name
+});
+
+generateJavaStackFiles({
+    parsedPackageJson,
+    keycloakThemeBuildingDirPath
+});
+
+child_process.execSync("mvn package");

src/bin/build-keycloak-theme/replaceImportFromStatic.ts

@@ -0,0 +1,91 @@
+
+import * as crypto from "crypto";
+
+export function replaceImportFromStaticInJsCode(
+    params: {
+        ftlValuesGlobalName: string;
+        jsCode: string;
+    }
+): { fixedJsCode: string; } {
+
+    const { jsCode, ftlValuesGlobalName } = params;
+
+    const fixedJsCode = jsCode!.replace(
+        /"static\//g,
+        `window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/" + "static/`
+    );
+
+    return { fixedJsCode };
+
+}
+
+export function replaceImportFromStaticInCssCode(
+    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>;
+    }
+): {
+    cssCodeToPrependInHead: string;
+} {
+
+    const { cssGlobalsToDefine } = params;
+
+    return {
+        "cssCodeToPrependInHead": [
+            ":root {",
+            ...Object.keys(cssGlobalsToDefine)
+                .map(cssVariableName => [
+                    `--${cssVariableName}:`,
+                    [
+                        "url(",
+                        "${url.resourcesPath}" +
+                        cssGlobalsToDefine[cssVariableName].match(/^url\(([^)]+)\)$/)![1],
+                        ")"
+                    ].join("")
+                ].join(" "))
+                .map(line => `    ${line};`),
+            "}"
+        ].join("\n")
+    };
+
+}
+
+
+