feat: Upgrade Vitest to 3.0.3 and Vite to 6.0.11 (and associated dependencies) #430

kingston · 2025-01-23T13:38:13Z

Summary by CodeRabbit

Dependency Updates
- Upgraded Vitest to version 3.0.3
- Updated Vite to version 6.0.11
- Upgraded @vitejs/plugin-react to 4.3.4
- Updated vite-plugin-svgr to 4.3.0
- Updated vite-tsconfig-paths to 5.1.4
Package Patches
- Patched @halfdomelabs/project-builder-web
- Patched @halfdomelabs/react-generators
- Patched @halfdomelabs/core-generators
- Patched @halfdomelabs/ui-components
Configuration Changes
- Updated Vitest configuration files
- Modified ESLint ignore settings

…ndencies)

linear · 2025-01-23T13:38:16Z

ENG-554 Upgrade Vite to v6 and Vitest to v3

changeset-bot · 2025-01-23T13:38:17Z

🦋 Changeset detected

Latest commit: ef32860

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@halfdomelabs/project-builder-web	Patch
@halfdomelabs/react-generators	Patch
@halfdomelabs/core-generators	Patch
@halfdomelabs/ui-components	Patch
@halfdomelabs/project-builder-cli	Patch
@halfdomelabs/project-builder-test	Patch
@halfdomelabs/project-builder-server	Patch
@halfdomelabs/baseplate-plugin-storage	Patch
@halfdomelabs/fastify-generators	Patch
@halfdomelabs/project-builder-lib	Patch
@halfdomelabs/project-builder-common	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2025-01-23T13:38:21Z

Walkthrough

This pull request introduces a comprehensive update to various packages and dependencies across the project. The changes primarily focus on upgrading versions of key development tools and libraries, including Vitest, Vite, and related plugins. Several packages such as @halfdomelabs/project-builder-web, @halfdomelabs/react-generators, @halfdomelabs/core-generators, and @halfdomelabs/ui-components have been patched. The updates involve modifying configuration files, updating dependency versions, and introducing new file mappings to improve project structure and compatibility.

Changes

File/Path	Change Summary
`pnpm-workspace.yaml`	Updated versions of Vite, Vitest, @vitejs/plugin-react, vite-tsconfig-paths; Added vite-plugin-svgr
`packages/core-generators/src/generators/node/vitest/index.ts`	Updated Vitest and vite-tsconfig-paths versions; Introduced dynamic Vitest config filename
`packages/core-generators/src/writers/typescript/source-file.ts`	Renamed `FileWriteOptions` to `SourceFileWriteOptions`; Added `id` property
`packages/project-builder-web/package.json`	Changed `vite-plugin-svgr` version to catalog reference
`packages/react-generators/src/generators/core/react/node.ts`	Updated versions of @vitejs/plugin-react, vite, vite-plugin-svgr, vite-tsconfig-paths
`packages/sync/src/actions/write-formatted-action.ts`	Added new `WriteFormattedActionOptions` interface
`packages/ui-components/package.json`	Changed `vite-plugin-svgr` version to catalog reference
`tests/simple/packages/backend/*`	Updated Vitest config, package dependencies; Added file-id-map.json
`tests/simple/packages/web/*`	Updated Vite and related plugin versions; Added file-id-map.json

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant PM as Package Manager
    participant Deps as Dependencies
    participant Project as Project Configuration

    Dev->>PM: Trigger dependency update
    PM->>Deps: Fetch latest versions
    Deps-->>PM: Return updated package versions
    PM->>Project: Update workspace configuration
    Project->>Project: Update package.json files
    Project->>Project: Modify configuration files
    Project-->>Dev: Reflect changes in project structure

The sequence diagram illustrates the process of updating dependencies, showing how the package manager interacts with dependencies and updates the project configuration accordingly.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Lite

📥 Commits

Reviewing files that changed from the base of the PR and between 5507eb7 and 6963a6e.

⛔ Files ignored due to path filters (2)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
tests/simple/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (17)

.changeset/tough-comics-pay.md (1 hunks)
packages/core-generators/src/generators/node/vitest/index.ts (2 hunks)
packages/core-generators/src/writers/typescript/source-file.ts (3 hunks)
packages/project-builder-web/package.json (1 hunks)
packages/react-generators/src/generators/core/react/node.ts (1 hunks)
packages/sync/src/actions/write-formatted-action.ts (1 hunks)
packages/ui-components/package.json (1 hunks)
pnpm-workspace.yaml (1 hunks)
tests/simple/packages/backend/.eslintignore (1 hunks)
tests/simple/packages/backend/baseplate/.clean/.eslintignore (1 hunks)
tests/simple/packages/backend/baseplate/.clean/package.json (3 hunks)
tests/simple/packages/backend/baseplate/file-id-map.json (1 hunks)
tests/simple/packages/backend/package.json (3 hunks)
tests/simple/packages/backend/vitest.config.mts (1 hunks)
tests/simple/packages/web/baseplate/.clean/package.json (2 hunks)
tests/simple/packages/web/baseplate/file-id-map.json (1 hunks)
tests/simple/packages/web/package.json (2 hunks)

