refactor: migrate from CRA to Vite and improve testing #636

samhvw8 · 2025-01-29T14:17:27Z

Replace Create React App with Vite build system
Add ESLint configuration and improve TypeScript types Create VSCode UI component mocks for better testing Update test files with proper async handling
Add Tailwind CSS integration
Fix accessibility by adding ARIA roles

Description

This Pr will make DX better, with faster build time and add support tailwind

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Checklist:

My code follows the patterns of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation

Additional context

Related Issues

Reviewers

Important

Migrated build system from CRA to Vite, integrated Tailwind CSS, improved testing and linting, and enhanced accessibility.

Build System:
- Migrated from Create React App to Vite in vite.config.mts.
- Removed config-overrides.js and build-react-no-split.js.
- Updated package.json scripts to use Vite.
Styling:
- Integrated Tailwind CSS in index.css and vite.config.mts.
Testing:
- Updated test files for async handling and added mocks in __mocks__ directory.
- Configured Jest in package.json for better test environment.
Linting:
- Added ESLint configuration in .eslintrc.json with TypeScript and React rules.
Accessibility:
- Added ARIA roles in HistoryView.tsx and other components.
Miscellaneous:
- Updated ClineProvider.ts to use new asset paths for styles and scripts.
- Removed unused files like react-app-env.d.ts and reportWebVitals.ts.

^{This description was created by}^{for 12dd546. It will automatically update as commits are pushed.}

Replace Create React App with Vite build system Add ESLint configuration and improve TypeScript types Create VSCode UI component mocks for better testing Update test files with proper async handling Add Tailwind CSS integration Fix accessibility by adding ARIA roles

changeset-bot · 2025-01-29T14:17:31Z

⚠️ No Changeset found

Latest commit: 6db3ecf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

webview-ui/index.html

mrubens · 2025-01-29T14:21:25Z

@cte do you have any thoughts on this one?

- Add recommended TypeScript ESLint rules and configurations - Configure explicit function return types and member accessibility - Add environment settings for Node.js and ES2021 - Update parser options and ignore patterns - Add --quiet flag to lint commands to reduce noise

cte · 2025-01-29T18:58:27Z

@cte do you have any thoughts on this one?

Big +1 from me on the direction here.

hannesrudolph · 2025-01-30T02:47:46Z

Wow this is big!

cte · 2025-01-30T16:19:24Z

.eslintrc.json

I don't have strong opinions about which linter rules we want enabled, but in this branch there are 51 problems when you run npm run lint. We should probably add a lint job or step to https://github.com/RooVetGit/Roo-Code/blob/main/.github/workflows/code-qa.yml.

@mrubens @cte Should we add to code-qa.yml it into another pr your or in this pr ?

I can take care of it as a follow-up.

cte · 2025-01-30T16:21:43Z

package.json

 		"compile-tests": "tsc -p . --outDir out",
 		"install:all": "npm install && cd webview-ui && npm install",
-		"lint": "eslint src --ext ts && npm run lint --prefix webview-ui",
+		"lint": "eslint src --ext ts --quiet && npm run lint --prefix webview-ui",


There seem to be a ton of warnings, so I can see why we'd add --quiet, but ideally we should treat everything as an error and fix or disable the current warnings (not urgent; I can take care of it as a follow-up).

There seem to be a ton of warnings, so I can see why we'd add --quiet, but ideally we should treat everything as an error and fix or disable the current warnings.

@cte i agree with you about this, but if i do that it will has a ton of change in this PR, this pr i want to just setting it up, and another PR to fix the eslint warning & error

cte · 2025-01-30T16:30:09Z

webview-ui/src/components/chat/BrowserSessionRow.tsx

I'm not 100% sure how these changes are related to the rest of the PR...

this is eslint error & tsserver error when i change to vite

cte

This looks great @samhvw8 - I can't wait to start improving the UX!

samhvw8 requested review from ColemanRoo, mrubens and stea9499 as code owners January 29, 2025 14:17

mrubens reviewed Jan 29, 2025

View reviewed changes

webview-ui/index.html Outdated Show resolved Hide resolved

Roo Cline -> Roo Code

43bcfe3

samhvw8 added 2 commits January 29, 2025 21:35

update css variable for shadcn component

477daf8

mrubens requested a review from cte January 30, 2025 02:49

cte reviewed Jan 30, 2025

View reviewed changes

cte approved these changes Jan 30, 2025

View reviewed changes

mrubens merged commit 886070d into RooCodeInc:main Jan 30, 2025
4 checks passed

refactor: migrate from CRA to Vite and improve testing #636

refactor: migrate from CRA to Vite and improve testing #636

Uh oh!

Conversation

samhvw8 commented Jan 29, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Checklist:

Additional context

Related Issues

Reviewers

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

Uh oh!

mrubens commented Jan 29, 2025

Uh oh!

cte commented Jan 29, 2025

Uh oh!

hannesrudolph commented Jan 30, 2025

Uh oh!

cte Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

samhvw8 Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cte Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

cte Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samhvw8 Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cte Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

samhvw8 Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

cte left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

samhvw8 commented Jan 29, 2025 •

edited by ellipsis-dev bot

Loading

changeset-bot bot commented Jan 29, 2025 •

edited

Loading

samhvw8 Jan 30, 2025 •

edited

Loading

cte Jan 30, 2025 •

edited

Loading

samhvw8 Jan 30, 2025 •

edited

Loading