switch to pnpm

.editorconfig

@@ -18,6 +18,6 @@ indent_size = 2
 [makefile]
 indent_style = tab
 
-[*.yml]
+[*.{yml,yaml}]
 indent_size = 2
 indent_style = space

.github/actions/setup-node-env/action.yml

@@ -10,7 +10,7 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
-        cache: 'yarn'
+        cache: 'pnpm'
 
-    - run: yarn install --immutable
+    - run: pnpm install --frozen-lockfile
       shell: bash

.github/workflows/ar-chromatic.yml

@@ -39,7 +39,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN__APPS_RENDERING }}
           token: ${{ secrets.GITHUB_TOKEN }}
-          untraced: '**/(package*.json|yarn.lock|preview.js)'
+          untraced: '**/(package*.json|pnpm-lock.yaml|preview.js)'
           exitOnceUploaded: true
           onlyChanged: '!(main)' # only turbosnap on non-main branches
           workingDir: apps-rendering

.github/workflows/ar-ci.yml

@@ -26,16 +26,16 @@ jobs:
       - name: Set up Node environment
         uses: ./.github/actions/setup-node-env
 
-      # Execute some tasks from the `apps-rendering/package.json` file, using `yarn`
+      # Execute some tasks from the `apps-rendering/package.json` file, using `pnpm`
       - name: Build and package
         working-directory: apps-rendering
         run: |
-          yarn test
-          yarn build:client:prod
-          yarn build:server:prod
-          yarn copy-manifest
-          yarn copy-fonts
-          yarn synth
+          pnpm test
+          pnpm build:client:prod
+          pnpm build:server:prod
+          pnpm copy-manifest
+          pnpm copy-fonts
+          pnpm synth
           zip -j dist/server/mobile-apps-rendering.zip dist/server/*
 
       - name: AWS Auth

.github/workflows/ar-nodejs.yml

@@ -24,17 +24,17 @@ jobs:
         uses: ./.github/actions/setup-node-env
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
         working-directory: apps-rendering
 
       - name: Test
-        run: yarn test
+        run: pnpm test
         working-directory: apps-rendering
 
       - name: Compile client
-        run: yarn build:client:prod
+        run: pnpm build:client:prod
         working-directory: apps-rendering
 
       - name: Compile server
-        run: yarn build:server:prod
+        run: pnpm build:server:prod
         working-directory: apps-rendering

.github/workflows/cypress.yml

@@ -25,6 +25,10 @@ jobs:
       - name: Set up Node environment
         uses: ./.github/actions/setup-node-env
 
+      # https://github.com/cypress-io/github-action/issues/1044
+      - run: pnpm cypress install
+        working-directory: dotcom-rendering
+
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

.github/workflows/dcr-chromatic.yml

@@ -40,6 +40,6 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           autoAcceptChanges: main
           onlyChanged: true
-          untraced: '**/(package*.json|yarn.lock|preview.js)'
+          untraced: '**/(package*.json|pnpm-lock.yaml|preview.js)'
           workingDir: dotcom-rendering
           buildScriptName: 'build-storybook'

.github/workflows/jest.yml

@@ -11,5 +11,5 @@ jobs:
         uses: ./.github/actions/setup-node-env
 
       - name: Run Jest
-        run: CI=true yarn test
+        run: CI=true pnpm test
         working-directory: dotcom-rendering

.github/workflows/playwright.yml

@@ -26,11 +26,11 @@ jobs:
         uses: ./.github/actions/setup-node-env
 
       - name: Install Playwright Browsers
-        run: yarn playwright install --with-deps chromium
+        run: pnpm playwright install --with-deps chromium
         working-directory: ./dotcom-rendering
 
       - name: Run Playwright
-        run: yarn playwright test parallel-${{ matrix.group }}
+        run: pnpm playwright test parallel-${{ matrix.group }}
         working-directory: ./dotcom-rendering
 
       - uses: actions/upload-artifact@v3

.github/workflows/prettier.yml

@@ -11,4 +11,4 @@ jobs:
         uses: ./.github/actions/setup-node-env
 
       - name: Prettier check
-        run: yarn prettier:check
+        run: pnpm prettier:check

.github/workflows/typescript.yml

@@ -16,5 +16,5 @@ jobs:
         uses: ./.github/actions/setup-node-env
 
       - name: Check typescript
-        run: yarn tsc
+        run: pnpm tsc
         working-directory: dotcom-rendering

.gitignore

@@ -11,14 +11,7 @@ yarn-error.log*
 
 # Dependency directories
 node_modules
