feat: use pnpm (#1789)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1789

.drone.yml

@@ -29,26 +29,91 @@ steps:
 #      AWS_SECRET_ACCESS_KEY:
 #        from_secret: cache_aws_secret_access_key
 #    settings:
+#      debug: true
 #      restore: true
 #      bucket: kolaente.dev-drone-dependency-cache
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: dependencies
-    image: node:18
+    image: node:18-alpine
     pull: true
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
+      CYPRESS_CACHE_FOLDER: .cache/cypress
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
 #    depends_on:
 #      - restore-cache
 
+  - name: lint
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run lint
+    depends_on:
+      - dependencies
+
+  - name: build-prod
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run build
+    depends_on:
+      - dependencies
+
+  - name: test-unit
+    image: node:18-alpine
+    pull: true
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run test:unit
+    depends_on:
+      - dependencies
+
+  - name: typecheck
+    failure: ignore
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run typecheck
+    depends_on:
+      - dependencies
+
+  - name: test-frontend
+    image: cypress/browsers:node16.14.0-chrome99-ff97
+    pull: true
+    environment:
+      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
+      PNPM_CACHE_FOLDER: .cache/pnpm
+      CYPRESS_CACHE_FOLDER: .cache/cypress
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
+      CYPRESS_RECORD_KEY:
+        from_secret: cypress_project_key
+    commands:
+      - sed -i 's/localhost/api/g' dist/index.html
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm cypress install
+      - pnpm run serve:dist & npx wait-on http://localhost:4173
+      - pnpm run test:frontend --browser chrome --record
+    depends_on:
+      - build-prod
+
 #  - name: rebuild-cache
 #    image: meltwater/drone-cache:dev
 #    pull: true
@@ -63,70 +128,14 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 #    depends_on:
 #      - dependencies
 
-  - name: lint
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-    commands:
-      - yarn run lint
-    depends_on:
-      - dependencies
-
-  - name: build-prod
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-    commands:
-      - yarn build
-    depends_on:
-      - dependencies
-
-  - name: test-unit
-    image: node:18
-    pull: true
-    commands:
-      - yarn test:unit
-    depends_on:
-      - dependencies
-
-  - name: typecheck
-    failure: ignore
-    image: node:18
-    pull: true
-    commands:
-      - yarn typecheck
-    depends_on:
-      - dependencies
-
-  - name: test-frontend
-    image: cypress/browsers:node16.14.0-chrome99-ff97
-    pull: true
-    environment:
-      CYPRESS_API_URL: http://api:3456/api/v1
-      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
-      CYPRESS_RECORD_KEY:
-        from_secret: cypress_project_key
-    commands:
-      - sed -i 's/localhost/api/g' dist/index.html
-      - yarn serve:dist & npx wait-on http://localhost:4173
-      - yarn test:frontend --browser chrome --record
-    depends_on:
-      - build-prod
-
   - name: deploy-preview
-    image: node:18
+    image: node:18-alpine
     pull: true
     environment:
       NETLIFY_AUTH_TOKEN:
@@ -139,6 +148,7 @@ steps:
       - cp -r dist dist-preview
       # Override the default api url used for preview
       - sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
+      - apk add --no-cache perl-utils
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
       - node ./scripts/deploy-preview-netlify.js
     depends_on:
@@ -181,21 +191,22 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: build
-    image: node:18
+    image: node:18-alpine
     pull: true
     group: build-static
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/.pnp
-      - yarn run lint
+      - pnpm install --fetch-timeout 100000
+      - pnpm run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - yarn run build
+      - pnpm run build
       - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
@@ -256,21 +267,22 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: build
-    image: node:18
+    image: node:18-alpine
     pull: true
     group: build-static
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
-      - yarn run lint
+      - pnpm install --fetch-timeout 100000
+      - pnpm run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - yarn run build
+      - pnpm run build
       - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
@@ -647,6 +659,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
+hmac: 9e9585222c466c67b426df40c76670f1a539c363a52075ff34e7f4518e67da2d
 
 ...

.gitignore

@@ -8,10 +8,14 @@ node_modules
 .env.*.local
 
 # Log files
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 stats.html
+pnpm-debug.log*
+lerna-debug.log*
 
 # Editor directories and files
 .idea

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+fetch-timeout=100000

.vscode.example/settings.json

@@ -1,5 +1,5 @@
 {
-  "eslint.packageManager": "yarn",
+  "eslint.packageManager": "pnpm",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll": true

Dockerfile

@@ -1,28 +1,41 @@
 # Stage 1: Build application
-FROM node:18 AS compile-image
+FROM node:18-alpine AS compile-image
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
 ARG RELEASE_VERSION=main
 
-ENV YARN_CACHE_FOLDER .cache/yarn/
-COPY .  ./
-
 RUN \
   if [ $USE_RELEASE = true ]; then \
-    rm -rf dist/ && \
     wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
     unzip frontend-release.zip -d dist/ && \
     exit 0; \
-  fi && \
+  fi
+
+ENV PNPM_CACHE_FOLDER .cache/pnpm/
+
+# pnpm fetch does require only lockfile
+COPY pnpm-lock.yaml ./
+
+RUN \
+  # https://pnpm.io/installation#using-corepack
+  corepack enable && \
+  corepack prepare pnpm@7.9.3 --activate && \
   # Build the frontend
-  yarn install --frozen-lockfile --network-timeout 100000 && \
+	pnpm fetch
+
+ADD .  ./
+
+RUN apk add --no-cache git
+
+RUN \
+	pnpm install --offline && \
 	echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
-  yarn run build
+	pnpm run build
 
 # Stage 2: copy 
-FROM nginx
+FROM nginx:alpine
 
 COPY nginx.conf /etc/nginx/nginx.conf
 COPY run.sh /run.sh
@@ -36,4 +49,10 @@ ENV PGID 1000
 
 LABEL maintainer="maintainers@vikunja.io"
 
+RUN apk add --no-cache \
+  # for sh file
+	bash \
+	# installs usermod and groupmod
+	shadow
+
 CMD "/run.sh"

README.md

@@ -22,25 +22,25 @@ There is a [docker image available](https://hub.docker.com/r/vikunja/api) with s
 ## Project setup
 
 ```shell
-yarn install
+pnpm install
 ```
 
 ### Compiles and hot-reloads for development
 
 ```shell
-yarn run serve
+pnpm run serve
 ```
 
 ### Compiles and minifies for production
 
 ```shell
-yarn run build
+pnpm run build
 ```
 
 ### Lints and fixes files
 
 ```shell
-yarn run lint
+pnpm run lint
 ```
 
 ## Sponsors

cypress/README.md

@@ -36,7 +36,7 @@ to get a shell inside the cypress container.
 In that shell you can then execute the tests with
 
 ```shell
-yarn test:frontend
+pnpm run test:frontend
 ```
 
 ### Using The Cypress Dashboard
@@ -44,5 +44,5 @@ yarn test:frontend
 To open the Cypress Dashboard and run tests from there, run
 
 ```shell
-yarn cypress:open
+pnpm run cypress:open
 ```

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  command = "yarn build"
+  command = "pnpm run build"
   publish = "dist-preview"
 
 [[redirects]]

package.json

@@ -35,6 +35,7 @@
     "blurhash": "2.0.0",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
+    "codemirror": "5.65.7",
     "date-fns": "2.29.3",
     "dompurify": "2.4.0",
     "easymde": "2.18.0",
@@ -49,6 +50,7 @@
     "pinia": "2.0.22",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
+    "sortablejs": "1.15.0",
     "ufo": "0.8.5",
     "v-tooltip": "4.0.0-beta.17",
     "vue": "3.2.39",
@@ -105,5 +107,5 @@
     }
   },
   "license": "AGPL-3.0-or-later",
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "pnpm@7.9.3"
 }