Update changelog v4.2.21

Adding name field to realm in KcContext type

CHANGELOG.md

@@ -1,3 +1,24 @@
+### **4.2.21** (2021-12-27)  
+  
+- update dependencies    
+  
+### **4.2.19** (2021-12-21)  
+  
+- Merge pull request #70 from VBustamante/patch-1  
+- Added realm name field to KcContext mocks object  
+- Merge pull request #69 from VBustamante/patch-1
+
+Adding name field to realm in KcContext type  
+- Adding name field to realm in KcContext type    
+  
+### **4.2.18** (2021-12-17)  
+  
+- Improve css url() import (fix CRA 5)    
+  
+### **4.2.17** (2021-12-16)  
+  
+- Fix path.join polyfill    
+  
 ### **4.2.16** (2021-12-16)  
   
   

README.md

@@ -5,11 +5,21 @@
     <i>🔏  Create Keycloak themes using React 🔏</i>
     <br>
     <br>
-    <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=develop">
-    <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
-    <img src="https://img.shields.io/npm/dw/keycloakify">
-    <img src="https://img.shields.io/npm/l/keycloakify">
-    <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
+    <a href="https://github.com/garronej/keycloakify/actions">
+      <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=main">
+    </a>
+    <a href="https://bundlephobia.com/package/keycloakify">
+      <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
+    </a>
+    <a href="https://www.npmjs.com/package/keycloakify">
+      <img src="https://img.shields.io/npm/dw/keycloakify">
+    </a>
+    <a href="https://github.com/garronej/keycloakify/blob/main/LICENSE">
+      <img src="https://img.shields.io/npm/l/keycloakify">
+    </a>
+    <a href="https://github.com/InseeFrLab/keycloakify/blob/729503fe31a155a823f46dd66ad4ff34ca274e0a/tsconfig.json#L14">
+        <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
+    </a>
     <a href="https://github.com/thomasdarimont/awesome-keycloak">
         <img src="https://awesome.re/mentioned-badge.svg"/>
     </a>
