github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-07-10 23:54:00 -05:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

[PR #2084] [MERGED] Proposal for switching desktop-client to vite #101804

New Issue
Closed
opened 2026-05-29 23:44:47 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-05-29 23:44:47 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/2084
Author: @twk3
Created: 12/14/2023
Status: ✅ Merged
Merged: 1/11/2024
Merged by: @joel-jeremy

Base: master ← Head: poc-desktop-client-vite

📝 Commits (10+)

  • 163d993 Proof of concept for switching desktop-client to vite
  • 45a9e84 Fix other packages ts tests issues
  • 7bdf15c Update jsx tests to use vitest instead of jest
  • efd07ea Inject our global shims properly
  • 9bc57c3 Add comment regarding new plugin
  • 1db63b5 Cleanup unnessary change after rebase
  • 8f7dc94 Fix inter fonts pathing
  • 703f14b Remove manual chunks sizes for now
  • b8aaba8 Bring back size compare
  • bfda397 Suppress victory warnings

📊 Changes

16 files changed (+1388 additions, -5220 deletions)

View changed files

📝 .eslintrc.js (+3 -0)
📝 .github/workflows/size-compare.yml (+3 -3)
📝 packages/desktop-client/.gitignore (+2 -0)
📝 packages/desktop-client/bin/build-browser (+1 -2)
➖ packages/desktop-client/craco.config.ts (+0 -116)
📝 packages/desktop-client/index.html (+6 -5)
📝 packages/desktop-client/package.json (+12 -7)
➕ packages/desktop-client/src/build-shims.js (+14 -0)
📝 packages/desktop-client/src/components/transactions/TransactionsTable.jsx (+1 -1)
📝 packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx (+2 -2)
📝 packages/desktop-client/src/fonts.scss (+3 -1)
📝 packages/desktop-client/src/setupTests.jsx (+8 -4)
➕ packages/desktop-client/vite.config.mts (+165 -0)
📝 tsconfig.json (+1 -0)
➕ upcoming-release-notes/2084.md (+6 -0)
📝 yarn.lock (+1161 -5079)

📄 Description

Proposal for vite switch for https://github.com/actualbudget/actual/issues/656

Why we need to switch from CRA/craco

They appear to be deprecated, and not getting their dependencies updated. That's a problem because it makes it a lot more difficult to keep actual's dependencies up-to-date. It's currently difficult to update to the latest typescript as an example.

What we want

  • something low maintenance (no ejecting react-scripts, avoid manual config of all the skeleton dependencies)
  • something well maintained, and receiving dependency updates
  • minimal deviation from existing work to begin with (either drops in nicely, or has a piece-by-piece migration path)

Pros of vite

  • One of the most popular cra replacements (along with nextjs, and remix), and as a result actively maintained and updated.
  • Was very easy to swap in and get the dev instance working
  • quick dev watches as changed files get dynamically reloaded
  • Supports swc so we aren't changing quite as much
  • vitest is based on jest, and is close to a drop in replacement
  • Final bundle size is similar, (a bit smaller) than our existing

Cons of vite

  • Still changing, major version changes mean we will be making changes while it stabilizes
  • Swaps our bundler/minimizer (to rollup), and css handing (a con vs being able to stay in the webpack ecosystem as an iteration)
  • the swc plugin doesn't do minify (there is a swc-only plugin avail that does, but the one I'm using here is the official plugin, in order to maintain good compat with rollup/vite going forward)
  • The use of esbuild and rollup fragments our monorepo (which is still using webpack)
  • Their doesn't appear to be any good chunking plugins avail in as our filesize grows
  • Doesn't really offer us an iterative migration path
    -Will need to build our own custom transform for the github action size compare (as it only works for webpack). This is outputing the stats, but we don't have a consumer.
  • There are likely to be a ton of little edge cases broken that the tests aren't catching

