Support for React.lazy() #141 🎉

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

@@ -17,11 +17,35 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; urlOr
     const { jsCode, urlOrigin } = params;
 
     const fixedJsCode = jsCode
+        .replace(
+            /([a-zA-Z]+)\.([a-zA-Z]+)=function\(([a-zA-Z]+)\){return"static\/js\/"/g,
+            (...[, n, u, e]) => `
+			${n}[(function(){
+                ${
+                    urlOrigin === undefined
+                        ? `
+                        Object.defineProperty(${n}, "p", {
+                            get: function() { return window.${ftlValuesGlobalName}.url.resourcesPath; },
+                            set: function (){}
+                        });
+                    `
+                        : `
+                    var p= "";
+                    Object.defineProperty(${n}, "p", {
+                        get: function() { return ("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + p; },
+                        set: function (value){ p = value;}
+                    });
+                    `
+                }
+				return "${u}";
+			})()] = function(${e}) { return "${urlOrigin === undefined ? "/build/" : ""}static/js/"`,
+        )
         .replace(/([a-zA-Z]+\.[a-zA-Z]+)\+"static\//g, (...[, group]) =>
             urlOrigin === undefined
                 ? `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
                 : `("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + ${group} + "static/`,
         )
+        //TODO: Write a test case for this
         .replace(/".chunk.css",([a-zA-Z])+=([a-zA-Z]+\.[a-zA-Z]+)\+([a-zA-Z]+),/, (...[, group1, group2, group3]) =>
             urlOrigin === undefined
                 ? `".chunk.css",${group1} = window.${ftlValuesGlobalName}.url.resourcesPath + "/build/" + ${group3},`

src/test/bin/replaceImportFromStatic.ts

@@ -23,20 +23,18 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
             }[e] + ".chunk.js"
         }
         
-        function f2() {
+        function sameAsF() {
             return a.p+"static/js/" + ({}[e] || e) + "." + {
                 3: "0664cdc0"
             }[e] + ".chunk.js"
         }
 
-        n.u = function(e) {
+        n.u=function(e){return"static/js/" + e + "." + {
-            return "static/js/" + e + "." + {
                 147: "6c5cee76",
                 787: "8da10fcf",
                 922: "be170a73"
             } [e] + ".chunk.js"
         }
-
     `;
 
     {
@@ -52,17 +50,19 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                 }[e] + ".chunk.js"
             }
 
-            function f2() {
+            function sameAsF() {
                 return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
                     3: "0664cdc0"
                 }[e] + ".chunk.js"
             }
 
-            n.u = function(e) {
+            n[(function (){
                 Object.defineProperty(n, "p", {
                     get: function() { return window.kcContext.url.resourcesPath; },
                     set: function (){}
                 });
+                return "u";
+            })()] = function(e) {
                 return "/build/static/js/" + e + "." + {
                     147: "6c5cee76",
                     787: "8da10fcf",
@@ -87,20 +87,20 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                 }[e] + ".chunk.js"
             }
 
-            function f2() {
+            function sameAsF() {
                 return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + a.p + "static/js/" + ({}[e] || e) + "." + {
                     3: "0664cdc0"
                 }[e] + ".chunk.js"
             }
 
-            n.u = function(e) {
+            n[(function (){
-                {
+                var p= "";
-                    var p= "";
+                Object.defineProperty(n, "p", {
-                    Object.defineProperty(n, "p", {
+                    get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
-                        get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
+                    set: function (value){ p = value; }
-                        set: function (value){ p = value;}
+                });
-                    });
+                return "u";
-                }
+            })()] = function(e) {
                 return "static/js/" + e + "." + {
                     147: "6c5cee76",
                     787: "8da10fcf",