From 46ec832767ff712c8ecb80b7e231021eb018ddcf Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sun, 11 Apr 2021 18:18:52 +0200 Subject: [PATCH] Quietly re-introduce --external-assets --- package.json | 2 +- .../build-keycloak-theme/generateFtl/index.ts | 22 ++++++++------- .../generateJavaStackFiles.ts | 2 +- .../generateKeycloakThemeResources.ts | 27 ++++++++++++------- src/bin/build-keycloak-theme/index.ts | 23 +++++++++++++--- .../replaceImportFromStatic.ts | 19 ++++++++----- src/test/generateKeycloakThemeResources.ts | 3 ++- src/test/index.ts | 2 +- src/test/replaceImportFromStatic.ts | 27 +++++++++++++++---- 9 files changed, 89 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 92bceb17..f8eb3db9 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "keycloakify", - "version": "0.4.0", + "version": "0.4.1", "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 47c0e7c2..65ba9a8d 100644 --- a/src/bin/build-keycloak-theme/generateFtl/index.ts +++ b/src/bin/build-keycloak-theme/generateFtl/index.ts @@ -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; 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/" + ) ); }) diff --git a/src/bin/build-keycloak-theme/generateJavaStackFiles.ts b/src/bin/build-keycloak-theme/generateJavaStackFiles.ts index da37bb6e..ac44a9d1 100644 --- a/src/bin/build-keycloak-theme/generateJavaStackFiles.ts +++ b/src/bin/build-keycloak-theme/generateJavaStackFiles.ts @@ -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"; })(); diff --git a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts index 9d7018ed..7cd26108 100644 --- a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts +++ b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts @@ -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 = {}; 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") diff --git a/src/bin/build-keycloak-theme/index.ts b/src/bin/build-keycloak-theme/index.ts index 983d5aec..afe19abe 100644 --- a/src/bin/build-keycloak-theme/index.ts +++ b/src/bin/build-keycloak-theme/index.ts @@ -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; + + })() + + }; })() }); diff --git a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts b/src/bin/build-keycloak-theme/replaceImportFromStatic.ts index 03e676fa..3173d8c0 100644 --- a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts +++ b/src/bin/build-keycloak-theme/replaceImportFromStatic.ts @@ -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 }; diff --git a/src/test/generateKeycloakThemeResources.ts b/src/test/generateKeycloakThemeResources.ts index 734f01c2..7d199dfa 100644 --- a/src/test/generateKeycloakThemeResources.ts +++ b/src/test/generateKeycloakThemeResources.ts @@ -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 }); diff --git a/src/test/index.ts b/src/test/index.ts index 0ca998b5..77678194 100644 --- a/src/test/index.ts +++ b/src/test/index.ts @@ -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 } ); - diff --git a/src/test/replaceImportFromStatic.ts b/src/test/replaceImportFromStatic.ts index 0278d9b2..1723f8e4 100644 --- a/src/test/replaceImportFromStatic.ts +++ b/src/test/replaceImportFromStatic.ts @@ -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": `