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>
@@ -125,11 +128,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
-## 8.0 (candidate)
+## 8.0
 
 -   Much smaller .jar size. 70.2 MB -> 7.8 MB.  
     Keycloakify now detects which of the static resources from the default theme are actually used by your theme and only include those in the .jar.
--   Build time: The first build is slowed but the subsequent build are faster. Update your CI so that nodes_modules/.cache is not deleted between builds.
+-   Build time: The first build is slowed but the subsequent build are faster. [Update your CI so that the cache is persisted across CI build](https://github.com/keycloakify/keycloakify-starter/commit/bc378d5afb67e796f520afbc348185f3e319d9d0).
 
 ### Breaking changes
 
@@ -138,11 +141,15 @@ There are very few breaking changes in this major version.
 -   The [`--external-assets` build option has been removed](https://docs.keycloakify.dev/v/v7/build-options#external-assets-deprecated) it was a performance optimization that is no longer relevant now that
     we have lazy loading.
 
+-   `kcContext.usernameEditDisabled` is now `kcContext.usernameHidden`, the type was lying, it has been updated to reflect what's actually on the `kcContext` at runtime.
+    If you want to see in detail what should be updated [see issue](https://github.com/keycloakify/keycloakify/pull/399), or you can search and replace `usernameEditDisabled` -> `usernameHidden` it'll do the trick.
+
 -   The `usePrepareTemplate` prototype has been changed, you can search and replace:
 
 `src/keycloak-theme/login/Template.tsx`
 
 ```ts
+url,
 "stylesCommon": [
     "node_modules/patternfly/dist/css/patternfly.min.css",
     "node_modules/patternfly/dist/css/patternfly-additions.min.css",
@@ -167,6 +174,7 @@ and
 `src/keycloak-theme/account/Template.css`
 
 ```ts
+url,
 "stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"],
 "styles": ["css/account.css"],
 ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "8.0.0-rc.2",
+    "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/download-builtin-keycloak-theme.ts

@@ -10,8 +10,6 @@ import * as fs from "fs";
 export async function downloadBuiltinKeycloakTheme(params: { projectDirPath: string; keycloakVersion: string; destDirPath: string }) {
     const { projectDirPath, keycloakVersion, destDirPath } = params;
 
-    const start = Date.now();
-
     await downloadAndUnzip({
         "doUseCache": true,
         projectDirPath,
@@ -72,8 +70,6 @@ export async function downloadBuiltinKeycloakTheme(params: { projectDirPath: str
             }
         }
     });
-
-    console.log("Downloaded Keycloak theme in", Date.now() - start, "ms");
 }
 
 async function main() {

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);