Skip to content

Switch the repo and workflow to pnpm#59

Merged
schalkneethling merged 2 commits into
mainfrom
cleanup-switch-to-pnpm
Jun 16, 2026
Merged

Switch the repo and workflow to pnpm#59
schalkneethling merged 2 commits into
mainfrom
cleanup-switch-to-pnpm

Conversation

@schalkneethling

@schalkneethling schalkneethling commented Jun 16, 2026

Copy link
Copy Markdown
Owner

Summary

  • Replace npm-based project and Playwright workflow setup with pnpm
  • Update lockfiles and package metadata to match the new package manager
  • Refresh project docs and the issue triage report to reflect the current state

Testing

  • Not run (not requested)

Summary by CodeRabbit

  • Documentation
    • Added project goals/scope (GOAL.md)
    • Added roadmap with milestones and decision log (ROADMAP.md)
    • Added a static GitHub issue triage report page
  • CI / Testing
    • Updated Playwright CI to use pnpm (including browser install and test execution)
    • Standardized local test base URL to 127.0.0.1
  • Chores
    • Set package manager to pnpm@11.1.0 and updated Node runtime requirement
    • Added Dependabot configuration for dependency updates

@socket-security

socket-security Bot commented Jun 16, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updatedhappy-dom@​20.8.9 ⏵ 20.10.46610088 +196 +1100
Updatedvitest@​4.1.8 ⏵ 4.1.998 +110079 +199100
Updated@​types/​node@​24.4.0 ⏵ 24.13.210010081 +196100
Updatedeslint-config-prettier@​10.1.1 ⏵ 10.1.8100 +1100100 +187100
Updatedzod@​4.1.8 ⏵ 4.4.310010010093100
Updatedprettier@​3.5.3 ⏵ 3.8.498 +110097 +195100
Updatedstylelint@​16.16.0 ⏵ 16.26.19710010097100
Updated@​playwright/​test@​1.56.1 ⏵ 1.61.010010010099100

View full report

@socket-security

socket-security Bot commented Jun 16, 2026

Copy link
Copy Markdown

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm cheerio is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: pnpm-lock.yamlnpm/svg-symbol-sprite@1.5.2npm/cheerio@1.2.0

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/cheerio@1.2.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
Obfuscated code: npm css-tree is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: pnpm-lock.yamlnpm/stylelint@16.26.1npm/css-tree@3.2.1

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/css-tree@3.2.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
Obfuscated code: npm happy-dom is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package.jsonnpm/happy-dom@20.10.4

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/happy-dom@20.10.4. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
Obfuscated code: npm htmlparser2 is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: pnpm-lock.yamlnpm/svg-symbol-sprite@1.5.2npm/htmlparser2@10.1.0

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/htmlparser2@10.1.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ffeb57e2-729b-4094-ad7c-9fbaf7f501fd

📥 Commits

Reviewing files that changed from the base of the PR and between 8394518 and 9d75b5d.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (8)
  • .cursor/rules/testing.mdc
  • .github/dependabot.yml
  • .github/settings.yml
  • .github/workflows/playwright.yml
  • GOAL.md
  • ROADMAP.md
  • github-issue-triage-report.html
  • package.json
💤 Files with no reviewable changes (1)
  • .github/settings.yml
✅ Files skipped from review due to trivial changes (4)
  • .github/dependabot.yml
  • .cursor/rules/testing.mdc
  • ROADMAP.md
  • GOAL.md
🚧 Files skipped from review as they are similar to previous changes (3)
  • package.json
  • .github/workflows/playwright.yml
  • github-issue-triage-report.html

📝 Walkthrough

Walkthrough

Migrates the project package manager from npm to pnpm by updating package.json, playwright.config.js, and the Playwright CI workflow. Establishes project governance through new GOAL.md and ROADMAP.md documents that define vision, success criteria, milestones, and decisions. Adds a static HTML issue triage report and configures Dependabot for automated dependency updates.

Changes

pnpm Migration and Automation

Layer / File(s) Summary
Package manager and Node runtime declaration
package.json
package.json declares packageManager as pnpm@11.1.0 and adds devEngines.runtime requiring Node ^24.0.0 with onFail set to download.
Playwright local dev and test configuration
playwright.config.js
playwright.config.js updates use.baseURL and webServer.url from http://localhost:5173 to http://127.0.0.1:5173, and changes the webServer startup command from npm run dev to pnpm run dev --host 127.0.0.1.
Development environment documentation
.cursor/rules/testing.mdc
.cursor/rules/testing.mdc updates Playwright configuration guidance to reflect the new 127.0.0.1 baseURL and webServer.url.
CI workflow pnpm migration
.github/workflows/playwright.yml
The Playwright test job removes actions/setup-node and npm ci, adds pnpm/setup@v0 with caching, and updates browser install and test commands to use pnpm exec playwright instead of npx.
Dependency automation setup
.github/dependabot.yml
.github/dependabot.yml configures Dependabot v2 for daily npm and github-actions updates, with npm-specific cooldown timing and wildcard inclusion of all packages and workflows.

