Switch from yarn to pnpm

Some dependencies use features that Yarn 1 doesn't support. Yarn 2 / 3
are drastically different enough that they are effectively another
tool, so I might as well choose something that fits my workflow
closer.

Author: shepmaster

.github/workflows/ci.yml

@@ -154,29 +154,40 @@ jobs:
       uses: actions/checkout@v3
       with:
         ref: "${{ github.event.pull_request.head.sha }}"
-    - name: Get yarn cache directory path
-      id: yarn-cache-dir-path
-      run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-    - name: Cache yarn intermediate products
-      uses: actions/cache@v3
-      with:
-        path: "${{ steps.yarn-cache-dir-path.outputs.dir }}"
-        key: "${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}"
-        restore-keys: "${{ runner.os }}-yarn-"
     - name: Configure node
       uses: actions/setup-node@v3
       with:
         node-version: 18.14
+    - name: Get pnpm version from package.json
+      id: pnpm-version
+      run: 'echo "pnpm_version=$(node -p ''require(`./ui/frontend/package.json`).engines.pnpm'')" >> $GITHUB_OUTPUT
+
+        '
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2.4.0
+      with:
+        version: "${{ steps.pnpm-version.outputs.pnpm_version }}"
+    - name: Get pnpm store directory
+      id: pnpm-cache-dir-path
+      run: 'echo "dir=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+        '
+    - name: Cache pnpm intermediate products
+      uses: actions/cache@v3
+      with:
+        path: "${{ steps.pnpm-cache-dir-path.outputs.dir }}"
+        key: "${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}"
+        restore-keys: "${{ runner.os }}-pnpm-\n"
     - name: Install dependencies
-      run: yarn --cwd ui/frontend/
+      run: pnpm --dir ui/frontend/ install
     - name: Run tests
-      run: yarn --cwd ui/frontend/ test
+      run: pnpm --dir ui/frontend/ run test
     - name: Lint
-      run: yarn --cwd ui/frontend/ test:lint
+      run: pnpm --dir ui/frontend/ run test:lint
     - name: Style
-      run: yarn --cwd ui/frontend/ test:style
+      run: pnpm --dir ui/frontend/ run test:style
     - name: Build frontend
-      run: yarn --cwd ui/frontend/ run build:production
+      run: pnpm --dir ui/frontend/ run build:production
     - name: Save frontend artifact
       uses: actions/upload-artifact@v3
       with:

README.md

@@ -86,8 +86,8 @@ perform tests on! Once fixed, you can choose to be credited here.
 ### Build the UI
 ```
 cd ui/frontend
-yarn
-yarn run watch # Will rebuild and watch for changes
+pnpm install
+pnpm watch # Will rebuild and watch for changes
 ```
 
 If you don't need the backend running because you are only making

ci/workflows.yml

@@ -249,42 +249,53 @@ workflows:
         steps:
           - *checkout_pr
 
-          - name: "Get yarn cache directory path"
-            id: yarn-cache-dir-path
-            run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-          - name: "Cache yarn intermediate products"
-            uses: actions/cache@v3
-            with:
-              path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-              key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-              restore-keys: |-
-                ${{ runner.os }}-yarn-
-
           - name: "Configure node"
             uses: actions/setup-node@v3
             with:
               node-version: 18.14
 
+          - name: "Get pnpm version from package.json"
+            id: pnpm-version
+            run: |
+              echo "pnpm_version=$(node -p 'require(`./ui/frontend/package.json`).engines.pnpm')" >> $GITHUB_OUTPUT
+
+          - name: "Install pnpm"
+            uses: pnpm/action-setup@v2.4.0
+            with:
+              version: ${{ steps.pnpm-version.outputs.pnpm_version }}
+
+          - name: "Get pnpm store directory"
+            id: pnpm-cache-dir-path
+            run: |
+              echo "dir=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+          - name: "Cache pnpm intermediate products"
+            uses: actions/cache@v3
+            with:
+              path: ${{ steps.pnpm-cache-dir-path.outputs.dir }}
+              key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+              restore-keys: |
+                ${{ runner.os }}-pnpm-
+
           - name: "Install dependencies"
             run: >-
-              yarn --cwd ui/frontend/
+              pnpm --dir ui/frontend/ install
 
           - name: "Run tests"
             run: >-
-              yarn --cwd ui/frontend/ test
+              pnpm --dir ui/frontend/ run test
 
           - name: "Lint"
             run: >-
-              yarn --cwd ui/frontend/ test:lint
+              pnpm --dir ui/frontend/ run test:lint
 
           - name: "Style"
             run: >-
-              yarn --cwd ui/frontend/ test:style
+              pnpm --dir ui/frontend/ run test:style
 
           - name: "Build frontend"
             run: >-
-              yarn --cwd ui/frontend/ run build:production
+              pnpm --dir ui/frontend/ run build:production
 
           - name: "Save frontend artifact"
             uses: actions/upload-artifact@v3

ui/frontend/.gitignore

@@ -1,4 +1,3 @@
 .eslintcache
 build
 node_modules
-yarn-error.log

ui/frontend/.prettierignore

@@ -1,3 +1,5 @@
+pnpm-lock.yaml
+
 build
 node_modules
 

ui/frontend/package.json

@@ -10,6 +10,7 @@
     "common-tags": "^1.8.0",
     "core-js": "^3.1.3",
     "history": "^5.3.0",
+    "immer": "^9.0.0",
     "isomorphic-fetch": "^3.0.0",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.36.1",
@@ -23,6 +24,7 @@
     "react-prism": "^4.0.0",
     "react-redux": "^8.0.2",
     "react-shadow": "^20.0.0",
+    "redux-thunk": "^2.4.2",
     "route-parser": "^0.0.5",
     "split-grid": "^1.0.9",
     "suspend-react": "^0.1.3",
@@ -83,25 +85,25 @@
     "webpack-cli": "^5.0.1"
   },
   "resolutions": {
-    "//": "https://github.com/isaacs/jackspeak/issues/5",
     "jackspeak": "2.0.3"
   },
   "engines": {
-    "node": "^18.14"
+    "node": "^18.14",
+    "pnpm": "^8.9"
   },
   "scripts": {
     "test": "jest",
     "test:lint": "eslint '**/*.tsx' '**/*.ts'",
     "test:lint:fix": "eslint --fix '**/*.tsx' '**/*.ts'",
-    "test:style": "yarn run test:style:prettier && yarn run test:style:stylelint",
-    "test:style:fix": "yarn run test:style:prettier:fix && yarn run test:style:stylelint:fix",
+    "test:style": "pnpm run test:style:prettier && pnpm run test:style:stylelint",
+    "test:style:fix": "pnpm run test:style:prettier:fix && pnpm run test:style:stylelint:fix",
     "test:style:prettier": "prettier --check .",
     "test:style:prettier:fix": "prettier --write .",
     "test:style:stylelint": "stylelint '**/*.css'",
     "test:style:stylelint:fix": "stylelint --fix '**/*.css'",
     "build": "webpack --progress --color --mode development",
     "build:production": "webpack --progress --color --mode production",
-    "watch": "yarn run build --watch"
+    "watch": "pnpm run build --watch"
   },
   "jest": {
     "transform": {