✅ Files skipped from review due to trivial changes (5)

tests/simple/packages/backend/baseplate/.clean/.eslintignore
.changeset/tough-comics-pay.md
tests/simple/packages/backend/baseplate/file-id-map.json
tests/simple/packages/backend/.eslintignore
tests/simple/packages/web/baseplate/file-id-map.json

🔇 Additional comments (18)

tests/simple/packages/backend/vitest.config.mts (1)

1-12: LGTM! Configuration follows Vitest 3.x best practices.

The configuration is well-structured with appropriate defaults. The use of vite-tsconfig-paths plugin ensures proper TypeScript path resolution.

Let's verify the existence of the global setup file:

✅ Verification successful

✓ Global setup file exists and is correctly configured

The path ./src/tests/scripts/globalSetup.ts in the Vitest configuration correctly resolves to an existing file.
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify the global setup file exists
test_file="./src/tests/scripts/globalSetup.ts"
if [ -f "$test_file" ]; then
    echo "✓ Global setup file exists at $test_file"
else
    echo "⚠ Global setup file not found at $test_file"
fi
Length of output: 239

Script:
#!/bin/bash
# Search for globalSetup.ts files
echo "Searching for globalSetup.ts files:"
fd "globalSetup.ts$"

echo -e "\nChecking relative to vitest config location:"
test_file="tests/simple/packages/backend/src/tests/scripts/globalSetup.ts"
if [ -f "$test_file" ]; then
    echo "✓ Global setup file exists at $test_file"
else
    echo "⚠ Global setup file not found at $test_file"
fi
Length of output: 694
packages/sync/src/actions/write-formatted-action.ts (1)

3-24: LGTM! Well-structured interface and action implementation.

The addition of the optional id property with fallback to destination improves flexibility while maintaining backward compatibility.
packages/react-generators/src/generators/core/react/node.ts (1)

13-16: Verify compatibility with Vite 6.x upgrade.

The upgrade to Vite 6.0.11 is a major version bump that may have breaking changes. Please ensure all plugins are compatible with Vite 6.x.

Let's check the compatibility of these versions:

✅ Verification successful

✅ All plugins are compatible with Vite 6.x

The specified versions of all plugins explicitly support or are compatible with Vite 6.x according to their peer dependencies:

@vitejs/[email protected] (^6.0.0)

[email protected] (>=2.6.0)

[email protected] (*)
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Check package compatibility with Vite 6.x
echo "Checking package compatibility..."

# Function to fetch latest version and compatibility info
check_package() {
    local pkg=$1
    echo "Checking $pkg..."
    npm view $pkg@latest version
    npm view $pkg@latest peerDependencies.vite
}

packages=(
    "@vitejs/plugin-react"
    "vite-plugin-svgr"
    "vite-tsconfig-paths"
)

for pkg in "${packages[@]}"; do
    check_package "$pkg"
done
Length of output: 1027
packages/core-generators/src/generators/node/vitest/index.ts (3)

56-58: LGTM! Smart handling of ESM/CJS configuration filename.

The dynamic configuration filename based on isEsm() ensures proper module format compatibility.

131-140: LGTM! Improved file identification with alternateFullIds.

The addition of id and alternateFullIds enhances file management and traceability.

61-62: Verify Vitest 3.x compatibility with Node.js version.

The upgrade to Vitest 3.0.3 may have minimum Node.js version requirements.

Let's check version compatibility:

✅ Verification successful

✓ Vitest 3.0.3 is compatible with project's Node.js version

The project requires Node.js ^20.0.0 which is fully supported by Vitest 3.0.3.
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Check Vitest 3.x compatibility
echo "Checking Vitest compatibility..."

# Check minimum Node.js version requirement for Vitest 3.x
npm view [email protected] engines.node

# Check if current package.json specifies Node.js version
if [ -f "package.json" ]; then
    echo "Current package.json engines:"
    cat package.json | jq '.engines'
fi
Length of output: 315
pnpm-workspace.yaml (1)

33-37: Verify compatibility with major version upgrades.

