Webpack + SWC Loader (#1650)

* desktopc-client swc-loader

* More swc

* Jest swc + upgrades

* Revert @swc/jest usage for now

* SWC minify

* Remove setupFilesAfterEnv in package.json as per warning message in CI

* Release notes

* Minify on CI

* swc helpers in loot-core

* @swc/jest

* Upgrade webpack

* Add @swc/core to crdt

* Use yarn cache in github actions

* Cleanup

* Fix electron

* Revert "Fix electron"

This reverts commit 787af1980648fa30788a1d1678dcda534716f31d.

* Revert action.yml cache changes

---------

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

packages/crdt/jest.config.js

 module.exports = {
-  preset: 'ts-jest/presets/js-with-ts-esm',
   testEnvironment: 'node',
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
 };

packages/crdt/package.json

@@ -20,10 +20,11 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@swc/core": "^1.3.82",
+    "@swc/jest": "^0.2.29",
     "@types/jest": "^27.5.0",
     "@types/uuid": "^9.0.2",
     "jest": "^27.0.0",
-    "ts-jest": "^27.0.0",
     "ts-protoc-gen": "^0.15.0",
     "typescript": "^5.0.2"
   }

packages/desktop-client/.swcrc

+{
+  "jsc": {
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
+    "externalHelpers": true,
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    }
+  }
+}

packages/desktop-client/config-overrides.js

-const path = require('path');
-
-const chokidar = require('chokidar');
-const {
-  addWebpackPlugin,
-  addWebpackResolve,
-  babelInclude,
-  override,
-  overrideDevServer,
-} = require('customize-cra');
-const { IgnorePlugin } = require('webpack');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-if (process.env.CI) {
-  process.env.DISABLE_ESLINT_PLUGIN = 'true';
-}
-
-// Forward Netlify env variables
-if (process.env.REVIEW_ID) {
-  process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
-}
-
-module.exports = {
-  webpack: override(
-    babelInclude([path.resolve('src'), path.resolve('../loot-core')]),
-    addWebpackResolve({
-      extensions: [
-        ...(process.env.IS_GENERIC_BROWSER
-          ? ['.browser.js', '.browser.ts', '.browser.tsx']
-          : []),
-        '.web.js',
-        '.web.ts',
-        '.web.tsx',
-        '.js',
-        '.ts',
-        '.tsx',
-      ],
-    }),
-    addWebpackPlugin(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'disabled',
-        generateStatsFile: true,
-      }),
-    ),
-    // Pikaday throws a warning if Moment.js is not installed however it doesn't
-    // actually require it to be installed. As we don't use Moment.js ourselves
-    // then we can just silence this warning.
-    addWebpackPlugin(
-      new IgnorePlugin({
-        contextRegExp: /pikaday$/,
-        resourceRegExp: /moment$/,
-      }),
-    ),
-  ),
-  devServer: overrideDevServer(config => {
-    return {
-      ...config,
-      onBeforeSetupMiddleware(server) {
-        chokidar
-          .watch([
-            path.resolve('../loot-core/lib-dist/*.js'),
-            path.resolve('../loot-core/lib-dist/browser/*.js'),
-          ])
-          .on('all', function () {
-            for (const ws of server.webSocketServer.clients) {
-              ws.send(JSON.stringify({ type: 'static-changed' }));
-            }
-          });
-      },
-      headers: {
-        ...config.headers,
-        'Cross-Origin-Opener-Policy': 'same-origin',
-        'Cross-Origin-Embedder-Policy': 'require-corp',
-      },
-    };
-  }),
-};

packages/desktop-client/craco.config.ts

