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

Fix previous build, improve README

Browse Source
This commit is contained in:
Joseph Garrone
2021-03-26 15:29:17 +01:00
parent 4f733736db
commit 6f133428f8
8 changed files with 99 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,25 +30,22 @@ function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
}
}
export type Mode = {
type: "standalone";
urlPathname: string;
} | {
type: "external assets";
urlPathname: string;
urlOrigin: string;
}
export function generateFtlFilesCodeFactory(
params: {
ftlValuesGlobalName: string;
cssGlobalsToDefine: Record<string, string>;
indexHtmlCode: string;
mode: Mode;
}
urlPathname: string;
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
})
) {
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, mode } = params;
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
const $ = cheerio.load(indexHtmlCode);
@ -57,7 +54,18 @@ export function generateFtlFilesCodeFactory(
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
ftlValuesGlobalName,
"jsCode": $(element).html()!,
mode
...(() => {
switch (params.mode) {
case "standalone": return {
"mode": params.mode
};
case "external assets": return {
"mode": params.mode,
"urlOrigin": params.urlOrigin,
"urlPathname": params.urlPathname,
};
}
})()
});
$(element).text(fixedJsCode);
@ -68,7 +76,18 @@ export function generateFtlFilesCodeFactory(
const { fixedCssCode } = replaceImportsInInlineCssCode({
"cssCode": $(element).html()!,
mode
"urlPathname": params.urlPathname,
...(() => {
switch (params.mode) {
case "standalone": return {
"mode": params.mode
};
case "external assets": return {
"mode": params.mode,
"urlOrigin": params.urlOrigin,
};
}
})()
});
$(element).text(fixedCssCode);
@ -87,18 +106,18 @@ export function generateFtlFilesCodeFactory(
return;
}
switch (mode.type) {
switch (params.mode) {
case "external assets":
$(element).attr(
attrName,
href.replace(/^\//, `${mode.urlOrigin}/`)
href.replace(/^\//, `${params.urlOrigin}/`)
);
break;
case "standalone":
$(element).attr(
attrName,
href.replace(
new RegExp(`^${mode.urlPathname.replace(/\//g, "\\/")}`),
new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
"${url.resourcesPath}/build/"
)
);
@ -131,7 +150,7 @@ export function generateFtlFilesCodeFactory(
'<style>',
generateCssCodeToDefineGlobals({
cssGlobalsToDefine,
"urlPathname": mode.urlPathname
urlPathname
}).cssCodeToPrependInHead,
'</style>',
''

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

@ -6,7 +6,7 @@ import {
replaceImportsInCssCode,
replaceImportsFromStaticInJsCode
} from "./replaceImportFromStatic";
import { generateFtlFilesCodeFactory, pageIds, Mode } from "./generateFtl";
import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
import { downloadAndUnzip } from "../tools/downloadAndUnzip";
import * as child_process from "child_process";
@ -20,11 +20,16 @@ export function generateKeycloakThemeResources(
themeName: string;
reactAppBuildDirPath: string;
keycloakThemeBuildingDirPath: string;
mode: Mode;
}
urlPathname: string;
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
})
) {
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, mode } = params;
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
@ -45,7 +50,7 @@ export function generateKeycloakThemeResources(
return undefined;
}
if (mode.type === "standalone") {
if (params.mode === "standalone") {
if (/\.css?$/i.test(filePath)) {
@ -67,7 +72,7 @@ export function generateKeycloakThemeResources(
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
"jsCode": sourceCode.toString("utf8"),
ftlValuesGlobalName,
mode
"mode": params.mode
});
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
@ -87,7 +92,18 @@ export function generateKeycloakThemeResources(
"indexHtmlCode": fs.readFileSync(
pathJoin(reactAppBuildDirPath, "index.html")
).toString("utf8"),
mode
urlPathname,
...(() => {
switch (params.mode) {
case "external assets": return {
"mode": params.mode,
"urlOrigin": params.urlOrigin
};
case "standalone": return {
"mode": params.mode
};
}
})()
});
pageIds.forEach(pageId => {

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

@ -26,7 +26,7 @@ if (require.main === module) {
keycloakThemeBuildingDirPath,
"reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
"themeName": parsedPackageJson.name,
"mode": (() => {
...(() => {
const url = (() => {
@ -44,16 +44,14 @@ if (require.main === module) {
"/" :
url.pathname.replace(/([^/])$/, "$1/");
return !doUseExternalAssets ?
{
"type": "standalone",
"mode": "standalone",
urlPathname
} as const
:
{
"type": "external assets",
"mode": "external assets",
urlPathname,
"urlOrigin": (() => {

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

@ -1,32 +1,29 @@
import * as crypto from "crypto";
type Mode = {
type: "standalone";
} | {
type: "external assets";
urlOrigin: string;
urlPathname: string;
}
export function replaceImportsFromStaticInJsCode(
params: {
ftlValuesGlobalName: string;
jsCode: string;
mode: Mode;
}
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
urlPathname: string;
})
): { fixedJsCode: string; } {
const { jsCode, ftlValuesGlobalName, mode } = params;
const { jsCode, ftlValuesGlobalName } = params;
const fixedJsCode = jsCode.replace(
/[a-z]+\.[a-z]+\+"static\//g,
(() => {
switch (mode.type) {
switch (params.mode) {
case "standalone":
return `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`;
case "external assets":
return `"${mode.urlOrigin}${mode.urlPathname}static/`;
return `"${params.urlOrigin}${params.urlPathname}static/`;
}
})()
);
@ -38,22 +35,28 @@ export function replaceImportsFromStaticInJsCode(
export function replaceImportsInInlineCssCode(
params: {
cssCode: string;
mode: Mode;
}
urlPathname: string;
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
})
): { fixedCssCode: string; } {
const { cssCode, mode } = params;
const { cssCode, urlPathname } = params;
const fixedCssCode = cssCode.replace(
/url\((\/[^/][^)]+)\)/g,
(...[,group])=> `url(${
(()=>{
switch(mode.type){
case "standalone": return "${url.resourcesPath}/build" + group;
case "external assets": return mode.urlOrigin + group
}
})()
})`
urlPathname === "/" ?
/url\(\/([^/][^)]+)\)/g :
new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
(...[, group]) => `url(${(() => {
switch (params.mode) {
case "standalone": return "${url.resourcesPath}/build/" + group;
case "external assets": return params.urlOrigin + urlPathname + group
}
})()
})`
);
return { fixedCssCode };

6
src/test/generateKeycloakThemeResources.ts
View File

@ -12,9 +12,7 @@ generateKeycloakThemeResources({
"themeName": "keycloakify-demo-app",
"reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
"keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
"mode": {
"type": "standalone",
"urlPathname": "/keycloakify-demo-app/"
}
"mode": "standalone",
"urlPathname": "/keycloakify-demo-app/"
});

2
src/test/replaceImportFromStatic.ts
View File

@ -20,7 +20,7 @@ const { fixedJsCode } = replaceImportsFromStaticInJsCode({
}[e] + ".chunk.js"
}
`,
"mode": { "type": "standalone" }
"mode": "standalone"
});
console.log({ fixedJsCode });