Add Vite support

src/bin/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../../tsproject.json",
     "compilerOptions": {
+        "composite": true,
         "module": "CommonJS",
         "target": "ES5",
         "esModuleInterop": true,

src/tsconfig.json

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

src/vite/index.ts

@@ -0,0 +1,92 @@
+import { load as cheerioLoad } from "cheerio";
+import { ftlValuesGlobalName } from "../bin/keycloakify/ftlValuesGlobalName";
+import { generateCssCodeToDefineGlobals, replaceImportsInCssCode } from "../bin/keycloakify/replacers/replaceImportsInCssCode";
+
+// need to be imported from vite/dist/node because of circular dependency error
+import type { RenderBuiltAssetUrl, UserConfig } from "vite/dist/node";
+
+export function withKeycloakify(config: UserConfig = {}): UserConfig {
+    config.plugins = [...(config.plugins ?? []), keycloakify()];
+
+    config.define = {
+        ...config.define,
+
+        // keycloakify expects a process.env becuase it looks for PUBLIC_URL
+        // we define the PUBLIC_URL as the base url of the vite config
+        "process.env": config.base ? { PUBLIC_URL: config.base } : {}
+    };
+
+    config.build = {
+        ...config.build,
+
+        // keycloakify expects build dir to be in /build
+        outDir: "build",
+
+        // keycloakify expects assets to be in /build/static
+        assetsDir: "static",
+
+        // most supported target
+        target: "es2015"
+    };
+
+    config.experimental = {
+        ...config.experimental,
+        renderBuiltUrl
+    };
+
+    return config;
+}
+
+export function keycloakify() {
+    let cssGlobalsToDefine = {};
+
+    return {
+        name: "keycloakify",
+        apply: "build" as const,
+        transform: (src: string, id: string) => {
+            if (id.endsWith(".css")) {
+                const cssResult = replaceImportsInCssCode({ cssCode: src });
+
+                cssGlobalsToDefine = { ...cssGlobalsToDefine, ...cssResult.cssGlobalsToDefine };
+
+                return {
+                    code: cssResult.fixedCssCode
+                };
+            }
+        },
+        transformIndexHtml(rawHtml: string) {
+            const html = rawHtml.replace(/\/assets/g, "${url.resourcesPath}/build/static");
+
+            if (Object.keys(cssGlobalsToDefine).length === 0) {
+                return html;
+            }
+
+            const cheerio = cheerioLoad(html);
+
+            cheerio("head").prepend(`
+                <style>
+                ${
+                    generateCssCodeToDefineGlobals({
+                        cssGlobalsToDefine,
+                        buildOptions: {
+                            urlPathname: undefined
+                        }
+                    }).cssCodeToPrependInHead
+                }
+                </style>
+            `);
+
+            return cheerio.html();
+        }
+    };
+}
+
+export const renderBuiltUrl: RenderBuiltAssetUrl = (filename, { hostType }) => {
+    if (hostType === "js") {
+        return {
+            runtime: `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/" + ${JSON.stringify(filename)}`
+        };
+    }
+
+    return { relative: true };
+};

src/vite/tsconfig.json

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