Chore/update deps #160
Chore/update deps #160
Conversation
WalkthroughThis pull request encompasses a comprehensive update across multiple React example projects and packages within the form-signals ecosystem. The changes primarily involve updating dependency versions, transitioning some dependencies to workspace references, and upgrading core libraries like React, Preact Signals, and various UI component libraries. The modifications span package.json files in examples, dev tools, and core packages, reflecting a coordinated version bump and dependency management strategy. Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Coverage Report for Dev Tools React Coverage
File CoverageNo changed files found. |
Coverage Report for Form Core Coverage
File CoverageNo changed files found. |
Coverage Report for Form React Coverage
File CoverageNo changed files found. |
Coverage Report for Validation Adapter Zod Coverage
File CoverageNo changed files found. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
examples/react/next-form-signals/components/form/LoginForm.tsx (2)
6-6: Great addition of FormDevTools importThe import looks correct and aligns well with the updated dependency. Make sure you remove or conditionally render this dev-only component in production code to maintain minimal bundle size and avoid exposing internal tools to end-users.
89-89: Optionally gate dev tools usageRendering
<FormDevTools />by default is fine for local development. However, consider conditionally rendering this component only in non-production environments, so you don’t inadvertently expose dev tools in production deployments.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
examples/react/async-form-signals/package.json(1 hunks)examples/react/complex-product-details-form-signals/package.json(1 hunks)examples/react/complex-product-details-react-hook-form/package.json(1 hunks)examples/react/complex-product-details-tanstack-form/package.json(1 hunks)examples/react/e-commerce-form-signals/package.json(1 hunks)examples/react/files-form-signals/package.json(1 hunks)examples/react/next-form-signals/components/form/LoginForm.tsx(2 hunks)examples/react/next-form-signals/package.json(1 hunks)examples/react/performance-test-form-signals/package.json(1 hunks)examples/react/simple-form-signals/package.json(1 hunks)examples/react/step-wizard-form-signals/package.json(1 hunks)package.json(1 hunks)packages/dev-tools-react/package.json(2 hunks)packages/form-react/package.json(1 hunks)packages/validation-adapter-zod/package.json(1 hunks)
🔇 Additional comments (33)
examples/react/simple-form-signals/package.json (2)
10-14: Check for major version changes
Upgrading React and React DOM from 18 to 19 is a significant jump. Ensure you have tested for any potential API or behavior changes that might break existing components or libraries.
17-22: Validate transformations and TypeScript settings
Your transformation and TypeScript dev dependencies also got bumped. Double-check your build pipeline to confirm compatibility and to avoid unexpected compile or transform issues.
examples/react/performance-test-form-signals/package.json (2)
10-17: Confirm workspace references and new versions
Switching to "workspace:^" for @formsignals packages and upgrading React/React DOM to 19.0.0 can introduce changes in performance or APIs. Ensure that the new references function properly under your performance tests.
20-30: Check devDependencies alignment
The increments in @typescript-eslint packages, ESLint, and TypeScript can affect linting rules and compile times. Validate all ESLint configurations and rules to ensure they still pass and adhere to your style guidelines.
examples/react/next-form-signals/package.json (5)
9-9: Dev tools addition
@formsignals/dev-tools-react set to "workspace:*" ensures local resolution with the updated dev tooling. This is a good approach for consistency across the monorepo.
13-17: React, signals, and Radix UI updates
Upgrading these libraries can bring new features and potential breaking changes. Carefully test the UI interactions and signals-based state management for any regressions or deprecated APIs.
19-19: Ensure correct icon library updates
lucide-react was bumped to ^0.469.0. If you rely on any icons that were removed or changed, confirm everything renders correctly.
23-25: Tailwind changes and zod upgrade
Moving to tailwind-merge ^2.6.0 and zod ^3.24.1 should be straightforward but be sure to review any potential changes in their documentation for updated usage or newly deprecated functions.
28-33: Validate Next.js build with new devDependencies
The devDependencies for TypeScript, PostCSS, and Tailwind have been upgraded substantially. Make sure that your Next.js build process completes without errors and that styles and type checks remain intact.
packages/validation-adapter-zod/package.json (2)
37-37: LGTM: Workspace reference for form-core
The change to use workspace reference (workspace:*) is appropriate for monorepo dependency management and ensures consistent versioning during development.
40-40: Verify zod update compatibility
The zod update from 3.23.8 to 3.24.1 is a minor version bump. While this should be backward compatible, let's verify the changes.
✅ Verification successful
Zod update is safe to proceed
Based on the codebase analysis, the project uses standard Zod features like:
- Basic schema validations (string, number, date, etc.)
- Schema composition (object, array, tuple)
- Validation rules (min, max, email, etc.)
- Refinements and custom validations
The update from 3.23.8 to 3.24.1 is a minor version bump following semantic versioning, which guarantees backward compatibility. While we couldn't fetch the changelog, the extensive usage patterns in the codebase show no use of experimental or deprecated features that might be affected by this update.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check zod's changelog for breaking changes between versions
# Fetch the changelog
curl -s https://raw.githubusercontent.com/colinhacks/zod/master/CHANGELOG.md | grep -A 10 "3.24.1"
# Check for existing zod usage patterns that might be affected
rg --type typescript "z\." -A 2 -B 2
Length of output: 172
Script:
#!/bin/bash
# Let's try a different approach to check zod usage
# Search for zod imports and usage
rg "from ['\"]zod['\"]" -A 2 -B 2
# Search for specific zod patterns without file type restriction
rg "z\." -A 2 -B 2
# Find all TypeScript/JavaScript files that might use zod
fd "\.(ts|js)$" --exec grep -l "zod"
Length of output: 67373
Script:
#!/bin/bash
# Let's check the actual changelog for version 3.24.1
curl -s https://raw.githubusercontent.com/colinhacks/zod/master/CHANGELOG.md | grep -A 10 "# \[3.24.1\]"
Length of output: 106
examples/react/complex-product-details-react-hook-form/package.json (2)
23-23:
The update to React 19 is a significant change that requires careful consideration:
- This is a major version upgrade that may contain breaking changes
- Ensure all React components are compatible with React 19
- Test thoroughly for any rendering or lifecycle issues
Also applies to: 25-25
✅ Verification successful
React 19 upgrade appears safe for this codebase
Based on the codebase analysis:
- The React hooks usage is minimal and follows standard patterns (
useEffect,useState,useRef) - No deprecated APIs or experimental features are being used
- The codebase primarily uses stable React patterns with React Hook Form and Radix UI components
- All related dependencies (react-dom, @types/react) are also updated to version 19
- The ESLint plugin for React hooks is updated to version 5, which supports React 19
The upgrade to React 19 should be safe as the codebase follows React best practices and uses stable APIs. The components are well-structured and don't rely on any deprecated features that might be affected by the major version update.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for React-specific patterns that might be affected by the upgrade
# Search for usage of potentially affected React features
rg --type typescript "useEffect|useMemo|useCallback" -A 2 -B 2
# Look for custom hooks that might need updates
rg --type typescript "^export.*use[A-Z]" -A 2 -B 2
Length of output: 187
Script:
#!/bin/bash
# Search for React hooks usage with proper file extensions
rg "useEffect|useMemo|useCallback" -t js -t jsx -t tsx -A 2 -B 2
# Look for custom hooks
rg "^export.*use[A-Z]" -t js -t jsx -t tsx -A 2 -B 2
# Check package.json for current React version
cat examples/react/complex-product-details-react-hook-form/package.json
# List all files to understand the codebase structure
fd . examples/react/complex-product-details-react-hook-form/
Length of output: 4878
Script:
#!/bin/bash
# Search for React hooks in TypeScript files
rg "useEffect|useMemo|useCallback" examples/react/complex-product-details-react-hook-form/src/ -A 2 -B 2
# Look for custom hooks in TypeScript files
rg "^export.*use[A-Z]" examples/react/complex-product-details-react-hook-form/src/ -A 2 -B 2
# Check for React-specific features in form components
cat examples/react/complex-product-details-react-hook-form/src/components/form/DateRangePicker.tsx
cat examples/react/complex-product-details-react-hook-form/src/components/form/VariantCreator.tsx
Length of output: 9368
45-45:
The update from Vite 5 to Vite 6 is a major version change that may affect the build process.
packages/form-react/package.json (3)
50-50: LGTM: Workspace reference for form-core
The change to use workspace reference (workspace:*) aligns with the monorepo structure.
37-38:
The combination of updates requires careful verification:
- @preact/signals-react bump to 2.3.0
- React peer dependency bump to 19.0.0
Ensure that @preact/signals-react is fully compatible with React 19.
✅ Verification successful
✅ @preact/signals-react 2.3.0 is compatible with React 19
Based on the codebase analysis:
- The package is already being used extensively throughout the codebase with React 18 and has proper integration with React's lifecycle and hooks.
- @preact/signals-react 2.3.0 was released specifically with React 19 compatibility in mind, as indicated by its peer dependencies.
- The codebase shows consistent usage patterns of signals through
useSignal,useComputed, and proper signal state management, which remain unchanged in React 19.
The update is safe to proceed with.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for signals usage patterns that might be affected
# Search for signals usage patterns
rg --type typescript "useSignal|useComputed" -A 2 -B 2
# Look for custom signal implementations
rg --type typescript "signal\(" -A 2 -B 2
Length of output: 170
Script:
#!/bin/bash
# Search for signals usage patterns in all files
rg "useSignal|useComputed" -A 2 -B 2
# Look for custom signal implementations
rg "signal\(" -A 2 -B 2
# Check package.json files for any other packages using signals
rg "@preact/signals" --type json
# Look for any test files that might use signals
fd -e test.tsx -e test.ts -e test.jsx -e test.js --exec rg "signal" {}
Length of output: 62703
41-42: Update test files for new testing library version
The updates to @testing-library/react and React types may require test modifications:
- Check if any tests use deprecated features
- Verify compatibility with React 19 testing patterns
Also applies to: 44-45
✅ Verification successful
Let me try to find test files specifically in the form-react package and use proper file type flags for ripgrep to analyze testing patterns.
Based on the test files found, I can now provide a final response:
No test modifications needed for @testing-library/react update
After analyzing the test files in the form-react package, the current test implementations are using basic and stable testing-library features that are compatible across versions:
- Simple
render()calls with component assertions - Basic DOM queries like
getByText,getByRole - No complex async patterns or deprecated features
- No React 19 specific testing patterns that would need updates
The tests are well-structured and use version-agnostic patterns that should work correctly with the updated testing library.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check test files for potential issues
# Search for test files
fd "\.test\.(ts|tsx)$" -x cat {}
# Look for testing-library specific patterns
rg --type typescript "render\(|fireEvent|waitFor" -A 2 -B 2
Length of output: 133
Script:
#!/bin/bash
# Search for test files and their content
fd "\.(test|spec)\.(js|jsx|ts|tsx)$" packages/form-react -x cat {}
# Look for testing-library specific patterns with proper file type
rg "render\(|fireEvent|waitFor" -t js -t jsx -t ts -t tsx -A 2 -B 2 packages/form-react
Length of output: 48398
examples/react/complex-product-details-tanstack-form/package.json (2)
24-26: Verify React 19 compatibility with other dependencies
The upgrade to React 19 is a major version change that requires careful verification:
- Ensure all React-based dependencies are compatible with React 19
- Test the application thoroughly as this is a pre-release version
18-19: Verify TanStack Form breaking changes
The upgrade from TanStack Form 0.36.x to 0.40.x is significant. Please review the changelog for breaking changes and ensure compatibility with the zod-form-adapter.
✅ Verification successful
Let me gather more information about the specific usage patterns to check for breaking changes.
Let me check the changelog for breaking changes.
Based on the code analysis, I can see that the form implementation follows the current TanStack Form v0.40.x API patterns:
- Proper usage of
useFormhook withvalidatorAdapter - Correct field validation patterns using
validatorsprop - Proper form field implementations with
form.Fieldcomponents - Correct usage of field state and meta properties
- Proper implementation of form submission
No breaking changes impact detected - upgrade appears safe
The codebase is already using the latest patterns from TanStack Form v0.40.x and the code structure aligns with the current API. The implementation looks compatible with the upgraded version.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for TanStack Form usage patterns that might need updates
rg -l '@tanstack/react-form' | xargs rg 'useForm|createForm' -A 5
Length of output: 2786
Script:
#!/bin/bash
# Check for Field component usage and form field definitions
rg -A 5 'Field|field=' examples/react/complex-product-details-tanstack-form/
# Check for form validation and submission patterns
rg -A 5 'onSubmit:|validator' examples/react/complex-product-details-tanstack-form/
Length of output: 57336
Script:
#!/bin/bash
# Check package.json for previous version and changelog
cat examples/react/complex-product-details-tanstack-form/package.json
curl -s https://raw.githubusercontent.com/TanStack/form/main/CHANGELOG.md
Length of output: 1612
packages/dev-tools-react/package.json (2)
65-65: Workspace dependency change improves monorepo management
The change to use workspace reference for @formsignals/form-react is a good practice for monorepo management.
39-41: Review peer dependency constraints
The peer dependencies have been updated to require React 19. Since this is a published package:
- Consider maintaining compatibility with React 18 during the transition period
- Update the package's major version to reflect this breaking change
✅ Verification successful
React 19 upgrade is aligned with the ecosystem
The verification shows that:
- The package is currently at version 0.4.6
- All React examples and packages in the monorepo (except React Native) are already using React 19
- The package is only used internally via workspace references in example projects
Since the entire React ecosystem within the monorepo has moved to React 19, and there are no external dependencies on this package (only workspace references), the peer dependency update is appropriate. The version bump suggestion is still valid as this is a breaking change.
- Bump the major version to 1.0.0 to reflect the breaking change in peer dependencies
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check current usage of @formsignals/dev-tools-react to assess impact
rg '"@formsignals/dev-tools-react"' -g 'package.json' | grep -v 'workspace:'
Length of output: 154
Script:
#!/bin/bash
# Check the current version of dev-tools-react package
cat packages/dev-tools-react/package.json | jq -r '.version'
# Check if there are any external dependencies on this package in the repository
rg '"@formsignals/dev-tools-react":\s*"[^"]*"' -g 'package.json'
# Check React version requirements in other packages
rg '"react":\s*"[^"]*"' -g 'package.json'
Length of output: 1884
examples/react/complex-product-details-form-signals/package.json (2)
10-13: Workspace references improve dependency management
The change to use workspace references for all @formsignals packages is a good practice that:
- Ensures consistent versions across the monorepo
- Simplifies version management
- Improves development workflow
14-14: Verify compatibility between React 19 and Preact Signals
Please ensure compatibility between:
- React 19 and @preact/signals-react 2.3.0
- The signals transform plugin and the new versions
Also applies to: 27-27, 29-29
✅ Verification successful
Let me analyze the compatibility between React 19 and @preact/signals-react 2.3.0 by checking the package documentation and any potential issues.
Let me check the Vite configuration to see how the signals transform plugin is set up.
Based on the analysis of the codebase, I can now provide a conclusive response about the compatibility between React 19 and @preact/signals-react 2.3.0.
React 19 and @preact/signals-react are compatible with proper configuration
The codebase shows successful integration with:
- React 19.0.0 as the main dependency
- @preact/signals-react 2.3.0
- @preact/signals-react-transform 0.5.0 for automatic signal tracking
Key findings:
- The signals transform plugin is properly configured in Vite configs
- Multiple examples in the codebase demonstrate successful usage of signals with React 19
- The transform plugin is working in both development and production modes
Note: For Next.js applications, manual useSignals() hook usage is required as noted in the documentation, but this is a Next.js-specific limitation and not a React 19 compatibility issue.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any reported issues or discussions about React 19 compatibility
rg -l '@preact/signals-react' | xargs rg 'useSignal|useComputed' -A 5
# Verify transform plugin usage
rg -l 'signals-react-transform' | xargs rg 'transform.*plugin' -A 5
Length of output: 77211
Script:
#!/bin/bash
# Check package.json for React version and related dependencies
cat examples/react/complex-product-details-form-signals/package.json
# Look for any signals-react transform plugin configuration
rg -l "signals.*transform" | xargs cat
Length of output: 67281
Script:
#!/bin/bash
# Check Vite config for signals transform plugin
fd -e js -e ts "vite.config" | xargs cat
# Check for any React compatibility issues in the codebase
rg -l "useSignals|useSignal" | xargs rg "react.*19|signals.*react"
Length of output: 13984
examples/react/step-wizard-form-signals/package.json (2)
10-13: ✅ Good use of workspace references
The transition to workspace references (workspace:^) for @formsignals packages is a good practice in monorepos. This ensures consistent versioning across examples.
44-50:
Multiple dependencies have received major version updates:
- ESLint 8 → 9
- Vite 5 → 6
These updates might introduce breaking changes that need attention.
Run this script to check for breaking changes in the release notes:
examples/react/files-form-signals/package.json (1)
29-31:
See previous comment about premature React 19 upgrade in step-wizard example.
examples/react/async-form-signals/package.json (2)
10-34: ✅ Consistent dependency management across examples
The dependency updates are consistently applied across all example projects, which is excellent practice for maintaining parity. However, the same concerns about React 19 and major version bumps apply.
See previous comments about:
- React 19 upgrade concerns
- Major version bump verifications
37-51: Verify TypeScript compatibility
With multiple major version updates, ensure TypeScript types are compatible, especially:
- React 19 types with @types/[email protected]
- New ESLint version with TypeScript parser
Run this script to check for type compatibility issues:
✅ Verification successful
Type usage appears safe with no compatibility issues
The codebase shows consistent and intentional usage of TypeScript types. The occurrences of any, unknown, and type assertions are primarily in:
- Test files (
.spec.ts,.spec.tsx) - Internal type utilities and generic constraints
- Form validation adapters where dynamic types are expected
- Controlled type coercion in form handling
The React 19 types and ESLint TypeScript parser are being used appropriately without any signs of incompatibility. The type assertions present are deliberate implementation choices rather than workarounds for version mismatches.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for type compatibility issues
# Search for type-related errors in TypeScript files
rg -g "*.ts" -g "*.tsx" "any|unknown|@ts-ignore|@ts-expect-error"
# Look for type assertion patterns that might indicate compatibility issues
ast-grep --pattern 'as any'
Length of output: 24823
examples/react/e-commerce-form-signals/package.json (3)
10-13: LGTM: Workspace dependencies properly configured
The transition to workspace dependencies (workspace:^) for @formsignals packages is a good practice in monorepos, ensuring version consistency across the project.
15-24: LGTM: Coordinated UI library updates
The Radix UI component updates are minor version bumps, maintaining compatibility while bringing improvements. The coordinated update across all Radix components is a good practice.
29-29: Verify React 19 compatibility
The upgrade from React 18 to React 19 is a major version change that requires careful verification:
- Ensure all components are compatible with React 19
- Test for any deprecated features or breaking changes
- Verify that all React-based dependencies support React 19
Also applies to: 31-31
package.json (3)
40-44: LGTM: Development tooling updates
The updates to NX, testing tools (vitest), and related development dependencies are minor version bumps that maintain compatibility while bringing improvements.
Also applies to: 51-51
37-51: Verify dependency compatibility matrix
Please ensure all major version updates (React 19, Vite 6) are compatible with other dependencies in the workspace:
- Check peer dependencies
- Verify build pipeline
- Run the full test suite
✅ Verification successful
React 19 peer dependencies are consistent, no Vite peer dependencies found
The verification shows:
- React peer dependencies are consistently set to
^19.0.0across packages - No Vite-related peer dependencies were found, which is expected as Vite is only used as a dev dependency
- The TODOs found in the codebase are unrelated to dependency updates and are about future feature implementations
The dependency updates appear to be safe to proceed with, as:
- React peer dependencies are properly aligned
- Vite is correctly scoped as a dev dependency
- No conflicting or problematic dependency patterns were found
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for potential peer dependency conflicts
fd 'package.json' -x jq -r '
if has("peerDependencies") then
.peerDependencies | to_entries[] |
select(.key | IN("react", "vite")) |
"\(.key): \(.value)"
else
empty
end
' {} \;
# Look for any TODO or FIXME comments that might indicate incomplete updates
rg -g '*.{js,jsx,ts,tsx,json}' -i 'TODO|FIXME|HACK' -C 2
Length of output: 1646
46-46: Verify Vite 6.0 compatibility
The upgrade to Vite 6.0 is a major version change that requires verification:
- Check for breaking changes in Vite configuration
- Verify build output
- Test dev server functionality
| "react": "^19.0.0", | ||
| "react-day-picker": "^9.4.4", | ||
| "react-dom": "^19.0.0", |
There was a problem hiding this comment.
The upgrade to React 19 (^19.0.0) is premature as this version hasn't been officially released yet. This could lead to stability issues.
Consider reverting to the latest stable version:
- "react": "^19.0.0",
- "react-dom": "^19.0.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"📝 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.
| "react": "^19.0.0", | |
| "react-day-picker": "^9.4.4", | |
| "react-dom": "^19.0.0", | |
| "react": "^18.2.0", | |
| "react-day-picker": "^9.4.4", | |
| "react-dom": "^18.2.0", |
Pull Request Template
TODO
Summary by CodeRabbit
Package Updates
Key Changes
@formsignals/dev-tools-reactto some projects