Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate yarn v1 to pnpm v9 #557

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

jamiehenson
Copy link
Member

@jamiehenson jamiehenson commented Nov 25, 2024

Jira Ticket Link / Motivation

Across our various JS-oriented web apps, we use Yarn v1. It still trucks on, but is updated infrequently and is considered to be part of the past - Yarn has since taken a different direction and is now on version 4. However, in my view the upgrade path lies not with later version of Yarn but with pnpm - primarily due to its design feature of symlinking from a centralised repository of modules on your system instead of having local caches for each repo.

Some reading on the subject: https://www.dhiwise.com/post/pnpm-vs-npm-vs-yarn-which-javascript-package-managerhttps://www.dhiwise.com/post/pnpm-vs-npm-vs-yarn-which-javascript-package-manager

This PR performs the conversion from Yarn 1 to the latest version of pnpm, with all working. I've found it to be substantially faster, both from a cold start, and particularly when making incremental changes to packages.

The only breaking change is a different four-letter word to type when you wanna do stuff.

Summary of changes

Removes yarn 1 from the asdf tools, adds pnpm v9, migrates the yarn.lock to pnpm's format, updates internal scripts.

How do you manually test this?

Pull it down, run asdf install (if you don't have pnpm locally already), pnpm i to install packages, try a few other things like pnpm storybook and pnpm test.

Reviewer Tasks (optional)

Merge/Deploy Checklist

  • Written automated tests for implemented features/fixed bugs
  • Rebased and squashed commits
  • Commits have clear descriptions of their changes
  • Checked for any performance regressions

Frontend Checklist

  • No frontend changes in this PR
  • Added before/after screenshots for changes
  • Tested on different platforms/browsers with Browserstack
  • Compared with the initial design / our brand guidelines
  • Checked the code for accessibility issues (VoiceOver User Guide)?

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Transitioned the package management system from Yarn to PNPM across all workflows and scripts.
    • Added new dependencies for improved development support.
  • Bug Fixes

    • Updated workflows to enhance the package release process and streamline dependency management.
  • Documentation

    • Updated configuration files and scripts to reflect the new package manager.
  • Chores

    • Removed Yarn-related entries from .gitignore and .tool-versions.
    • Adjusted scripts to utilize PNPM commands for package installation and publishing.

Copy link
Contributor

coderabbitai bot commented Nov 25, 2024

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes in this pull request involve a comprehensive transition from using Yarn to PNPM as the package manager across various GitHub workflows, scripts, and configuration files. Updates include installing PNPM in workflows, modifying commands to use PNPM instead of Yarn, and adjusting the .gitignore and .npmrc files to reflect this change. Additionally, the package.json has been updated to specify the new package manager and include new dependencies.

Changes

File Path Change Summary
.github/workflows/push.yml Updated workflow to use pnpm for dependency installation and testing.
.github/workflows/release.yml Standardized package manager to pnpm, updated caching and build commands.
.github/workflows/review.yml Modified to use pnpm for building Storybook and added installation step for pnpm.
.gitignore Removed entries for yarn-error.log and computed-colors.json.
.npmrc Added configuration for hoisting Storybook packages.
.tool-versions Removed yarn entry and added pnpm version.
package.json Added "packageManager": "[email protected]"; updated scripts to use pnpm; added new devDependencies.
scripts/pre-release.sh Updated to use pnpm commands instead of yarn.
scripts/release.sh Replaced yarn commands with pnpm equivalents.
scripts/update-pre-release-versions.sh Changed to add pnpm-lock.yaml instead of yarn.lock to git staging.

Suggested labels

review

Suggested reviewers

  • aralovelace

🐇 In the garden, where carrots grow,
A shift to PNPM, oh what a show!
With scripts and workflows, all aligned,
Our package management, redefined.
Hopping along, we celebrate,
A smoother path, oh isn’t it great! 🌱


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@jamiehenson jamiehenson force-pushed the spike-change-yarn-to-pnpm branch 7 times, most recently from a142901 to e329f3d Compare November 26, 2024 11:24
@jamiehenson jamiehenson marked this pull request as ready for review November 28, 2024 17:25
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Caution

Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.

Actionable comments posted: 4

🧹 Outside diff range and nitpick comments (7)
scripts/update-pre-release-versions.sh (1)

Line range hint 1-28: Add pnpm installation check.

Since the script now depends on pnpm, it would be helpful to add a check for pnpm installation at the beginning of the script.

Add this check after the set -euo pipefail line:

 set -euo pipefail
+
+if ! command -v pnpm >/dev/null 2>&1; then
+  echo "Error: pnpm is required but not installed. Please install pnpm first."
+  exit 1
+fi
.github/workflows/push.yml (3)

21-22: Consider pinning the pnpm version.

While using pnpm/action-setup@v4 is good, specifying the exact pnpm version would ensure consistent behavior across workflow runs.

 - name: Install pnpm
-  uses: pnpm/action-setup@v4
+  uses: pnpm/action-setup@v4
+  with:
+    version: 9.x.x  # Replace with your specific version

29-29: Consider splitting the installation steps.

The combined command makes it harder to debug failures. Also, verify if Playwright requires additional dependencies with pnpm.

-run: pnpm i && pnpm exec playwright install
+run: |
+  pnpm i
+  pnpm exec playwright install --with-deps

Line range hint 21-42: Consider adding a pnpm verification step.

To ensure the workflow's reliability, consider adding a step to verify pnpm's installation and version.

 - name: Install pnpm
   uses: pnpm/action-setup@v4
+- name: Verify pnpm installation
+  run: pnpm --version
 - name: Set up Node
🧰 Tools
🪛 actionlint (1.7.4)

31-31: the runner of "wearerequired/lint-action@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue

(action)

.github/workflows/release.yml (1)

44-45: LGTM! Consider reusable workflow.

The pnpm installation step is consistent with the release job. Consider creating a reusable workflow for these common setup steps to reduce duplication.

# .github/workflows/setup-pnpm.yml
name: Setup pnpm
runs:
  using: composite
  steps:
    - uses: pnpm/action-setup@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: "pnpm"
scripts/pre-release.sh (1)

44-45: Add pnpm version check

While the migration to pnpm looks good, it would be beneficial to verify the pnpm installation and version at the start of the script to prevent potential issues.

Add this check after the initial set of validations:

 echo "> pnpm"
+if ! command -v pnpm &> /dev/null; then
+    echo "Error: pnpm is not installed"
+    exit 1
+fi
+PNPM_VERSION=$(pnpm --version)
+if [[ ! "$PNPM_VERSION" =~ ^9\. ]]; then
+    echo "Error: pnpm version 9.x.x is required, found $PNPM_VERSION"
+    exit 1
+fi
 pnpm i --frozen-lockfile
package.json (1)

80-81: Consider improving test script robustness.

The test scripts could benefit from some improvements:

  1. Consider extracting the hardcoded port (6007) to a variable
  2. Add error handling for the concurrent execution
  3. Consider adding a timeout to the wait-on command

Example improvement:

-    "test": "pnpx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"pnpx wait-on tcp:6007 && pnpm test-storybook --url http://127.0.0.1:6007\"",
+    "test": "PORT=6007 pnpx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port $PORT --silent\" \"pnpx wait-on --timeout 30000 tcp:$PORT && pnpm test-storybook --url http://127.0.0.1:$PORT\"",
🛑 Comments failed to post (4)
.github/workflows/review.yml (2)

26-26: 🛠️ Refactor suggestion

Improve build step reliability and performance.

The current build command combines installation and build steps, which could mask installation failures. Additionally, we should leverage pnpm's store for better performance.

Split the commands and add store configuration:

-     run: pnpm i && pnpm build-storybook
+     run: |
+       pnpm config set store-dir ~/.pnpm-store
+       pnpm install --frozen-lockfile
+       pnpm build-storybook
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        run: |
          pnpm config set store-dir ~/.pnpm-store
          pnpm install --frozen-lockfile
          pnpm build-storybook

23-24: 🛠️ Refactor suggestion

Add Node.js setup step before pnpm installation.

While the pnpm installation step is correct, we should add the Node.js setup step for better version control and caching capabilities.

Add this before the pnpm installation:

      - name: Checkout
        uses: actions/checkout@v4
+     - name: Setup Node.js
+       uses: actions/setup-node@v4
+       with:
+         node-version: '18'
+         cache: 'pnpm'
      - name: Install pnpm
        uses: pnpm/action-setup@v4
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'pnpm'
      - name: Install pnpm
        uses: pnpm/action-setup@v4
.github/workflows/push.yml (1)

42-42: 💡 Codebase verification

Missing required dependencies for test script execution

The test script requires concurrently and wait-on packages, but they are not found in either dependencies or devDependencies. This could cause the CI pipeline to fail.

  • Add missing dependencies to devDependencies:
    • concurrently
    • wait-on
🔗 Analysis chain

Verify the test script configuration.

The command looks correct, but let's verify that the test script in package.json has been properly updated for pnpm.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if the test script in package.json has been updated
jq '.scripts.test' package.json

Length of output: 249


Script:

#!/bin/bash
# Let's verify if the dependencies for test script are properly configured
jq '.dependencies["@storybook/test-runner"], .dependencies["concurrently"], .dependencies["http-server"], .dependencies["wait-on"]' package.json

Length of output: 166


Script:

#!/bin/bash
# Check devDependencies since test dependencies are often in devDependencies
jq '.devDependencies["@storybook/test-runner"], .devDependencies["concurrently"], .devDependencies["http-server"], .devDependencies["wait-on"]' package.json

Length of output: 187

package.json (1)

37-37: 💡 Codebase verification

Update React-related dependencies to maintain version consistency

The verification confirms version mismatches in React-related packages:

  • react is at ^18.2.0
  • react-dom is at ^18.3.1
  • @types/react is at ^18.3.12

These inconsistencies between React core, React DOM, and type definitions could lead to runtime issues or incorrect type checking. The React ecosystem typically maintains version parity across these packages.

For Playwright, the version ^1.49.0 matches the latest stable release, so there's no version compatibility concern there.

🔗 Analysis chain

Review dependency version selections.

The new dependencies have potential version compatibility concerns:

  1. @types/react@^18.3.12 seems to be ahead of the React version (^18.2.0) which could lead to type mismatches
  2. playwright@^1.49.0 using a caret range for a testing tool could lead to inconsistent test behavior

Also applies to: 52-52

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for version compatibility issues

# Check React and @types/react version compatibility
rg -A 1 '"react": ".*"' package.json
rg '"@types/react": ".*"' package.json

# Check latest stable Playwright version
curl -s https://registry.npmjs.org/playwright/latest | jq '.version'

Length of output: 241

@jamiehenson jamiehenson force-pushed the spike-change-yarn-to-pnpm branch 6 times, most recently from 4d78d49 to fb2a006 Compare November 28, 2024 18:05
@jamiehenson
Copy link
Member Author

@coderabbitai review

Copy link
Contributor

coderabbitai bot commented Nov 28, 2024

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@jamiehenson jamiehenson requested a review from a team November 28, 2024 18:09
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

🧹 Outside diff range and nitpick comments (1)
.github/workflows/review.yml (1)

23-26: Consider pinning the pnpm version explicitly

While using the official pnpm action is good, consider pinning the specific pnpm version to match your project's requirements (v9.x as mentioned in PR objectives) for consistency across environments.

 - name: Install pnpm
   uses: pnpm/action-setup@v4
+  with:
+    version: 9.x.x
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between e329f3d and fb2a006.

⛔ Files ignored due to path filters (2)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (10)
  • .github/workflows/push.yml (2 hunks)
  • .github/workflows/release.yml (2 hunks)
  • .github/workflows/review.yml (1 hunks)
  • .gitignore (0 hunks)
  • .npmrc (1 hunks)
  • .tool-versions (1 hunks)
  • package.json (5 hunks)
  • scripts/pre-release.sh (1 hunks)
  • scripts/release.sh (1 hunks)
  • scripts/update-pre-release-versions.sh (2 hunks)
💤 Files with no reviewable changes (1)
  • .gitignore
🚧 Files skipped from review as they are similar to previous changes (7)
  • .github/workflows/push.yml
  • .github/workflows/release.yml
  • .npmrc
  • .tool-versions
  • scripts/pre-release.sh
  • scripts/release.sh
  • scripts/update-pre-release-versions.sh
🔇 Additional comments (3)
.github/workflows/review.yml (2)

27-31: LGTM! Proper Node.js setup with caching

The Node.js setup is well configured with:

  • Latest LTS Node.js version
  • Proper pnpm caching configuration
  • Latest setup-node action version

21-35: Verify consistent package manager migration across workflows

Let's ensure all workflow files are consistently updated to use pnpm.

✅ Verification successful

Package manager migration is consistent across workflows

The verification shows:

  • No remaining yarn references found in any workflow files
  • All workflow files (.github/workflows/review.yml, push.yml, and release.yml) that use Node.js setup have the correct pnpm cache configuration
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining yarn references in workflow files and verify pnpm setup in all workflows

echo "Checking for remaining yarn references in workflows..."
rg -i "yarn" .github/workflows/

echo "Verifying pnpm setup in all workflows..."
rg -l "actions/setup-node" .github/workflows/ | while read -r file; do
  echo "Checking $file for pnpm cache configuration..."
  rg "cache: \"pnpm\"" "$file" || echo "Missing pnpm cache in $file"
done

Length of output: 1037

package.json (1)

5-5: LGTM: Package manager specification is correctly added

The addition of the packageManager field with a pinned version is a good practice for ensuring consistent builds across the team.

.github/workflows/review.yml Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
package.json Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
Copy link
Contributor

@matt423 matt423 left a comment

Choose a reason for hiding this comment

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

No issues with installing and running on Linux 👍

In addition the PR instructions I just had to asdf plugin-add pnpm to get setup, might be useful to add the Readme once that gets updated(Abbot has spotted it needs updating)

Copy link
Contributor

@aralovelace aralovelace left a comment

Choose a reason for hiding this comment

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

All works on my end, yes I agree with matt regarding updating the ReadMe file.

@jamiehenson
Copy link
Member Author

Thanks @matt423 @aralovelace. I'll get the README side tidied up and give the installation procedure another lookover in a bit. Exciting to move the tools forward here

@jamiehenson jamiehenson force-pushed the spike-change-yarn-to-pnpm branch 2 times, most recently from 47e5e37 to f13dd0d Compare November 29, 2024 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants