chore: modernize toolchain to Vite, Vitest, and Biome - #69
Conversation
Replace deprecated TSDX with modern build tools: - Vite for faster builds and better DX - Vitest for lightning-fast testing with React Testing Library - Biome for unified linting and formatting - TypeScript 5 for latest type features - React 18 with new JSX transform - Husky 9 for git hooks All tests passing with improved coverage and better test assertions.
|
Warning Rate limit exceeded@hideokamoto has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 14 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (13)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Summary of ChangesHello @hideokamoto, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request undertakes a significant modernization of the project's development toolchain. By replacing the deprecated TSDX with a contemporary stack including Vite, Vitest, and Biome, the project benefits from faster builds, enhanced testing capabilities, and automated code quality enforcement. These updates collectively aim to improve developer experience, maintainability, and ensure the project leverages the latest advancements in the JavaScript ecosystem. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is an excellent modernization of the project's toolchain. Migrating from the deprecated TSDX to Vite, Vitest, and Biome brings significant improvements in build speed, testing, and developer experience. The configuration for the new tools is well-structured, and the updates to package.json and tsconfig.json are thorough. The test suite has been significantly improved with more comprehensive and modern tests using React Testing Library. I've left a couple of minor suggestions to fix a typo and further align the new tests with best practices, but overall this is a fantastic update.
| throw new Error('unsuported type' + t); | ||
| default: { | ||
| const t: never = color; | ||
| throw new Error(`unsuported type${t}`); |
There was a problem hiding this comment.
There's a typo in the error message (unsuported). Also, consider adding a space after type for better readability.
| throw new Error(`unsuported type${t}`); | |
| throw new Error(`unsupported type: ${t}`); |
| const { container } = render( | ||
| <GitHubRibbon href="https://github.com/test/repo" /> | ||
| ); | ||
| const link = container.querySelector('a'); | ||
| expect(link?.href).toBe('https://github.com/test/repo'); |
There was a problem hiding this comment.
Great job on improving the tests! To align further with React Testing Library's best practices, it's recommended to use queries from screen instead of container.querySelector. This encourages testing from a user's perspective. This same feedback applies to the other tests in this file that use container.
For example, this test can be rewritten as follows:
| const { container } = render( | |
| <GitHubRibbon href="https://github.com/test/repo" /> | |
| ); | |
| const link = container.querySelector('a'); | |
| expect(link?.href).toBe('https://github.com/test/repo'); | |
| render(<GitHubRibbon href="https://github.com/test/repo" />); | |
| const link = screen.getByRole('link'); | |
| expect(link).toHaveAttribute('href', 'https://github.com/test/repo'); |
Update CI workflow with modern tooling and best practices: - actions/checkout@v2 → v4 - actions/setup-node@v1 → v4 with built-in caching - Node.js 12 → matrix build on 18.x, 20.x, 22.x - yarn → npm for consistency - Add coverage reporting with Vitest v8 provider - Add test:coverage script - Exclude example and config files from coverage - Trigger on push/PR to main/master branches Coverage: 87.71% on src/index.tsx
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
2 participants
Replace deprecated TSDX with modern build tools:
All tests passing with improved coverage and better test assertions.