[packaging] switch to pnpm (#6186)

* [packaging] switch to pnpm
* Bump compiler version
* Change pnpm store in docker build
---------

Co-authored-by: feederbox826 <feederbox826@users.noreply.github.com>
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

.github/workflows/build.yml

@@ -12,7 +12,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  COMPILER_IMAGE: stashapp/compiler:11
+  COMPILER_IMAGE: stashapp/compiler:12
 
 jobs:
   build:
@@ -37,7 +37,7 @@ jobs:
         cache-name: cache-node_modules
       with:
         path: ui/v2.5/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('ui/v2.5/yarn.lock') }}
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('ui/v2.5/pnpm-lock.yaml') }}
 
     - name: Cache UI build
       uses: actions/cache@v3
@@ -46,7 +46,7 @@ jobs:
         cache-name: cache-ui
       with:
         path: ui/v2.5/build
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('ui/v2.5/yarn.lock', 'ui/v2.5/public/**', 'ui/v2.5/src/**', 'graphql/**/*.graphql') }}
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('ui/v2.5/pnpm-lock.yaml', 'ui/v2.5/public/**', 'ui/v2.5/src/**', 'graphql/**/*.graphql') }}
 
     - name: Cache go build
       uses: actions/cache@v3
@@ -65,7 +65,7 @@ jobs:
         docker run -d --name build --mount type=bind,source="$(pwd)",target=/stash,consistency=delegated --mount type=bind,source="$(pwd)/.go-cache",target=/root/.cache/go-build,consistency=delegated --env OFFICIAL_BUILD=${{ env.official-build }} -w /stash $COMPILER_IMAGE tail -f /dev/null
 
     - name: Pre-install
-      run: docker exec -t build /bin/bash -c "make pre-ui"
+      run: docker exec -t build /bin/bash -c "make CI=1 pre-ui"
 
     - name: Generate
       run: docker exec -t build /bin/bash -c "make generate"

.github/workflows/golangci-lint.yml

@@ -9,7 +9,7 @@ on:
   pull_request:
 
 env:
-  COMPILER_IMAGE: stashapp/compiler:11
+  COMPILER_IMAGE: stashapp/compiler:12
 
 jobs:
   golangci:

Makefile

@@ -275,7 +275,7 @@ generate: generate-backend generate-ui
 
 .PHONY: generate-ui
 generate-ui:
-	cd ui/v2.5 && yarn run gqlgen
+	cd ui/v2.5 && npm run gqlgen
 
 .PHONY: generate-backend
 generate-backend: touch-ui
@@ -338,9 +338,19 @@ server-clean:
 
 # installs UI dependencies. Run when first cloning repository, or if UI
 # dependencies have changed
+# If CI is set, configures pnpm to use a local store to avoid
+# putting .pnpm-store in /stash
+# NOTE: to run in the docker build container, using the existing
+# node_modules folder, rename the .modules.yaml to .modules.yaml.bak
+# and a new one will be generated. This will need to be reversed after
+# building.
 .PHONY: pre-ui
 pre-ui:
-	cd ui/v2.5 && yarn install --frozen-lockfile
+ifdef CI
+	cd ui/v2.5 && pnpm config set store-dir ~/.pnpm-store && pnpm install --frozen-lockfile
+else
+	cd ui/v2.5 && pnpm install --frozen-lockfile
+endif
 
 .PHONY: ui-env
 ui-env: build-info
@@ -359,7 +369,7 @@ ui: ui-only generate-login-locale
 
 .PHONY: ui-only
 ui-only: ui-env
-	cd ui/v2.5 && yarn build
+	cd ui/v2.5 && npm run build
 
 .PHONY: zip-ui
 zip-ui:
@@ -368,20 +378,24 @@ zip-ui:
 
 .PHONY: ui-start
 ui-start: ui-env
-	cd ui/v2.5 && yarn start --host
+	cd ui/v2.5 && npm run start -- --host
 
 .PHONY: fmt-ui
 fmt-ui:
-	cd ui/v2.5 && yarn format
+	cd ui/v2.5 && npm run format
 
 # runs all of the frontend PR-acceptance steps
 .PHONY: validate-ui
 validate-ui:
-	cd ui/v2.5 && yarn run validate
+	cd ui/v2.5 && npm run validate
 
 # these targets run the same steps as fmt-ui and validate-ui, but only on files that have changed
 fmt-ui-quick:
-	cd ui/v2.5 && yarn run prettier --write $$(git diff --name-only --relative --diff-filter d . ../../graphql)
+	cd ui/v2.5 && \
+	files=$$(git diff --name-only --relative --diff-filter d . ../../graphql); \
+	if [ -n "$$files" ]; then \
+	  npm run prettier -- --write $$files; \
+	fi
 
 # does not run tsc checks, as they are slow
 validate-ui-quick:
@@ -389,9 +403,9 @@ validate-ui-quick:
 	tsfiles=$$(git diff --name-only --relative --diff-filter d src | grep -e "\.tsx\?\$$"); \
 	scssfiles=$$(git diff --name-only --relative --diff-filter d src | grep "\.scss"); \
 	prettyfiles=$$(git diff --name-only --relative --diff-filter d . ../../graphql); \
