From ebb93ada9453b08ff6f836cbf129bb8b41c1bdb7 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Thu, 8 Feb 2024 03:02:35 +0100
Subject: [PATCH] Replace babel and ts-loader with swc

Build and minify the Web UI using swc instead of babel, tsc and terser.
This results in a significant speedup of the build process as it skips
checking types and uses native code to do the minification.

To prevent accidental type errors being introduced the TypeScript
compiler is still used to perform type checking on the Web UI files.

Due to peer dependency resolving shenanigans the swc/core package had to
be added to the workspace, controller and web_ui to avoid pnpm creating
a duplicate install of webpack that break the build.
---
 .npmrc                            |  1 +
 package.json                      |  1 +
 packages/controller/package.json  |  1 +
 packages/web_ui/package.json      |  6 ++---
 packages/web_ui/webpack.common.js | 45 ++++++++++++++++++++-----------
 tsconfig.browser.json             |  2 +-
 6 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 .npmrc

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..f301fedf
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=false
diff --git a/package.json b/package.json
index 336edd58..fbf50444 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
 		"@clusterio/ctl": "workspace:*",
 		"@clusterio/host": "workspace:*",
 		"@clusterio/lib": "workspace:*",
+		"@swc/core": "^1.4.0",
 		"@typescript-eslint/eslint-plugin": "^6.4.1",
 		"@typescript-eslint/parser": "^6.4.1",
 		"eslint": "^8.45.0",
diff --git a/packages/controller/package.json b/packages/controller/package.json
index 7446edbd..97fd5f36 100644
--- a/packages/controller/package.json
+++ b/packages/controller/package.json
@@ -36,6 +36,7 @@
 	},
 	"devDependencies": {
 		"@clusterio/web_ui": "^2.0.0-alpha.16",
+		"@swc/core": "^1.4.0",
 		"@types/busboy": "^1.5.0",
 		"@types/compression": "^1.7.2",
 		"@types/express": "^4.17.17",
diff --git a/packages/web_ui/package.json b/packages/web_ui/package.json
index fb77d82d..a1f2575a 100644
--- a/packages/web_ui/package.json
+++ b/packages/web_ui/package.json
@@ -17,12 +17,10 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "^5.1.4",
-		"@babel/core": "^7.22.9",
-		"@babel/preset-react": "^7.22.5",
 		"@clusterio/lib": "^2.0.0-alpha.16",
+		"@swc/core": "^1.4.0",
 		"antd": "^5.13.0",
 		"assert": "^2.0.0",
-		"babel-loader": "^9.1.3",
 		"browserify-zlib": "^0.2.0",
 		"buffer": "^6.0.3",
 		"clean-webpack-plugin": "^4.0.0",
@@ -39,8 +37,8 @@
 		"react-router-dom": "^6.14.2",
 		"stream-browserify": "^3.0.0",
 		"style-loader": "^3.3.3",
+		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.9",
-		"ts-loader": "^9.4.4",
 		"typescript": "^5.1.6",
 		"util": "^0.12.5",
 		"webpack": "^5.88.2",
diff --git a/packages/web_ui/webpack.common.js b/packages/web_ui/webpack.common.js
index 99825c4b..73cae8e8 100644
--- a/packages/web_ui/webpack.common.js
+++ b/packages/web_ui/webpack.common.js
@@ -65,32 +65,47 @@ module.exports = (env = {}) => ({
 					},
 				],
 			},
-			{
-				test: /\.js$/,
-				resolve: {
-					// XXX Required due to bug in babel-runtime
-					// see: https://github.com/babel/babel/issues/12058
-					fullySpecified: false,
-				},
-			},
 			{
 				test: /\.tsx?$/,
 				exclude: /node_modules/,
 				use: {
-					loader: require.resolve("ts-loader"),
+					loader: require.resolve("swc-loader"),
 					options: {
-						configFile: "tsconfig.browser.json",
-						projectReferences: true,
+						sourceMaps: true,
+						jsc: {
+							parser: {
+								syntax: "typescript",
+								tsx: true,
+							},
+							target: "es2022",
+							transform: {
+								react: {
+									runtime: "automatic",
+								},
+							},
+						},
 					},
 				},
 			},
 			{
-				test: /\.jsx$/,
+				test: /\.jsx?$/,
 				exclude: /node_modules/,
 				use: {
-					loader: require.resolve("babel-loader"),
+					loader: require.resolve("swc-loader"),
 					options: {
-						presets: [require.resolve("@babel/preset-react")],
+						sourceMaps: true,
+						jsc: {
+							parser: {
+								syntax: "ecmascript",
+								jsx: true,
+							},
+							target: "es2022",
+							transform: {
+								react: {
+									runtime: "automatic",
+								},
+							},
+						},
 					},
 				},
 			},
@@ -123,10 +138,10 @@ module.exports = (env = {}) => ({
 		moduleIds: "deterministic",
 		minimizer: [
 			new TerserPlugin({
+				minify: TerserPlugin.swcMinify,
 				terserOptions: {
 					compress: {
 						keep_classnames: true,
-						passes: 2,
 					},
 					mangle: {
 						keep_classnames: true,
diff --git a/tsconfig.browser.json b/tsconfig.browser.json
index 7edb5691..605c2c61 100644
--- a/tsconfig.browser.json
+++ b/tsconfig.browser.json
@@ -5,7 +5,7 @@
 		"module": "es2022",
 		"moduleResolution": "bundler",
 		"target": "es2022",
-		"jsx": "react",
+		"jsx": "react-jsx",
 		"noEmitOnError": true,
 	},
 }