Vite investigations

src/bin/keycloakify/BuildOptions.ts

@@ -3,6 +3,7 @@ import { getParsedPackageJson } from "./parsedPackageJson";
 import { join as pathJoin } from "path";
 import parseArgv from "minimist";
 import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
+import * as fs from "fs";
 
 /** Consolidated build option gathered form CLI arguments and config in package.json */
 export type BuildOptions = {
@@ -15,7 +16,6 @@ export type BuildOptions = {
     doCreateJar: boolean;
     loginThemeResourcesFromKeycloakVersion: string;
     reactAppRootDirPath: string;
-    /** Directory of your built react project. Defaults to {cwd}/build */
     reactAppBuildDirPath: string;
     /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
     keycloakifyBuildDirPath: string;
@@ -106,7 +106,17 @@ export function readBuildOptions(params: { reactAppRootDirPath: string; processA
                 });
             }
 
-            return pathJoin(reactAppRootDirPath, "build");
+            for (const name of ["build", "dist"]) {
+                const out = pathJoin(reactAppRootDirPath, name);
+
+                if (!fs.existsSync(out)) {
+                    continue;
+                }
+
+                return out;
+            }
+
+            throw new Error("Please use the reactAppBuildDirPath option to specify the build directory of your react app");
         })(),
         "keycloakifyBuildDirPath": (() => {
             const { keycloakifyBuildDirPath } = parsedPackageJson.keycloakify ?? {};

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -37,7 +37,7 @@ export function generateFtlFilesCodeFactory(params: {
 
             assert(jsCode !== null);
 
-            const { fixedJsCode } = replaceImportsFromStaticInJsCode({ jsCode });
+            const { fixedJsCode } = replaceImportsFromStaticInJsCode({ jsCode, "bundler": "vite" });
 
             $(element).text(fixedJsCode);
         });

src/bin/keycloakify/generateTheme/generateTheme.ts

@@ -93,7 +93,8 @@ export async function generateTheme(params: {
 
                     if (/\.js?$/i.test(filePath)) {
                         const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-                            "jsCode": sourceCode.toString("utf8")
+                            "jsCode": sourceCode.toString("utf8"),
+                            "bundler": "vite"
                         });
 
                         return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };

src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -1,18 +1,32 @@
 import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
 
-export function replaceImportsFromStaticInJsCode(params: { jsCode: string }): { fixedJsCode: string } {
-    /* 
-	NOTE:
+export function replaceImportsFromStaticInJsCode(params: { jsCode: string; bundler: "vite" | "webpack" }): { fixedJsCode: string } {
+    const { jsCode } = params;
 
-	When we have urlOrigin defined it means that 
-	we are building with --external-assets
-	so we have to make sur that the fixed js code will run 
-	inside and outside keycloak.
+    const { fixedJsCode } = (() => {
+        switch (params.bundler) {
+            case "vite":
+                return replaceImportsFromStaticInJsCode_vite({ jsCode });
+            case "webpack":
+                return replaceImportsFromStaticInJsCode_webpack({ jsCode });
+        }
+    })();
 
-	When urlOrigin isn't defined we can assume the fixedJsCode
-	will always run in keycloak context.
-	*/
+    return { fixedJsCode };
+}
 
+export function replaceImportsFromStaticInJsCode_vite(params: { jsCode: string }): { fixedJsCode: string } {
+    const { jsCode } = params;
+
+    const fixedJsCode = jsCode.replace(
+        /\.viteFileDeps = \[(.*)\]/g,
+        (...args) => `.viteFileDeps = [${args[1]}].map(viteFileDep => window.kcContext.url.resourcesPath.substring(1) + "/build/" + viteFileDep)`
+    );
+
+    return { fixedJsCode };
+}
+
+export function replaceImportsFromStaticInJsCode_webpack(params: { jsCode: string }): { fixedJsCode: string } {
     const { jsCode } = params;
 
     const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [