Bump TGUI dependencies, updates tooling (ParadiseSS13#22410)

* bump deps to remove vulnerabilities

* new script who dis

* more changes to support it

* node 16

* node 18

* fixes CI

* prettier decided to do this

* stops the dev server exploding

* fixes dev server for real

.gitignore

@@ -25,6 +25,7 @@ stddef.dm
 .atom-build.json
 *.vscode/*
 !/.vscode/extensions.json
+!/.vscode/tasks.json
 
 # ignore DMI tool build cache
 /tools/dmitool/bin/

.vscode/extensions.json

@@ -6,6 +6,7 @@
 		"dbaeumer.vscode-eslint",
 		"eamodio.gitlens",
 		"usernamehw.errorlens",
-		"anturk.dmi-editor"
+		"anturk.dmi-editor",
+		"esbenp.prettier-vscode"
     ]
 }

.vscode/tasks.json

@@ -0,0 +1,54 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "dreammaker",
+			"dme": "paradise.dme",
+			"problemMatcher": [
+				"$dreammaker"
+			],
+			"group": "build",
+			"label": "dm: build - paradise.dme"
+		},
+		{
+			"type": "shell",
+			"command": "tgui/bin/tgui-build",
+			"windows": {
+				"command": ".\\tgui\\bin\\tgui-build.bat"
+			},
+			"problemMatcher": [
+				"$tsc",
+				"$eslint-stylish"
+			],
+			"group": "build",
+			"label": "tgui: build"
+		},
+		{
+			"type": "shell",
+			"command": "tgui/bin/tgui-dev-server",
+			"windows": {
+				"command": ".\\tgui\\bin\\tgui-dev-server.bat"
+			},
+			"problemMatcher": [
+				"$tsc",
+				"$eslint-stylish"
+			],
+			"group": "build",
+			"label": "tgui: run dev server"
+		}
+		,
+		{
+			"type": "shell",
+			"command": "tgui/bin/tgui-formatting",
+			"windows": {
+				"command": ".\\tgui\\bin\\tgui-formatting.bat"
+			},
+			"problemMatcher": [
+				"$tsc",
+				"$eslint-stylish"
+			],
+			"group": "build",
+			"label": "tgui: run prettier formatting"
+		}
+	]
+}

_build_dependencies.sh

@@ -2,7 +2,7 @@
 # For dreamchecker
 export SPACEMANDMM_TAG=suite-1.7.1
 # For TGUI
-export NODE_VERSION=12
+export NODE_VERSION=18
 # Stable Byond Major
 export STABLE_BYOND_MAJOR=514
 # Stable Byond Minor

tgui/.eslintrc-harder.yml

@@ -4,11 +4,6 @@ rules:
   ## Enforce consistent brace style for blocks
   brace-style: [error, stroustrup, { allowSingleLine: false }]
   ## Enforce the consistent use of either backticks, double, or single quotes
-  quotes: [error, single, {
-    avoidEscape: true,
-    allowTemplateLiterals: true,
-  }]
-  react/jsx-closing-bracket-location: [error, {
-    selfClosing: after-props,
-    nonEmpty: after-props,
-  }]
+  quotes: [error, single, { avoidEscape: true, allowTemplateLiterals: true }]
+  react/jsx-closing-bracket-location:
+    [error, { selfClosing: after-props, nonEmpty: after-props }]

tgui/.eslintrc.yml

@@ -1,4 +1,4 @@
-parser: "@babel/eslint-parser"
+parser: '@babel/eslint-parser'
 parserOptions:
   ecmaVersion: 2019
   sourceType: module
@@ -16,7 +16,6 @@ settings:
   react:
     version: '16.10'
 rules:
-
   ## Possible Errors
   ## ----------------------------------------
 
@@ -370,10 +369,10 @@ rules:
   ## Enforce a maximum line length
   #max-len: [error, {
   #  code: 80,
-    ## Ignore imports
-    #ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
-    #ignoreUrls: true,
-    #ignoreRegExpLiterals: true,
+  ## Ignore imports
+  #ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
+  #ignoreUrls: true,
+  #ignoreRegExpLiterals: true,
   #}]
   ## Enforce a maximum number of lines per file
   # max-lines: error

tgui/.prettierignore

@@ -0,0 +1,2 @@
+# Ignore built packages:
+packages/tgui/public

tgui/.prettierrc.yml

@@ -1,7 +1,6 @@
 arrowParens: always
 bracketSpacing: true
 endOfLine: lf
-jsxBracketSameLine: true
 jsxSingleQuote: false
 printWidth: 80
 proseWrap: preserve

tgui/README.md

@@ -27,7 +27,7 @@ API to React. Take your time to read these guides:
 
 - [React guide](https://reactjs.org/docs/hello-world.html)
 - [Inferno documentation](https://infernojs.org/docs/guides/components) -
-highlights differences with React.
+  highlights differences with React.
 
 If you were already familiar with an older, Ractive-based tgui, and want
 to translate concepts between old and new tgui, read this
@@ -62,23 +62,23 @@ Run one of the following:
 - `bin/tgui` - build the project in production mode.
 - `bin/tgui --dev` - launch a development server.
   - tgui development server provides you with incremental compilation,
-  hot module replacement and logging facilities in all running instances
-  of tgui. In short, this means that you will instantly see changes in the
-  game as you code it. Very useful, highly recommended.
+    hot module replacement and logging facilities in all running instances
+    of tgui. In short, this means that you will instantly see changes in the
+    game as you code it. Very useful, highly recommended.
   - In order to use it, you should start the game server first, connect to it
-  and wait until the world has been properly loaded and you are no longer
-  in the lobby. Start tgui dev server. You'll know that it's hooked correctly
-  if data gets dumped to the log when tgui windows are opened.
+    and wait until the world has been properly loaded and you are no longer
+    in the lobby. Start tgui dev server. You'll know that it's hooked correctly
+    if data gets dumped to the log when tgui windows are opened.
 - `bin/tgui --dev --reload` - reload byond cache once.
 - `bin/tgui --dev --debug` - run server with debug logging enabled.
 - `bin/tgui --dev --no-hot` - disable hot module replacement (helps when
-doing development on IE8).
+  doing development on IE8).
 - `bin/tgui --lint` - show problems with the code.
 - `bin/tgui --lint --fix` - auto-fix problems with the code.
 - `bin/tgui --analyze` - run a bundle analyzer.
 - `bin/tgui --clean` - clean up project repo.
 - `bin/tgui [webpack options]` - build the project with custom webpack
-options.
+  options.
 
 **For everyone else:**
 
@@ -138,7 +138,7 @@ Press `Ctrl+Alt+=` to open the KitchenSink interface. This interface is a
 playground to test various tgui components.
 
 **Layout Debugger.**
-Press `Ctrl+Alt+-` to toggle the *layout debugger*. It will show outlines of
+Press `Ctrl+Alt+-` to toggle the _layout debugger_. It will show outlines of
 all tgui elements, which makes it easy to understand how everything comes
 together, and can reveal certain layout bugs which are not normally visible.
 
@@ -149,38 +149,38 @@ together, and can reveal certain layout bugs which are not normally visible.
 - `/packages/tgui/index.js` - Application entry point.
 - `/packages/tgui/components` - Basic UI building blocks.
 - `/packages/tgui/interfaces` - Actual in-game interfaces.
-Interface takes data via the `state` prop and outputs an html-like stucture,
-which you can build using existing UI components.
+  Interface takes data via the `state` prop and outputs an html-like stucture,
+  which you can build using existing UI components.
 - `/packages/tgui/layouts` - Root level UI components, that affect the final
-look and feel of the browser window. They usually hold various window
-elements, like the titlebar and resize handlers, and control the UI theme.
+  look and feel of the browser window. They usually hold various window
+  elements, like the titlebar and resize handlers, and control the UI theme.
 - `/packages/tgui/routes.js` - This is where tgui decides which interface to
-pull and render.
+  pull and render.
 - `/packages/tgui/layout.js` - A root-level component, holding the
-window elements, like the titlebar, buttons, resize handlers. Calls
-`routes.js` to decide which component to render.
+  window elements, like the titlebar, buttons, resize handlers. Calls
+  `routes.js` to decide which component to render.
 - `/packages/tgui/styles/main.scss` - CSS entry point.
 - `/packages/tgui/styles/functions.scss` - Useful SASS functions.
-Stuff like `lighten`, `darken`, `luminance` are defined here.
+  Stuff like `lighten`, `darken`, `luminance` are defined here.
 - `/packages/tgui/styles/atomic` - Atomic CSS classes.
-These are very simple, tiny, reusable CSS classes which you can use and
-combine to change appearance of your elements. Keep them small.
+  These are very simple, tiny, reusable CSS classes which you can use and
+  combine to change appearance of your elements. Keep them small.
 - `/packages/tgui/styles/components` - CSS classes which are used
-in UI components. These stylesheets closely follow the
-[BEM](https://en.bem.info/methodology/) methodology.
+  in UI components. These stylesheets closely follow the
+  [BEM](https://en.bem.info/methodology/) methodology.
 - `/packages/tgui/styles/interfaces` - Custom stylesheets for your interfaces.
-Add stylesheets here if you really need a fine control over your UI styles.
+  Add stylesheets here if you really need a fine control over your UI styles.
 - `/packages/tgui/styles/layouts` - Layout-related styles.
 - `/packages/tgui/styles/themes` - Contains all the various themes you can
-use in tgui. Each theme must be registered in `webpack.config.js` file.
+  use in tgui. Each theme must be registered in `webpack.config.js` file.
 
 ## Component Reference
 
 See: [Component Reference](docs/component-reference.md).
 
 ## License
 
-All code is licensed with the parent license of *tgstation*, **AGPL-3.0**.
+All code is licensed with the parent license of _tgstation_, **AGPL-3.0**.
 
 See the main [README](../README.md) for more details.
 

tgui/babel.config.js

@@ -4,24 +4,30 @@
  * @license MIT
  */
 
-const createBabelConfig = options => {
+const createBabelConfig = (options) => {
   const { presets = [], plugins = [], removeConsole } = options;
   return {
     presets: [
-      [require.resolve('@babel/preset-env'), {
-        modules: 'commonjs',
-        useBuiltIns: 'entry',
-        corejs: '3',
-        spec: false,
-        loose: true,
-        targets: [],
-      }],
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          modules: 'commonjs',
+          useBuiltIns: 'entry',
+          corejs: '3',
+          spec: false,
+          loose: true,
+          targets: [],
+        },
+      ],
       ...presets,
     ].filter(Boolean),
     plugins: [
-      [require.resolve('@babel/plugin-proposal-class-properties'), {
-        loose: true,
-      }],
+      [
+        require.resolve('@babel/plugin-proposal-class-properties'),
+        {
+          loose: true,
+        },
+      ],
       require.resolve('@babel/plugin-transform-jscript'),
       require.resolve('babel-plugin-inferno'),
       removeConsole && require.resolve('babel-plugin-transform-remove-console'),
@@ -31,7 +37,7 @@ const createBabelConfig = options => {
   };
 };
 
-module.exports = api => {
+module.exports = (api) => {
   api.cache(true);
   const mode = process.env.NODE_ENV;
   return createBabelConfig({ mode });

tgui/bin/tgui-formatting.bat

@@ -0,0 +1,5 @@
+@echo off
+cd "%~dp0\.."
+call yarn install
+call yarn prettier --write
+timeout /t 9