Upgrade packages to work with Node 18

dependencies.sh

@@ -11,8 +11,8 @@ export BYOND_MINOR=1571
 export RUST_G_VERSION=0.5.0
 
 #node version
-export NODE_VERSION=14
-export NODE_VERSION_PRECISE=14.16.1
+export NODE_VERSION=18
+export NODE_VERSION_PRECISE=18.13.0
 
 # SpacemanDMM git tag
 export SPACEMAN_DMM_VERSION=suite-1.7.1

tgui/.yarnrc.yml

@@ -14,4 +14,4 @@ preferAggregateCacheInfo: true
 
 preferInteractive: true
 
-yarnPath: .yarn/releases/yarn-2.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

tgui/package.json

@@ -6,39 +6,39 @@
     "packages/*"
   ],
   "dependencies": {
-    "@babel/core": "^7.13.15",
-    "@babel/eslint-parser": "^7.13.14",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-jscript": "^7.12.13",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/jest": "^26.0.22",
-    "@types/jsdom": "^16.2.10",
-    "@types/node": "^14.14.41",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@babel/core": "^7.20.12",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-jscript": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/jest": "^26.0.24",
+    "@types/jsdom": "^16.2.15",
+    "@types/node": "^14.18.36",
+    "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-inferno": "^6.2.0",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-inferno": "^6.5.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "common": "workspace:*",
-    "css-loader": "^5.2.2",
-    "eslint": "^7.24.0",
+    "css-loader": "^5.2.7",
+    "eslint": "^7.32.0",
     "eslint-plugin-radar": "^0.2.1",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "^7.31.11",
     "file-loader": "^6.2.0",
-    "inferno": "^7.4.8",
+    "inferno": "^7.4.11",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
-    "jsdom": "^16.5.3",
-    "mini-css-extract-plugin": "^1.4.1",
-    "sass": "^1.32.8",
-    "sass-loader": "^11.0.1",
+    "jsdom": "^16.7.0",
+    "mini-css-extract-plugin": "^1.6.2",
+    "sass": "^1.57.1",
+    "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.3.6",
     "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.33.2",
-    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.6.0"
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0"
   }
 }

tgui/packages/tgfont/package.json

@@ -3,7 +3,7 @@
   "name": "tgfont",
   "version": "1.0.0",
   "dependencies": {
-    "fantasticon": "^1.1.3"
+    "fantasticon": "^1.2.3"
   },
   "scripts": {
     "build": "node mkdist.cjs && fantasticon --config config.cjs"

tgui/packages/tgui-dev-server/package.json

@@ -3,12 +3,12 @@
   "name": "tgui-dev-server",
   "version": "4.3.0",
   "dependencies": {
-    "axios": "^0.21.2",
+    "axios": "^0.21.4",
     "common": "workspace:*",
     "esm": "^3.2.25",
-    "glob": "^7.1.6",
-    "source-map": "^0.7.3",
+    "glob": "^7.2.3",
+    "source-map": "^0.7.4",
     "stacktrace-parser": "^0.1.10",
-    "ws": "^7.4.4"
+    "ws": "^7.5.9"
   }
 }

tgui/packages/tgui-panel/package.json

@@ -4,8 +4,8 @@
   "version": "4.3.0",
   "dependencies": {
     "common": "workspace:*",
-    "dompurify": "^2.2.7",
-    "inferno": "^7.4.8",
+    "dompurify": "^2.4.3",
+    "inferno": "^7.4.11",
     "tgui": "workspace:*",
     "tgui-dev-server": "workspace:*",
     "tgui-polyfill": "workspace:*"

tgui/packages/tgui-panel/styles/components/Chat.scss

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
+@use "sass:math";
+
 @use 'sass:color';
 @use '~tgui/styles/base.scss';
 @use '~tgui/styles/colors.scss';
@@ -62,7 +64,7 @@ $color-bg-section: base.$color-bg-section !default;
     content: '';
     display: block;
     margin-top: -0.75em;
-    border-bottom: (1em / 6) solid colors.$red;
+    border-bottom: math.div(1em, 6) solid colors.$red;
   }
 }
 
@@ -82,7 +84,7 @@ $color-bg-section: base.$color-bg-section !default;
 
 .ChatMessage--highlighted {
   position: relative;
-  border-left: (1em / 6) solid rgba(255, 221, 68);
+  border-left: math.div(1em, 6) solid rgba(255, 221, 68);
   padding-left: 0.5em;
 
   &:after {

tgui/packages/tgui-panel/styles/components/Ping.scss

@@ -3,12 +3,14 @@
  * SPDX-License-Identifier: MIT
  */
 
+@use "sass:math";
+
 $border-color: rgba(140, 140, 140, 0.5) !default;
 
 .Ping {
   position: relative;
   padding: 0.125em 0.25em;
-  border: (1em / 12) solid $border-color;
+  border: math.div(1em, 12) solid $border-color;
   border-radius: 0.25em;
   width: 3.75em;
   text-align: right;

tgui/packages/tgui-polyfill/package.json

@@ -3,8 +3,8 @@
   "name": "tgui-polyfill",
   "version": "4.3.0",
   "dependencies": {
-    "core-js": "^3.10.1",
-    "regenerator-runtime": "^0.13.8",
+    "core-js": "^3.27.1",
+    "regenerator-runtime": "^0.13.11",
     "unfetch": "^4.2.0"
   }
 }

tgui/packages/tgui/interfaces/RequestKiosk.js

@@ -86,7 +86,7 @@ export const RequestKioskContent = (props, context) => {
                   title="Request Applicants">
                   {applicants?.map(applicant => (
                     applicant.request_id === request.acc_number && (
-                      <Flex>
+                      <Flex key={applicant.request_id}>
                         <Flex.Item
                           grow={1}
                           p={0.5}

tgui/packages/tgui/package.json

@@ -3,14 +3,14 @@
   "name": "tgui",
   "version": "4.3.0",
   "dependencies": {
-    "@popperjs/core": "^2.9.1",
+    "@popperjs/core": "^2.11.6",
     "common": "workspace:*",
-    "dateformat": "^4.5.1",
-    "dompurify": "^2.2.7",
-    "inferno": "^7.4.8",
-    "inferno-vnode-flags": "^7.4.8",
+    "dateformat": "^4.6.3",
+    "dompurify": "^2.4.3",
+    "inferno": "^7.4.11",
+    "inferno-vnode-flags": "^7.4.11",
     "js-yaml": "^4.1.0",
-    "marked": "^4.0.10",
+    "marked": "^4.2.5",
     "tgui-dev-server": "workspace:*",
     "tgui-polyfill": "workspace:*"
   }

tgui/packages/tgui/styles/base.scss

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
+@use "sass:math";
+
 @use 'sass:color';
 
 $color-fg: #ffffff !default;
@@ -19,9 +21,9 @@ $font-size: 1 * $unit !default;
 $border-radius: 0.16em !default;
 
 @function em($px) {
-  @return 1em * ($px / $unit);
+  @return 1em * math.div($px, $unit);
 }
 
 @function rem($px) {
-  @return 1rem * ($px / $unit);
+  @return 1rem * math.div($px, $unit);
 }

tgui/packages/tgui/styles/components/Tabs.scss

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
+@use "sass:math";
+
 @use 'sass:color';
 @use '../base.scss';
 @use '../colors.scss';
@@ -100,28 +102,28 @@ $fg-map: colors.$fg-map !default;
 
 .Tabs--horizontal {
   .Tab {
-    border-top: (1em / 6) solid transparent;
-    border-bottom: (1em / 6) solid transparent;
+    border-top: math.div(1em, 6) solid transparent;
+    border-bottom: math.div(1em, 6) solid transparent;
     border-top-left-radius: 0.25em;
     border-top-right-radius: 0.25em;
   }
 
   .Tab--selected {
-    border-bottom: (1em / 6) solid $color-default;
+    border-bottom: math.div(1em, 6) solid $color-default;
   }
 }
 
 .Tabs--vertical {
   .Tab {
     min-height: 2em;
-    border-left: (1em / 6) solid transparent;
-    border-right: (1em / 6) solid transparent;
+    border-left: math.div(1em, 6) solid transparent;
+    border-right: math.div(1em, 6) solid transparent;
     border-top-left-radius: 0.25em;
     border-bottom-left-radius: 0.25em;
   }
 
   .Tab--selected {
-    border-right: (1em / 6) solid $color-default;
+    border-right: math.div(1em, 6) solid $color-default;
   }
 }
 

tgui/packages/tgui/styles/functions.scss

@@ -18,9 +18,9 @@
     @return null;
   }
   @if math.unit($value) == '%' {
-    @return $value / 100%;
+    @return math.div($value, 100%);
   }
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, $value * 0 + 1);
 }
 
 
@@ -48,12 +48,12 @@
 
   @each $name, $value in $colors {
     $adjusted: 0;
-    $value: $value / 255;
+    $value: math.div($value, 255);
     @if $value < 0.03928 {
-      $value: $value / 12.92;
+      $value: math.div($value, 12.92);
     }
     @else {
-      $value: ($value + .055) / 1.055;
+      $value: math.div($value + .055, 1.055);
       $value: math.pow($value, 2.4);
     }
     $colors: map.merge($colors, ($name: $value));