Migrate react-scripts to vite

ui/public/index.html → 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,6 @@
     Gotify requires JavaScript.
 </noscript>
 <div id="root"></div>
-<% if (process.env.NODE_ENV === 'production') { %>
-    <script>window.config = %CONFIG%;</script>
-<% } %>
+<script type="module" src="/src/index.tsx"></script>
 </body>
 </html>

ui/package.json

@@ -5,69 +5,68 @@
   "homepage": ".",
   "proxy": "http://localhost:80",
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.9.1",
-    "axios": "^0.21.1",
-    "codemirror": "^5.61.1",
+    "@material-ui/core": "4.12.3",
+    "@material-ui/icons": "4.11.2",
+    "axios": "1.7.4",
+    "codemirror": "5.64.0",
     "detect-browser": "^5.2.0",
     "js-base64": "^3.6.1",
-    "mobx": "^5.15.6",
-    "mobx-react": "^6.3.0",
-    "mobx-utils": "^5.6.1",
-    "notifyjs": "^3.0.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.2",
-    "react-codemirror2": "^7.2.1",
-    "react-dom": "^16.4.2",
-    "react-infinite": "^0.13.0",
-    "react-markdown": "^6.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-timeago": "^6.2.1",
-    "remark-gfm": "^1.0.0",
-    "remove-markdown": "^0.3.0",
+    "mobx": "6.13.4",
+    "mobx-react": "9.1.1",
+    "mobx-utils": "6.1.0",
+    "notifyjs": "3.0.0",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-codemirror2": "7.2.1",
+    "react-dom": "17.0.2",
+    "react-infinite": "0.13.0",
+    "react-markdown": "9.0.1",
+    "react-router": "6.27.0",
+    "react-router-dom": "6.27.0",
+    "react-timeago": "7.2.0",
+    "remark-gfm": "4.0.0",
+    "remove-markdown": "0.5.5",
     "typeface-roboto": "1.1.13"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=node",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "format": "prettier \"src/**/*.{ts,tsx}\" --write",
     "testformat": "prettier \"src/**/*.{ts,tsx}\" --list-different"
   },
   "devDependencies": {
     "@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/node": "20.16.11",
     "@types/notifyjs": "^3.0.2",
     "@types/puppeteer": "^5.4.6",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
     "@types/react-infinite": "0.0.35",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react-router-dom": "5.3.0",
     "@types/remove-markdown": "^0.3.0",
-    "@types/rimraf": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^24.0.0",
     "eslint-plugin-prefer-arrow": "^1.2.2",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-unicorn": "^21.0.0",
-    "get-port": "^5.1.1",
+    "get-port": "7.1.0",
     "prettier": "^2.3.1",
     "puppeteer": "^17.1.3",
-    "react-scripts": "^4.0.3",
-    "rimraf": "^3.0.2",
+    "rimraf": "6.0.1",
     "tree-kill": "^1.2.0",
     "typescript": "4.0.2",
-    "wait-on": "^5.3.0"
+    "vite": "5.4.9",
+    "vitest": "2.1.3",
+    "wait-on": "8.0.1"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -83,5 +82,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "resolutions": {
+    "rollup": "npm:@rollup/wasm-node"
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

ui/serve.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/gin-contrib/gzip"
 	"github.com/gin-gonic/gin"
+
 	"github.com/gotify/server/v2/model"
 )
 

ui/src/CurrentUser.ts

@@ -3,7 +3,7 @@ import * as config from './config';
 import {Base64} from 'js-base64';
 import {detect} from 'detect-browser';
 import {SnackReporter} from './snack/SnackManager';
-import {observable} from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 import {IClient, IUser} from './types';
 
 const tokenKey = 'gotify-login-key';
@@ -78,19 +78,23 @@ export class CurrentUser {
                 headers: {Authorization: 'Basic ' + Base64.encode(username + ':' + password)},
             })
             .then((resp: AxiosResponse<IClient>) => {
-                this.snack(`A client named '${name}' was created for your session.`);
-                this.setToken(resp.data.token);
-                this.tryAuthenticate()
-                    .then(() => {
-                        this.authenticating = false;
-                        this.loggedIn = true;
-                    })
-                    .catch(() => {
-                        this.authenticating = false;
-                        console.log(
-                            'create client succeeded, but authenticated with given token failed'
-                        );
-                    });
+                runInAction(() => {
+                    this.snack(`A client named '${name}' was created for your session.`);
+                    this.setToken(resp.data.token);
+                    this.tryAuthenticate()
+                        .then(() => {
+                            runInAction(() => {
+                                this.authenticating = false;
+                                this.loggedIn = true;
+                            })
+                        })
+                        .catch(() => {
+                            this.authenticating = false;
+                            console.log(
+                                'create client succeeded, but authenticated with given token failed'
+                            );
+                        });
+                })
             })
             .catch(() => {
                 this.authenticating = false;
@@ -108,7 +112,7 @@ export class CurrentUser {
                 .create()
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 .get(config.get('url') + 'current/user', {headers: {'X-Gotify-Key': this.token()}})
-                .then((passThrough) => {
+                .then((passThrough: { data: IUser; }) => {
                     this.user = passThrough.data;
                     this.loggedIn = true;
                     this.connectionErrorMessage = null;

ui/src/application/AddApplicationDialog.tsx

@@ -48,15 +48,15 @@ export default class AddDialog extends Component<IProps, IState> {
                         className="name"
                         label="Name *"
                         type="text"
-                        value={name}
+                        defaultValue={name}
                         onChange={this.handleChange.bind(this, 'name')}
                         fullWidth
                     />
                     <TextField
                         margin="dense"
                         className="description"
                         label="Short Description"
-                        value={description}
+                        defaultValue={description}
                         onChange={this.handleChange.bind(this, 'description')}
                         fullWidth
                         multiline

ui/src/application/Applications.tsx

@@ -16,7 +16,7 @@ import Button from '@material-ui/core/Button';
 import CopyableSecret from '../common/CopyableSecret';
 import AddApplicationDialog from './AddApplicationDialog';
 import {observer} from 'mobx-react';
-import {observable} from 'mobx';
+import { action, observable } from 'mobx';
 import {inject, Stores} from '../inject';
 import * as config from '../config';
 import UpdateDialog from './UpdateApplicationDialog';

ui/src/application/UpdateApplicationDialog.tsx

@@ -60,15 +60,15 @@ export default class UpdateDialog extends Component<IProps, IState> {
                         className="name"
                         label="Name *"
                         type="text"
-                        value={name}
+                        defaultValue={name}
                         onChange={this.handleChange.bind(this, 'name')}
                         fullWidth
                     />
                     <TextField
                         margin="dense"
                         className="description"
                         label="Short Description"
-                        value={description}
+                        defaultValue={description}
                         onChange={this.handleChange.bind(this, 'description')}
                         fullWidth
                         multiline

ui/src/client/AddClientDialog.tsx

@@ -37,7 +37,7 @@ export default class AddDialog extends Component<IProps, {name: string}> {
                         className="name"
                         label="Name *"
                         type="email"
-                        value={name}
+                        defaultValue={name}
                         onChange={this.handleChange.bind(this, 'name')}
                         fullWidth
                     />

ui/src/client/ClientStore.ts

@@ -1,7 +1,7 @@
 import {BaseStore} from '../common/BaseStore';
 import axios from 'axios';
 import * as config from '../config';
-import {action} from 'mobx';
+import { action } from 'mobx';
 import {SnackReporter} from '../snack/SnackManager';
 import {IClient} from '../types';
 

ui/src/client/Clients.tsx

@@ -15,7 +15,7 @@ import Button from '@material-ui/core/Button';
 import AddClientDialog from './AddClientDialog';
 import UpdateDialog from './UpdateClientDialog';
 import {observer} from 'mobx-react';
-import {observable} from 'mobx';
+import { action, observable } from 'mobx';
 import {inject, Stores} from '../inject';
 import {IClient} from '../types';
 import CopyableSecret from '../common/CopyableSecret';

ui/src/client/UpdateClientDialog.tsx

@@ -54,7 +54,7 @@ export default class UpdateDialog extends Component<IProps, IState> {
                         className="name"
                         label="Name *"
                         type="text"
-                        value={name}
+                        defaultValue={name}
                         onChange={this.handleChange.bind(this, 'name')}
                         fullWidth
                     />

ui/src/common/BaseStore.ts

@@ -1,4 +1,4 @@
-import {action, observable} from 'mobx';
+import { action, observable } from 'mobx';
 
 interface HasID {
     id: number;

ui/src/common/Container.tsx

@@ -1,6 +1,6 @@
 import Paper from '@material-ui/core/Paper';
 import {withStyles, WithStyles} from '@material-ui/core/styles';
-import * as React from 'react';
+import React from 'react';
 
 const styles = () => ({
     paper: {

ui/src/common/SettingsDialog.tsx

@@ -6,7 +6,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import TextField from '@material-ui/core/TextField';
 import Tooltip from '@material-ui/core/Tooltip';
 import React, {Component} from 'react';
-import {observable} from 'mobx';
+import { action, observable } from 'mobx';
 import {observer} from 'mobx-react';
 import {inject, Stores} from '../inject';
 
@@ -23,7 +23,7 @@ class SettingsDialog extends Component<IProps & Stores<'currentUser'>> {
         const {pass} = this;
         const {fClose, currentUser} = this.props;
         const submitAndClose = () => {
-            currentUser.changePassword(pass);
+            currentUser.changePassword(this.pass);
             fClose();
         };
         return (
@@ -40,7 +40,7 @@ class SettingsDialog extends Component<IProps & Stores<'currentUser'>> {
                         margin="dense"
                         type="password"
                         label="New Password *"
-                        value={pass}
+                        defaultValue={pass}
                         onChange={(e) => (this.pass = e.target.value)}
                         fullWidth
                     />