TGUI: Replaces babel & terser (#6196)

<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->

# About the pull request
Replaces tgui build tools with faster alternatives.

There were some issues in build of components using hooks which do not
exist, which I removed as well. This is not a required part of the PR
but React does not use these

Based on two PRs: 
[Esbuild](tgstation/tgstation#79916)
[SWC](tgstation/tgstation#80310)

<!-- Remove this text and explain what the purpose of your PR is.

Mention if you have tested your changes. If you changed a map, make sure
you used the mapmerge tool.
If this is an Issue Correction, you can type "Fixes Issue #169420" to
link the PR to the corresponding Issue number #169420.

Remember: something that is self-evident to you might not be to others.
Explain your rationale fully, even if you feel it goes without saying.
-->

# Explain why it's good for the game
Faster build times
<!-- Please add a short description of why you think these changes would
benefit the game. If you can't justify it in words, it might not be
worth adding, and may discourage maintainers from reviewing or merging
your PR. This section is not strictly required for (non-controversial)
fix PRs or backend PRs. -->


# Testing Photographs and Procedure
<!-- Include any screenshots/videos/debugging steps of the modified code
functioning successfully, ideally including edge cases. -->


<!-- !! If you are modifying sprites, you **must** include one or more
in-game screenshots or videos of the new sprites. !! -->

<details>
<summary>Screenshots & Videos</summary>

Before
![Screenshot 2024-04-26
155554](https://github.com/cmss13-devs/cmss13/assets/42397676/5a48687e-dc6e-43d7-98d9-354bd3848ff6)

After
![Screenshot 2024-04-26
160516](https://github.com/cmss13-devs/cmss13/assets/42397676/b106ad86-25db-4403-b80a-29f4cd1ca38d)

</details>

tgui/.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "loose": true,
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    }
+  }
+}

tgui/jest.config.js

@@ -8,7 +8,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testRunner: require.resolve('jest-circus/runner'),
   transform: {
-    '^.+\\.(js|cjs|ts|tsx)$': require.resolve('babel-jest'),
+    '^.+\\.(js|cjs|ts|tsx)$': require.resolve('@swc/jest'),
   },
   moduleFileExtensions: ['js', 'cjs', 'ts', 'tsx', 'json'],
   resetMocks: true,

tgui/package.json

@@ -20,24 +20,16 @@
     "tgui:tsc": "tsc"
   },
   "dependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/eslint-parser": "^7.15.0",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/plugin-transform-jscript": "^7.14.5",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.15.0",
+    "@swc/core": "^1.5.0",
+    "@swc/jest": "^0.2.36",
     "@types/jest": "^27.0.1",
     "@types/jsdom": "^16.2.13",
     "@types/node": "^14.17.9",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.2",
     "@typescript-eslint/parser": "^4.29.1",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "common": "workspace:*",
     "css-loader": "^5.2.7",
+    "esbuild-loader": "^4.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-radar": "^0.2.1",
@@ -52,7 +44,7 @@
     "sass": "^1.37.5",
     "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.4",
+    "swc-loader": "^0.2.6",
     "typescript": "^4.9.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",

tgui/packages/tgui/components/Button.jsx

@@ -5,7 +5,7 @@
  */
 
 import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from 'common/keycodes';
-import { classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
 import { Component, createRef } from 'react';
 import { createLogger } from '../logging';
 import { Box, computeBoxClassName, computeBoxProps } from './Box';
@@ -134,8 +134,6 @@ export const Button = (props) => {
   return buttonContent;
 };
 
-Button.defaultHooks = pureComponentHooks;
-
 export const ButtonCheckbox = (props) => {
   const { checked, ...rest } = props;
   return (

tgui/packages/tgui/components/Chart.jsx

@@ -5,7 +5,6 @@
  */
 
 import { map, zipWith } from 'common/collections';
-import { pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'react';
 import { Box } from './Box';
 
@@ -117,8 +116,6 @@ class LineChart extends Component {
   }
 }
 
-LineChart.defaultHooks = pureComponentHooks;
-
 const Stub = (props) => null;
 
 // IE8: No inline svg support

tgui/packages/tgui/components/ColorBox.jsx

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const ColorBox = (props) => {
@@ -27,5 +27,3 @@ export const ColorBox = (props) => {
     </div>
   );
 };
-
-ColorBox.defaultHooks = pureComponentHooks;

tgui/packages/tgui/components/DraggableControl.jsx

@@ -5,7 +5,6 @@
  */
 
 import { clamp } from 'common/math';
-import { pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'react';
 import { AnimatedNumber } from './AnimatedNumber';
 
@@ -276,7 +275,6 @@ export class DraggableControl extends Component {
   }
 }
 
-DraggableControl.defaultHooks = pureComponentHooks;
 DraggableControl.defaultProps = {
   minValue: -Infinity,
   maxValue: +Infinity,

tgui/packages/tgui/components/Grid.jsx

@@ -5,7 +5,6 @@
  */
 
 import { Table } from './Table';
-import { pureComponentHooks } from 'common/react';
 
 /** @deprecated */
 export const Grid = (props) => {
@@ -17,8 +16,6 @@ export const Grid = (props) => {
   );
 };
 
-Grid.defaultHooks = pureComponentHooks;
-
 /** @deprecated */
 export const GridColumn = (props) => {
   const { size = 1, style, ...rest } = props;
@@ -33,6 +30,4 @@ export const GridColumn = (props) => {
   );
 };
 
-Grid.defaultHooks = pureComponentHooks;
-
 Grid.Column = GridColumn;

tgui/packages/tgui/components/Icon.jsx

@@ -6,7 +6,7 @@
  * @license MIT
  */
 
-import { classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 const FA_OUTLINE_REGEX = /-o$/;
@@ -55,8 +55,6 @@ export const Icon = (props) => {
   );
 };
 
-Icon.defaultHooks = pureComponentHooks;
-
 export const IconStack = (props) => {
   const { className, children, ...rest } = props;
   return (

tgui/packages/tgui/components/NoticeBox.jsx

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
 import { Box } from './Box';
 
 export const NoticeBox = (props) => {
@@ -23,5 +23,3 @@ export const NoticeBox = (props) => {
     />
   );
 };
-
-NoticeBox.defaultHooks = pureComponentHooks;

tgui/packages/tgui/components/Table.jsx

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const Table = (props) => {
@@ -23,8 +23,6 @@ export const Table = (props) => {
   );
 };
 
-Table.defaultHooks = pureComponentHooks;
-
 export const TableRow = (props) => {
   const { className, header, ...rest } = props;
   return (
@@ -40,8 +38,6 @@ export const TableRow = (props) => {
   );
 };
 
-TableRow.defaultHooks = pureComponentHooks;
-
 export const TableCell = (props) => {
   const { className, collapsing, header, ...rest } = props;
   return (
@@ -58,7 +54,5 @@ export const TableCell = (props) => {
   );
 };
 
-TableCell.defaultHooks = pureComponentHooks;
-
 Table.Row = TableRow;
 Table.Cell = TableCell;

tgui/webpack.config.js

@@ -7,7 +7,6 @@
 const webpack = require('webpack');
 const path = require('path');
 const ExtractCssPlugin = require('mini-css-extract-plugin');
-const { createBabelConfig } = require('./babel.config.js');
 
 const createStats = (verbose) => ({
   assets: verbose,
@@ -33,18 +32,9 @@ module.exports = (env = {}, argv) => {
     context: path.resolve(__dirname),
     target: ['web', 'es3', 'browserslist:ie 8'],
     entry: {
-      'tgui': [
-        './packages/tgui-polyfill',
-        './packages/tgui',
-      ],
-      'tgui-panel': [
-        './packages/tgui-polyfill',
-        './packages/tgui-panel',
-      ],
-      'tgui-say': [
-        './packages/tgui-polyfill',
-        './packages/tgui-say',
-      ],
+      'tgui': ['./packages/tgui-polyfill', './packages/tgui'],
+      'tgui-panel': ['./packages/tgui-polyfill', './packages/tgui-panel'],
+      'tgui-say': ['./packages/tgui-polyfill', './packages/tgui-say'],
     },
     output: {
       path: argv.useTmpFolder
@@ -61,13 +51,10 @@ module.exports = (env = {}, argv) => {
     module: {
       rules: [
         {
-          test: /\.(js|jsx|cjs|ts|tsx)$/,
+          test: /\.([tj]s(x)?|cjs)$/,
           use: [
             {
-              loader: require.resolve('babel-loader'),
-              options: createBabelConfig({
-                removeConsole: !bench,
-              }),
+              loader: require.resolve('swc-loader'),
             },
           ],
         },
@@ -143,17 +130,11 @@ module.exports = (env = {}, argv) => {
 
   // Production build specific options
   if (mode === 'production') {
-    const TerserPlugin = require('terser-webpack-plugin');
+    const { EsbuildPlugin } = require('esbuild-loader');
     config.optimization.minimizer = [
-      new TerserPlugin({
-        extractComments: false,
-        terserOptions: {
-          ie8: true,
-          output: {
-            ascii_only: true,
-            comments: false,
-          },
-        },
+      new EsbuildPlugin({
+        target: 'ie8',
+        css: true,
       }),
     ];
   }