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

@@ -0,0 +1 @@
+auto-install-peers=false

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",

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",

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",

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,

tsconfig.browser.json

@@ -5,7 +5,7 @@
 		"module": "es2022",
 		"moduleResolution": "bundler",
 		"target": "es2022",
-		"jsx": "react",
+		"jsx": "react-jsx",
 		"noEmitOnError": true,
 	},
 }