refactor: move to pnpm

.github/actions/cache-restore/action.yml

@@ -5,7 +5,7 @@ inputs:
   node-version:
     description: "Node version to use, default to LTS"
     required: true
-    default: 20
+    default: 22
 outputs:
   cache-hit:
     description: "Forward actions/cache cache-hit output"
@@ -27,4 +27,4 @@ runs:
         path: |
           **/node_modules
           ~/.cache
-        key: ${{ runner.os }}-npm-${{ inputs.node-version }}-${{ hashFiles('package-lock.json') }}
+        key: ${{ runner.os }}-pnpm-${{ inputs.node-version }}-${{ hashFiles('pnpm-lock.yaml') }}

.github/workflows/validate_pr.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20]
+        node-version: [22]
 
     steps:
       - uses: actions/checkout@v4
@@ -30,7 +30,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
   check_format:
     name: Validate formating with Prettier
@@ -47,7 +47,7 @@ jobs:
         run: corepack enable
 
       - name: Format source code
-        run: npm run test:format
+        run: pnpm run test:format
 
   check_lint:
     name: Validate linting with ES Lint
@@ -64,7 +64,7 @@ jobs:
         run: corepack enable
 
       - name: Check Linting
-        run: npm run test:lint
+        run: pnpm run test:lint
 
   # run-tests:
   #   name: Run package tests on (Node.js v${{ matrix.node }})
@@ -88,7 +88,7 @@ jobs:
   #       run: corepack enable
 
   #     - name: Build packages
-  #       run: npm build
+  #       run: pnpm build
 
   #     - name: Set up S3 Server
   #       uses: ./.github/actions/s3-test-server

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
 	"cSpell.words": [
 		"combobox",
+		"faustjs",
 		"faustwp",
 		"heroicons",
 		"Kevinbatdorf",
@@ -29,5 +30,14 @@
 	},
 	"[json]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	}
+	},
+	"cSpell.ignorePaths": [
+		"package-lock.json",
+		"node_modules",
+		"vscode-extension",
+		".git/objects",
+		".vscode",
+		".vscode-insiders",
+		"pnpm-lock.yaml"
+	]
 }

README.md

@@ -2,12 +2,40 @@
 
 Frontend for the [faustjs.org](https://faustjs.org/) website.
 
+# Prerequisites
+
+- [`nvm` (Node Version Manager)](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)
+- Cloned repository
+
+## Getting started
+
+```bash
+$ nvm install		# Install the correct version of node
+$ corepack enable 	# Enable Corepack
+$ corepack install	# Install `pnpm` via Corepack
+$ pnpm install		# Install project dependencies via `pnpm`
+$ pnpm dev 			# Start dev server; See `scripts` in `package.json` for more
+```
+
+## PNPM Package Manager
+
+```bash
+corepack enable
+corepack install
+```
+
+This project users [pnpm](https://pnpm.io/). While not significantly different than `npm` here are some basic differences and I'd recommend you checkout the [`pnpm` docs](https://pnpm.io/) for more info.
+
+- `npm run dev` => `pnpm dev` or `pnpm run dev` :: commands can be shortened, or use your muscle memory
+- `npx` => `pnpx` or `pnpm dlx` :: either way it still works
+- `pnpm update` :: a whole suite of [native tools](https://pnpm.io/cli/update) to manage dependencies. No need for 3rd party tools to update dependencies.
+
 ## Linting and Formatting
 
 Linting - checks for potential errors and code style. i.e. eslint
-Formatting - checks for spaces, line length, etc. i.e prittier
+Formatting - checks for spaces, line length, etc. i.e prettier
 
-Both are run against staged files on commit. If it's failing for a good reaason and you need to bypass you can use the `--no-verify` or `-n` flag. `git commit -nm "my message"`
+Both are run against staged files on commit. If it's failing for a good reason and you need to bypass you can use the `--no-verify` or `-n` flag. `git commit -nm "my message"`
 
 ## Documentation Docs
 

eslint.config.mjs

@@ -40,7 +40,7 @@ const config = [
 		rules: {
 			"arrow-body-style": "off",
 			"react/prop-types": "off",
-			...unicorn.configs["flat/recommended"].rules, // neno disables a lot of unicorn rules so this reenables defaults
+			...unicorn.configs["flat/recommended"].rules, // neon disables a lot of unicorn rules so this reenables defaults
 			"react/no-danger": "warn",
 			"react/jsx-sort-props": "off",
 			"unicorn/prevent-abbreviations": [
@@ -79,12 +79,12 @@ const config = [
 			"unicorn/prefer-module": "off",
 		},
 	},
-	// {
-	// 	files: ["src/pages/**/*.{js,jsx}"],
-	// 	rules: {
-	// 		"unicorn/filename-case": ["off"],
-	// 	},
-	// },
+	{
+		files: ["src/pages/**/*.{js,jsx}"],
+		rules: {
+			"react-refresh/only-export-components": ["off"],
+		},
+	},
 	{
 		...mdx.flat,
 		processor: mdx.createRemarkProcessor({