Update changelog v0.3.14

CHANGELOG.md

@@ -1,3 +1,19 @@
+### **0.3.14** (2021-03-28)  
+  
+- Fix standalone mode: imports from js    
+  
+### **0.3.13** (2021-03-26)  
+  
+  
+  
+### **0.3.12** (2021-03-26)  
+  
+- Fix mocksContext    
+  
+### **0.3.11** (2021-03-26)  
+  
+- Fix previous build, improve README    
+  
 ### **0.3.10** (2021-03-26)  
   
 - Handle <style> tag, improve documentation    

README.md

@@ -70,6 +70,10 @@ Here is `yarn add keycloakify` for you 🍸
     "keycloak": "yarn build && build-keycloak-theme",
 },
 ```
+`"homepage"` must be specified only if the theme is build using 
+`--external-assets`(#specify-from-where-the-resources-should-be-downloaded) or if
+the url path is not `/` (only the url path will be considered so it doesn't matter if the
+base url is wrong)
 
 It is mandatory that you specify the url where your app will be available
 using the `homepage` field.
@@ -86,8 +90,9 @@ the theme into Keycloak are printed in the console.
 *TL;DR*: Building the theme with the `--external-assets` option enables the login
 page to load faster for first time users but it also implies that:  
 - If the app is down, your Keycloak login and register pages are down as well.
-- Each time the app is updated, the theme must be updated as well.
+- Each time the app is updated, the theme must be updated.
 - CORS must be enabled for fonts.
+- You must know at build time what will be the url of your app (`"homepage"` in `package.json`).  
 
 <details>
   <summary>Click to expand</summary>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "0.3.10",
+    "version": "0.3.14",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -30,25 +30,22 @@ function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
     }
 }
 
-export type Mode = {
-    type: "standalone";
-    urlPathname: string;
-} | {
-    type: "external assets";
-    urlPathname: string;
-    urlOrigin: string;
-}
 
 export function generateFtlFilesCodeFactory(
     params: {
         ftlValuesGlobalName: string;
         cssGlobalsToDefine: Record<string, string>;
         indexHtmlCode: string;
-        mode: Mode;
+        urlPathname: string;
-    }
+    } & ({
+        mode: "standalone";
+    } | {
+        mode: "external assets";
+        urlOrigin: string;
+    })
 ) {
 
-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, mode } = params;
+    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -57,7 +54,18 @@ export function generateFtlFilesCodeFactory(
         const { fixedJsCode } = replaceImportsFromStaticInJsCode({
             ftlValuesGlobalName,
             "jsCode": $(element).html()!,
-            mode
+            ...(() => {
+                switch (params.mode) {
+                    case "standalone": return {
+                        "mode": params.mode
+                    };
+                    case "external assets": return {
+                        "mode": params.mode,
+                        "urlOrigin": params.urlOrigin,
+                        "urlPathname": params.urlPathname,
+                    };
+                }
+            })()
         });
 
         $(element).text(fixedJsCode);
@@ -68,7 +76,18 @@ export function generateFtlFilesCodeFactory(
 
         const { fixedCssCode } = replaceImportsInInlineCssCode({
             "cssCode": $(element).html()!,
-            mode
+            "urlPathname": params.urlPathname,
+            ...(() => {
+                switch (params.mode) {
+                    case "standalone": return {
+                        "mode": params.mode
+                    };
+                    case "external assets": return {
+                        "mode": params.mode,
+                        "urlOrigin": params.urlOrigin,
+                    };
+                }
+            })()
         });
 
         $(element).text(fixedCssCode);
@@ -87,18 +106,18 @@ export function generateFtlFilesCodeFactory(
                 return;
             }
 
-            switch (mode.type) {
+            switch (params.mode) {
                 case "external assets":
                     $(element).attr(
                         attrName,
-                        href.replace(/^\//, `${mode.urlOrigin}/`)
+                        href.replace(/^\//, `${params.urlOrigin}/`)
                     );
                     break;
                 case "standalone":
                     $(element).attr(
                         attrName,
                         href.replace(
-                            new RegExp(`^${mode.urlPathname.replace(/\//g, "\\/")}`),
+                            new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
                             "${url.resourcesPath}/build/"
                         )
                     );
@@ -131,7 +150,7 @@ export function generateFtlFilesCodeFactory(
                 '<style>',
                 generateCssCodeToDefineGlobals({
                     cssGlobalsToDefine,
-                    "urlPathname": mode.urlPathname
+                    urlPathname
                 }).cssCodeToPrependInHead,
                 '</style>',
                 ''

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

@@ -6,7 +6,7 @@ import {
     replaceImportsInCssCode,
     replaceImportsFromStaticInJsCode
 } from "./replaceImportFromStatic";
-import { generateFtlFilesCodeFactory, pageIds, Mode } from "./generateFtl";
+import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
 import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
 import { downloadAndUnzip } from "../tools/downloadAndUnzip";
 import * as child_process from "child_process";
@@ -20,11 +20,16 @@ export function generateKeycloakThemeResources(
         themeName: string;
         reactAppBuildDirPath: string;
         keycloakThemeBuildingDirPath: string;
-        mode: Mode;
+        urlPathname: string;
-    }
+    } & ({
+        mode: "standalone";
+    } | {
+        mode: "external assets";
+        urlOrigin: string;
+    })
 ) {
 
-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, mode } = params;
+    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
 
     const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
 
@@ -45,7 +50,7 @@ export function generateKeycloakThemeResources(
                 return undefined;
             }
 
