diff --git a/src/account/Template.tsx b/src/account/Template.tsx index 81597bd8..884b4a6a 100644 --- a/src/account/Template.tsx +++ b/src/account/Template.tsx @@ -17,9 +17,11 @@ export default function Template(props: TemplateProps) { const { isReady } = usePrepareTemplate({ "doFetchDefaultThemeResources": doUseDefaultCss, - url, - "stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"], - "styles": ["css/account.css"], + "styles": [ + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`, + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, + `${url.resourcesPath}/css/account.css` + ], "htmlClassName": undefined, "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")) }); diff --git a/src/bin/download-builtin-keycloak-theme.ts b/src/bin/download-builtin-keycloak-theme.ts index f260600b..b8c73539 100644 --- a/src/bin/download-builtin-keycloak-theme.ts +++ b/src/bin/download-builtin-keycloak-theme.ts @@ -4,6 +4,8 @@ import { downloadAndUnzip } from "./tools/downloadAndUnzip"; import { promptKeycloakVersion } from "./promptKeycloakVersion"; import { getLogger } from "./tools/logger"; import { readBuildOptions } from "./keycloakify/BuildOptions"; +import * as child_process from "child_process"; +import * as fs from "fs"; export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; isSilent: boolean }) { const { keycloakVersion, destDirPath } = params; @@ -17,6 +19,67 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st }) ) ); + + install_common_node_modules: { + const commonResourcesDirPath = pathJoin(destDirPath, "keycloak", "common", "resources"); + + if (!fs.existsSync(commonResourcesDirPath)) { + break install_common_node_modules; + } + + if (!fs.existsSync(pathJoin(commonResourcesDirPath, "package.json"))) { + break install_common_node_modules; + } + + if (fs.existsSync(pathJoin(commonResourcesDirPath, "node_modules"))) { + break install_common_node_modules; + } + + console.log("npm install --omit=dev start", { keycloakVersion }); + + const start = Date.now(); + + child_process.execSync("npm install --omit=dev", { + "cwd": commonResourcesDirPath, + "stdio": "ignore" + }); + + console.log("npm install --omit=dev end", { keycloakVersion, "time": Date.now() - start }); + } + + install_and_move_to_common_resources_generated_in_keycloak_v2: { + const accountV2DirSrcDirPath = pathJoin(destDirPath, "keycloak.v2", "account", "src"); + + if (!fs.existsSync(accountV2DirSrcDirPath)) { + break install_and_move_to_common_resources_generated_in_keycloak_v2; + } + + console.log("npm install start", { keycloakVersion }); + const startInstall = Date.now(); + + child_process.execSync("npm install", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" }); + + console.log("npm install end", { keycloakVersion, "time": Date.now() - startInstall }); + + const packageJsonFilePath = pathJoin(accountV2DirSrcDirPath, "package.json"); + + const packageJsonRaw = fs.readFileSync(packageJsonFilePath); + + const parsedPackageJson = JSON.parse(packageJsonRaw.toString("utf8")); + + parsedPackageJson.scripts.build = parsedPackageJson.scripts.build.replace("npm run check-types", "true").replace("npm run babel", "true"); + + fs.writeFileSync(packageJsonFilePath, Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8")); + + console.log("npm run build start", { keycloakVersion }); + const start = Date.now(); + + child_process.execSync("npm run build", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" }); + + console.log("npm run build end", { keycloakVersion, "time": Date.now() - start }); + + fs.writeFileSync(packageJsonFilePath, packageJsonRaw); + } } async function main() { diff --git a/src/lib/usePrepareTemplate.ts b/src/lib/usePrepareTemplate.ts index ee49a93c..c71726ed 100644 --- a/src/lib/usePrepareTemplate.ts +++ b/src/lib/usePrepareTemplate.ts @@ -1,21 +1,15 @@ import { useReducer, useEffect } from "react"; import { headInsert } from "keycloakify/tools/headInsert"; -import { pathJoin } from "keycloakify/bin/tools/pathJoin"; import { clsx } from "keycloakify/tools/clsx"; export function usePrepareTemplate(params: { doFetchDefaultThemeResources: boolean; - stylesCommon?: string[]; styles?: string[]; scripts?: string[]; - url: { - resourcesCommonPath: string; - resourcesPath: string; - }; htmlClassName: string | undefined; bodyClassName: string | undefined; }) { - const { doFetchDefaultThemeResources, stylesCommon = [], styles = [], url, scripts = [], htmlClassName, bodyClassName } = params; + const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName } = params; const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources); @@ -31,23 +25,18 @@ export function usePrepareTemplate(params: { (async () => { const prLoadedArray: Promise[] = []; - [ - ...stylesCommon.map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)), - ...styles.map(relativePath => pathJoin(url.resourcesPath, relativePath)) - ] - .reverse() - .forEach(href => { - const { prLoaded, remove } = headInsert({ - "type": "css", - "position": "prepend", - href - }); - - removeArray.push(remove); - - prLoadedArray.push(prLoaded); + styles.reverse().forEach(href => { + const { prLoaded, remove } = headInsert({ + "type": "css", + "position": "prepend", + href }); + removeArray.push(remove); + + prLoadedArray.push(prLoaded); + }); + await Promise.all(prLoadedArray); if (isUnmounted) { @@ -57,10 +46,10 @@ export function usePrepareTemplate(params: { setReady(); })(); - scripts.forEach(relativePath => { + scripts.forEach(src => { const { remove } = headInsert({ "type": "javascript", - "src": pathJoin(url.resourcesPath, relativePath) + src }); removeArray.push(remove); diff --git a/src/login/Template.tsx b/src/login/Template.tsx index 98b0d07d..4c555b5d 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -31,13 +31,12 @@ export default function Template(props: TemplateProps) { const { isReady } = usePrepareTemplate({ "doFetchDefaultThemeResources": doUseDefaultCss, - url, - "stylesCommon": [ - "node_modules/patternfly/dist/css/patternfly.min.css", - "node_modules/patternfly/dist/css/patternfly-additions.min.css", - "lib/zocial/zocial.css" + "styles": [ + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`, + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, + `${url.resourcesCommonPath}/lib/zocial/zocial.css`, + `${url.resourcesPath}/css/login.css` ], - "styles": ["css/login.css"], "htmlClassName": getClassName("kcHtmlClass"), "bodyClassName": undefined }); diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx index c6126fab..f4e99d34 100644 --- a/src/login/pages/LoginOtp.tsx +++ b/src/login/pages/LoginOtp.tsx @@ -1,6 +1,5 @@ import { useEffect } from "react"; import { headInsert } from "keycloakify/tools/headInsert"; -import { pathJoin } from "keycloakify/bin/tools/pathJoin"; import { clsx } from "keycloakify/tools/clsx"; import type { PageProps } from "keycloakify/login/pages/PageProps"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; @@ -24,7 +23,7 @@ export default function LoginOtp(props: PageProps {