WEBDEV-8724: Migrate elements to pnpm

.github/workflows/ci.yml

@@ -12,26 +12,27 @@ jobs:
 
     steps:
     - uses: actions/checkout@v6
+    - uses: pnpm/action-setup@v4
     - uses: actions/setup-node@v6
       with:
         node-version: 24
-        cache: npm
+        cache: pnpm
 
     - name: Install dependencies
-      run: npm ci
+      run: pnpm install --frozen-lockfile
 
     - name: Cache Playwright browsers
       uses: actions/cache@v4
       with:
         path: ~/.cache/ms-playwright
-        key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }}
+        key: ${{ runner.os }}-playwright-${{ hashFiles('pnpm-lock.yaml') }}
 
     - name: Install Playwright Browsers
-      run: npx playwright install --with-deps chromium
+      run: pnpm exec playwright install --with-deps chromium
       timeout-minutes: 6
 
     - name: Run tests
-      run: npm run test
+      run: pnpm run test
 
     - uses: codecov/codecov-action@v5
       with:

.github/workflows/gh-pages-main.yml

@@ -20,11 +20,13 @@ jobs:
         with:
           persist-credentials: false
 
+      - uses: pnpm/action-setup@v4
+
       - name: Set up Node 🟢
         uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: npm
+          cache: pnpm
 
       - name: Set up Git
         run: |
@@ -33,8 +35,8 @@ jobs:
 
       - name: Install and Build 🔧
         run: |
-          npm ci
-          npm run ghpages:build
+          pnpm install --frozen-lockfile
+          pnpm run ghpages:build
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

.github/workflows/npm-publish.yml

@@ -12,21 +12,23 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: 24
           registry-url: 'https://registry.npmjs.org'
-          cache: npm
-      - run: npm ci
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
       - name: Cache Playwright browsers
         uses: actions/cache@v4
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('pnpm-lock.yaml') }}
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps chromium
+        run: pnpm exec playwright install --with-deps chromium
         timeout-minutes: 6
-      - run: npm test
+      - run: pnpm test
+      # Publish with npm (not pnpm) so npm provenance / trusted publishing works.
       - run: |
           if ${{ github.event.release.prerelease }}; then
             npm publish --provenance --tag alpha

.github/workflows/pr-preview.yml

@@ -22,10 +22,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: npm
+          cache: pnpm
 
       - name: Set up Git
         run: |
@@ -34,8 +35,8 @@ jobs:
 
       - name: Install and Build
         run: |
-          npm install
-          npm run ghpages:build
+          pnpm install --frozen-lockfile
+          pnpm run ghpages:build
 
       # Reference: https://github.com/rossjrw/pr-preview-action
       - name: Deploy preview

.npmrc

@@ -0,0 +1,4 @@
+engine-strict=true
+# This repo uses pnpm (see "packageManager" in package.json). Stop npm from
+# writing a stray package-lock.json if someone runs `npm install` anyway.
+package-lock=false

README.md

@@ -88,16 +88,16 @@ Add to Jest config:
 ## Development
 
 ```zsh
-npm i
-npm run dev
+pnpm install
+pnpm run dev
 ```
 
 ## Versioning and Publishing
 
 ### Prerelease Version
 
 1. Create prerelease version on your branch:
-   1. `npm version prerelease --preid=<some_prefix>`
+   1. `pnpm version prerelease --preid=<some_prefix>`
    2. If you use JIRA, recommend using the ticket number, ie `--preid=webdev-1234`
    3. This will also create a `git` tag
 2. Push the tag that was created in the `npm version` step
@@ -113,7 +113,7 @@ npm run dev
 
 1. Use [Semantic Versioning](https://semver.org) to determine release number
 2. On the `main` branch:
-   1. Run `npm version [major | minor | patch]`
+   1. Run `pnpm version [major | minor | patch]`
    2. `git push && git push --tags`
 3. Publish release to npm:
    1. Go to the [Element release page](https://github.com/internetarchive/elements/releases)