Merge pull request #8036 from BloomBooks/pnpm

Switch front-end from yarn to pnpm; volta to vite-plus (#8036)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: StephenMcConnel

.claude/skills/run-bloom/SKILL.md

@@ -18,13 +18,13 @@ verified quick path.
 
 ## Prerequisites
 
-Dev machines already have: volta (provides node + yarn 1.22), .NET SDK 10,
-WebView2 runtime. On a machine missing dependencies, run `./init.sh`
-(fetches C# deps, yarn installs, initial `yarn build`) — documented but not
-re-verified here; a failed C# build with CS0246 errors (missing
-`PodcastUtilities` etc.) means `./init.sh` is needed.
+Dev machines already have: node 22 + pnpm 11.5.2 (see .node-version and the
+packageManager field), .NET SDK 10, WebView2 runtime. On a machine missing
+dependencies, run `./init.sh` (fetches C# deps, pnpm installs, initial
+`pnpm build`) — documented but not re-verified here; a failed C# build with
+CS0246 errors (missing `PodcastUtilities` etc.) means `./init.sh` is needed.
 
-Never run `yarn build` while a watch/dev build is running (see AGENTS.md).
+Never run `pnpm build` while a watch/dev build is running (see AGENTS.md).
 Never launch a previously built `Bloom.exe` directly — it can be stale.
 
 ## Step 1: Is Bloom already running?
@@ -160,5 +160,5 @@ the whole flow down.
 Exe-backed Playwright suite (not re-run this session; see
 `.github/skills/bloom-automation/SKILL.md` for detail): from
 `src/BloomBrowserUI/react_components/component-tester`,
-`BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts`.
-TypeScript unit tests: `yarn test` in `src/BloomBrowserUI` (Vitest).
+`BLOOM_HTTP_PORT=<httpPort> pnpm playwright test --config playwright.bloom-exe.config.ts`.
+TypeScript unit tests: `pnpm test` in `src/BloomBrowserUI` (Vitest).

.claude/skills/run-bloom/screenshotBloom.mjs

@@ -100,7 +100,7 @@ const loadPlaywright = () => {
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         throw new Error(
-            `Could not load Playwright from ${componentTesterDir}. Run 'yarn install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
+            `Could not load Playwright from ${componentTesterDir}. Run 'pnpm install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
         );
     }
 };

.github/skills/bloom-automation/SKILL.md

@@ -147,7 +147,7 @@ Notes:
 6. Use `node .github/skills/bloom-automation/switchWorkspaceTab.mjs --http-port <httpPort> --tab <collection|edit|publish>` for top bar interactions, or attach another confirmed client to `http://localhost:<cdpPort>` if you need lower-level inspection.
 7. Manipulate the UI by clicking or typing in the attached browser context. Do not use Bloom API endpoints to simulate the user action itself.
 8. Use browser-native inspection for DOM, console, and network.
-9. If the task is test-related, run the exe-backed Playwright suite with `BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts`.
+9. If the task is test-related, run the exe-backed Playwright suite with `BLOOM_HTTP_PORT=<httpPort> pnpm exec playwright test --config playwright.bloom-exe.config.ts`.
 
 ## Running Bloom Workflow
 Use this when the user says to reuse the already-running Bloom.
@@ -217,8 +217,8 @@ Reason: the current MCP wrappers in this environment control their own browser i
 
 ## Tests
 - Run from `src/BloomBrowserUI/react_components/component-tester`.
-- Use `BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts`.
-- Run one file with `BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts ../TopBar/component-tests/bloom-exe-tabs.uitest.ts`.
+- Use `BLOOM_HTTP_PORT=<httpPort> pnpm exec playwright test --config playwright.bloom-exe.config.ts`.
+- Run one file with `BLOOM_HTTP_PORT=<httpPort> pnpm exec playwright test --config playwright.bloom-exe.config.ts ../TopBar/component-tests/bloom-exe-tabs.uitest.ts`.
 
 These tests attach to the real Bloom.exe target over CDP and verify tab switching plus console and network observation.
 

.github/skills/bloom-automation/dismissProblemDialog.mjs

@@ -111,7 +111,7 @@ const loadPlaywright = () => {
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         throw new Error(
-            `Could not load Playwright from ${componentTesterDir}. Run 'yarn install' there if dependencies are missing. Original error: ${message}`,
+            `Could not load Playwright from ${componentTesterDir}. Run 'pnpm install' there if dependencies are missing. Original error: ${message}`,
         );
     }
 };