-.yarn/*
-
-# Things yarn might create that we'd want to check in
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.yarn
 
 # IDE files
 .idea

.husky/post-merge

@@ -5,17 +5,17 @@ RED='\033[0;31m'
 ENDCOLOR='\033[0m'
 
 changedFiles="$(git diff-tree -r --name-only --no-commit-id HEAD@{1} HEAD)"
-changedLock="$(echo "$changedFiles" | { grep -E 'yarn.lock|package-lock.json' || :; })"
+changedLock="$(echo "$changedFiles" | { grep -E 'pnpm-lock.yaml' || :; })"
 changedNode="$(echo "$changedFiles" | { grep '.nvmrc' || :; })"
 
 if [[ ! -z $changedLock ]]
 then
-	echo "${RED}This application has new dependencies. Running 'yarn'... ${ENDCOLOR}"
-	yarn --immutable
+	echo "${RED}This application has new dependencies. Running 'pnpm'... ${ENDCOLOR}"
+	pnpm install --frozen-lockfile
 fi
 
 if [[ ! -z $changedNode ]]
 then
 	version="$(cat .nvmrc)"
-	echo "${RED}This project now uses node version "$version". Please use 'nvm use' & run 'yarn'${ENDCOLOR}"
+	echo "${RED}This project now uses node version "$version". Please use 'nvm use' & run 'pnpm install --frozen-lockfile'${ENDCOLOR}"
 fi

.husky/pre-commit

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

.husky/pre-push

@@ -9,4 +9,4 @@ then
 	exit 1
 fi
 
-yarn workspace @guardian/dotcom-rendering tsc
+pnpm --filter @guardian/dotcom-rendering tsc

.npmrc

@@ -0,0 +1 @@
+save-prefix=''

.prettierignore

@@ -1,7 +1,7 @@
 dist
-.yarn
 deno
 .nvmrc
+pnpm-lock.yaml
 
 # generated files
 dotcom-rendering/src/model/*-schema.json

.vscode/settings.json.recommended

@@ -14,7 +14,7 @@
 		"titleBar.activeBackground": "#648FFF",
 		"titleBar.activeForeground": "#000000"
 	},
-	"jest.jestCommandLine": "yarn workspaces run test",
+	"jest.jestCommandLine": "pnpm -r run test",
 	"gitlens.advanced.blame.customArguments": [
 		"--ignore-revs-file",
 		".git-blame-ignore-revs"

README.md

@@ -22,11 +22,11 @@ corepack enable
 
 ## Install
 
-Run `yarn` in the root directory of this project to install packages.
+Run `pnpm` in the root directory of this project to install packages.
 
 ## Run
 
-You should always `cd` into the correct subdirectory before running commands (e.g `make dev` for dotcom-rendering, or `yarn watch` for apps-rendering) except for storybook.
+You should always `cd` into the correct subdirectory before running commands (e.g `make dev` for dotcom-rendering, or `pnpm watch` for apps-rendering) except for storybook.
 
 ### `apps rendering`
 
@@ -42,10 +42,10 @@ Most commands are run from within each project but the following are managed fro
 
 ### Storybook/Chromatic
 
-`yarn storybook` - Runs Storybook for all projects
-`yarn build-storybook` - Builds Storybook for all projects
+`pnpm storybook` - Runs Storybook for all projects
+`pnpm build-storybook` - Builds Storybook for all projects
 
-Chromatic now runs at project level. `cd` into the project dir and run `yarn chromatic -t [CHROMATIC PROJECT TOKEN]`
+Chromatic now runs at project level. `cd` into the project dir and run `pnpm chromatic -t [CHROMATIC PROJECT TOKEN]`
 
 You can find the token in the project Chromatic instance.
 

apps-rendering/README.md

@@ -8,7 +8,7 @@
 4. Install dependencies:
 
 ```sh
-yarn
+pnpm
 ```
 
 ### Run (Development)
@@ -20,7 +20,7 @@ yarn
 This is the simplest way to get started, but will intermingle all the logs together in one shell. If you're doing development work it might be easier to run the client and server in separate shells as described in the next subsection.
 
 ```sh
-yarn watch
+pnpm watch
 ```
 
 View in a browser at http://localhost:3030.
@@ -58,13 +58,13 @@ This will output each command's logs to different shells, which can make develop
 To start the server:
 
 ```sh
-yarn watch:server
+pnpm watch:server
 ```
 
 To start the client:
 
 ```sh
-yarn watch:client
+pnpm watch:client
 ```
 
 View in a browser at http://localhost:3030
@@ -76,13 +76,13 @@ _**Note**: You will need to refresh the page to see any changes you make to the
 You may need to build the client-side code first with:
 
 ```sh
-yarn build:client
+pnpm build:client
 ```
 
 Then start the server with:
 
 ```sh
-yarn watch:server
+pnpm watch:server
 ```
 
 View in a browser at http://localhost:3040
@@ -94,29 +94,29 @@ _**Note**: You will need to refresh the page to see any changes you make to the
 The unit tests are built using Jest. They can be run with the following command:
 
 ```sh
-yarn test
+pnpm test
 ```
 
 ### Lint
 
 ESLint is used to validate the code. It can be run like this:
 
 ```sh
-yarn lint
+pnpm lint
 ```
 
 It can automatically fix problems for you:
 
 ```sh
-yarn lint:fix
+pnpm lint:fix
 ```
 
 ### Storybook
 
 A good way to see components and test them in isolation is to run storybook:
 
 ```sh
-yarn storybook
+pnpm storybook
 ```
 
 Stories are deployed on [GitHub pages](https://guardian.github.io/apps-rendering)

apps-rendering/cdk.json

@@ -1,5 +1,5 @@
 {
-	"app": "yarn tsx cdk/bin/cdk.ts",
+	"app": "pnpm tsx cdk/bin/cdk.ts",
 	"context": {
 		"aws-cdk:enableDiffNoFail": "true",
 		"@aws-cdk/core:stackRelativeExports": "true"

apps-rendering/package.json

@@ -8,19 +8,18 @@
 		"ios >= 12"
 	],
 	"scripts": {
-		"preinstall": "../scripts/preinstall.mjs",
 		"upload": "node-riffraff-artifact",
 		"copy-manifest": "cp dist/assets/manifest.json dist/server/manifest.json",
 		"copy-fonts": "cp -R assets/fonts dist/assets/fonts",
 		"test": "jest --config config/jest.config.js --verbose",
-		"test:coverage": "yarn test; open coverage/index.html",
+		"test:coverage": "pnpm test; open coverage/index.html",
 		"test:watch": "jest --config config/jest.config.js --watch",
 		"lint": "eslint -c config/.eslintrc.js ./ --ext '.ts,.tsx' --cache",
 		"lint:fix": "eslint -c config/.eslintrc.js ./ --ext '.ts,.tsx' --fix --cache",
 		"watch:server": "webpack --config webpack.config.ts --config-name server --env watch",
 		"watch:client": "webpack serve --config webpack.config.ts --config-name client",
 		"watch:cdk": "tsc -w -p config/tsconfig.cdk.json",
-		"watch": "yarn watch:server & yarn watch:client",
+		"watch": "pnpm '/^watch:(?!cdk$).*/'",
 		"build:server": "webpack --config webpack.config.ts --config-name server",
 		"build:client": "webpack --config webpack.config.ts --config-name client",
 		"build:cdk": "tsc -p config/tsconfig.cdk.json",