Project Governance and Planning

Layer / File(s) Summary
Project goals, principles, and success criteria
GOAL.md
GOAL.md defines the project north star, target audience, core goals around production quality and component maturity labeling, "Success Looks Like" acceptance criteria spanning CI/documentation/accessibility, explicit non-goals avoiding scope creep, and guiding principles emphasizing accessibility contracts, semantic HTML, transparent React friction, and current focus checklist.
Roadmap and decision log
ROADMAP.md
ROADMAP.md provides stocktake of assets, identifies primary problems, outlines strategy, defines six milestones with done-when criteria, lists near-term issue candidates, includes a component maturity/status draft table, and records decisions on component reference validation, package manager direction, React lab baseline, and platform feature documentation.
Static issue triage report
github-issue-triage-report.html
github-issue-triage-report.html provides a self-contained HTML page with embedded CSS, metadata summary section with generation time and issue counts, triage narrative sections (goal summary, label updates, nomination), and a detailed issues table with priority badges, GOAL.md-linked rationale, impact, labels, and notes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

  • Complete pnpm migration across local development, CI, and docs #41 — This PR implements the pnpm migration scope by specifying pnpm@11.1.0 in package.json, updating playwright.config.js to use pnpm and 127.0.0.1, and migrating the CI workflow from npm/npx to pnpm commands, alongside governance documentation establishing goals, roadmap, and issue triage processes.

Poem

🐇 From npm to pnpm I hop with glee,
Config and CI now in harmony.
With GOAL.md lighting the way so bright,
And ROADMAP milestones shining in sight,
A triage report brings order divine—
This rabbit's migration is finally fine! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the primary change: migrating the repository from npm to pnpm, including workflow updates and package configuration changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch cleanup-switch-to-pnpm

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (4)
github-issue-triage-report.html (2)

16-16: ⚡ Quick win

Fix CSS variable usage inconsistency for .p2 priority badge.

The .p2 class (line 107) uses a hardcoded color #6f6b00 (dark olive) instead of the defined CSS variable --p2: #c2bd34`` (mustard yellow). Either the variable definition is incorrect, or the class should use background: var(--p2); for consistency with the `.p1` pattern (line 103).

🎨 Proposed fix to use CSS variable consistently
  .p2 {
-   background: `#6f6b00`;
+   background: var(--p2);
  }

If the dark olive color is intentional, update the CSS variable instead:

  --p2: `#c2bd34`;

to:

  --p2: `#6f6b00`;

Also applies to: 107-107

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@github-issue-triage-report.html` at line 16, The `.p2` class definition uses
a hardcoded color value `#6f6b00` instead of the defined CSS variable `--p2`.
Update the `.p2` class to use `background: var(--p2);` to maintain consistency
with the `.p1` class pattern and align with the CSS variable definition at the
top of the file where `--p2: `#c2bd34`` is declared.

1-331: 💤 Low value

Add HTML comments to document report sections.

Per coding guidelines for HTML files, include inline HTML comments to document major sections and their purpose. This would improve maintainability and clarity for future updates to the report structure.

Example additions:

<!-- Summary section: Key statistics and next-action nomination -->
<section class="summary" aria-labelledby="summary-heading">
  ...
</section>

<!-- Detailed triage information and rationale -->
<section aria-labelledby="goal-heading">
  ...
</section>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@github-issue-triage-report.html` around lines 1 - 331, The HTML document
lacks inline comments documenting major sections, making it harder to maintain
and understand the structure. Add HTML comments before each significant section
block to document their purpose: add a comment before the summary section with
class="summary", before the section with id="goal-heading", before the section
with id="label-heading", before the section with id="nominee-heading", and
before the table element. Each comment should briefly describe what that section
contains and its role in the overall report.
GOAL.md (1)

26-26: ⚡ Quick win

Standardize hyphenation of compound "production-ready" adjective.

The phrase "production ready" appears unformatted in four locations. When modifying a noun, compound adjectives should be hyphenated per English style guidance. Standardize to "production-ready" throughout both GOAL.md and ROADMAP.md for consistency.

Examples:

  • Line 26: "whether it is production-ready, production-ready with documented polyfills"
  • Line 60: "This should not optimize for framework bindings before the platform components and demos are production-ready."
  • Line 63: "This should not publish every experiment as production-ready."

Also applies to: 60-60, 63-63

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@GOAL.md` at line 26, The compound adjective "production ready" appears
unformatted in multiple locations throughout the documentation. Per English
style guidance, compound adjectives that modify a noun should be hyphenated.
Find all instances of the phrase "production ready" in the GOAL.md and
ROADMAP.md files and replace them with "production-ready" to standardize the
formatting and improve readability. This ensures consistency across all
documentation where this term is used as a compound adjective.
ROADMAP.md (1)

