React 18, pnpm and bump dependencies (#174)

* Transition to pnpm

* Transition to pnpm

* Update admin to react-18 and move to vite

* Fixes for react 18 and bump versions

* Fix envs

* Fix workflows

* Fix workflows

* Also update locator to react 18

* Fix all workflows

* Fix all workflows

* Update dependencies

* Fix typescript and bump redux

* fix

* Fix test workflow

* Flush cache

.github/workflows/lint-admin.yml

@@ -15,13 +15,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
       - uses: actions/setup-node@v3
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: 'src/frontend/package-lock.json'
+          cache: 'pnpm'
+          cache-dependency-path: 'src/frontend/pnpm-lock.yaml'
       - name: "Install dependencies"
-        run: npm ci
+        run: pnpm install
         working-directory: "src/frontend"
       - name: "Lint admin js"
         working-directory: "src/frontend/admin"

.github/workflows/lint-overlay.yml

@@ -17,15 +17,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
       - uses: actions/setup-node@v3
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: 'src/frontend/package-lock.json'
+          cache: 'pnpm'
+          cache-dependency-path: 'src/frontend/pnpm-lock.yaml'
       - run: echo "::add-matcher::.github/problem-matchers.json"
       - name: "Install dependencies"
-        run: npm ci
+        run: pnpm install
         working-directory: "src/frontend"
       - name: "Lint overlay"
         working-directory: "src/frontend/overlay"
-        run: npm run lint
+        run: pnpm run lint

.github/workflows/test.yml

@@ -11,19 +11,22 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.6
       - uses: actions/setup-node@v3
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: 'src/frontend/package-lock.json'
+          cache: 'pnpm'
+          cache-dependency-path: 'src/frontend/pnpm-lock.yaml'
 
       - name: Install dependencies
         working-directory: ./src/frontend
-        run: npm ci
+        run: pnpm install
 
       - name: Store Playwright's Version
         run: |
-          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test | grep @playwright | sed 's/.*@//')
           echo "Playwright's Version: $PLAYWRIGHT_VERSION"
           echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
 
@@ -32,12 +35,12 @@ jobs:
         uses: actions/cache@v3
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+          key: playwright-browsers2-${{ env.PLAYWRIGHT_VERSION }}
 
       - name: Setup Playwright
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
         working-directory: ./src/frontend/tests
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install
 
       - uses: actions/setup-java@master
         with:

.run/admin-start-local.run.xml

@@ -7,9 +7,9 @@
     </scripts>
     <node-interpreter value="project" />
     <envs>
-      <env name="REACT_APP_BACKEND_URL" value="http://localhost:8080/api/admin" />
-      <env name="REACT_APP_WEBSOCKET_URL" value="ws://localhost:8080/api/admin" />
-      <env name="REACT_APP_OVERLAY_LOCATION" value="http://localhost:5173" />
+      <env name="VITE_BACKEND_URL" value="http://localhost:8080/api/admin" />
+      <env name="VITE_OVERLAY_LOCATION" value="http://localhost:5173" />
+      <env name="VITE_WEBSOCKET_URL" value="ws://localhost:8080/api/admin" />
     </envs>
     <method v="2" />
   </configuration>

docs/development.md

@@ -4,7 +4,7 @@ Requirements:
 
 * gradle
 * jdk
-* node:16
+* node:20 with pnpm
 * browser
 
 Before cloning on Windows configure correct crlf handling
@@ -54,8 +54,8 @@ We have two front end packages:
 * overlay - webapp that is rendered in OBS (located in `overlay`)
 * admin - admin app for controlling the overlay (located in `admin`)
 
-Install dependencies with `npm ci` in the root path of the project
-(see package.json for more details)
+Install dependencies with `pnpm install` in the src/frontend path of the project
+(see src/frontend/package.json and src/frontend/pnpm-workspaces for more details)
 
 ### Running frontend separate from backend
 

src/backend/build.gradle.kts

@@ -32,10 +32,10 @@ tasks {
         }
         if (project.properties["live.dev.embedFrontend"] == "true") {
             into("admin") {
-                from(project(":frontend").tasks.named("npm_run_buildAdmin"))
+                from(project(":frontend").tasks.named("pnpm_run_buildAdmin"))
             }
             into("overlay") {
-                from(project(":frontend").tasks.named("npm_run_buildOverlay"))
+                from(project(":frontend").tasks.named("pnpm_run_buildOverlay"))
             }
         }
     }

src/frontend/.pnpmrc

@@ -0,0 +1 @@
+save-exact=true

src/frontend/admin/public/index.html → src/frontend/admin/index.html

@@ -4,12 +4,13 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta name="theme-color" content="#000000"/>
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="icon" type="image/png" href="%PUBLIC_URL%/icon-192x192.png" sizes="192x192">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="icon" type="image/png" href="/icon-192x192.png" sizes="192x192">
     <title>ICPC Live 3 Admin</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
+<script type="module" src="/src/index.jsx"></script>
 </body>
 </html>

src/frontend/admin/package.json

