TGUI updates (#496)

* tgui: replace prettierx with prettier (#14722)

Co-authored-by: jlsnow301 <[email protected]>

* Update Cargo.jsx

* Update SettingsPanel.jsx

* Update ClanMenu.jsx

* Replaces babel with swc (#14720)

* tgui: sort imports (#14723)

Co-authored-by: jlsnow301 <[email protected]>

* Update MechStatPane.tsx

* hmm

* Fix CI deprecation warns (#14724)

* Update index.tsx

* mhm

* mhm

---------

Co-authored-by: vvvv-vvvv <[email protected]>
Co-authored-by: jlsnow301 <[email protected]>
Co-authored-by: Jeremiah <[email protected]>

.github/workflows/ci_suite.yml

@@ -14,12 +14,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Restore SpacemanDMM cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: $HOME/SpacemanDMM
           key: ${{ runner.os }}-spacemandmm
       - name: Restore Yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: tgui/.yarn/cache
           key: ${{ runner.os }}-yarn-${{ secrets.CACHE_PURGE_KEY }}
@@ -54,7 +54,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Restore BYOND cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: $HOME/BYOND
           key: ${{ runner.os }}-byond
@@ -79,7 +79,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Setup cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: $HOME/BYOND
           key: ${{ runner.os }}-byond

.vscode/settings.json

@@ -0,0 +1,43 @@
+{
+	"eslint.nodePath": "./tgui/.yarn/sdks",
+	"eslint.workingDirectories": ["./tgui"],
+	"prettier.prettierPath": "./tgui/.yarn/sdks/prettier/index.cjs",
+	"typescript.tsdk": "./tgui/.yarn/sdks/typescript/lib",
+	"typescript.enablePromptUseWorkspaceTsdk": true,
+	"search.exclude": {
+		"**/.yarn": true,
+		"**/.pnp.*": true
+	},
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+	"files.eol": "\n",
+	"gitlens.advanced.blame.customArguments": ["-w"],
+	"tgstationTestExplorer.project.resultsType": "json",
+	"[javascript]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[javascriptreact]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[typescript]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[typescriptreact]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[scss]": {
+		"editor.rulers": [80],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"tgstationTestExplorer.project.DMEName": "tgmc.dme"
+}

tgui/.eslintignore

@@ -3,4 +3,12 @@
 /**/*.bundle.*
 /**/*.chunk.*
 /**/*.hot-update.*
-
+**.lock
+**.log
+**.json
+**.svg
+**.scss
+**.md
+**.css
+**.txt
+**.woff2

tgui/.eslintrc.yml

@@ -11,9 +11,9 @@ env:
   browser: true
   node: true
 plugins:
-  - radar
   - react
   - unused-imports
+  - simple-import-sort
 settings:
   react:
     version: '16.10'
@@ -764,3 +764,6 @@ rules:
   ## Prevents the use of unused imports.
   ## This could be done by enabling no-unused-vars, but we're doing this for now
   unused-imports/no-unused-imports: error
+  ## https://github.com/lydell/eslint-plugin-simple-import-sort/
+  simple-import-sort/imports: error
+  simple-import-sort/exports: error

tgui/.prettierrc.yml

@@ -1,15 +1 @@
-arrowParens: always
-breakLongMethodChains: true
-endOfLine: lf
-importFormatting: oneline
-jsxBracketSameLine: true
-jsxSingleQuote: false
-offsetTernaryExpressions: true
-printWidth: 80
-proseWrap: preserve
-quoteProps: preserve
-semi: true
 singleQuote: true
-tabWidth: 2
-trailingComma: es5
-useTabs: false

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/.yarn/sdks/eslint/package.json

@@ -2,5 +2,8 @@
   "name": "eslint",
   "version": "7.32.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  }
 }

tgui/.yarn/sdks/prettier/bin/prettier.cjs

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = absRequire(`prettier/bin/prettier.cjs`);

tgui/.yarn/sdks/prettier/index.js → tgui/.yarn/sdks/prettier/index.cjs

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require prettier/index.js
+    // Setup the environment to be able to require prettier
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real prettier/index.js your application uses
-module.exports = absRequire(`prettier/index.js`);
+// Defer to the real prettier your application uses
+module.exports = absRequire(`prettier`);

tgui/.yarn/sdks/prettier/package.json

@@ -1,6 +1,7 @@
 {
   "name": "prettier",
-  "version": "0.19.0-sdk",
-  "main": "./index.js",
-  "type": "commonjs"
+  "version": "3.1.0-sdk",
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
 }

tgui/.yarn/sdks/typescript/lib/tsserver.js

@@ -109,6 +109,8 @@ const moduleWrapper = tsserver => {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 

tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -109,6 +109,8 @@ const moduleWrapper = tsserver => {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 

tgui/.yarn/sdks/typescript/lib/typescript.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);

tgui/.yarn/sdks/typescript/package.json

@@ -2,5 +2,9 @@
   "name": "typescript",
   "version": "4.9.4-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }

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

@@ -12,48 +12,40 @@
     "tgui:build": "BROWSERSLIST_IGNORE_OLD_DATA=true webpack",
     "tgui:dev": "node --experimental-modules packages/tgui-dev-server/index.js",
     "tgui:lint": "eslint packages --ext .js,.cjs,.ts,.tsx",
-    "tgui:prettier": "prettierx --check .",
+    "tgui:prettier": "prettier --check .",
     "tgui:sonar": "eslint packages --ext .js,.cjs,.ts,.tsx -c .eslintrc-sonar.yml",
     "tgui:test": "jest --watch",
     "tgui:test-simple": "CI=true jest --color",
     "tgui:test-ci": "CI=true jest --color --collect-coverage",
     "tgui:tsc": "tsc"
   },
   "dependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/plugin-transform-jscript": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@swc/core": "^1.3.101",
+    "@swc/jest": "^0.2.29",
     "@types/jest": "^29.5.10",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^14.x",
     "@types/webpack": "^5.28.5",
     "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/parser": "^5.62.0",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "common": "workspace:*",
+    "@typescript-eslint/parser": "^6.14.0",
     "css-loader": "^6.8.1",
     "esbuild-loader": "^4.0.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-radar": "^0.2.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-unused-imports": "^1.1.5",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "file-loader": "^6.2.0",
     "jest": "^29.7.0",
     "jest-circus": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "npm:[email protected].0",
+    "prettier": "^3.1.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
+    "swc-loader": "^0.2.3",
     "typescript": "^4.9.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0",

tgui/packages/common/collections.ts

@@ -32,12 +32,12 @@ export const filter =
   };
 
 type MapFunction = {
-  <T, U>(iterateeFn: (value: T, index: number, collection: T[]) => U): (
-    collection: T[]
-  ) => U[];
+  <T, U>(
+    iterateeFn: (value: T, index: number, collection: T[]) => U,
+  ): (collection: T[]) => U[];
 
   <T, U, K extends string | number>(
-    iterateeFn: (value: T, index: K, collection: Record<K, T>) => U
+    iterateeFn: (value: T, index: K, collection: Record<K, T>) => U,
   ): (collection: Record<K, T>) => U[];
 };
 
@@ -75,7 +75,7 @@ export const map: MapFunction =
  */
 export const filterMap = <T, U>(
   collection: T[],
-  iterateeFn: (value: T) => U | undefined
+  iterateeFn: (value: T) => U | undefined,
 ): U[] => {
   const finalCollection: U[] = [];
 
@@ -261,7 +261,7 @@ export const zipWith =
 const binarySearch = <T, U = unknown>(
   getKey: (value: T) => U,
   collection: readonly T[],
-  inserting: T
+  inserting: T,
 ): number => {
   if (collection.length === 0) {
     return 0;