Update Template

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"

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<KcContext, I18n>) {
         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;
     }
 

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"