.github/skills/bloom-automation/switchWorkspaceTab.mjs

@@ -128,7 +128,7 @@ const loadPlaywright = () => {
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         throw new Error(
-            `Could not load Playwright from ${componentTesterDir}. Run 'yarn install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
+            `Could not load Playwright from ${componentTesterDir}. Run 'pnpm install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
         );
     }
 };

.github/skills/bloom-canvas-e2e-testing/SKILL.md

@@ -30,15 +30,15 @@ Use the `src/BloomBrowserUI` package and run the canvas suite via the root e2e s
 
 1) Install once (or when deps change):
 - `cd src/BloomBrowserUI`
-- `yarn install`
+- `pnpm install`
 
 2) Run one canvas test:
 - `cd src/BloomBrowserUI`
-- `yarn e2e canvas specs/01-toolbox-drag-to-canvas.spec.ts`
+- `pnpm e2e canvas specs/01-toolbox-drag-to-canvas.spec.ts`
 
 3) Run the full canvas suite:
 - `cd src/BloomBrowserUI`
-- `yarn e2e canvas`
+- `pnpm e2e canvas`
 
 ## Frame model (critical)
 Bloom Edit Tab has multiple iframes. Use frame names first:
@@ -89,7 +89,7 @@ A valid non-trivial proof test should:
 
 ## Troubleshooting
 - If test says "No tests found": verify path filter is relative to the config `testDir`.
-- If command says `playwright: not found`: run `yarn install` in `src/BloomBrowserUI`.
+- If command says `playwright: not found`: run `pnpm install` in `src/BloomBrowserUI`.
 - If canvas waits time out: confirm you selected the `page` frame, not top frame.
 - If canvas tab click times out: check whether Canvas controls are already visible and skip click in that case.
 

.github/skills/edit-bloom-book/validateBloomBook.mjs

@@ -22,7 +22,7 @@ const loadJSDOM = () => {
     } catch (error) {
         const details = error instanceof Error ? error.message : String(error);
         console.error(
-            "Failed to load jsdom from src/BloomBrowserUI. Run yarn in src/BloomBrowserUI if dependencies are missing.",
+            "Failed to load jsdom from src/BloomBrowserUI. Run pnpm install in src/BloomBrowserUI if dependencies are missing.",
         );
         console.error(details);
         process.exitCode = 2;

.github/workflows/pr-automation.yml

@@ -41,9 +41,12 @@ jobs:
                   node-version: lts/*
 
             - name: Install Playwright driver (no browser download)
+              # npm (not pnpm) is deliberate here: this job runs without a repo checkout,
+              # so the repo's pnpm policy doesn't apply. It only needs playwright-core in
+              # a throwaway directory on the runner, and npm is preinstalled there.
               run: |
-                  yarn init -y
-                  yarn add playwright-core
+                  npm init -y
+                  npm install playwright-core
 
             - name: Open the devinreview.com URL in a real (headless) browser
               env:

.gitignore

@@ -135,7 +135,7 @@ DistFiles/IntegrityFailureAdvice-*.htm
 DistFiles/infoPages/TrainingVideos-*.htm
 DistFiles/localization/*.htm
 
-src/BloomBrowserUI/yarn-error\.log
+pnpm-debug.log*
 
 src/BloomExe/Firefox/
 
@@ -178,22 +178,8 @@ src/BloomBrowserUI/templates/template books/Activity/domActivities.css
 
 src/BloomBrowserUI/templates/template books/Activity/choiceActivities.css
 
-# per https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
-src/BloomBrowserUI/.pnp.*
-src/BloomBrowserUI/.yarn/*
-!src/BloomBrowserUI/.yarn/patches
-!src/BloomBrowserUI/.yarn/plugins
-!src/BloomBrowserUI/.yarn/releases
-!src/BloomBrowserUI/.yarn/sdks
-!src/BloomBrowserUI/.yarn/versions
-
-src/content/.pnp.*
-src/content/.yarn/*
-!src/content/.yarn/patches
-!src/content/.yarn/plugins
-!src/content/.yarn/releases
-!src/content/.yarn/sdks
-!src/content/.yarn/versions
+# pnpm's per-project store / state; the committed pnpm-lock.yaml files are NOT ignored.
+.pnpm-store/
 
 .github/copilot-instructions.md
 

.node-version

@@ -0,0 +1 @@
+22.21.1