From 6f133428f8a4a113abbf9a4ca6262404029aaec5 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Fri, 26 Mar 2021 15:29:17 +0100 Subject: [PATCH] Fix previous build, improve README --- README.md | 5 ++ package.json | 2 +- .../build-keycloak-theme/generateFtl/index.ts | 53 +++++++++++++------ .../generateKeycloakThemeResources.ts | 30 ++++++++--- src/bin/build-keycloak-theme/index.ts | 8 ++- .../replaceImportFromStatic.ts | 53 ++++++++++--------- src/test/generateKeycloakThemeResources.ts | 6 +-- src/test/replaceImportFromStatic.ts | 2 +- 8 files changed, 99 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 848e5e31..339a5ac2 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,10 @@ Here is `yarn add keycloakify` for you 🍸 "keycloak": "yarn build && build-keycloak-theme", }, ``` +`"homepage"` must be specified only if the theme is build using +`--external-assets`(#specify-from-where-the-resources-should-be-downloaded) or if +the url path is not `/` (only the url path will be considered so it doesn't matter if the +base url is wrong) It is mandatory that you specify the url where your app will be available using the `homepage` field. @@ -88,6 +92,7 @@ page to load faster for first time users but it also implies that: - If the app is down, your Keycloak login and register pages are down as well. - Each time the app is updated, the theme must be updated. - CORS must be enabled for fonts. +- You must know at build time what will be the url of your app (`"homepage"` in `package.json`).
Click to expand diff --git a/package.json b/package.json index 28f14ba3..c5c9096d 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "keycloakify", - "version": "0.3.10", + "version": "0.3.11", "description": "Keycloak theme generator for Reacts app", "repository": { "type": "git", diff --git a/src/bin/build-keycloak-theme/generateFtl/index.ts b/src/bin/build-keycloak-theme/generateFtl/index.ts index c6e8d019..c7a6ed51 100644 --- a/src/bin/build-keycloak-theme/generateFtl/index.ts +++ b/src/bin/build-keycloak-theme/generateFtl/index.ts @@ -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; 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( '', '' diff --git a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts index 5e0ab31b..94f886b9 100644 --- a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts +++ b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts @@ -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 => { diff --git a/src/bin/build-keycloak-theme/index.ts b/src/bin/build-keycloak-theme/index.ts index 53936472..f632e2c9 100644 --- a/src/bin/build-keycloak-theme/index.ts +++ b/src/bin/build-keycloak-theme/index.ts @@ -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": (() => { diff --git a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts b/src/bin/build-keycloak-theme/replaceImportFromStatic.ts index e1630e77..7b884a76 100644 --- a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts +++ b/src/bin/build-keycloak-theme/replaceImportFromStatic.ts @@ -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 }; diff --git a/src/test/generateKeycloakThemeResources.ts b/src/test/generateKeycloakThemeResources.ts index d7587b47..1ced35e3 100644 --- a/src/test/generateKeycloakThemeResources.ts +++ b/src/test/generateKeycloakThemeResources.ts @@ -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/" }); diff --git a/src/test/replaceImportFromStatic.ts b/src/test/replaceImportFromStatic.ts index 40bb34f4..76197c57 100644 --- a/src/test/replaceImportFromStatic.ts +++ b/src/test/replaceImportFromStatic.ts @@ -20,7 +20,7 @@ const { fixedJsCode } = replaceImportsFromStaticInJsCode({ }[e] + ".chunk.js" } `, - "mode": { "type": "standalone" } + "mode": "standalone" }); console.log({ fixedJsCode });