@@ -20,11 +30,6 @@
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
-**NEW in 4.2.14**
-
--   No more error in Keycloak logs 🍾
--   Templates now load in fraction of a second 🏎
-
 # Motivations
 
 Keycloak provides [theme support](https://www.keycloak.org/docs/latest/server_development/#_themes) for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.
@@ -98,7 +103,7 @@ Tested with the following Keycloak versions:
 This tool will be maintained to stay compatible with Keycloak v11 and up, however, the default pages you will get
 (before you customize it) will always be the ones of Keycloak v11.
 
-This tool assumes you are bundling your app with Webpack (tested with 4.44.2) .
+This tool assumes you are bundling your app with Webpack (tested with the versions that ships with CRA v4.44.2 and v5.0.0) .
 It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
 and a `build/static/` directory generated by webpack.
 For more information see [this issue](https://github.com/InseeFrLab/keycloakify/issues/5#issuecomment-832296432)
@@ -208,8 +213,8 @@ reactDom.render(
     <img src="https://user-images.githubusercontent.com/6702424/114326299-6892fc00-9b34-11eb-8d75-85696e55458f.png">
 </p>
 
-Example of a customization using only CSS: [here](https://github.com/InseeFrLab/onyxia-ui/blob/012639d62327a9a56be80c46e32c32c9497b82db/src/app/components/KcApp.tsx)
-(the [index.tsx](https://github.com/InseeFrLab/onyxia-ui/blob/012639d62327a9a56be80c46e32c32c9497b82db/src/app/index.tsx#L89-L94) )
+Example of a customization using only CSS: [here](https://github.com/InseeFrLab/onyxia-web/blob/012639d62327a9a56be80c46e32c32c9497b82db/src/app/components/KcApp.tsx)
+(the [index.tsx](https://github.com/InseeFrLab/onyxia-web/blob/012639d62327a9a56be80c46e32c32c9497b82db/src/app/index.tsx#L89-L94) )
 and the result you can expect:
 
 <p align="center">
@@ -224,7 +229,7 @@ If you want to go beyond only customizing the CSS you can re-implement some of t
 pages or even add new ones.
 
 If you want to go this way checkout the demo setup provided [here](https://github.com/garronej/keycloakify-demo-app/tree/look_and_feel).
-If you prefer a real life example you can checkout [onyxia-web's source](https://github.com/InseeFrLab/onyxia-web/tree/main/src/app/components/KcApp).
+If you prefer a real life example you can checkout [onyxia-web's source](https://github.com/InseeFrLab/onyxia-web/tree/main/src/ui/components/KcApp).
 The web app is in production [here](https://datalab.sspcloud.fr).
 
 Main takeaways are:
@@ -430,7 +435,7 @@ keycloakInstance.init({
 
 If you really want to go the extra miles and avoid having the white
 flash of the blank html before the js bundle have been evaluated
-[here is a snippet](https://github.com/InseeFrLab/onyxia-ui/blob/a77eb502870cfe6878edd0d956c646d28746d053/public/index.html#L5-L54) that you can place in your `public/index.html` if you are using `powerhooks/useGlobalState`.
+[here is a snippet](https://github.com/InseeFrLab/onyxia-web/blob/e1c1f309aaa3d5f860df39ba0b75cce89c88a9de/public/index.html#L117-L166) that you can place in your `public/index.html` if you are using `powerhooks/useGlobalState`.
 
 # Kickstart video
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "4.2.16",
+    "version": "4.2.21",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -77,11 +77,11 @@
     },
     "dependencies": {
         "cheerio": "^1.0.0-rc.5",
-        "evt": "2.0.0-beta.38",
+        "evt": "2.0.0-beta.39",
         "minimal-polyfills": "^2.2.1",
         "path-browserify": "^1.0.1",
         "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tsafe": "^0.8.1"
+        "tsafe": "^0.9.0"
     }
 }

src/bin/build-keycloak-theme/replaceImportFromStatic.ts

@@ -37,7 +37,7 @@ export function replaceImportsInInlineCssCode(params: { cssCode: string; urlPath
     const { cssCode, urlPathname, urlOrigin } = params;
 
     const fixedCssCode = cssCode.replace(
-        urlPathname === "/" ? /url\(\/([^/][^)]+)\)/g : new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
+        urlPathname === "/" ? /url\(["']?\/([^/][^)"']+)["']?\)/g : new RegExp(`url\\(["']?${urlPathname}([^)"']+)["']?\\)`, "g"),
         (...[, group]) => `url(${urlOrigin === undefined ? "${url.resourcesPath}/build/" + group : params.urlOrigin + urlPathname + group})`,
     );
 
@@ -52,7 +52,7 @@ export function replaceImportsInCssCode(params: { cssCode: string }): {
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/url\(\/[^/][^)]+\)[^;}]*/g) ?? []).forEach(
+    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
         match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match),
     );
 

src/lib/getKcContext/KcContextBase.ts

@@ -34,6 +34,7 @@ export declare namespace KcContextBase {
             loginUrl: string;
         };
         realm: {
+            name: string;
             displayName?: string;
             displayNameHtml?: string;
             internationalizationEnabled: boolean;

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -18,6 +18,7 @@ export const kcContextCommonMock: KcContextBase.Common = {
         "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
     },
     "realm": {
+        "name": "myrealm",
         "displayName": "myrealm",
         "displayNameHtml": "myrealm",
         "internationalizationEnabled": true,

src/lib/tools/pathJoin.ts

@@ -1,3 +1,6 @@
 export function pathJoin(...path: string[]): string {
-    return path.map(part => part.replace(/^\/+/, "").replace(/\/+$/, "")).join("/");
+    return path
+        .map((part, i) => (i === 0 ? part : part.replace(/^\/+/, "")))
+        .map((part, i) => (i === path.length - 1 ? part : part.replace(/\/+$/, "")))
+        .join("/");
 }

yarn.lock

@@ -545,6 +545,15 @@ evt@2.0.0-beta.38:
     run-exclusive "^2.2.14"
     tsafe "^0.4.1"
 
+evt@2.0.0-beta.39:
+  version "2.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.0.0-beta.39.tgz#3c859a83b35940f7eecfb5f148f03b7cbf3fee51"
+  integrity sha512-XxJkaHrFWBrzjTbnr5LJYXkGkADsAXReZfq2lFu3Kf1iCEw5/5ibrdXu3bQdWW6xkZ8qwAHT3STU9zYcCl09BA==
+  dependencies:
+    minimal-polyfills "^2.2.1"
+    run-exclusive "^2.2.14"
+    tsafe "^0.4.1"
+
 execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -1469,6 +1478,11 @@ tsafe@^0.8.1:
   resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.8.1.tgz#9af7e1540bc04313a82d60c98056a5017c8b086b"
   integrity sha512-EfPjxQHzndQAV/uh0SMGP26Wg3dCuaw8dRv2VPEuGHen5qzg2oqsMvZw2wkQFkiMisZq2fm95m5lheimW2Fpvg==
 
+tsafe@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.9.0.tgz#8394e5fdf81e690c97e2b8be4180a079a4a19bfb"
+  integrity sha512-wmbu8pI/xmW69b13HoS8WbTcSlRTDjIut9ACblBjVZVTk0vsMRXdoh1k1jMu5EzKNohBavKHhqNOOsccSR7XCA==
+
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"