Fix Vite issues (#2038)

* Fix environment vars in Vite
* Add types, remove process.env override
* Temporarily Remove Statigz / gzip
* Update ui/v2.5/src/core/createClient.ts

Co-authored-by: peolic <66393006+peolic@users.noreply.github.com>

* Update ui/v2.5/src/serviceWorker.ts

Co-authored-by: peolic <66393006+peolic@users.noreply.github.com>

* Ignore case rules in types
* Add windows js workaround

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

pkg/api/server.go

@@ -30,7 +30,6 @@ import (
 	"github.com/stashapp/stash/pkg/manager/config"
 	"github.com/stashapp/stash/pkg/models"
 	"github.com/stashapp/stash/pkg/utils"
-	"github.com/vearutop/statigz"
 )
 
 var version string
@@ -190,6 +189,12 @@ func Start(uiBox embed.FS, loginUIBox embed.FS) {
 
 		ext := path.Ext(r.URL.Path)
 
+		// workaround for Windows systems where js files are set to plaintext in
+		// the registry.
+		if ext == ".js" {
+			w.Header().Set("Content-Type", "application/javascript")
+		}
+
 		if customUILocation != "" {
 			if r.URL.Path == "index.html" || ext == "" {
 				r.URL.Path = "/"
@@ -215,7 +220,9 @@ func Start(uiBox embed.FS, loginUIBox embed.FS) {
 				w.Header().Add("Cache-Control", "max-age=604800000")
 			}
 			r.URL.Path = uiRootDir + r.URL.Path
-			statigz.FileServer(uiBox).ServeHTTP(w, r)
+
+			http.FileServer(http.FS(uiBox)).ServeHTTP(w, r)
+			// statigz.FileServer(uiBox).ServeHTTP(w, r)
 		}
 	})
 

ui/v2.5/src/components/Changelog/Changelog.tsx

@@ -23,8 +23,8 @@ type Module = typeof V010;
 const Changelog: React.FC = () => {
   const [{ data, loading }, setOpenState] = useChangelogStorage();
 
-  const stashVersion = process.env.VITE_APP_STASH_VERSION;
+  const stashVersion = import.meta.env.VITE_APP_STASH_VERSION;
-  const buildTime = process.env.VITE_APP_DATE;
+  const buildTime = import.meta.env.VITE_APP_DATE;
 
   let buildDate;
   if (buildTime) {

ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx

@@ -5,9 +5,9 @@ import { LoadingIndicator } from "src/components/Shared";
 import { useLatestVersion } from "src/core/StashService";
 
 export const SettingsAboutPanel: React.FC = () => {
-  const gitHash = process.env.VITE_APP_GITHASH;
+  const gitHash = import.meta.env.VITE_APP_GITHASH;
-  const stashVersion = process.env.VITE_APP_STASH_VERSION;
+  const stashVersion = import.meta.env.VITE_APP_STASH_VERSION;
-  const buildTime = process.env.VITE_APP_DATE;
+  const buildTime = import.meta.env.VITE_APP_DATE;
 
   const intl = useIntl();
 

ui/v2.5/src/core/createClient.ts

@@ -90,10 +90,10 @@ export const getBaseURL = () => {
 export const getPlatformURL = (ws?: boolean) => {
   const platformUrl = new URL(window.location.origin + getBaseURL());
 
-  if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
+  if (import.meta.env.DEV) {
-    platformUrl.port = process.env.VITE_APP_PLATFORM_PORT ?? "9999";
+    platformUrl.port = import.meta.env.VITE_APP_PLATFORM_PORT ?? "9999";
 
-    if (process.env.VITE_APP_HTTPS === "true") {
+    if (import.meta.env.VITE_APP_HTTPS === "true") {
       platformUrl.protocol = "https:";
     }
   }

ui/v2.5/src/globals.d.ts

@@ -7,3 +7,17 @@ declare module "hamming-distance";
 declare module "@formatjs/intl-pluralrules/locale-data/en";
 declare module "@formatjs/intl-numberformat/locale-data/en";
 declare module "@formatjs/intl-numberformat/locale-data/en-GB";
+
+/* eslint-disable  @typescript-eslint/naming-convention */
+interface ImportMetaEnv extends Readonly<Record<string, string>> {
+  readonly VITE_APP_GITHASH?: string;
+  readonly VITE_APP_STASH_VERSION?: string;
+  readonly VITE_APP_DATE?: string;
+  readonly VITE_APP_PLATFORM_PORT?: string;
+  readonly VITE_APP_HTTPS?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+/* eslint-enable  @typescript-eslint/no-unused-vars */

ui/v2.5/src/serviceWorker.ts

@@ -101,7 +101,7 @@ function checkValidServiceWorker(swUrl: string, config?: IConfig) {
 }
 
 export function register(config?: IConfig) {
-  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+  if (import.meta.env.PROD && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(
       (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
@@ -115,7 +115,7 @@ export function register(config?: IConfig) {
     }
 
     window.addEventListener("load", () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${import.meta.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.

ui/v2.5/vite.config.js

@@ -15,14 +15,12 @@ export default defineConfig({
   },
   publicDir: 'public',
   assetsInclude: ['**/*.md'],
-  plugins: [tsconfigPaths(), viteCompression({
+  plugins: [tsconfigPaths()
-    algorithm: 'gzip',
+    // viteCompression({
-    disable: false,
+    // algorithm: 'gzip',
-    deleteOriginFile: true,
+    // disable: false,
-    filter: /\.(js|json|css|svg|md)$/i
+    // deleteOriginFile: true,
-  })],
+    // filter: /\.(js|json|css|svg|md)$/i
-  define: {
+  // })
-    'process.versions': {},
+],
-    'process.env': {}
- }
 })