fix: upgrade to vite & vitest

ui/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#3f51b5">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="manifest.json">
     <title>Gotify</title>
 
     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="static/apple-touch-icon-57x57.png" />
@@ -35,8 +35,7 @@
     Gotify requires JavaScript.
 </noscript>
 <div id="root"></div>
-<% if (process.env.NODE_ENV === 'production') { %>
+<script>window.config = %CONFIG%;</script>
-    <script>window.config = %CONFIG%;</script>
+<script type="module" src="/src/index.tsx"></script>
-<% } %>
 </body>
 </html>

ui/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.9.1",
+    "@vitejs/plugin-react": "^4.7.0",
     "axios": "^0.21.1",
     "codemirror": "^5.61.1",
     "detect-browser": "^5.2.0",
@@ -26,13 +27,14 @@
     "react-timeago": "^6.2.1",
     "remark-gfm": "^1.0.0",
     "remove-markdown": "^0.3.0",
-    "typeface-roboto": "1.1.13"
+    "typeface-roboto": "1.1.13",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "vite",
-    "build": "react-scripts build",
+    "build": "vite build",
-    "test": "react-scripts test --env=node",
+    "test": "vitest --disable-console-intercept --no-file-parallelism",
-    "eject": "react-scripts eject",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "format": "prettier \"src/**/*.{ts,tsx}\" --write",
     "testformat": "prettier \"src/**/*.{ts,tsx}\" --list-different"
@@ -41,7 +43,6 @@
     "@types/codemirror": "5.60.0",
     "@types/detect-browser": "^4.0.0",
     "@types/get-port": "^4.0.0",
-    "@types/jest": "^26.0.23",
     "@types/js-base64": "^3.3.1",
     "@types/node": "^15.12.2",
     "@types/notifyjs": "^3.0.2",
@@ -63,7 +64,6 @@
     "get-port": "^5.1.1",
     "prettier": "^2.3.1",
     "puppeteer": "^17.1.3",
-    "react-scripts": "^4.0.3",
     "rimraf": "^3.0.2",
     "tree-kill": "^1.2.0",
     "typescript": "4.0.2",

ui/serve.go