63-63: ⚡ Quick win

Standardize hyphenation of compound "production-ready" adjective (also in GOAL.md).

Line 63 has two unformatted instances: "production ready, production ready with documented polyfills or dependencies". Update to hyphenated form "production-ready" to match English style conventions and ensure consistency across documentation.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ROADMAP.md` at line 63, Standardize the hyphenation of the compound adjective
"production-ready" throughout the documentation. In ROADMAP.md around line 63,
replace the two unformatted instances "production ready" and "production ready
with documented polyfills or dependencies" with their hyphenated forms
"production-ready" and "production-ready with documented polyfills or
dependencies" respectively to follow proper English style conventions.
Additionally, apply the same hyphenation correction to any instances of
"production ready" found in GOAL.md to ensure consistency across all
documentation files.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/playwright.yml:
- Around line 13-15: The pnpm/setup action reference is using a version tag (v0)
instead of being pinned to a specific commit hash, creating a supply chain
security vulnerability. Replace the current reference to pnpm/setup@v0 with a
pinned reference that includes the full commit hash for that version tag. You
can find the commit hash by checking the tags in the pnpm/setup repository or by
using the recommended format of version tag with commit hash (for example,
pnpm/setup@v4.0.0 pinned to its corresponding commit hash).
- Around line 13-17: The pnpm/setup action only installs the pnpm toolchain but
does not automatically install project dependencies. Add an explicit dependency
installation step between the pnpm/setup@v0 action (with cache: true) and the
"Install Playwright Browsers" step. This new step should run pnpm install to
ensure all project dependencies are available before attempting to install
Playwright browsers with pnpm exec playwright install --with-deps.

In `@playwright.config.js`:
- Around line 78-79: The .cursor/rules/testing.mdc file contains outdated
example configuration that still references localhost:5173, while the actual
playwright.config.js has been updated to use 127.0.0.1:5173 for consistency.
Update lines 99 and 109 in .cursor/rules/testing.mdc to replace all instances of
localhost:5173 with 127.0.0.1:5173 so the example configuration matches the
current implementation in playwright.config.js.

---

Nitpick comments:
In `@github-issue-triage-report.html`:
- Line 16: The `.p2` class definition uses a hardcoded color value `#6f6b00`
instead of the defined CSS variable `--p2`. Update the `.p2` class to use
`background: var(--p2);` to maintain consistency with the `.p1` class pattern
and align with the CSS variable definition at the top of the file where `--p2:
`#c2bd34`` is declared.
- Around line 1-331: The HTML document lacks inline comments documenting major
sections, making it harder to maintain and understand the structure. Add HTML
comments before each significant section block to document their purpose: add a
comment before the summary section with class="summary", before the section with
id="goal-heading", before the section with id="label-heading", before the
section with id="nominee-heading", and before the table element. Each comment
should briefly describe what that section contains and its role in the overall
report.

In `@GOAL.md`:
- Line 26: The compound adjective "production ready" appears unformatted in
multiple locations throughout the documentation. Per English style guidance,
compound adjectives that modify a noun should be hyphenated. Find all instances
of the phrase "production ready" in the GOAL.md and ROADMAP.md files and replace
them with "production-ready" to standardize the formatting and improve
readability. This ensures consistency across all documentation where this term
is used as a compound adjective.

In `@ROADMAP.md`:
- Line 63: Standardize the hyphenation of the compound adjective
"production-ready" throughout the documentation. In ROADMAP.md around line 63,
replace the two unformatted instances "production ready" and "production ready
with documented polyfills or dependencies" with their hyphenated forms
"production-ready" and "production-ready with documented polyfills or
dependencies" respectively to follow proper English style conventions.
Additionally, apply the same hyphenation correction to any instances of
"production ready" found in GOAL.md to ensure consistency across all
documentation files.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f1332420-6025-454e-87b2-34e4fe2879cf

📥 Commits

Reviewing files that changed from the base of the PR and between 4b8ef8f and 8394518.

⛔ Files ignored due to path filters (2)
  • package-lock.json is excluded by !**/package-lock.json
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (6)
  • .github/workflows/playwright.yml
  • GOAL.md
  • ROADMAP.md
  • github-issue-triage-report.html
  • package.json
  • playwright.config.js

Comment thread .github/workflows/playwright.yml Outdated
Comment thread .github/workflows/playwright.yml Outdated
Comment thread playwright.config.js
@schalkneethling schalkneethling merged commit 6dd37c5 into main Jun 16, 2026
4 of 5 checks passed
@schalkneethling schalkneethling deleted the cleanup-switch-to-pnpm branch June 16, 2026 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant