agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Quietly re-introduce --external-assets

Browse Source
This commit is contained in:
Joseph Garrone 2021-04-11 18:18:52 +02:00
parent fc858b3db6
commit 46ec832767
9 changed files with 89 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "keycloakify",
"version": "0.4.0",
"version": "0.4.1",
"description": "Keycloak theme generator for Reacts app",
"repository": {
"type": "git",

22
src/bin/build-keycloak-theme/generateFtl/index.ts
View File

@ -9,6 +9,7 @@ import {
import fs from "fs";
import { join as pathJoin } from "path";
import { objectKeys } from "evt/tools/typeSafety/objectKeys";
import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
export const pageIds = [
"login.ftl", "register.ftl", "info.ftl",
@ -37,22 +38,22 @@ function loadFtlFile(ftlFileBasename: PageId | "common.ftl") {
export function generateFtlFilesCodeFactory(
params: {
ftlValuesGlobalName: string;
cssGlobalsToDefine: Record<string, string>;
indexHtmlCode: string;
urlPathname: string;
urlOrigin: undefined | string;
}
) {
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
const { cssGlobalsToDefine, indexHtmlCode, urlPathname, urlOrigin } = params;
const $ = cheerio.load(indexHtmlCode);
$("script:not([src])").each((...[, element]) => {
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
ftlValuesGlobalName,
"jsCode": $(element).html()!
"jsCode": $(element).html()!,
urlOrigin
});
$(element).text(fixedJsCode);
@ -63,7 +64,8 @@ export function generateFtlFilesCodeFactory(
const { fixedCssCode } = replaceImportsInInlineCssCode({
"cssCode": $(element).html()!,
"urlPathname": params.urlPathname
"urlPathname": params.urlPathname,
urlOrigin
});
$(element).text(fixedCssCode);
@ -84,10 +86,12 @@ export function generateFtlFilesCodeFactory(
$(element).attr(
attrName,
href.replace(
new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
"${url.resourcesPath}/build/"
)
urlOrigin !== undefined ?
href.replace(/^\//, `${urlOrigin}/`) :
href.replace(
new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
"${url.resourcesPath}/build/"
)
);
})

2
src/bin/build-keycloak-theme/generateJavaStackFiles.ts
View File

@ -32,7 +32,7 @@ export function generateJavaStackFiles(
return (!homepage ?
fallbackGroupId :
url.parse(homepage).host?.split(".").reverse().join(".") ?? fallbackGroupId
url.parse(homepage).host?.replace(/:[0-9]+$/,"")?.split(".").reverse().join(".") ?? fallbackGroupId
) + ".keycloak";
})();

27
src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts
View File

@ -10,7 +10,6 @@ import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
import { downloadAndUnzip } from "../tools/downloadAndUnzip";
import * as child_process from "child_process";
import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/kcContextMocks/urlResourcesPath";
import { isInside } from "../tools/isInside";
@ -21,22 +20,28 @@ export function generateKeycloakThemeResources(
reactAppBuildDirPath: string;
keycloakThemeBuildingDirPath: string;
urlPathname: string;
//If urlOrigin is not undefined then it means --externals-assets
urlOrigin: undefined | string;
}
) {
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname, urlOrigin } = params;
const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
let allCssGlobalsToDefine: Record<string, string> = {};
transformCodebase({
"destDirPath": pathJoin(themeDirPath, "resources", "build"),
"destDirPath":
urlOrigin === undefined ?
pathJoin(themeDirPath, "resources", "build") :
reactAppBuildDirPath,
"srcDirPath": reactAppBuildDirPath,
"transformSourceCode": ({ filePath, sourceCode }) => {
//NOTE: Prevent cycles, excludes the folder we generated for debug in public/
if (
urlOrigin === undefined &&
isInside({
"dirPath": pathJoin(reactAppBuildDirPath, subDirOfPublicDirBasename),
filePath
@ -45,8 +50,7 @@ export function generateKeycloakThemeResources(
return undefined;
}
if (/\.css?$/i.test(filePath)) {
if (urlOrigin === undefined && /\.css?$/i.test(filePath)) {
const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
{ "cssCode": sourceCode.toString("utf8") }
@ -61,36 +65,39 @@ export function generateKeycloakThemeResources(
}
if (/\.js?$/i.test(filePath)) {
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
"jsCode": sourceCode.toString("utf8"),
ftlValuesGlobalName
urlOrigin
});
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
}
return { "modifiedSourceCode": sourceCode };
return urlOrigin === undefined ?
{ "modifiedSourceCode": sourceCode } :
undefined;
}
});
const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
"cssGlobalsToDefine": allCssGlobalsToDefine,
ftlValuesGlobalName,
"indexHtmlCode": fs.readFileSync(
pathJoin(reactAppBuildDirPath, "index.html")
).toString("utf8"),
urlPathname
urlPathname,
urlOrigin
});
pageIds.forEach(pageId => {
const { ftlCode } = generateFtlFilesCode({ pageId });
fs.mkdirSync(themeDirPath, { "recursive": true });
fs.writeFileSync(
pathJoin(themeDirPath, pageId),
Buffer.from(ftlCode, "utf8")

23
src/bin/build-keycloak-theme/index.ts
View File

@ -11,6 +11,8 @@ import { URL } from "url";
const reactProjectDirPath = process.cwd();
const doUseExternalAssets = process.argv[2]?.toLowerCase() === "--external-assets";
const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
@ -24,7 +26,7 @@ if (require.main === module) {
keycloakThemeBuildingDirPath,
"reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
"themeName": parsedPackageJson.name,
"urlPathname": (() => {
...(() => {
const url = (() => {
@ -36,10 +38,23 @@ if (require.main === module) {
})();
return url === undefined ?
"/" :
url.pathname.replace(/([^/])$/, "$1/");
return {
"urlPathname":
url === undefined ?
"/" :
url.pathname.replace(/([^/])$/, "$1/"),
"urlOrigin": !doUseExternalAssets ? undefined : (() => {
if (url === undefined) {
console.error("ERROR: You must specify 'homepage' in your package.json");
process.exit(-1);
}
return url.origin;
})()
};
})()
});

19
src/bin/build-keycloak-theme/replaceImportFromStatic.ts
View File

@ -1,18 +1,22 @@
import * as crypto from "crypto";
import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
export function replaceImportsFromStaticInJsCode(
params: {
ftlValuesGlobalName: string;
jsCode: string;
urlOrigin: undefined | string;
}
): { fixedJsCode: string; } {
const { jsCode, ftlValuesGlobalName } = params;
const { jsCode, urlOrigin } = params;
const fixedJsCode = jsCode.replace(
/[a-z]+\.[a-z]+\+"static\//g,
`window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
/([a-z]+\.[a-z]+)\+"static\//g,
(...[, group]) =>
urlOrigin === undefined ?
`window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/` :
`("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + ${group} + "static/`
);
return { fixedJsCode };
@ -23,16 +27,19 @@ export function replaceImportsInInlineCssCode(
params: {
cssCode: string;
urlPathname: string;
urlOrigin: undefined | string;
}
): { fixedCssCode: string; } {
const { cssCode, urlPathname } = params;
const { cssCode, urlPathname, urlOrigin } = params;
const fixedCssCode = cssCode.replace(
urlPathname === "/" ?
/url\(\/([^/][^)]+)\)/g :
new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
(...[, group]) => `url(${"${url.resourcesPath}/build/" + group})`
(...[, group]) => `url(${urlOrigin === undefined ?
"${url.resourcesPath}/build/" + group :
params.urlOrigin + urlPathname + group})`
);
return { fixedCssCode };

3
src/test/generateKeycloakThemeResources.ts
View File

@ -12,6 +12,7 @@ generateKeycloakThemeResources({
"themeName": "keycloakify-demo-app",
"reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
"keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
"urlPathname": "/keycloakify-demo-app/"
"urlPathname": "/keycloakify-demo-app/",
"urlOrigin": undefined
});

2
src/test/index.ts
View File

@ -13,6 +13,7 @@ setupSampleReactProject();
const binDirPath= pathJoin(getProjectRoot(), "dist", "bin");
st.execSyncTrace(
//`node ${pathJoin(binDirPath, "build-keycloak-theme")} --external-assets`,
`node ${pathJoin(binDirPath, "build-keycloak-theme")}`,
{ "cwd": sampleReactProjectDirPath }
);
@ -21,4 +22,3 @@ st.execSyncTrace(
`node ${pathJoin(binDirPath, "install-builtin-keycloak-themes")}`,
{ "cwd": sampleReactProjectDirPath }
);

27
src/test/replaceImportFromStatic.ts
View File

@ -6,23 +6,40 @@ import { 
} from "../bin/build-keycloak-theme/replaceImportFromStatic";
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
"ftlValuesGlobalName": "keycloakFtlValues",
"jsCode": `
function f() {
return a.p + "static/js/" + ({}[e] || e) + "." + {
return a.p+"static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
function f2() {
return a.p +"static/js/" + ({}[e] || e) + "." + {
return a.p+"static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
`
`,
"urlOrigin": undefined
});
console.log({ fixedJsCode });
const { fixedJsCode: fixedJsCodeExternal } = replaceImportsFromStaticInJsCode({
"jsCode": `
function f() {
return a.p+"static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
function f2() {
return a.p+"static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
`,
"urlOrigin": "https://www.example.com"
});
console.log({ fixedJsCode, fixedJsCodeExternal });
const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
"cssCode": `