@@ -35,7 +35,6 @@ func Register(r *gin.Engine, version model.VersionInfo, register bool) {
 	ui.GET("/", serveFile("index.html", "text/html", replaceConfig))
 	ui.GET("/index.html", serveFile("index.html", "text/html", replaceConfig))
 	ui.GET("/manifest.json", serveFile("manifest.json", "application/json", noop))
-	ui.GET("/asset-manifest.json", serveFile("asset-manifest.json", "application/json", noop))
 
 	subBox, err := fs.Sub(box, "build")
 	if err != nil {

ui/src/index.tsx

@@ -16,8 +16,6 @@ import {ClientStore} from './client/ClientStore';
 import {PluginStore} from './plugin/PluginStore';
 import {registerReactions} from './reactions';
 
-const devUrl = 'http://localhost:3000/';
-
 const {port, hostname, protocol, pathname} = window.location;
 const slashes = protocol.concat('//');
 const path = pathname.endsWith('/') ? pathname : pathname.substring(0, pathname.lastIndexOf('/'));
@@ -50,12 +48,7 @@ const initStores = (): StoreMapping => {
 };
 
 (function clientJS() {
-    if (process.env.NODE_ENV === 'production') {
     config.set('url', prodUrl);
-    } else {
-        config.set('url', devUrl);
-        config.set('register', true);
-    }
     const stores = initStores();
     initAxios(stores.currentUser, stores.snackManager.snack);
 

ui/src/setupTests.ts

@@ -1 +0,0 @@
-jest.setTimeout(process.env.CI === 'true' ? 50000 : 20000);

ui/src/tests/application.test.ts

@@ -1,6 +1,7 @@
 import {Page} from 'puppeteer';
 import {newTest, GotifyTest} from './setup';
 import {count, innerText, waitForExists, waitToDisappear, clearField} from './utils';
+import {afterAll, beforeAll, describe, expect, it} from 'vitest';
 import * as auth from './authentication';
 import * as selector from './selector';
 

ui/src/tests/authentication.ts

@@ -1,5 +1,6 @@
 import {Page} from 'puppeteer';
 import {waitForExists} from './utils';
+import {expect} from 'vitest';
 import * as selector from './selector';
 
 const $loginForm = selector.form('#login-form');

ui/src/tests/client.test.ts

@@ -1,6 +1,7 @@
 import {Page} from 'puppeteer';
 import {newTest, GotifyTest} from './setup';
 import {count, innerText, waitForExists, waitToDisappear, clearField} from './utils';
+import {afterAll, beforeAll, describe, expect, it} from 'vitest';
 import * as auth from './authentication';
 
 import * as selector from './selector';

ui/src/tests/message.test.ts

@@ -2,6 +2,7 @@
 import {Page} from 'puppeteer';
 import {newTest, GotifyTest} from './setup';
 import {clickByText, count, innerText, waitForCount, waitForExists} from './utils';
+import {afterAll, beforeAll, describe, expect, it} from 'vitest';
 import * as auth from './authentication';
 import * as selector from './selector';
 import axios from 'axios';

ui/src/tests/plugin.test.ts

@@ -1,7 +1,7 @@
 import * as os from 'os';
 import {Page} from 'puppeteer';
 import axios from 'axios';
-
+import {afterAll, beforeAll, describe, expect, it} from 'vitest';
 import * as auth from './authentication';
 import * as selector from './selector';
 import {GotifyTest, newTest, newPluginDir} from './setup';

ui/src/tests/user.test.ts

@@ -1,6 +1,7 @@
 import {Page} from 'puppeteer';
 import {newTest, GotifyTest} from './setup';
 import {clearField, count, innerText, waitForExists, waitToDisappear} from './utils';
+import {afterAll, beforeAll, describe, expect, it} from 'vitest';
 import * as auth from './authentication';
 import * as selector from './selector';
 

ui/src/tests/utils.ts

@@ -59,7 +59,7 @@ export const waitForExists = async (page: Page, selector: string, text: string):
 export const clearField = async (element: ElementHandle | Page, selector: string) => {
     const elementHandle = await element.$(selector);
     if (!elementHandle) {
-        fail();
+        throw "element handle not set"
     }
     await elementHandle.click();
     await elementHandle.focus();

ui/tsconfig.json

@@ -1,12 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
+    "target": "ES2020",
-    "outDir": "build/dist",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "target": "es5",
+    "allowImportingTsExtensions": true,
-    "lib": [
+
-      "es6",
-      "dom"
-    ],
     "sourceMap": true,
     "allowJs": true,
     "jsx": "react",

ui/vite-env.d.ts

@@ -0,0 +1,2 @@
+// Example: vite-env.d.ts
+/// <reference types="vite/client" />

ui/vite.config.ts

@@ -0,0 +1,44 @@
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+
+const GOTIFY_PORT = process.env.GOTIFY_PORT ?? '80';
+
+export default defineConfig({
+    build: {
+        outDir: 'build',
+        emptyOutDir: true,
+        sourcemap: false,
+        assetsDir: 'static',
+    },
+    plugins: [
+        react({
+            babel: {
+                parserOpts: {
+                    plugins: ['decorators-legacy'],
+                },
+            },
+        }),
+    ],
+    define: {
+        // Some libraries use the global object, even though it doesn't exist in the browser.
+        // Alternatively, we could add `<script>window.global = window;</script>` to index.html.
+        // https://github.com/vitejs/vite/discussions/5912
+        global: {},
+    },
+    server: {
+        host: '0.0.0.0',
+        proxy: {
+            '^/(application|message|client|current|user|plugin|version|image)': {
+                target: `http://localhost:${GOTIFY_PORT}/`,
+                changeOrigin: true,
+                secure: false,
+            },
+            '/stream': {
+                target: `ws://localhost:${GOTIFY_PORT}/`,
+                ws: true,
+                rewriteWsOrigin: true,
+            },
+        },
+        cors: false,
+    },
+});

ui/vitest.config.js

@@ -0,0 +1,10 @@
+import {defineConfig} from 'vitest/config';
+
+const timeout = process.env.CI === 'true' ? 60000 : 30000;
+
+export default defineConfig({
+    test: {
+        testTimeout: timeout,
+        hookTimeout: timeout,
+    },
+});