From 8072a944a9d41fe9ceee814b70bafbbb07899523 Mon Sep 17 00:00:00 2001
From: Kloon ImKloon <kloon15@gmail.com>
Date: Sat, 12 Aug 2023 11:28:03 +0200
Subject: [PATCH] Migration to VIte 4 (working)

---
 frontend/index.html        | 15 +++++++--------
 frontend/package.json      |  4 ++--
 frontend/src/css/fonts.css |  4 ++--
 frontend/vite.config.js    | 10 ++--------
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 4997504d..a201a6c9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -61,24 +61,23 @@
 
     <!-- Inject Some Variables and generate the manifest json -->
     <script>
-      <!-- We can load JSON directly -->
+      <!-- Json is actually a JS object, assign it directly -->
       window.FileBrowser = [{[ .Json ]}];
-      window.__appendStaticUrl = (filename) => {
-        return `$(window.FileBrowser.StaticURL)/$(filename)`;
-      }
-
-      var fullStaticURL = window.location.origin + window.FileBrowser.StaticURL;
+      <!-- Global function to prepend static url -->
+      window.__prependStaticUrl = (url) => {
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, '')}`;
+      };
       var dynamicManifest = {
         name: window.FileBrowser.Name || "File Browser",
         short_name: window.FileBrowser.Name || "File Browser",
         icons: [
           {
-            src: fullStaticURL + "/img/icons/android-chrome-192x192.png",
+            src: window.__prependStaticUrl("/img/icons/android-chrome-192x192.png"),
             sizes: "192x192",
             type: "image/png",
           },
           {
-            src: fullStaticURL + "/img/icons/android-chrome-512x512.png",
+            src: window.__prependStaticUrl("/img/icons/android-chrome-512x512.png"),
             sizes: "512x512",
             type: "image/png",
           },
diff --git a/frontend/package.json b/frontend/package.json
index 6b1b1e6a..e31ebcc8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "vite dev",
     "serve": "vite serve",
-    "build": "rimraf dist && vite build",
-    "watch": "rimraf dist && vite build --watch",
+    "build": "vite build",
+    "watch": "vite build --watch",
     "lint": "eslint --ext .vue,.js src/",
     "lint:fix": "eslint --ext .vue,.js src/ --fix",
     "format": "prettier --write ."
diff --git a/frontend/src/css/fonts.css b/frontend/src/css/fonts.css
index c64dc69f..c32e1e01 100644
--- a/frontend/src/css/fonts.css
+++ b/frontend/src/css/fonts.css
@@ -1,3 +1,5 @@
+@import "material-icons/iconfont/filled.css";
+
 @font-face {
   font-family: "Roboto";
   font-style: normal;
@@ -235,8 +237,6 @@
     U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
-@import "~material-icons/iconfont/filled.css";
-
 .material-icons {
   font-size: 1.5rem;
 }
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 325efbba..7c2e0f76 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
+      vue: "vue/dist/vue.esm.js",
       "@/": fileURLToPath(new URL("./src/", import.meta.url)),
     },
   },
@@ -24,16 +25,9 @@ export default defineConfig({
   experimental: {
     renderBuiltUrl(filename, { hostType }) {
       if (hostType === "js") {
-        return { runtime: `window.__appendStaticUrl("${filename}")` };
-        // } else if (hostType === "css") {
-        //   return `'[{[ .StaticURL ]}]/${filename}'`;
+        return { runtime: `window.__prependStaticUrl("${filename}")` };
       } else if (hostType === "html") {
         return `[{[ .StaticURL ]}]/${filename}`;
-        // return {
-        //   runtime: `window.__appendStaticUrl(${JSON.stringify(filename)})`,
-        // };
-        // if (hostType === "js") {
-        // return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` };
       } else {
         return { relative: true };
       }