+const path = require('path');
+
+const {
+  loaderByName,
+  removeLoaders,
+  addAfterLoader,
+  addPlugins,
+} = require('@craco/craco');
+const chokidar = require('chokidar');
+const TerserPlugin = require('terser-webpack-plugin');
+const { IgnorePlugin } = require('webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+if (process.env.CI) {
+  process.env.DISABLE_ESLINT_PLUGIN = 'true';
+}
+
+// Forward Netlify env variables
+if (process.env.REVIEW_ID) {
+  process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
+}
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      webpackConfig.mode =
+        process.env.NODE_ENV === 'development' ? 'development' : 'production';
+
+      // swc-loader
+      addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
+        test: /\.m?[tj]sx?$/,
+        exclude: /node_modules/,
+        loader: require.resolve('swc-loader'),
+      });
+
+      // remove the babel loaders
+      removeLoaders(webpackConfig, loaderByName('babel-loader'));
+
+      addPlugins(webpackConfig, [
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'disabled',
+          generateStatsFile: true,
+        }),
+        // Pikaday throws a warning if Moment.js is not installed however it doesn't
+        // actually require it to be installed. As we don't use Moment.js ourselves
+        // then we can just silence this warning.
+        new IgnorePlugin({
+          contextRegExp: /pikaday$/,
+          resourceRegExp: /moment$/,
+        }),
+      ]);
+
+      webpackConfig.resolve.extensions = [
+        '.web.js',
+        '.web.jsx',
+        '.web.ts',
+        '.web.tsx',
+        '.js',
+        '.jsx',
+        '.ts',
+        '.tsx',
+        ...webpackConfig.resolve.extensions,
+      ];
+
+      if (process.env.IS_GENERIC_BROWSER) {
+        webpackConfig.resolve.extensions = [
+          '.browser.js',
+          '.browser.jsx',
+          '.browser.ts',
+          '.browser.tsx',
+          ...webpackConfig.resolve.extensions,
+        ];
+      }
+
+      webpackConfig.optimization = {
+        ...webpackConfig.optimization,
+        minimize:
+          process.env.CI === 'true' || process.env.NODE_ENV !== 'development',
+        minimizer: [
+          new TerserPlugin({
+            minify: TerserPlugin.swcMinify,
+            // `terserOptions` options will be passed to `swc` (`@swc/core`)
+            // Link to options - https://swc.rs/docs/config-js-minify
+            terserOptions: {
+              compress: false,
+              mangle: true,
+            },
+          }),
+        ],
+      };
+
+      return webpackConfig;
+    },
+  },
+  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
+    devServerConfig.onBeforeSetupMiddleware = server => {
+      chokidar
+        .watch([
+          path.resolve('../loot-core/lib-dist/*.js'),
+          path.resolve('../loot-core/lib-dist/browser/*.js'),
+        ])
+        .on('all', function () {
+          for (const ws of server.webSocketServer.clients) {
+            ws.send(JSON.stringify({ type: 'static-changed' }));
+          }
+        });
+    };
+    devServerConfig.headers = {
+      ...devServerConfig.headers,
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    };
+
+    return devServerConfig;
+  },
+};

packages/desktop-client/package.json

@@ -6,6 +6,8 @@
     "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",
@@ -15,6 +17,8 @@
     "@react-stately/collections": "^3.10.0",
     "@react-stately/list": "^3.9.1",
     "@svgr/cli": "^8.0.1",
+    "@swc/core": "^1.3.82",
+    "@swc/helpers": "^0.5.1",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/react": "^18.2.0",
@@ -26,7 +30,6 @@
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
-    "customize-cra": "^1.0.0",
     "date-fns": "^2.29.3",
     "debounce": "^1.2.0",
     "downshift": "7.6.0",
@@ -40,7 +43,6 @@
     "memoize-one": "^6.0.0",
     "pikaday": "1.8.0",
     "react": "18.2.0",
-    "react-app-rewired": "^2.2.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
@@ -57,25 +59,22 @@
     "redux-thunk": "^2.3.0",
     "remark-gfm": "^3.0.1",
     "sass": "^1.63.6",
+    "swc-loader": "^0.2.3",
+    "terser-webpack-plugin": "^5.3.9",
     "uuid": "^9.0.0",
     "victory": "^36.6.8",
-    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-bundle-analyzer": "^4.9.1",
     "xml2js": "^0.6.2"
   },
   "scripts": {
-    "start": "cross-env PORT=3001 react-app-rewired start",
+    "start": "cross-env PORT=3001 craco start",
     "start:browser": "cross-env ./bin/watch-browser",
     "watch": "cross-env BROWSER=none yarn start",
-    "build": "cross-env INLINE_RUNTIME_CHUNK=false react-app-rewired build",
+    "build": "cross-env INLINE_RUNTIME_CHUNK=false craco build",
     "build:browser": "cross-env ./bin/build-browser",
     "generate:icons": "rm src/icons/*/*.js; cd src/icons && svgr --expand-props start --ext js -d . .",
-    "test": "react-app-rewired test",
+    "test": "craco test",
     "e2e": "npx playwright test --browser=chromium",
     "vrt": "cross-env VRT=true npx playwright test --browser=chromium"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js"
-    ]
   }
 }

packages/loot-core/.babelrc

