diff --git a/package.json b/package.json index ce9aa9c..bbf83c6 100755 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "license": "MIT", "keywords": [], "dependencies": { - "keycloakify": "^6.12.0", + "keycloakify": "^6.12.1", "react": "18.1.0", "react-dom": "18.1.0", "evt": "^2.4.1" diff --git a/src/keycloak-theme/Template.tsx b/src/keycloak-theme/Template.tsx index fb9aee7..bd4e46a 100644 --- a/src/keycloak-theme/Template.tsx +++ b/src/keycloak-theme/Template.tsx @@ -1,14 +1,13 @@ // Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/components/shared/Template.tsx -import { useReducer, useEffect } from "react"; + // You can replace all relative imports by cherry picking files from the keycloakify module. // For example, the following import: -// import { headInsert } from "./tools/headInsert"; +// import { assert } from "./tools/assert"; // becomes: -import { headInsert } from "keycloakify/lib/tools/headInsert"; import { assert } from "keycloakify/lib/tools/assert"; import { clsx } from "keycloakify/lib/tools/clsx"; -import { pathJoin } from "keycloakify/bin/tools/pathJoin"; import type { TemplateProps } from "keycloakify/lib/KcProps"; +import { usePrepareTemplate } from "keycloakify/lib/Template"; import type { KcContext } from "./kcContext"; import type { I18n } from "./i18n"; @@ -25,72 +24,27 @@ export default function Template(props: TemplateProps) { infoNode = null, kcContext, i18n, - doFetchDefaultThemeResources + doFetchDefaultThemeResources, + stylesCommon, + styles, + scripts, + kcHtmlClass } = props; const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n; const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext; - const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false); + const { isReady } = usePrepareTemplate({ + doFetchDefaultThemeResources, + stylesCommon, + styles, + scripts, + url, + kcHtmlClass + }); - useEffect(() => { - if (!doFetchDefaultThemeResources) { - setExtraCssLoaded(); - return; - } - - let isUnmounted = false; - const cleanups: (() => void)[] = []; - - const toArr = (x: string | readonly string[] | undefined) => (typeof x === "string" ? x.split(" ") : x ?? []); - - Promise.all( - [ - ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)), - ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath)) - ] - .reverse() - .map(href => - headInsert({ - "type": "css", - href, - "position": "prepend" - }) - ) - ).then(() => { - if (isUnmounted) { - return; - } - - setExtraCssLoaded(); - }); - - toArr(props.scripts).forEach(relativePath => - headInsert({ - "type": "javascript", - "src": pathJoin(url.resourcesPath, relativePath) - }) - ); - - if (props.kcHtmlClass !== undefined) { - const htmlClassList = document.getElementsByTagName("html")[0].classList; - - const tokens = clsx(props.kcHtmlClass).split(" "); - - htmlClassList.add(...tokens); - - cleanups.push(() => htmlClassList.remove(...tokens)); - } - - return () => { - isUnmounted = true; - - cleanups.forEach(f => f()); - }; - }, [props.kcHtmlClass]); - - if (!isExtraCssLoaded) { + if (!isReady) { return null; } diff --git a/yarn.lock b/yarn.lock index f80885e..2f5cd0b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5925,10 +5925,10 @@ jsonpointer@^5.0.0: array-includes "^3.1.5" object.assign "^4.1.2" -keycloakify@^6.12.0: - version "6.12.0" - resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.12.0.tgz#932231efba8a2b4c1ddbbb4307cfe5ebe1461590" - integrity sha512-nZ/JbbqabxwuCfu+IsD7pk/aro4R8qdaA3lbwXSjM02OUeN2aTb4iuZYvIXbM4VO/d9Esm6BsUqEK5sILk2pVg== +keycloakify@^6.12.1: + version "6.12.1" + resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.12.1.tgz#50b5a0d75dc0d31d8dddcba9b695a5afdb9a6a9e" + integrity sha512-4V2Na15ubff9bDxVMHxO4BuB9UqX5cslT24/FlgBGcdfJlER5UUo+EpWK4OPdpsRbv1rEU1DfgAX6ptiqaD3NQ== dependencies: "@octokit/rest" "^18.12.0" cheerio "^1.0.0-rc.5"