The changes include significant version upgrades:

Vite 6.0.11 (major upgrade)

Vitest 3.0.3 (major upgrade)

New dependency: vite-plugin-svgr 4.3.0

Please ensure:

Breaking changes in Vite 6.x are addressed

Vitest 3.x migration guide has been followed

The new SVGR plugin is compatible with Vite 6.x

✅ Verification successful

✅ Dependencies upgrade appears safe to proceed

The codebase is well-prepared for these upgrades:

Vite configurations use standard features and patterns compatible with v6

Vitest configurations are centralized and use standard options

SVGR plugin is already properly integrated where needed
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Check for Vite config files that might need updates
fd -e ts -e js -e mjs "vite.config"

# Look for Vitest configuration
fd -e ts -e js -e mjs "vitest.config"

# Search for SVG imports that might be affected
rg -l "import.*\.svg"
Length of output: 881

Script:
#!/bin/bash
# Check Vite configs for potential breaking changes
echo "=== Vite Configurations ==="
for config in $(fd -e ts -e js -e mjs "vite.config"); do
  echo "=== $config ==="
  cat "$config"
done

# Check Vitest configs
echo -e "\n=== Vitest Configurations ==="
for config in $(fd -e ts -e js -e mjs "vitest.config"); do
  echo "=== $config ==="
  cat "$config"
done

# Double check for SVG usage with different patterns
echo -e "\n=== SVG Usage ==="
rg -l "\.svg"
Length of output: 9743
tests/simple/packages/web/baseplate/.clean/package.json (1)

62-62: LGTM: Consistent version updates.

The package versions are correctly aligned with the workspace configuration:

@vitejs/plugin-react: 4.3.4

vite: 6.0.11

vite-plugin-svgr: 4.3.0

vite-tsconfig-paths: 5.1.4

Also applies to: 76-78

tests/simple/packages/web/package.json (1)

62-62: LGTM: Consistent dependency versions.

The package versions are correctly synchronized with the workspace and baseplate configuration.

Also applies to: 76-78
packages/project-builder-web/package.json (1)

88-88: Verify compatibility with the catalog version of vite-plugin-svgr.

The change from a fixed version to "catalog:" aligns with the project's dependency management strategy. However, we should verify compatibility with the current Vite version.

✅ Verification successful

✓ vite-plugin-svgr is compatible with current Vite version

The catalog version of vite-plugin-svgr requires Vite >=2.6.0, which is satisfied by the current Vite version 6.0.11.
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Check compatibility between vite and vite-plugin-svgr versions
npm info vite-plugin-svgr peerDependencies
npm info vite version
Length of output: 95
tests/simple/packages/backend/package.json (2)

51-51: Verify lodash type definitions compatibility.

The added lodash dependency (4.17.21) and @types/lodash (4.17.7) have mismatched minor versions. This might lead to type definition inconsistencies.

Also applies to: 61-61

81-82: Review breaking changes in major version upgrades.

The updates include major version upgrades:

vite-tsconfig-paths: 4.x → 5.1.4

vitest: 2.x → 3.0.3

Please review the following breaking changes and ensure the codebase is compatible:

✅ Verification successful

Both upgrades are safe to proceed with

The breaking changes in both packages don't affect the current codebase:

vite-tsconfig-paths: All Vite configs use TypeScript (.ts) extension which is ESM-compatible

vitest: Current mock/spy usage follows stable patterns through vitest-mock-extended library, and the breaking changes don't affect the existing implementation

The codebase is compatible with both major version upgrades.
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Fetch release notes for breaking changes
echo "Checking vite-tsconfig-paths changelog..."
curl -s "https://raw.githubusercontent.com/aleclarson/vite-tsconfig-paths/main/CHANGELOG.md"

echo -e "\nChecking vitest changelog..."
curl -s "https://raw.githubusercontent.com/vitest-dev/vitest/main/CHANGELOG.md"
Length of output: 367

Script:
#!/bin/bash
# Fetch package information from NPM registry
echo "Checking vite-tsconfig-paths package info..."
curl -s "https://registry.npmjs.org/vite-tsconfig-paths" | jq '.versions["5.1.4"].dist.tarball' -r > vite_tarball.txt
curl -s "$(cat vite_tarball.txt)" | tar -xzf - -O package/README.md 2>/dev/null || echo "No README found"

echo -e "\nChecking vitest package info..."
curl -s "https://registry.npmjs.org/vitest" | jq '.versions["3.0.3"].dist.tarball' -r > vitest_tarball.txt
curl -s "$(cat vitest_tarball.txt)" | tar -xzf - -O package/README.md 2>/dev/null || echo "No README found"

