Move to pnpm (#2345)

* Switch from yarn to pnpm.

* Moving from yarn to pnpm.

* Try 2

* Try 3

* Try 4

* Try 5

* Try 6

* Adding qs.

* Try corepack.

* Remove comment.

* Adding prebuild:dev.

* Some fixes.

* Fixing up husky.

* Fixing up version and others.

.babelrc

@@ -15,6 +15,6 @@
   "plugins": [
     "@babel/plugin-transform-runtime",
     ["babel-plugin-inferno", { "imports": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+    ["@babel/plugin-transform-class-properties", { "loose": true }]
   ]
 }

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
+pnpm lint-staged
-. "$(dirname "$0")/_/husky.sh"
-
-yarn lint-staged

.woodpecker.yml

@@ -1,3 +1,6 @@
+variables:
+  - &install_pnpm "corepack enable pnpm"
+
 steps:
   fetch_git_submodules:
     image: node:20-alpine
@@ -5,22 +8,25 @@ steps:
       - apk add git
       - git submodule init
       - git submodule update --recursive --remote
-      # - git fetch --tags
 
-  yarn:
+  install:
     image: node:20-alpine
     commands:
-      - yarn
+      - *install_pnpm
+      - pnpm i
 
-  yarn_lint:
+  lint:
     image: node:20-alpine
     commands:
-      - yarn lint
+      - *install_pnpm
+      - pnpm lint
 
-  yarn_build_dev:
+  build_dev:
     image: node:20-alpine
     commands:
-      - yarn build:dev
+      - *install_pnpm
+      - pnpm prebuild:dev
+      - pnpm build:dev
 
   publish_release_docker:
     image: woodpeckerci/plugin-docker-buildx

Dockerfile

@@ -4,10 +4,10 @@ FROM node:21-alpine as builder
 # Done for two reasons:
 # - libvips binaries are not available for ARM32
 # - It can break depending on the CPU (https://github.com/LemmyNet/lemmy-ui/issues/1566)
-RUN apk update && apk upgrade && apk add --no-cache curl yarn python3 build-base gcc wget git vips-dev pkgconfig
+RUN apk update && apk upgrade && apk add --no-cache curl python3 build-base gcc wget git vips-dev pkgconfig
 
-# Install node-gyp
+# Install node-gyp and pnpm
-RUN npm install -g node-gyp
+RUN npm install -g pnpm node-gyp
 
 WORKDIR /usr/src/app
 
@@ -15,10 +15,8 @@ ENV npm_config_target_platform=linux
 ENV npm_config_target_libc=musl
 
 # Cache deps
-COPY package.json yarn.lock ./
+COPY package.json pnpm-lock.yaml ./
-
+RUN pnpm i
-RUN yarn --production --prefer-offline --pure-lockfile --network-timeout 100000
-
 # Build
 COPY generate_translations.js \
   tsconfig.json \
@@ -33,15 +31,14 @@ COPY .git .git
 # Set UI version 
 RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"
 
-RUN yarn --production --prefer-offline --network-timeout 100000
+RUN pnpm i
-RUN yarn build:prod
+RUN pnpm prebuild:prod
+RUN pnpm build:prod
 
 RUN rm -rf ./node_modules/import-sort-parser-typescript
 RUN rm -rf ./node_modules/typescript
 RUN rm -rf ./node_modules/npm
 
-RUN du -sh ./node_modules/* | sort -nr | grep '\dM.*'
-
 FROM node:21-alpine as runner
 ENV NODE_ENV=production
 

deploy.sh

@@ -9,7 +9,7 @@ new_tag="$1"
 # sudo docker push dessalines/lemmy-ui:$new_tag
 
 # Upgrade version
-yarn version --new-version $new_tag
+pnpm version $new_tag
 git push
 
 git tag $new_tag

dev.dockerfile

@@ -1,5 +1,6 @@
 FROM node:20-alpine as builder
-RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
+RUN apk update && apk add curl python3 build-base gcc wget git --no-cache
+RUN npm install -g pnpm
 
 WORKDIR /usr/src/app
 
@@ -8,8 +9,8 @@ ENV npm_config_target_platform=linux
 ENV npm_config_target_libc=musl
 
 # Cache deps
-COPY package.json yarn.lock ./
+COPY package.json pnpm-lock.yaml ./
-RUN yarn --prefer-offline --pure-lockfile
+RUN pnpm i --prefer-offline
 
 # Build
 COPY generate_translations.js \
@@ -25,8 +26,8 @@ COPY .git .git
 # Set UI version 
 RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"
 
-RUN yarn --prefer-offline
+RUN pnpm i --prefer-offline
-RUN yarn build:dev
+RUN pnpm build:dev
 
 FROM node:20-alpine as runner
 COPY --from=builder /usr/src/app/dist /app/dist

package.json

@@ -8,17 +8,16 @@
     "analyze": "webpack --mode=none",
     "build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
     "build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production",
-    "clean": "yarn run rimraf dist",
+    "clean": "pnpm rimraf dist",
-    "dev": "yarn build:dev --watch",
+    "dev": "pnpm build:dev --watch",
-    "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
+    "lint": "pnpm translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
-    "postinstall": "husky install",
+    "prebuild:dev": "pnpm clean && node generate_translations.js",
-    "prebuild:dev": "yarn clean && node generate_translations.js",
+    "prebuild:prod": "pnpm clean && node generate_translations.js",
-    "prebuild:prod": "yarn clean && node generate_translations.js",
+    "prepare": "husky",
-    "prepare": "husky install",
     "themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
     "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
     "translations:generate": "node generate_translations.js",
-    "translations:init": "git submodule init && yarn translations:update",
+    "translations:init": "git submodule init && pnpm translations:update",
     "translations:update": "git submodule update --remote --recursive"
   },
   "repository": "https://github.com/LemmyNet/lemmy-ui",
@@ -26,33 +25,32 @@
     "node": ">=8.9.0"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.23.9",
-    "@babel/plugin-proposal-decorators": "^7.23.7",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/plugin-transform-typescript": "^7.23.6",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.3",
-    "@babel/runtime": "^7.23.8",
+    "@babel/runtime": "^7.23.9",
-    "@emoji-mart/data": "^1.1.0",
+    "@emoji-mart/data": "^1.1.2",
-    "@shortcm/qr-image": "^9.0.2",
+    "@shortcm/qr-image": "^9.0.4",
     "autosize": "^6.0.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-inferno": "^6.7.1",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "^5.3.2",
     "check-password-strength": "^2.0.7",
     "classnames": "^2.5.1",
     "clean-webpack-plugin": "^4.0.0",
     "cookie": "^0.6.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.9.1",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.3.1",
-    "emoji-mart": "^5.4.0",
+    "emoji-mart": "^5.5.2",
     "emoji-short-name": "^2.0.0",
     "express": "~4.18.2",
     "history": "^5.3.0",
     "html-to-text": "^9.0.5",
-    "husky": "^8.0.3",
+    "i18next": "^23.8.0",
-    "i18next": "^23.7.16",
     "inferno": "^8.2.3",
     "inferno-create-element": "^8.2.3",
     "inferno-helmet": "^5.2.1",
@@ -86,44 +84,46 @@
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
     "tributejs": "^5.1.3",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.0",
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
-    "@types/autosize": "^4.0.0",
+    "@types/autosize": "^4.0.3",
-    "@types/bootstrap": "^5.2.6",
+    "@types/bootstrap": "^5.2.10",
     "@types/cookie": "^0.6.0",
-    "@types/express": "^4.17.17",
+    "@types/express": "^4.17.21",
-    "@types/html-to-text": "^9.0.0",
+    "@types/html-to-text": "^9.0.4",
-    "@types/lodash.isequal": "^4.5.6",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/markdown-it": "^13.0.7",
-    "@types/markdown-it-container": "^2.0.6",
+    "@types/markdown-it-container": "^2.0.9",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.11.10",
-    "@types/path-browserify": "^1.0.0",
+    "@types/path-browserify": "^1.0.2",
-    "@types/sanitize-html": "^2.9.0",
+    "@types/sanitize-html": "^2.9.5",
-    "@types/serialize-javascript": "^5.0.1",
+    "@types/serialize-javascript": "^5.0.4",
-    "@types/toastify-js": "^1.12.0",
+    "@types/toastify-js": "^1.12.3",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.1",
     "eslint": "^8.56.0",
     "eslint-plugin-inferno": "^7.33.3",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.0.6",
     "import-sort-style-module": "^6.0.0",
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.4",
     "prettier-plugin-import-sort": "^0.0.7",
-    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.4.9",
-    "rimraf": "^5.0.0",
+    "qs": "^6.11.2",
+    "rimraf": "^5.0.5",
     "sortpack": "^2.4.0",
     "style-loader": "^3.3.4",
     "terser": "^5.27.0",
     "typescript": "^5.3.3",
     "typescript-language-server": "^4.3.1",
-    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-dev-server": "4.15.1"
   },
   "lint-staged": {
@@ -138,7 +138,7 @@
       "sortpack"
     ]
   },
-  "packageManager": "yarn@1.22.19",
+  "packageManager": "pnpm@8.14.3",
   "engineStrict": true,
   "importSort": {
     ".js, .jsx, .ts, .tsx": {