Apply changes from OG vite and update vite and vitest #1379

ral-facilities · Aug 16, 2024 · 384f97b · 384f97b
1 parent 06d1c95
commit 384f97b
Show file tree

Hide file tree

Showing 7 changed files with 910 additions and 436 deletions.
diff --git a/index.html b/index.html
@@ -1,25 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico?v=2" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <meta name="theme-color" content="#000000" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="/favicon.ico?v=2" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <!--
         manifest.json provides metadata used when your web app is installed on a
         user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
       -->
-    <link rel="manifest" href="/manifest.json" />
-    <title>SciGateway</title>
-  </head>
+  <link rel="manifest" href="/manifest.json" />
+  <title>SciGateway</title>
+</head>
+
+<body>
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script>
+    window.React ||
+      document.write('<script src="/react.production.min.js">\x3C/script>');
+  </script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script>
+    window.ReactDOM ||
+      document.write(
+        '<script src="/react-dom.production.min.js">\x3C/script>'
+      );
+  </script>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="scigateway"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
 
-  <body>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-    <script>window.React || document.write('<script src="/react.production.min.js">\x3C/script>')</script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-    <script>window.ReactDOM || document.write('<script src="/react-dom.production.min.js">\x3C/script>')</script>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="scigateway"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
 </html>
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "single-spa": "5.9.4",
     "typeface-roboto": "1.1.13",
     "typescript": "5.3.3",
-    "vite": "^5.1.6"
+    "vite": "^5.3.5"
   },
   "scripts": {
     "dev": "cross-env concurrently \"yarn serve:plugins\" \"node server/auth-server.js\" \"vite --open\"",
@@ -102,22 +102,22 @@
     "@types/redux-mock-store": "1.0.2",
     "@typescript-eslint/eslint-plugin": "7.0.2",
     "@typescript-eslint/parser": "7.0.2",
-    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/coverage-v8": "2.0.5",
     "axios-mock-adapter": "1.22.0",
     "concurrently": "8.2.0",
     "cors": "2.8.5",
     "cross-env": "7.0.3",
     "cypress": "13.6.4",
     "eslint": "8.56.0",
     "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.2.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-testing-library": "6.2.0",
     "jsdom": "^24.0.0",
     "lint-staged": "15.2.0",
     "redux-mock-store": "1.5.4",
     "serve": "14.2.0",
     "start-server-and-test": "2.0.0",
-    "vitest": "^1.3.1",
+    "vitest": "2.0.5",
     "wait-on": "7.2.0"
   },
   "packageManager": "yarn@4.1.0"

diff --git a/src/App.css b/src/App.css
@@ -1,33 +1,34 @@
-.App {
-  text-align: center;
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #212121;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.top-center {
+  top: 70px !important;
 }
 
-.App-link {
-  color: #61dafb;
+/* Need to modify to black as the default white isn't good enough contrast */
+.redux-toastr :is(.toastr.rrt-warning, .toastr.rrt-error, .toastr.rrt-info, .toastr.rrt-success) {
+  color: #000000;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
+.redux-toastr .toastr .rrt-left-container .toastr-icon {
+  fill: #000000;
+}
+
+@keyframes rotate {
   to {
-    transform: rotate(360deg);
+    transform: rotateZ(360deg);
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,10 +2,13 @@ import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 import * as log from 'loglevel';
 import * as React from 'react';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { AnyAction, applyMiddleware, compose, createStore } from 'redux';
 import { createLogger } from 'redux-logger';
 import { thunk, ThunkDispatch } from 'redux-thunk';
+import PageContainer from './pageContainer.component';
+import { Preloader } from './preloader/preloader.component';
 import {
   configureSite,
   loadMaintenanceState,
@@ -16,12 +19,10 @@ import ScigatewayMiddleware, {
 } from './state/middleware/scigateway.middleware';
 import AppReducer from './state/reducers/App.reducer';
 import { StateType } from './state/state.types';
-import './index.css';
 import { ConnectedThemeProvider } from './theming';
+// This order needed for the App.css to apply to toasts correctly
 import ReduxToastr from 'react-redux-toastr';
-import PageContainer from './pageContainer.component';
-import { Preloader } from './preloader/preloader.component';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import './App.css';
 
 const history = createBrowserHistory();
 

diff --git a/src/index.css b/src/index.css
diff --git a/vite.config.ts b/vite.config.ts
@@ -12,7 +12,7 @@ function jsonHMR(): PluginOption {
       if (file.endsWith('.json')) {
         console.log('reloading json file...');
 
-        server.hot.send({
+        server.ws.send({
           type: 'full-reload',
           path: '*',
         });
@@ -21,6 +21,16 @@ function jsonHMR(): PluginOption {
   };
 }
 
+// Obtain default coverage config from vitest when not building for production
+// (to avoid importing vitest during build as its a dev dependency)
+let vitestCoverageConfigDefaultsExclude: string[] = [];
+if (process.env.NODE_ENV !== 'production') {
+  await import('vitest/config').then((vitestConfig) => {
+    vitestCoverageConfigDefaultsExclude =
+      vitestConfig.coverageConfigDefaults.exclude;
+  });
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
@@ -59,9 +69,9 @@ export default defineConfig(({ mode }) => {
           ['lcov', { outputFile: 'lcov.info', silent: true }],
         ],
         exclude: [
+          ...vitestCoverageConfigDefaultsExclude,
           'public/*',
           'server/*',
-          'cypress/*',
           '__mocks__/axios.ts',
           'micro-frontend-tools/serve-plugins.js',
           '.eslintrc.cjs',