-	if [ -n "$$tsfiles" ]; then yarn run eslint $$tsfiles; fi && \
-	if [ -n "$$scssfiles" ]; then yarn run stylelint $$scssfiles; fi && \
-	if [ -n "$$prettyfiles" ]; then yarn run prettier --check $$prettyfiles; fi
+	if [ -n "$$tsfiles" ]; then npm run eslint -- $$tsfiles; fi && \
+	if [ -n "$$scssfiles" ]; then npm run stylelint -- $$scssfiles; fi && \
+	if [ -n "$$prettyfiles" ]; then npm run prettier -- --check $$prettyfiles; fi
 
 # runs all of the backend PR-acceptance steps
 .PHONY: validate-backend

docker/build/x86_64/Dockerfile

@@ -1,14 +1,16 @@
 # This dockerfile should be built with `make docker-build` from the stash root.
 
 # Build Frontend
-FROM node:20-alpine AS frontend
+FROM node:24-alpine AS frontend
 RUN apk add --no-cache make git
 ## cache node_modules separately
-COPY ./ui/v2.5/package.json ./ui/v2.5/yarn.lock /stash/ui/v2.5/
+COPY ./ui/v2.5/package.json ./ui/v2.5/pnpm-lock.yaml /stash/ui/v2.5/
 WORKDIR /stash
 COPY Makefile /stash/
 COPY ./graphql /stash/graphql/
 COPY ./ui /stash/ui/
+# pnpm install with npm
+RUN npm install -g pnpm
 RUN make pre-ui
 RUN make generate-ui
 ARG GITHASH

docker/build/x86_64/Dockerfile-CUDA

@@ -5,11 +5,13 @@ ARG CUDA_VERSION=12.8.0
 FROM node:20-alpine AS frontend
 RUN apk add --no-cache make git
 ## cache node_modules separately
-COPY ./ui/v2.5/package.json ./ui/v2.5/yarn.lock /stash/ui/v2.5/
+COPY ./ui/v2.5/package.json ./ui/v2.5/pnpm-lock.yaml /stash/ui/v2.5/
 WORKDIR /stash
 COPY Makefile /stash/
 COPY ./graphql /stash/graphql/
 COPY ./ui /stash/ui/
+# pnpm install with npm
+RUN npm install -g pnpm
 RUN make pre-ui
 RUN make generate-ui
 ARG GITHASH

docker/compiler/Dockerfile

@@ -8,15 +8,11 @@ RUN mkdir -p /etc/apt/keyrings
 
 ADD https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key nodesource.gpg.key
 RUN cat nodesource.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && rm nodesource.gpg.key
-RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
-
-ADD https://dl.yarnpkg.com/debian/pubkey.gpg yarn.gpg
-RUN cat yarn.gpg | gpg --dearmor -o /etc/apt/keyrings/yarn.gpg && rm yarn.gpg
-RUN echo "deb [signed-by=/etc/apt/keyrings/yarn.gpg] https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_24.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
 
 RUN apt-get update && \
     apt-get install -y --no-install-recommends \
-        git make tar bash nodejs yarn zip \
+        git make tar bash nodejs zip \
         clang llvm-dev cmake patch libxml2-dev uuid-dev libssl-dev xz-utils \
         bzip2 gzip sed cpio libbz2-dev zlib1g-dev \
         gcc-mingw-w64 \