# Also check GitHub releases for breaking changes
echo -e "\nChecking GitHub releases..."
gh release view --repo aleclarson/vite-tsconfig-paths v5.0.0 2>/dev/null || echo "No v5.0.0 release notes found"
gh release view --repo vitest-dev/vitest v3.0.0 2>/dev/null || echo "No v3.0.0 release notes found"
Length of output: 30719

Script:
#!/bin/bash
# Check vite config file extension and spy/mock usage
echo "Checking vite config files..."
fd -e js -e ts -e mjs -e mts "vite.config" --exec echo {}

echo -e "\nChecking for spy/mock usage..."
rg "\.mock|\.spyOn|\.mockReset" -l
Length of output: 1834

Script:
#!/bin/bash
# Check for specific breaking change patterns
echo "Checking for mockReset usage..."
rg "mockReset" -B 2 -A 2

echo -e "\nChecking for spy implementation patterns..."
rg "spyOn.*\{.*implementation" -B 2 -A 2
Length of output: 2704
tests/simple/packages/backend/baseplate/.clean/package.json (1)

51-51: LGTM! Changes are consistent with the parent package.

The version updates and additions mirror those in the parent backend/package.json, maintaining consistency across the project structure.

Also applies to: 61-61, 81-82
packages/ui-components/package.json (1)

109-111: Verify compatibility with Storybook dependencies.

The change to use catalog references for Vite-related packages might affect Storybook compatibility. Please verify:

Compatibility between Storybook 8.4.7 and the catalog versions of Vite packages

Compatibility between vite-plugin-svgr and other Vite plugins

✅ Verification successful

Dependencies are compatible with Storybook

The catalog versions of Vite packages are compatible with Storybook 8.4.7. All plugins support the same Vite versions without conflicts:

@storybook/react-vite supports Vite v4-v6

vite-plugin-svgr supports Vite ≥2.6.0

@vitejs/plugin-react supports Vite v4.2+
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Check compatibility between storybook and vite versions
npm info @storybook/[email protected] peerDependencies

# Check compatibility between vite plugins
npm info vite-plugin-svgr peerDependencies
npm info @vitejs/plugin-react peerDependencies
Length of output: 394
packages/core-generators/src/writers/typescript/source-file.ts (4)

3-3: LGTM!

The import of WriteFileOptions is correctly added and used by the new interface.

555-559: LGTM!

The SourceFileWriteOptions interface is well-defined and documented. The extension of WriteFileOptions and optional id property maintains backward compatibility.

726-745: LGTM!

The changes to renderToActionFromText are well-implemented:

Maintains backward compatibility

Uses clean destructuring pattern

Provides good default for id

Preserves all options through rest operator

753-773: LGTM!

The changes to renderToAction are consistent with renderToActionFromText and follow the same well-implemented patterns.

✨ Finishing Touches

📝 Generate Docstrings (Beta)

🪧 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 generate docstrings to generate docstrings for this PR. (Beta)
@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.

kingston added 2 commits January 23, 2025 14:36

feat: Upgrade Vitest to 3.0.3 and Vite to 6.0.11 (and associated depe…

b157822

…ndencies)

Add new generation

6963a6e

Remove extra vitest.config.ts

ef32860

kingston merged commit 2e5e7b4 into main Jan 23, 2025
4 checks passed

kingston deleted the kingston/eng-554-upgrade-vite-to-v6 branch January 23, 2025 13:53

github-actions bot mentioned this pull request Jan 23, 2025

chore: Version Packages #431

Merged

coderabbitai bot mentioned this pull request Oct 15, 2025

feat: Update backend to use ESM instead of CommonJS #680

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Upgrade Vitest to 3.0.3 and Vite to 6.0.11 (and associated dependencies) #430

feat: Upgrade Vitest to 3.0.3 and Vite to 6.0.11 (and associated dependencies) #430

Uh oh!

kingston commented Jan 23, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

linear bot commented Jan 23, 2025

Uh oh!

changeset-bot bot commented Jan 23, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 23, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: Upgrade Vitest to 3.0.3 and Vite to 6.0.11 (and associated dependencies) #430

feat: Upgrade Vitest to 3.0.3 and Vite to 6.0.11 (and associated dependencies) #430

Uh oh!

Conversation

kingston commented Jan 23, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

linear bot commented Jan 23, 2025

Uh oh!

changeset-bot bot commented Jan 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Jan 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kingston commented Jan 23, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Jan 23, 2025 •

edited

Loading

coderabbitai bot commented Jan 23, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)