-{
-  "presets": [
-    ["@babel/preset-env", { "bugfixes": true }],
-    "@babel/preset-typescript"
-  ]
-}

packages/loot-core/.swcrc

+{
+  "jsc": {
+    "target": "es2022",
+    "externalHelpers": true,
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    }
+  }
+}

packages/loot-core/jest.config.js

 module.exports = {
-  preset: 'ts-jest/presets/js-with-ts-esm',
   moduleFileExtensions: [
     'testing.js',
     'testing.ts',
@@ -21,5 +20,6 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/'],
   transform: {
     '\\.pegjs$': '<rootDir>/peg-transform.mjs',
+    '^.+\\.(t|j)sx?$': '@swc/jest',
   },
 };

packages/loot-core/jest.web.config.js

 module.exports = {
-  preset: 'ts-jest/presets/js-with-ts-esm',
   moduleFileExtensions: [
     'testing.js',
     'testing.ts',
@@ -18,5 +17,6 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/(?!absurd-sql)'],
   transform: {
     '\\.pegjs$': '<rootDir>/peg-transform.mjs',
+    '^.+\\.(t|j)sx?$': '@swc/jest',
   },
 };

packages/loot-core/package.json

@@ -16,7 +16,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@babel/register": "^7.22.5",
     "@jlongster/sql.js": "^1.6.7",
     "@rschedule/core": "^1.2.0",
     "@rschedule/ical-tools": "^1.2.0",
@@ -44,19 +43,18 @@
   "devDependencies": {
     "@actual-app/api": "*",
     "@actual-app/crdt": "*",
-    "@babel/core": "~7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@swc/core": "^1.3.82",
+    "@swc/helpers": "^0.5.1",
+    "@swc/jest": "^0.2.29",
     "@types/better-sqlite3": "^7.6.4",
     "@types/jest": "^27.5.0",
     "@types/jlongster__sql.js": "npm:@types/sql.js@latest",
     "@types/pegjs": "^0.10.3",
     "@types/react-redux": "^7.1.25",
     "@types/uuid": "^9.0.2",
-    "@types/webpack": "^5.28.0",
+    "@types/webpack": "^5.28.2",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "adm-zip": "^0.5.9",
-    "babel-loader": "^9.1.2",
     "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
     "date-fns": "^2.29.3",
@@ -73,14 +71,15 @@
     "slash": "3.0.0",
     "snapshot-diff": "^0.10.0",
     "source-map": "^0.7.3",
+    "swc-loader": "^0.2.3",
+    "terser-webpack-plugin": "^5.3.9",
     "throttleit": "^1.0.0",
-    "ts-jest": "^27.0.0",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.4",
     "uuid": "^9.0.0",
-    "webpack": "^5.86.0",
-    "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-cli": "^5.1.3",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-cli": "^5.1.4",
     "ws": "^4.1.0",
     "yargs": "^9.0.1"
   }

packages/loot-core/webpack/webpack.browser.config.js

 let path = require('path');
 
+const TerserPlugin = require('terser-webpack-plugin');
 let webpack = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
@@ -51,14 +52,9 @@ module.exports = {
     rules: [
       {
         test: /\.m?[tj]sx?$/,
+        exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              ['@babel/preset-env', { bugfixes: true }],
-              '@babel/preset-typescript',
-            ],
-          },
+          loader: 'swc-loader',
         },
       },
       {
@@ -69,6 +65,19 @@ module.exports = {
   },
   optimization: {
     chunkIds: 'named',
+    minimize:
+      process.env.CI === 'true' || process.env.NODE_ENV !== 'development',
+    minimizer: [
+      new TerserPlugin({
+        minify: TerserPlugin.swcMinify,
+        // `terserOptions` options will be passed to `swc` (`@swc/core`)
+        // Link to options - https://swc.rs/docs/config-js-minify
+        terserOptions: {
+          compress: false,
+          mangle: true,
+        },
+      }),
+    ],
   },
   plugins: [
     new webpack.DefinePlugin({

tsconfig.json

@@ -7,7 +7,7 @@
   "compilerOptions": {
     // "composite": true,
     "target": "ES2022",
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
@@ -24,7 +24,7 @@
     // Used for temp builds
     "outDir": "build",
     "moduleResolution": "Node",
-    "module": "ESNext",
+    "module": "ES2022",
     // Until/if we build using tsc
     "noEmit": true
   },

upcoming-release-notes/1650.md

+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use swc-loader.