@@ -24,6 +20,9 @@ RUN apt-get update && \
         gcc-aarch64-linux-gnu libc-dev-arm64-cross && \
     rm -rf /var/lib/apt/lists/*;
 
+# pnpm install with npm
+RUN npm install -g pnpm
+
 # FreeBSD cross-compilation setup
 # https://github.com/smartmontools/docker-build/blob/6b8c92560d17d325310ba02d9f5a4b250cb0764a/Dockerfile#L66
 ENV FREEBSD_VERSION       13.4

docker/compiler/Makefile

@@ -1,6 +1,6 @@
 user=stashapp
 repo=compiler
-version=11
+version=12
 
 latest:
 	docker build -t ${user}/${repo}:latest .

docs/DEVELOPMENT.md

@@ -5,7 +5,8 @@
 * [Go](https://golang.org/dl/)
 * [GolangCI](https://golangci-lint.run/) - A meta-linter which runs several linters in parallel
   * To install, follow the [local installation instructions](https://golangci-lint.run/welcome/install/#local-installation)
-* [Yarn](https://yarnpkg.com/en/docs/install) - Yarn package manager
+* [nodejs](https://nodejs.org/en/download) - nodejs runtime
+  * corepack/[pnpm](https://pnpm.io/installation) - nodejs package manager (included with nodejs)
 
 ## Environment
 
@@ -22,21 +23,21 @@ NOTE: The `make` command in Windows will be `mingw32-make` with MinGW. For examp
 ### macOS
 
 1. If you don't have it already, install the [Homebrew package manager](https://brew.sh).
-2. Install dependencies: `brew install go git yarn gcc make node ffmpeg`
+2. Install dependencies: `brew install go git gcc make node ffmpeg`
 
 ### Linux
 
 #### Arch Linux
 
-1. Install dependencies: `sudo pacman -S go git yarn gcc make nodejs ffmpeg --needed`
+1. Install dependencies: `sudo pacman -S go git gcc make nodejs ffmpeg --needed`
 
 #### Ubuntu
 
-1. Install dependencies: `sudo apt-get install golang git yarnpkg gcc nodejs ffmpeg -y`
+1. Install dependencies: `sudo apt-get install golang git gcc nodejs ffmpeg -y`
 
 ### OpenBSD
 
-1. Install dependencies `doas pkg_add gmake go git yarn node cmake ffmpeg`
+1. Install dependencies `doas pkg_add gmake go git node cmake ffmpeg`
 2. Follow the instructions below to build a release, but replace the final step `make build-release` with `gmake flags-release stash`, to [avoid the PIE buildmode](https://github.com/golang/go/issues/59866).
 
 NOTE: The `make` command in OpenBSD will be `gmake`. For example, `make pre-ui` will be `gmake pre-ui`.

pkg/plugin/examples/react-component/README.md

@@ -1,7 +1,7 @@
 This is a reference React component plugin. It replaces the `details` part of scene cards with a list of performers and tags.
 
 To build:
-- run `yarn install --frozen-lockfile`
-- run `yarn run build`
+- run `pnpm install --frozen-lockfile`
+- run `npm run build`
 
 This will copy the plugin files into the `dist` directory. These files can be copied to a `plugins` directory. 

pkg/plugin/examples/react-component/package.json

@@ -5,11 +5,11 @@
   "author": "WithoutPants",
   "license": "AGPL-3.0",
   "scripts": {
-    "compile:ts": "yarn tsc",
-    "compile:sass": "yarn sass src/testReact.scss dist/testReact.css",
+    "compile:ts": "npm run tsc",
+    "compile:sass": "npm run sass src/testReact.scss dist/testReact.css",
     "copy:yml": "cpx \"src/testReact.yml\" \"dist\"",
-    "compile": "yarn run compile:ts && yarn run compile:sass",
-    "build": "yarn run compile && yarn run copy:yml"
+    "compile": "npm run compile:ts && npm run compile:sass",
+    "build": "npm run compile && npm run copy:yml"
   },
   "devDependencies": {
     "@types/react": "^18.2.31",

ui/v2.5/.prettierignore

@@ -2,8 +2,8 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
+pnpm-lock.yaml
+pnpm-workspace.yaml
 
 # locales
 src/locales/**/*.json

ui/v2.5/README.md

@@ -4,7 +4,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm run start`
 
 Runs the app in the development mode.<br />
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -12,12 +12,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br />
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `npm run test`
 
 Launches the test runner in the interactive watch mode.<br />
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `yarn build`
+### `npm run build`
 
 Builds the app for production to the `build` folder.<br />
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -27,13 +27,13 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn format`
+### `npm run format`
 
 Formats the whitespace of all typescript and scss code with prettier, to ease editing and ensure a common code style.
 
 Should ideally be run before all frontend PRs.
 
-### `yarn eject`
+### `npm run eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 
@@ -69,6 +69,6 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/ad
 
 This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
 
-### `yarn build` fails to minify
+### `npm run build` fails to minify
 
 This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

ui/v2.5/package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "build-ci": "yarn run validate && yarn run build",
-    "validate": "yarn run lint && yarn run check && yarn run format-check",
-    "lint": "yarn run lint:js && yarn run lint:css",
+    "build-ci": "npm run validate && npm run build",
+    "validate": "npm run lint && npm run check && npm run format-check",
+    "lint": "npm run lint:js && npm run lint:css",
     "lint:css": "stylelint --cache \"src/**/*.scss\"",
     "lint:js": "eslint --cache src/",
     "check": "tsc --noEmit",
@@ -35,6 +35,7 @@
     "@react-hook/resize-observer": "^1.2.6",
     "@silvermine/videojs-airplay": "^1.2.0",
     "@silvermine/videojs-chromecast": "^1.4.1",
+    "@types/react-router-dom": "^5.3.3",
     "apollo-upload-client": "^18.0.1",
     "base64-blob": "^1.4.1",
     "bootstrap": "^4.6.2",

ui/v2.5/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - core-js
+  - esbuild

ui/v2.5/src/core/StashService.ts

@@ -1614,7 +1614,7 @@ export const mutateAddGalleryImages = (input: GQL.GalleryAddInput) =>
   });
 
 function evictCover(cache: ApolloCache<GQL.Gallery>, gallery_id: string) {
-  const fields: Pick<Modifiers<GQL.Gallery>, "paths" | "cover"> = {};
+  const fields: Partial<Pick<Modifiers<GQL.Gallery>, "paths" | "cover">> = {};
   fields.paths = (paths) => {
     if (!("cover" in paths)) {
       return paths;