Migrate to pnpm (#893)

.github/CODEOWNERS

@@ -6,7 +6,8 @@
 
 # Make Loucas and Uriel the owners of all GUI stuff
 /gui/ @ImUrX
-/package-lock.json @ImUrX
+/pnpm-lock.yaml @ImUrX
+/pnpm-workspace.yaml @ImUrX
 
 # Uriel and Erimel responsible for i18n
 /gui/public/i18n/ @ImUrX @Louka3000

.github/workflows/build-gui.yml

@@ -25,17 +25,18 @@ jobs:
         with:
           submodules: recursive
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+      - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Build
         run: |
-          npm ci
+          pnpm i
           cd gui
-          npm run lint
+          pnpm run lint
 
   build:
     strategy:
@@ -71,16 +72,17 @@ jobs:
         with:
           shared-key: "${{ matrix.os }}"
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+      - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Build
         run: |
-          npm ci
+          pnpm i
-          npm run skipbundler
+          pnpm run skipbundler
 
       - if: matrix.os == 'windows-latest'
         name: Upload a Build Artifact (Windows)

.github/workflows/gradle.yaml

@@ -105,16 +105,17 @@ jobs:
       - name: Setup Gradle
         uses: gradle/gradle-build-action@v2
 
+      - uses: pnpm/action-setup@v2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Build GUI
         run: |
-          npm ci
+          pnpm i
-          cd gui && npm run build
+          cd gui && pnpm run build
 
       - name: Build with Gradle
         run: ./gradlew :server:android:assembleDebug
@@ -172,16 +173,17 @@ jobs:
         with:
           shared-key: "ubuntu-22.04"
 
+      - uses: pnpm/action-setup@v2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Build
         run: |
-          npm ci
+          pnpm i
-          npm run tauri build
+          pnpm run tauri build
 
       - uses: actions/upload-artifact@v3.1.0
         with:
@@ -244,16 +246,17 @@ jobs:
         with:
           shared-key: "macos-latest"
 
+      - uses: pnpm/action-setup@v2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Build
         run: |
-          npm ci
+          pnpm i
-          npm run tauri build -- "--target universal-apple-darwin"
+          pnpm run tauri build -- "--target universal-apple-darwin"
 
       - name: Modify Application
         run: |
@@ -309,16 +312,17 @@ jobs:
         with:
           shared-key: "windows-latest"
 
+      - uses: pnpm/action-setup@v2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Build
         run: |
-          npm ci
+          pnpm i
-          npm run skipbundler
+          pnpm run skipbundler
 
       - name: Bundle to zips
         shell: bash

.vscode/extensions.json

@@ -11,6 +11,7 @@
 		"bradlc.vscode-tailwindcss",
 		"EditorConfig.EditorConfig",
 		"macabeus.vscode-fluent",
+		"redhat.vscode-yaml"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": []

CONTRIBUTING.md

@@ -6,7 +6,7 @@ This document describes essential knowledge required to contribute to the SlimeV
 
 - [Git](https://git-scm.com/downloads)
 - [Java v17+](https://adoptium.net/temurin/releases/)
-- [Node.js v16+](https://nodejs.org) (We recommend the use of `nvm` instead of installing Node.js directly)
+- [Node.js v16.9+](https://nodejs.org) (We recommend the use of `nvm` instead of installing Node.js directly)
 - [Microsoft Edge WebView2](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section) or `webkit2gtk` for Linux
 - [Rust](https://rustup.rs)
 
@@ -34,9 +34,10 @@ be at `server/build/libs/slimevr.jar` (you can ignore `server.jar`).
 
 ### Tauri (gui)
 
-- Run `npm install` in your IDE's terminal to download and install dependencies.
+- Activate corepack (included with Node.JS) via `corepack enable` (might require administrator permissions)
-- To launch the GUI in dev mode, run `npm run gui`.
+- Run `pnpm i` in your IDE's terminal to download and install dependencies.
-- Finally, to compile for production, run `npm run tauri build`. The result
+- To launch the GUI in dev mode, run `pnpm gui`.
+- Finally, to compile for production, run `pnpm run tauri build`. The result
 will be at `target/release/slimevr.exe`.
 
 ## Code style
@@ -87,8 +88,8 @@ Eclipse will only do a subset of the checks in `spotless`, so you may still want
 
 We use ESLint and Prettier to format GUI code.
 - First, go into the GUI's directory with your terminal by running `cd gui`.
-- To check code formatting, run `npm run lint`.
+- To check code formatting, run `pnpm run lint`.
-- To fix code formatting, run `npm run lint:fix` and `npm run format`
+- To fix code formatting, run `pnpm run lint:fix` and `pnpm run format`
 
 Don't forget to run `cd ..` to return to the root directory.
 

gui/package.json

@@ -50,7 +50,7 @@
     "skipbundler": "tauri build -b none",
     "tauri": "tauri",
     "lint": "tsc --noEmit && eslint --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && prettier --check \"src/**/*.{js,jsx,ts,tsx,css,md,json}\"",
-    "lint:fix": "tsc --noEmit && eslint --fix --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && npm run format",
+    "lint:fix": "tsc --noEmit && eslint --fix --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && pnpm run format",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md,json}\"",
     "preview-vite": "vite preview",
     "javaversion-build": "cd src-tauri/src/ && javac JavaVersion.java && jar cvfe JavaVersion.jar JavaVersion JavaVersion.class"
@@ -81,6 +81,7 @@
     "@types/react-dom": "^18.0.5",
     "@types/react-helmet": "^6.1.6",
     "@types/react-modal": "3.13.1",
+    "@types/semver": "^7.5.4",
     "@types/three": "^0.155.0",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",

gui/src-tauri/tauri.conf.json

@@ -6,8 +6,8 @@
   "build": {
     "distDir": "../dist",
     "devPath": "http://localhost:5173",
-    "beforeDevCommand": "npm run start",
+    "beforeDevCommand": "pnpm run start",
-    "beforeBuildCommand": "npm run build"
+    "beforeBuildCommand": "pnpm run build"
   },
   "plugins": {
     "shell": {

gui/src/components/onboarding/pages/mounting/MountingChoose.tsx

@@ -7,7 +7,7 @@ import { Typography } from '@/components/commons/Typography';
 import { Button } from '@/components/commons/Button';
 import { TryManualFirstModal } from './TryManualFirstModal';
 import { useConfig } from '@/hooks/config';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 export function MountingChoose() {
   const { l10n } = useLocalization();

gui/src/hooks/countdown.ts

@@ -11,7 +11,7 @@ export function useCountdown({
 }) {
   const [isCounting, setIsCounting] = useState(false);
   const [timer, setDisplayTimer] = useState(0);
-  const countdownTimer = useRef<NodeJS.Timeout>();
+  const countdownTimer = useRef<ReturnType<typeof setInterval>>();
   const counter = useRef(0);
 
   const startCountdown = () => {

package.json

@@ -2,17 +2,19 @@
   "name": "slimevr-ui",
   "version": "0.5.1",
   "private": true,
+  "packageManager": "pnpm@8.10.5",
   "workspaces": [
     "solarxr-protocol",
     "gui"
   ],
   "scripts": {
-    "gui": "npm run update-solarxr && cd gui && npm run dev",
+    "gui": "pnpm run update-solarxr && cd gui && pnpm run dev",
-    "tauri": "cd gui && npm run tauri",
+    "tauri": "cd gui && pnpm run tauri",
-    "skipbundler": "cd gui && npm run skipbundler",
+    "skipbundler": "cd gui && pnpm run skipbundler",
-    "build": "npm run tauri build",
+    "build": "pnpm run tauri build",
-    "update-solarxr": "cd solarxr-protocol && npm run build",
+    "update-solarxr": "cd solarxr-protocol && pnpm run build",
-    "prepare": "husky install && npm run update-solarxr"
+    "prepare": "husky install && pnpm run update-solarxr",
+    "preinstall": "npx only-allow pnpm"
   },
   "devDependencies": {
     "husky": "^8.0.3",

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - "solarxr-protocol"
+  - "gui"
+  - "!solarxr-protocol/lib/flatbuffers/**"

server/android/build.gradle.kts

@@ -31,7 +31,7 @@ tasks.register<Copy>("copyGuiAssets") {
 	from(rootProject.layout.projectDirectory.dir("gui/dist"))
 	into(layout.projectDirectory.dir("src/main/resources/web-gui"))
 	if (inputs.sourceFiles.isEmpty) {
-		throw GradleException("You need to run \"npm run build\" on the gui folder first!")
+		throw GradleException("You need to run \"pnpm run build\" on the gui folder first!")
 	}
 }
 tasks.preBuild {