dotcom-rendering/README.md

@@ -4,7 +4,7 @@ Frontend rendering framework for theguardian.com. It uses [React](https://reactj
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
+<!-- Automatically created by running `pnpm createtoc` in a pre-commit hook -->
 
 -   [Quick start](#quick-start)
     -   [Install Node.js](#install-nodejs)
@@ -55,7 +55,7 @@ corepack enable
 
 ### Running instructions
 
-Clone the repo, run `yarn` in the root, then CD into the `dotcom-rendering` subdirectory -
+Clone the repo, run `pnpm install --frozen-lockfile` in the root, then CD into the `dotcom-rendering` subdirectory -
 
 ```
 $ git clone [email protected]:guardian/dotcom-rendering.git
@@ -188,8 +188,8 @@ Staged changes are automatically prettified on commit. You can disable this by a
 
 To run the prettier check manually, run either of the following commands from the workspace root:
 
--   `yarn prettier:check` &rarr; Checks for prettier issues
--   `yarn prettier:write` &rarr; Checks and fixes prettier issues
+-   `pnpm prettier:check` &rarr; Checks for prettier issues
+-   `pnpm prettier:write` &rarr; Checks and fixes prettier issues
 
 ### Auto fix on save
 

dotcom-rendering/cdk.json

@@ -1,5 +1,5 @@
 {
-	"app": "yarn tsx cdk/bin/cdk.ts",
+	"app": "pnpm tsx cdk/bin/cdk.ts",
 	"context": {
 		"aws-cdk:enableDiffNoFail": "true",
 		"@aws-cdk/core:stackRelativeExports": "true"

dotcom-rendering/docs/contributing/code-style.md

@@ -2,7 +2,7 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-<!-- Automatically created by running `yarn createtoc` in a pre-commit hook -->
+<!-- Automatically created by running `pnpm createtoc` in a pre-commit hook -->
 
 -   [TypeScript](#typescript)
     -   [Always used named exports](#always-used-named-exports)