@@ -9,22 +9,21 @@
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.3",
     "@mui/styled-engine-sc": "^5.5.2",
+    "@vitejs/plugin-react": "^4.0.3",
     "ansi-to-react": "6.1.6",
     "luxon": "^2.4.0",
     "notistack": "^2.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.4",
     "react-rnd": "^10.3.7",
     "react-router-dom": "^6.2.2",
-    "react-scripts": "^5.0.1",
-    "shared-code": "file:../common"
+    "shared-code": "file:../common",
+    "vite": "^4.4.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite --port 3000",
+    "build": "vite build",
     "lint:js": "eslint ./src/**/*.js",
     "lint": "npm run lint:js"
   },
@@ -45,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prop-types": "^15.7.2"
   }
 }

src/frontend/admin/src/App.js → src/frontend/admin/src/App.jsx

@@ -87,7 +87,7 @@ function App() {
     }, []);
 
     return (
-        <BrowserRouter basename={process.env.PUBLIC_URL ?? ""}>
+        <BrowserRouter basename={import.meta.env.PUBLIC_URL ?? ""}>
             <SnackbarProvider maxSnack={5}>
                 <div className="App">
                     <ThemeProvider theme={getTheme(contestColor)}>

src/frontend/admin/src/components/FullScreenClockManager.js → src/frontend/admin/src/components/FullScreenClockManager.jsx

@@ -17,7 +17,7 @@ function FullScreenClockManager() {
 
     const [isShown, setIsShown] = useState(false);
     const [settings, setSettings] = useState({ globalTimeMode: false, quietMode: false, contestCountdownMode: false });
-    const loadSettings = () => service.loadOne().then((info) => setIsShown(info.shown));
+    const loadSettings = () => { service.loadOne().then((info) => setIsShown(info.shown));};
 
     useEffect(loadSettings, []);
     useEffect(() => {

src/frontend/admin/src/components/PresetsManager.js → src/frontend/admin/src/components/PresetsManager.jsx

@@ -20,7 +20,7 @@ export function PresetsManager({ service, RowComponent, defaultRowData, tableKey
     const onDelete = (id) => service.deletePreset(id);
     const onShow = ({ shown, id }) => (shown ? service.hidePreset(id) : service.showPreset(id));
 
-    useEffect(loadData, []);
+    useEffect(() => {loadData();}, []);
     useEffect(() => {
         service.addReloadDataHandler(loadData);
         return () => service.deleteReloadDataHandler(loadData);

src/frontend/admin/src/components/TeamView.js → src/frontend/admin/src/components/TeamView.jsx

@@ -50,7 +50,7 @@ const useTeamviewService = (service, setStatus) => {
     const loadStatus = useMemo(() => {
         return () => service.loadElements().then(s => setStatus(st => ({ ...st, ...s })));
     }, [service, setStatus]);
-    useEffect(() => loadStatus(), []);
+    useEffect(() => { loadStatus();}, []);
     useEffect(() => {
         service.addReloadDataHandler(loadStatus);
         return () => service.deleteReloadDataHandler(loadStatus);

src/frontend/admin/src/config.js

@@ -1,12 +1,12 @@
 const BACKEND_PROTO = window.location.protocol === "https:" ? "https://" : "http://";
-const BACKEND_PORT = process.env.REACT_APP_BACKEND_PORT ?? window.location.port;
-export const BACKEND_ROOT = process.env.REACT_APP_BACKEND_ROOT ?? (BACKEND_PROTO + window.location.hostname  + ":" + BACKEND_PORT);
-export const BASE_URL_BACKEND = process.env.REACT_APP_BACKEND_URL ?? (BACKEND_ROOT + "/api/admin");
-export const OVERLAY_LOCATION = process.env.REACT_APP_OVERLAY_LOCATION ?? (BACKEND_ROOT + "/overlay");
-export const SCHEMAS_LOCATION = process.env.REACT_APP_SCHEMAS_LOCATION ?? (BACKEND_ROOT + "/schemas");
-export const MEDIAS_LOCATION = process.env.REACT_APP_MEDIAS_LOCATION ?? (BACKEND_ROOT + "/media");
+const BACKEND_PORT = import.meta.env.VITE_BACKEND_PORT ?? window.location.port;
+export const BACKEND_ROOT = import.meta.env.VITE_BACKEND_ROOT ?? (BACKEND_PROTO + window.location.hostname  + ":" + BACKEND_PORT);
+export const BASE_URL_BACKEND = import.meta.env.VITE_BACKEND_URL ?? (BACKEND_ROOT + "/api/admin");
+export const OVERLAY_LOCATION = import.meta.env.VITE_OVERLAY_LOCATION ?? (BACKEND_ROOT + "/overlay");
+export const SCHEMAS_LOCATION = import.meta.env.VITE_SCHEMAS_LOCATION ?? (BACKEND_ROOT + "/schemas");
+export const MEDIAS_LOCATION = import.meta.env.VITE_MEDIAS_LOCATION ?? (BACKEND_ROOT + "/media");
 
 const WS_PROTO = window.location.protocol === "https:" ? "wss://" : "ws://";
-export const BASE_URL_WS = process.env.REACT_APP_WEBSOCKET_URL ?? (WS_PROTO + window.location.hostname + ":" + BACKEND_PORT + "/api/admin");
+export const BASE_URL_WS = import.meta.env.VITE_WEBSOCKET_URL ?? (WS_PROTO + window.location.hostname + ":" + BACKEND_PORT + "/api/admin");
 export const WEBSOCKET_RECONNECT_TIME = 5000;
 export const ADMIN_ACTIONS_WS_URL = BASE_URL_WS + "/adminActions";

src/frontend/admin/src/index.jsx

@@ -0,0 +1,14 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { StrictMode } from "react";
+
+const container = document.getElementById("root");
+
+const root = createRoot(container);
+
+root.render(
+    <StrictMode>
+        <App />
+    </StrictMode>
+);

src/frontend/admin/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+
+
+export default defineConfig({
+    plugins: [
+        react()
+    ],
+    base: process.env.PUBLIC_URL ?? "/",
+    build: {
+        outDir: process.env.BUILD_PATH ?? "dist"
+    },
+});

src/frontend/build.gradle.kts

@@ -1,4 +1,4 @@
-import com.github.gradle.node.npm.task.NpmTask
+import com.github.gradle.node.pnpm.task.PnpmTask
 
 plugins {
     id("live.common-conventions")
@@ -7,51 +7,50 @@ plugins {
 
 node {
     version.set("20.11.0")
-    npmInstallCommand.set("ci")
     download.set(rootProject.findProperty("npm.download") == "true")
-    fastNpmInstall.set(true)
 }
 
 tasks {
-    npmInstall {
+    pnpmInstall {
+        inputs.file("package.json")
         inputs.file("admin/package.json")
         inputs.file("overlay/package.json")
     }
-    val buildOverlay = named<NpmTask>("npm_run_buildOverlay") {
+    val buildOverlay = named<PnpmTask>("pnpm_run_buildOverlay") {
         outputs.cacheIf { true }
         environment.set(mapOf("PUBLIC_URL" to "/overlay", "BUILD_PATH" to "build"))
         inputs.dir("overlay/src")
         inputs.file("overlay/index.html")
         inputs.dir("common")
         inputs.file("package.json")
-        inputs.file("package-lock.json")
+        inputs.file("pnpm-lock.yaml")
         inputs.file("overlay/package.json")
         outputs.dir("overlay/build")
     }
-    val buildAdmin = named<NpmTask>("npm_run_buildAdmin") {
+    val buildAdmin = named<PnpmTask>("pnpm_run_buildAdmin") {
         outputs.cacheIf { true }
         environment.set(mapOf("PUBLIC_URL" to "/admin"))
         inputs.dir("admin/src")
         inputs.dir("admin/public")
         inputs.dir("common")
         inputs.file("package.json")
-        inputs.file("package-lock.json")
+        inputs.file("pnpm-lock.yaml")
         inputs.file("admin/package.json")
         outputs.dir("admin/build")
     }
-    val buildLocatorAdmin = named<NpmTask>("npm_run_buildLocatorAdmin") {
+    val buildLocatorAdmin = named<PnpmTask>("pnpm_run_buildLocatorAdmin") {
         outputs.cacheIf { true }
         environment.set(mapOf("PUBLIC_URL" to "/locator"))
         inputs.dir("locator/src")
         inputs.dir("locator/public")
         inputs.dir("common")
         inputs.file("package.json")
-        inputs.file("package-lock.json")
+        inputs.file("pnpm-lock.yaml")
         inputs.file("locator/package.json")
         outputs.dir("locator/build")
     }
-    //val installBrowsers = named<NpmTask>("npm_run_install-browsers") // probably want to cache it somehow
-    val runTests = named<NpmTask>("npm_run_test") {
+    //val installBrowsers = named<NpmTask>("pnpm_run_install-browsers") // probably want to cache it somehow
+    val runTests = named<PnpmTask>("pnpm_run_test") {
         //dependsOn(installBrowsers)
         dependsOn(":backend:release")
     }

src/frontend/locator/package.json

@@ -12,8 +12,9 @@
     "ansi-to-react": "6.1.6",
     "luxon": "^2.4.0",
     "notistack": "^2.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.4",
     "react-rnd": "^10.3.7",
     "react-router-dom": "^6.2.2",

src/frontend/locator/src/index.js

@@ -1,12 +1,12 @@
-
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+import { StrictMode } from "react";
+
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById("root")
-);
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(<StrictMode>
+    <App />
+</StrictMode>);

src/frontend/overlay/.browserslistrc

@@ -5,5 +5,5 @@ chrome 86
 chrome > 0 and last 2 years
 
 # We also want to support development in the browser which is rougly
-last 2 major versions and not dead and not op_mini all
+last 2 major versions, not dead, not op_mini all, not kaios > 0, not and_qq > 0, not ios > 0