Speed and size

  • desktop-client bundles are a MB or two smaller with vite.
  • Production bundle speeds are smiliar, currently vite is a second slower on my machine, but some extra times is caused by the shim plugins I have put in place to match more of our old behaviour. Without the env shim vite production builds are a second faster. Once this is merged and we know we aren't moving back to craco, we can remove the shims and adjust the code.
  • Dev server is way faster. Always less than half a second with vite. With webpack, first serve is about 3 seconds, first reload is about 13 (I don't know why), and then further reloads can be as low as half a second.
    • Timed used desktop client only, for webpack using timing info from stats.json
    • I did also do some test runs with filesystem cache turned on for webpack, but that didn't change the timings on my machine (I have lots of memory on my dev machine, so the in memory caching was probably working fine)
    • Other than that first reload our current webpack setup actually isn't slow. But vite feels instant, which makes sense, it's making the browser do all the work in this mode. The moment you save your file the browser basically starts loading the change.

PR details

Major changes

  • the dev server is sending modules direct to the browser for loading, no compiling involved in dev mode (very fast, but very different)
  • rollup instead of webpack, esbuild instead of swc for minification and css (swc is still being used for transformations)
  • vitest instead of jest
  • an incredible amount of dependency changes

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/2084 **Author:** [@twk3](https://github.com/twk3) **Created:** 12/14/2023 **Status:** ✅ Merged **Merged:** 1/11/2024 **Merged by:** [@joel-jeremy](https://github.com/joel-jeremy) **Base:** `master` ← **Head:** `poc-desktop-client-vite` --- ### 📝 Commits (10+) - [`163d993`](https://github.com/actualbudget/actual/commit/163d993284a1bca39ab03164738cf89f58880c88) Proof of concept for switching desktop-client to vite - [`45a9e84`](https://github.com/actualbudget/actual/commit/45a9e841b762037728daa9b4ddaf3c42d2298f3d) Fix other packages ts tests issues - [`7bdf15c`](https://github.com/actualbudget/actual/commit/7bdf15c355927e185932098f8c0568d597ce434f) Update jsx tests to use vitest instead of jest - [`efd07ea`](https://github.com/actualbudget/actual/commit/efd07ea797e37723e9de8d6899ba91c11c01d18e) Inject our global shims properly - [`9bc57c3`](https://github.com/actualbudget/actual/commit/9bc57c3ac2a366741da7e640e5f573f466ede5f0) Add comment regarding new plugin - [`1db63b5`](https://github.com/actualbudget/actual/commit/1db63b5e81d61023e2d493b8e9138a222178d323) Cleanup unnessary change after rebase - [`8f7dc94`](https://github.com/actualbudget/actual/commit/8f7dc942406dba03dca5f3161885dcd183e4d97a) Fix inter fonts pathing - [`703f14b`](https://github.com/actualbudget/actual/commit/703f14be28cd64c4f488df78c4afa326efb69666) Remove manual chunks sizes for now - [`b8aaba8`](https://github.com/actualbudget/actual/commit/b8aaba864857ae8c9ed3f4d4e42b856aed14936e) Bring back size compare - [`bfda397`](https://github.com/actualbudget/actual/commit/bfda3972587ae13f235e5aacbc882d0acad9f19d) Suppress victory warnings ### 📊 Changes **16 files changed** (+1388 additions, -5220 deletions) <details> <summary>View changed files</summary> 📝 `.eslintrc.js` (+3 -0) 📝 `.github/workflows/size-compare.yml` (+3 -3) 📝 `packages/desktop-client/.gitignore` (+2 -0) 📝 `packages/desktop-client/bin/build-browser` (+1 -2) ➖ `packages/desktop-client/craco.config.ts` (+0 -116) 📝 `packages/desktop-client/index.html` (+6 -5) 📝 `packages/desktop-client/package.json` (+12 -7) ➕ `packages/desktop-client/src/build-shims.js` (+14 -0) 📝 `packages/desktop-client/src/components/transactions/TransactionsTable.jsx` (+1 -1) 📝 `packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx` (+2 -2) 📝 `packages/desktop-client/src/fonts.scss` (+3 -1) 📝 `packages/desktop-client/src/setupTests.jsx` (+8 -4) ➕ `packages/desktop-client/vite.config.mts` (+165 -0) 📝 `tsconfig.json` (+1 -0) ➕ `upcoming-release-notes/2084.md` (+6 -0) 📝 `yarn.lock` (+1161 -5079) </details> ### 📄 Description Proposal for vite switch for https://github.com/actualbudget/actual/issues/656 ## Why we need to switch from CRA/craco They appear to be deprecated, and not getting their dependencies updated. That's a problem because it makes it a lot more difficult to keep actual's dependencies up-to-date. It's currently difficult to update to the latest typescript as an example. ## What we want - something low maintenance (no ejecting react-scripts, avoid manual config of all the skeleton dependencies) - something well maintained, and receiving dependency updates - minimal deviation from existing work to begin with (either drops in nicely, or has a piece-by-piece migration path) ## Pros of vite - One of the most popular cra replacements (along with nextjs, and remix), and as a result actively maintained and updated. - Was very easy to swap in and get the dev instance working - quick dev watches as changed files get dynamically reloaded - Supports swc so we aren't changing quite as much - vitest is based on jest, and is close to a drop in replacement - Final bundle size is similar, (a bit smaller) than our existing ## Cons of vite - Still changing, major version changes mean we will be making changes while it stabilizes - Swaps our bundler/minimizer (to rollup), and css handing (a con vs being able to stay in the webpack ecosystem as an iteration) - the swc plugin doesn't do minify (there is a swc-only plugin avail that does, but the one I'm using here is the official plugin, in order to maintain good compat with rollup/vite going forward) - The use of esbuild and rollup fragments our monorepo (which is still using webpack) - Their doesn't appear to be any good chunking plugins avail in as our filesize grows - Doesn't really offer us an iterative migration path -Will need to build our own custom transform for the github action size compare (as it only works for webpack). This is outputing the stats, but we don't have a consumer. - There are likely to be a ton of little edge cases broken that the tests aren't catching ## Speed and size - desktop-client bundles are a MB or two smaller with vite. - Production bundle speeds are smiliar, currently vite is a second slower on my machine, but some extra times is caused by the shim plugins I have put in place to match more of our old behaviour. Without the env shim vite production builds are a second faster. Once this is merged and we know we aren't moving back to craco, we can remove the shims and adjust the code. - Dev server is way faster. Always less than half a second with vite. With webpack, first serve is about 3 seconds, first reload is about 13 (I don't know why), and then further reloads can be as low as half a second. * Timed used desktop client only, for webpack using timing info from stats.json * I did also do some test runs with filesystem cache turned on for webpack, but that didn't change the timings on my machine (I have lots of memory on my dev machine, so the in memory caching was probably working fine) * Other than that first reload our current webpack setup actually isn't slow. But vite feels instant, which makes sense, it's making the browser do all the work in this mode. The moment you save your file the browser basically starts loading the change. ## PR details ### Major changes - the dev server is sending modules direct to the browser for loading, no compiling involved in dev mode (very fast, but very different) - rollup instead of webpack, esbuild instead of swc for minification and css (swc is still being used for transformations) - vitest instead of jest - an incredible amount of dependency changes --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-29 23:44:47 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
tech-support
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#101804
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?