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> => [

src/tsconfig.json

@@ -14,7 +14,7 @@
         "jsx": "react-jsx",
         "allowSyntheticDefaultImports": true
     },
-    "exclude": ["./bin"],
+    "exclude": ["./bin", "./vite-plugin"],
     "references": [
         {
             "path": "./bin"

src/vite-plugin/index.ts

@@ -0,0 +1 @@
+export * from "./vite-plugin";

src/vite-plugin/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "../../tsproject.json",
+    "compilerOptions": {
+        "module": "CommonJS",
+        "target": "ES5",
+        "esModuleInterop": true,
+        "lib": ["es2015", "ES2019.Object"],
+        "outDir": "../../dist/vite-plugin",
+        "rootDir": ".",
+        "skipLibCheck": true
+    }
+}

src/vite-plugin/vite-plugin.ts

@@ -0,0 +1,31 @@
+// index.ts
+
+import type { Plugin, ResolvedConfig } from "vite";
+import * as fs from "fs";
+
+console.log("Hello world!");
+
+export function keycloakify(): Plugin {
+    let config: ResolvedConfig;
+
+    return {
+        "name": "keycloakify",
+
+        "configResolved": resolvedConfig => {
+            // Store the resolved config
+            config = resolvedConfig;
+
+            console.log("========> configResolved", config);
+
+            fs.writeFileSync("/Users/joseph/github/keycloakify-starter/log.txt", Buffer.from("Hello World", "utf8"));
+        },
+
+        "buildStart": () => {
+            console.log("Public Directory:", config.publicDir); // Path to the public directory
+            console.log("Dist Directory:", config.build.outDir); // Path to the dist directory
+            console.log("Assets Directory:", config.build.assetsDir); // Path to the assets directory within outDir
+        }
+
+        // ... other hooks
+    };
+}