Bump version

fix: change JS path transformation for static resources

.all-contributorsrc

@@ -158,6 +158,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "zavoloklom",
+      "name": "Sergey Kupletsky",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4151869?v=4",
+      "profile": "https://github.com/zavoloklom",
+      "contributions": [
+        "test",
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
@@ -165,5 +175,6 @@
   "repoType": "github",
   "repoHost": "https://github.com",
   "projectName": "keycloakify",
-  "projectOwner": "keycloakify"
+  "projectOwner": "keycloakify",
+  "commitType": "docs"
 }

.github/workflows/ci.yaml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - v*
   pull_request:
     branches:
       - main

README.md

@@ -47,7 +47,9 @@
 
 > 📣 🛑 Account themes generated by Keycloakify are not currently compatible with Keycloak 22.  
 > We are working on a solution. [Follow progress](https://github.com/keycloakify/keycloakify/issues/389).  
-> Login and email themes are not affected.
+> Login and email themes are not affected.  
+> UPDATE: [The PR](https://github.com/keycloak/keycloak/pull/22317) that should future proof Keycloakify account themes has been greenlighted
+> by the Keycloak team. Resolution is only a matter of time.
 
 Keycloakify is fully compatible with Keycloak, starting from version 11 and is anticipated to maintain compatibility with all future versions.  
 You can update your Keycloak, your Keycloakify generated theme won't break.  
@@ -114,6 +116,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://www.gravitysoftware.be"><img src="https://avatars.githubusercontent.com/u/1140574?v=4?s=100" width="100px;" alt="Thomas Silvestre"/><br /><sub><b>Thomas Silvestre</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=thosil" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/satanshiro"><img src="https://avatars.githubusercontent.com/u/38865738?v=4?s=100" width="100px;" alt="satanshiro"/><br /><sub><b>satanshiro</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=satanshiro" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://poelhekke.dev"><img src="https://avatars.githubusercontent.com/u/1632377?v=4?s=100" width="100px;" alt="Koen Poelhekke"/><br /><sub><b>Koen Poelhekke</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kpoelhekke" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/zavoloklom"><img src="https://avatars.githubusercontent.com/u/4151869?v=4?s=100" width="100px;" alt="Sergey Kupletsky"/><br /><sub><b>Sergey Kupletsky</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "8.0.0",
+    "version": "8.1.1",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

src/account/Template.tsx

@@ -22,7 +22,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
             `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
             `${url.resourcesPath}/css/account.css`
         ],
-        "htmlClassName": undefined,
+        "htmlClassName": getClassName("kcHtmlClass"),
         "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
     });
 

src/account/TemplateProps.ts

@@ -11,4 +11,4 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     children: ReactNode;
 };
 
-export type ClassKey = "kcBodyClass" | "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";
+export type ClassKey = "kcHtmlClass" | "kcBodyClass" | "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";

src/account/lib/useGetClassName.ts

@@ -3,6 +3,7 @@ import type { ClassKey } from "keycloakify/account/TemplateProps";
 
 export const { useGetClassName } = createUseClassName<ClassKey>({
     "defaultClasses": {
+        "kcHtmlClass": undefined,
         "kcBodyClass": undefined,
         "kcButtonClass": "btn",
         "kcButtonPrimaryClass": "btn-primary",

src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -16,18 +16,25 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string }): {
     const { jsCode } = params;
 
     const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [
-        new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=function\\(([a-zA-Z]+)\\){return"static\\/${language}\\/"`, "g"),
-        (...[, n, u, e]) => `
-			${n}[(function(){
-                var pd= Object.getOwnPropertyDescriptor(${n}, "p");
+        new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"static\\/${language}\\/"`, "g"),
+        (...[, n, u, matchedFunction, eForFunction]) => {
+            const isArrowFunction = matchedFunction.includes("=>");
+            const e = isArrowFunction ? matchedFunction.replace("=>", "").trim() : eForFunction;
+
+            return `
+            ${n}[(function(){
+                var pd = Object.getOwnPropertyDescriptor(${n}, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(${n}, "p", {
                         get: function() { return window.${ftlValuesGlobalName}.url.resourcesPath; },
-                        set: function (){}
+                        set: function() {}
                     });
                 }
-				return "${u}";
-			})()] = function(${e}) { return "${true ? "/build/" : ""}static/${language}/"`
+                return "${u}";
+            })()] = ${isArrowFunction ? `${e} =>` : `function(${e}) { return `} "/build/static/${language}/"`
+                .replace(/\s+/g, " ")
+                .trim();
+        }
     ];
 
     const fixedJsCode = jsCode

src/bin/promptKeycloakVersion.ts

@@ -17,7 +17,7 @@ export async function promptKeycloakVersion() {
         return { getLatestsSemVersionedTag };
     })();
 
-    console.log("Initialize the directory with email template from which keycloak version?");
+    console.log("Select Keycloak version?");
 
     const tags = [
         ...(await getLatestsSemVersionedTag({

src/login/Template.tsx

@@ -38,7 +38,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
             `${url.resourcesPath}/css/login.css`
         ],
         "htmlClassName": getClassName("kcHtmlClass"),
-        "bodyClassName": undefined
+        "bodyClassName": getClassName("kcBodyClass")
     });
 
     if (!isReady) {

src/login/TemplateProps.ts

@@ -21,6 +21,7 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
 };
 
 export type ClassKey =
+    | "kcBodyClass"
     | "kcHtmlClass"
     | "kcLoginClass"
     | "kcHeaderClass"

src/login/lib/useGetClassName.ts

@@ -3,6 +3,7 @@ import type { ClassKey } from "keycloakify/login/TemplateProps";
 
 export const { useGetClassName } = createUseClassName<ClassKey>({
     "defaultClasses": {
+        "kcBodyClass": undefined,
         "kcHtmlClass": "login-pf",
         "kcLoginClass": "login-pf-page",
         "kcContentWrapperClass": "row",

test/bin/replaceImportFromStatic.spec.ts

@@ -32,6 +32,10 @@ describe("bin/js-transforms", () => {
                 908:"67c9ed2c"
             }[e]+".chunk.css"
         }
+        
+        n.u=e=>"static/js/"+e+"."+{69:"4f205f87",128:"49264537",453:"b2fed72e",482:"f0106901"}[e]+".chunk.js"
+        
+        t.miniCssF=e=>"static/css/"+e+"."+{164:"dcfd7749",908:"67c9ed2c"}[e]+".chunk.css"
     `;
     it("transforms standalone code properly", () => {
         const { fixedJsCode } = replaceImportsFromStaticInJsCode({
@@ -52,11 +56,11 @@ describe("bin/js-transforms", () => {
             }
 
             __webpack_require__[(function (){
-                var pd= Object.getOwnPropertyDescriptor(__webpack_require__, "p");
+                var pd = Object.getOwnPropertyDescriptor(__webpack_require__, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(__webpack_require__, "p", {
                         get: function() { return window.kcContext.url.resourcesPath; },
-                        set: function (){}
+                        set: function() {}
                     });
                 }
                 return "u";
@@ -69,11 +73,11 @@ describe("bin/js-transforms", () => {
             }
 
             t[(function (){
-                var pd= Object.getOwnPropertyDescriptor(t, "p");
+                var pd = Object.getOwnPropertyDescriptor(t, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(t, "p", {
                         get: function() { return window.kcContext.url.resourcesPath; },
-                        set: function (){}
+                        set: function() {}
                     });
                 }
                 return "miniCssF";
@@ -83,7 +87,28 @@ describe("bin/js-transforms", () => {
                     908:"67c9ed2c"
                 } [e] + ".chunk.css"
             }
-
+            
+            n[(function(){
+                var pd = Object.getOwnPropertyDescriptor(n, "p");
+                if( pd === undefined || pd.configurable ){
+                    Object.defineProperty(n, "p", {
+                        get: function() { return window.kcContext.url.resourcesPath; },
+                        set: function() {}
+                    });
+                }
+                return "u";
+            })()] = e => "/build/static/js/"+e+"."+{69:"4f205f87",128:"49264537",453:"b2fed72e",482:"f0106901"}[e]+".chunk.js"
+        
+            t[(function(){
+                var pd = Object.getOwnPropertyDescriptor(t, "p");
+                if( pd === undefined || pd.configurable ){
+                    Object.defineProperty(t, "p", {
+                        get: function() { return window.kcContext.url.resourcesPath; },
+                        set: function() {}
+                    });
+                }
+                return "miniCssF";
+            })()] = e => "/build/static/css/"+e+"."+{164:"dcfd7749",908:"67c9ed2c"}[e]+".chunk.css"
         `;
 
         expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true);