-            if (mode.type === "standalone") {
+            if (params.mode === "standalone") {
 
                 if (/\.css?$/i.test(filePath)) {
 
@@ -62,17 +67,28 @@ export function generateKeycloakThemeResources(
 
                 }
 
-                if (/\.js?$/i.test(filePath)) {
+            }
 
-                    const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+            if (/\.js?$/i.test(filePath)) {
-                        "jsCode": sourceCode.toString("utf8"),
-                        ftlValuesGlobalName,
-                        mode
-                    });
 
-                    return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
+                const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+                    "jsCode": sourceCode.toString("utf8"),
+                    ftlValuesGlobalName,
+                    ...(() => {
+                        switch (params.mode) {
+                            case "external assets": return {
+                                "mode": params.mode,
+                                "urlOrigin": params.urlOrigin,
+                                "urlPathname": params.urlPathname
+                            };
+                            case "standalone": return {
+                                "mode": params.mode
+                            };
+                        }
+                    })()
+                });
 
-                }
+                return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
 
             }
 
@@ -87,7 +103,18 @@ export function generateKeycloakThemeResources(
         "indexHtmlCode": fs.readFileSync(
             pathJoin(reactAppBuildDirPath, "index.html")
         ).toString("utf8"),
-        mode
+        urlPathname,
+        ...(() => {
+            switch (params.mode) {
+                case "external assets": return {
+                    "mode": params.mode,
+                    "urlOrigin": params.urlOrigin
+                };
+                case "standalone": return {
+                    "mode": params.mode
+                };
+            }
+        })()
     });
 
     pageIds.forEach(pageId => {

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

@@ -26,7 +26,7 @@ if (require.main === module) {
         keycloakThemeBuildingDirPath,
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
         "themeName": parsedPackageJson.name,
-        "mode": (() => {
+        ...(() => {
 
 
             const url = (() => {
@@ -44,16 +44,14 @@ if (require.main === module) {
                     "/" :
                     url.pathname.replace(/([^/])$/, "$1/");
 
-
-
             return !doUseExternalAssets ?
                 {
-                    "type": "standalone",
+                    "mode": "standalone",
                     urlPathname
                 } as const
                 :
                 {
-                    "type": "external assets",
+                    "mode": "external assets",
                     urlPathname,
                     "urlOrigin": (() => {
 

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

@@ -1,32 +1,29 @@
 
 import * as crypto from "crypto";
 
-type Mode = {
-    type: "standalone";
-} | {
-    type: "external assets";
-    urlOrigin: string;
-    urlPathname: string;
-}
-
 export function replaceImportsFromStaticInJsCode(
     params: {
         ftlValuesGlobalName: string;
         jsCode: string;
-        mode: Mode;
+    } & ({
-    }
+        mode: "standalone";
+    } | {
+        mode: "external assets";
+        urlOrigin: string;
+        urlPathname: string;
+    })
 ): { fixedJsCode: string; } {
 
-    const { jsCode, ftlValuesGlobalName, mode } = params;
+    const { jsCode, ftlValuesGlobalName } = params;
 
     const fixedJsCode = jsCode.replace(
         /[a-z]+\.[a-z]+\+"static\//g,
         (() => {
-            switch (mode.type) {
+            switch (params.mode) {
                 case "standalone":
                     return `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`;
                 case "external assets":
-                    return `"${mode.urlOrigin}${mode.urlPathname}static/`;
+                    return `"${params.urlOrigin}${params.urlPathname}static/`;
             }
         })()
     );
@@ -38,22 +35,28 @@ export function replaceImportsFromStaticInJsCode(
 export function replaceImportsInInlineCssCode(
     params: {
         cssCode: string;
-        mode: Mode;
+        urlPathname: string;
-    }
+    } & ({
+        mode: "standalone";
+    } | {
+        mode: "external assets";
+        urlOrigin: string;
+    })
 ): { fixedCssCode: string; } {
 
-    const { cssCode, mode } = params;
+    const { cssCode, urlPathname } = params;
 
     const fixedCssCode = cssCode.replace(
-        /url\((\/[^/][^)]+)\)/g,
+        urlPathname === "/" ?
-        (...[,group])=> `url(${
+            /url\(\/([^/][^)]+)\)/g :
-            (()=>{
+            new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
-                switch(mode.type){
+        (...[, group]) => `url(${(() => {
-                    case "standalone": return "${url.resourcesPath}/build" + group;
+            switch (params.mode) {
-                    case "external assets": return mode.urlOrigin + group
+                case "standalone": return "${url.resourcesPath}/build/" + group;
-                }
+                case "external assets": return params.urlOrigin + urlPathname + group
-            })()
+            }
-        })`
+        })()
+            })`
     );
 
     return { fixedCssCode };

src/lib/kcContextMocks/index.ts

@@ -9,8 +9,8 @@ import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
 export const kcTemplateContext: KcContext.Template = {
     "url": {
         "loginAction": "#",
-        "resourcesPath": "/" + resourcesPath,
+        "resourcesPath": `${process.env["PUBLIC_URL"]}/${resourcesPath}`,
-        "resourcesCommonPath": "/" + resourcesCommonPath,
+        "resourcesCommonPath": `${process.env["PUBLIC_URL"]}/${resourcesCommonPath}`,
         "loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
         "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
     },

src/test/generateKeycloakThemeResources.ts

@@ -12,9 +12,7 @@ generateKeycloakThemeResources({
     "themeName": "keycloakify-demo-app",
     "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
     "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
-    "mode": {
+    "mode": "standalone",
-        "type": "standalone",
+    "urlPathname": "/keycloakify-demo-app/"
-        "urlPathname": "/keycloakify-demo-app/"
-    }
 });
 

src/test/replaceImportFromStatic.ts

@@ -20,7 +20,7 @@ const { fixedJsCode } = replaceImportsFromStaticInJsCode({
             }[e] + ".chunk.js"
         }
     `,
-    "mode": { "type": "standalone" }
+    "mode": "standalone"
 });
 
 console.log({ fixedJsCode });