Proposal for switching desktop-client to vite (actualbudget#2084)

* Proof of concept for switching desktop-client to vite * Fix other packages ts tests issues * Update jsx tests to use vitest instead of jest * Inject our global shims properly * Add comment regarding new plugin * Cleanup unnessary change after rebase * Fix inter fonts pathing * Remove manual chunks sizes for now Just set the limit higher * Bring back size compare * Suppress victory warnings * Remove craco config now that it's not used * Add vite basic ssl plugin - This autogenerates self-signed certs in dev mode when HTTPS env is set - Made to match the CRA behaviour * Add release note * Remove warning suppression for victory - Updated to a rollup version that includes the fix
FlorianLang06 · Jan 11, 2024 · e22233f · e22233f
1 parent c17a1be
commit e22233f
Show file tree

Hide file tree

Showing 16 changed files with 1,388 additions and 5,220 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -44,6 +44,9 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: { project: [path.join(__dirname, './tsconfig.json')] },
   reportUnusedDisableDirectives: true,
+  globals: {
+    globalThis: false,
+  },
   rules: {
     'prettier/prettier': 'warn',
 

diff --git a/.github/workflows/size-compare.yml b/.github/workflows/size-compare.yml
@@ -66,11 +66,11 @@ jobs:
         run: |
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./head/*.json
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./base/*.json
-      - uses: github/webpack-bundlesize-compare-action@v1.8.2
+      - uses: twk3/rollup-size-compare-action@v1.0.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          current-stats-json-path: ./head/desktop-client-stats.json
-          base-stats-json-path: ./base/desktop-client-stats.json
+          current-stats-json-path: ./head/web-stats.json
+          base-stats-json-path: ./base/web-stats.json
           title: desktop-client
 
       - uses: github/[email protected]

diff --git a/packages/desktop-client/.gitignore b/packages/desktop-client/.gitignore
@@ -10,11 +10,13 @@ test-results
 # production
 build
 build-stats
+stats.json
 
 # misc
 .DS_Store
 .env
 npm-debug.log
+.swc
 
 *kcab.*
 public/kcab

diff --git a/packages/desktop-client/bin/build-browser b/packages/desktop-client/bin/build-browser
@@ -8,12 +8,11 @@ echo "Building the browser..."
 rm -fr build
 
 export IS_GENERIC_BROWSER=1
-export INLINE_RUNTIME_CHUNK=false
 export REACT_APP_BACKEND_WORKER_HASH=`ls "$ROOT"/../public/kcab/kcab.worker.*.js |  sed 's/.*kcab\.worker\.\(.*\)\.js/\1/'`
 
 yarn build
 
 rm -fr build-stats
 mkdir build-stats
 mv build/kcab/stats.json build-stats/loot-core-stats.json
-mv build/stats.json build-stats/desktop-client-stats.json
+mv ./stats.json build-stats/web-stats.json
diff --git a/packages/desktop-client/craco.config.ts b/packages/desktop-client/craco.config.ts
diff --git a/packages/desktop-client/public/index.html → packages/desktop-client/index.html b/packages/desktop-client/public/index.html → packages/desktop-client/index.html
@@ -8,25 +8,25 @@
     />
     <title>Actual</title>
     <link rel="canonical" href="/" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/apple-touch-icon.png"
+      href="/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicon-32x32.png"
+      href="/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicon-16x16.png"
+      href="/favicon-16x16.png"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" crossorigin="use-credentials"/>
+    <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials"/>
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
 
@@ -102,5 +102,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -6,8 +6,6 @@
     "build"
   ],
   "devDependencies": {
-    "@craco/craco": "^7.1.0",
-    "@craco/types": "^7.1.0",
     "@juggle/resize-observer": "^3.1.2",
     "@playwright/test": "^1.37.1",
     "@reach/listbox": "^0.18.0",
@@ -16,9 +14,11 @@
     "@react-aria/utils": "^3.19.0",
     "@react-stately/collections": "^3.10.0",
     "@react-stately/list": "^3.9.1",
+    "@rollup/plugin-inject": "^5.0.5",
     "@svgr/cli": "^8.0.1",
     "@swc/core": "^1.3.82",
     "@swc/helpers": "^0.5.1",
+    "@swc/plugin-remove-console": "^1.5.105",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/react": "^18.2.0",
@@ -28,6 +28,8 @@
     "@types/uuid": "^9.0.2",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@use-gesture/react": "^10.3.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.2",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
     "date-fns": "^2.29.3",
@@ -41,7 +43,7 @@
     "jest-watch-typeahead": "^2.2.2",
     "mdast-util-newline-to-break": "^2.0.0",
     "memoize-one": "^6.0.0",
-    "pikaday": "1.8.0",
+    "pikaday": "1.8.2",
     "react": "18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -52,30 +54,33 @@
     "react-modal": "3.16.1",
     "react-redux": "7.2.1",
     "react-router-dom": "6.11.2",
-    "react-scripts": "^5.0.1",
     "react-simple-pull-to-refresh": "^1.3.3",
     "react-spring": "^9.7.1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "recharts": "^2.8.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "remark-gfm": "^3.0.1",
+    "rollup-plugin-visualizer": "^5.11.0",
     "sass": "^1.63.6",
     "swc-loader": "^0.2.3",
     "terser-webpack-plugin": "^5.3.9",
     "uuid": "^9.0.0",
     "victory": "^36.6.8",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.0.4",
     "webpack-bundle-analyzer": "^4.9.1",
     "xml2js": "^0.6.2"
   },
   "scripts": {
-    "start": "cross-env PORT=3001 craco start",
+    "start": "cross-env PORT=3001 vite",
     "start:browser": "cross-env ./bin/watch-browser",
     "watch": "cross-env BROWSER=none yarn start",
-    "build": "cross-env INLINE_RUNTIME_CHUNK=false craco build",
+    "build": "vite build",
     "build:browser": "cross-env ./bin/build-browser",
     "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --template template.ts --index-template index-template.ts --typescript --expand-props start -d . .",
-    "test": "craco test",
+    "test": "vitest",
     "e2e": "npx playwright test --browser=chromium",
     "vrt": "cross-env VRT=true npx playwright test --browser=chromium"
   }

diff --git a/packages/desktop-client/src/build-shims.js b/packages/desktop-client/src/build-shims.js
@@ -0,0 +1,14 @@
+const global = globalThis || this || self;
+
+const process = {
+  env: {
+    ...import.meta.env,
+    NODE_ENV: import.meta.env.MODE,
+    PUBLIC_URL: import.meta.env.BASE_URL.slice(0, -1),
+  },
+};
+
+// eslint-disable-next-line import/no-unused-modules
+export { process };
+// eslint-disable-next-line import/no-unused-modules
+export { global };
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -366,7 +366,7 @@ const TransactionHeader = memo(
         />
         {showBalance && <Cell value="Balance" width={88} textAlign="right" />}
         {showCleared && <Field width={23} truncate={false} />}
-        <Cell value="" width={5 + scrollWidth ?? 0} />
+        <Cell value="" width={5 + (scrollWidth ?? 0)} />
       </Row>
     );
   },

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx
@@ -25,8 +25,8 @@ import { ResponsiveProvider } from '../../ResponsiveProvider';
 
 import { SplitsExpandedProvider, TransactionTable } from './TransactionsTable';
 
-jest.mock('loot-core/src/platform/client/fetch');
-jest.mock('../../hooks/useFeatureFlag', () => jest.fn().mockReturnValue(false));
+vi.mock('loot-core/src/platform/client/fetch');
+vi.mock('../../hooks/useFeatureFlag', () => vi.fn().mockReturnValue(false));
 
 const accounts = [generateAccount('Bank of America')];
 const payees = [

diff --git a/packages/desktop-client/src/fonts.scss b/packages/desktop-client/src/fonts.scss
@@ -1,2 +1,4 @@
-@use '~inter-ui/variable';
+@use 'inter-ui/variable' with (
+  $inter-font-path: '../../../node_modules/inter-ui/Inter (web)'
+);
 @include variable.default;
diff --git a/packages/desktop-client/src/setupTests.js → packages/desktop-client/src/setupTests.jsx b/packages/desktop-client/src/setupTests.js → packages/desktop-client/src/setupTests.jsx
@@ -7,11 +7,15 @@ installPolyfills();
 global.IS_TESTING = true;
 global.Actual = {};
 
-jest.mock(
+vi.mock(
   'react-virtualized-auto-sizer',
-  () =>
-    ({ children }) =>
-      children({ height: 1000, width: 600 }),
+  () => ({
+    default: (props) => {
+      return (
+        props.children({height: 1000, width: 600})
+      );
+    }
+  })
 );
 
 global.Date.now = () => 123456789;