tgui: Update dependencies (#49496)

* Update tgui dependencies

* Handle the missing stack trace in case of IE8

* Remove the now useless pow polyfill for sass

* Inferno fixed some interesting bug

tgui/packages/tgui-dev-server/link/server.js

@@ -29,10 +29,13 @@ export const broadcastMessage = (link, msg) => {
   }
 };
 
-const deserializeObject = obj => {
-  return JSON.parse(obj, (key, value) => {
+const deserializeObject = str => {
+  return JSON.parse(str, (key, value) => {
     if (typeof value === 'object' && value !== null) {
       if (value.__error__) {
+        if (!value.stack) {
+          return value.string;
+        }
         return retrace(value.stack);
       }
       if (value.__number__) {
@@ -102,7 +105,7 @@ const setupHttpLink = () => {
         body += chunk.toString();
       });
       req.on('end', () => {
-        const msg = JSON.parse(body);
+        const msg = deserializeObject(body);
         handleLinkMessage(msg);
         res.end();
       });

tgui/packages/tgui/interfaces/Bepis.js

@@ -87,10 +87,10 @@ export const Bepis = props => {
         <Grid.Column>
           <Section title="Market Data and Analysis">
             <Box>
-                Average technology cost: {data.mean_value}
+              Average technology cost: {data.mean_value}
             </Box>
             <Box>
-                Current chance of Success: Est. {data.success_estimate}%
+              Current chance of Success: Est. {data.success_estimate}%
             </Box>
             {data.error_name && (
               <Box color="bad">

tgui/packages/tgui/interfaces/Canvas.js

@@ -73,7 +73,7 @@ class PaintCanvas extends Component {
         height={y_size || 300}
         {...rest}
         onClick={e => this.clickwrapper(e)}>
-          Canvas failed to render.
+        Canvas failed to render.
       </canvas>
     );
   }

tgui/packages/tgui/interfaces/GravityGenerator.js

@@ -55,7 +55,7 @@ export const GravityGenerator = props => {
               )}
               {charging_state === 2 && (
                 <Box color="average">
-                Discharging
+                  Discharging
                 </Box>
               )}
             </LabeledList.Item>

tgui/packages/tgui/interfaces/HypnoChair.js

@@ -12,7 +12,7 @@ export const HypnoChair = props => {
         The Enhanced Interrogation Chamber is designed to induce a deep-rooted
         trance trigger into the subject. Once the procedure is complete,
         by using the implanted trigger phrase, the authorities are able to
-         ensure immediate and complete obedience and truthfulness.
+        ensure immediate and complete obedience and truthfulness.
       </Section>
       <Section
         title="Occupant Information"

tgui/packages/tgui/interfaces/LanguageMenu.js

@@ -84,7 +84,7 @@ export const LanguageMenu = props => {
                 )}>
                 {language.desc}
                 {' '}
-                  Key: ,{language.key}
+                Key: ,{language.key}
                 {' '}
                 {!!language.shadow && '(gained from mob)'}
                 {' '}

tgui/packages/tgui/interfaces/Launchpad.js

@@ -154,7 +154,7 @@ export const LaunchpadControl = props => {
                   inline
                   bold
                   mr={1}>
-                Y:
+                  Y:
                 </Box>
                 <NumberInput
                   value={y}

tgui/packages/tgui/interfaces/MiningVendor.js

@@ -15,16 +15,16 @@ export const MiningVendor = props => {
       <Section title="User">
         {data.user && (
           <Box>
-          Welcome, <b>{data.user.name || "Unknown"}</b>,
+            Welcome, <b>{data.user.name || "Unknown"}</b>,
             {' '}
             <b>{data.user.job || "Unemployed"}</b>!
             <br />
-          Your balance is <b>{data.user.points} mining points</b>.
+            Your balance is <b>{data.user.points} mining points</b>.
           </Box>
         ) || (
           <Box color="light-gray">
-          No registered ID card!<br />
-          Please contact your local HoP!
+            No registered ID card!<br />
+            Please contact your local HoP!
           </Box>
         )}
       </Section>

tgui/packages/tgui/interfaces/NaniteRemote.js

@@ -109,16 +109,16 @@ export const NaniteRemote = props => {
           <Table>
             <Table.Row header>
               <Table.Cell width="35%">
-              Name
+                Name
               </Table.Cell>
               <Table.Cell width="20%">
-              Mode
+                Mode
               </Table.Cell>
               <Table.Cell collapsing>
-              Code
+                Code
               </Table.Cell>
               <Table.Cell collapsing>
-              Relay
+                Relay
               </Table.Cell>
             </Table.Row>
             {saved_settings.map(setting => (
@@ -156,7 +156,7 @@ export const NaniteRemote = props => {
           </Table>
         ) : (
           <NoticeBox>
-          No settings currently saved
+            No settings currently saved
           </NoticeBox>
         )}
       </Section>

tgui/packages/tgui/interfaces/NtosAiRestorer.js

@@ -61,7 +61,7 @@ export const NtosAiRestorer = props => {
                 fontSize="20px"
                 color="good"
                 mt={1}>
-              RECONSTRUCTION IN PROGRESS
+                RECONSTRUCTION IN PROGRESS
               </Box>
             )}
             <Button

tgui/packages/tgui/interfaces/NtosCard.js

@@ -4,8 +4,6 @@ import { Button, NoticeBox, Section, Tabs, Input } from '../components';
 import { AccessList } from './common/AccessList';
 import { map } from 'common/collections';
 
-
-
 export const NtosCard = props => {
   const { act, data } = useBackend(props);
 

tgui/packages/tgui/interfaces/NtosConfiguration.js

@@ -23,7 +23,7 @@ export const NtosConfiguration = props => {
             inline
             bold
             mr={1}>
-          Power Draw: {power_usage}W
+            Power Draw: {power_usage}W
           </Box>
         )}>
         <LabeledList>

tgui/packages/tgui/interfaces/NtosCrewManifest.js

@@ -34,7 +34,7 @@ export const NtosCrewManifest = props => {
                   {entry.name}
                 </Table.Cell>
                 <Table.Cell>
-              ({entry.rank})
+                  ({entry.rank})
                 </Table.Cell>
               </Table.Row>
             ))}

tgui/packages/tgui/interfaces/OperatingComputer.js

@@ -105,7 +105,7 @@ export const OperatingComputer = props => {
                         {procedure.alt_chems_needed && (
                           <Fragment>
                             <b>
-                             Required Chemicals:
+                              Required Chemicals:
                             </b>
                             <br />
                             {procedure.alt_chems_needed}

tgui/packages/tgui/interfaces/Roulette.js

@@ -268,7 +268,7 @@ export class RouletteBetTable extends Component {
               'Roulette__lowertable--cell',
               'Roulette__lowertable--header',
             ])}>
-          Last Spun:
+            Last Spun:
           </th>
           <th
             className={classes([
@@ -276,7 +276,7 @@ export class RouletteBetTable extends Component {
               'Roulette__lowertable--cell',
               'Roulette__lowertable--header',
             ])}>
-          Current Bet:
+            Current Bet:
           </th>
         </tr>
         <tr>
@@ -362,14 +362,14 @@ export class RouletteBetTable extends Component {
               m={1}
               fontSize="14px"
               textAlign="center">
-            Swipe an ID card with a connected account to spin!
+              Swipe an ID card with a connected account to spin!
             </Box>
           </td>
         </tr>
         <tr>
           <td className="Roulette__lowertable--cell">
             <Box inline bold mr={1}>
-            House Balance:
+              House Balance:
             </Box>
             <Box inline>
               {data.HouseBalance ? data.HouseBalance + ' cr': "None"}

tgui/packages/tgui/interfaces/TransferValve.js

@@ -44,7 +44,7 @@ export const TransferValve = props => {
             </LabeledList.Item>
           ) : (
             <NoticeBox textAlign="center">
-            Insert Assembly
+              Insert Assembly
             </NoticeBox>
           )}
         </LabeledList>
@@ -61,7 +61,7 @@ export const TransferValve = props => {
             </LabeledList.Item>
           ) : (
             <NoticeBox textAlign="center">
-            Insert Tank
+              Insert Tank
             </NoticeBox>
           )}
         </LabeledList>
@@ -78,7 +78,7 @@ export const TransferValve = props => {
             </LabeledList.Item>
           ) : (
             <NoticeBox textAlign="center">
-            Insert Tank
+              Insert Tank
             </NoticeBox>
           )}
         </LabeledList>

tgui/packages/tgui/interfaces/Vending.js

@@ -30,16 +30,16 @@ export const Vending = props => {
         <Section title="User">
           {data.user && (
             <Box>
-            Welcome, <b>{data.user.name}</b>,
+              Welcome, <b>{data.user.name}</b>,
               {' '}
               <b>{data.user.job || "Unemployed"}</b>!
               <br />
-            Your balance is <b>{data.user.cash} credits</b>.
+              Your balance is <b>{data.user.cash} credits</b>.
             </Box>
           ) || (
             <Box color="light-gray">
-            No registered ID card!<br />
-            Please contact your local HoP!
+              No registered ID card!<br />
+              Please contact your local HoP!
             </Box>
           )}
         </Section>

tgui/packages/tgui/styles/functions.scss

@@ -3,16 +3,21 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+
 //  Type-casting
 // --------------------------------------------------------
 
 // Get a unit-less numeric value
 @function num($value) {
-  @if type-of($value) != number {
+  @if meta.type-of($value) != number {
     @error 'Could not convert `#{$value}` - must be `type-of number`';
     @return null;
   }
-  @if unit($value) == '%' {
+  @if math.unit($value) == '%' {
     @return $value / 100%;
   }
   @return $value / ($value * 0 + 1);
@@ -25,20 +30,20 @@
 // Increases perceptual color lightness.
 @function lighten($color, $percent) {
   $scaled: hsl(
-    hue($color),
-    saturation($color),
-    lightness($color) * (1 + num($percent)));
-  $mixed: mix(#ffffff, $color, 100% * num($percent));
-  @return mix($scaled, $mixed, 75%);
+    color.hue($color),
+    color.saturation($color),
+    color.lightness($color) * (1 + num($percent)));
+  $mixed: color.mix(#ffffff, $color, 100% * num($percent));
+  @return color.mix($scaled, $mixed, 75%);
 }
 
 // Returns the NTSC luminance of `$color` as a float (between 0 and 1).
 // 1 is pure white, 0 is pure black.
 @function luminance($color) {
   $colors: (
-    'red': red($color),
-    'green': green($color),
-    'blue': blue($color)
+    'red': color.red($color),
+    'green': color.green($color),
+    'blue': color.blue($color)
   );
 
   @each $name, $value in $colors {
@@ -49,12 +54,12 @@
     }
     @else {
       $value: ($value + .055) / 1.055;
-      $value: math-pow($value, 2.4);
+      $value: math.pow($value, 2.4);
     }
-    $colors: map-merge($colors, ($name: $value));
+    $colors: map.merge($colors, ($name: $value));
   }
 
-  @return (map-get($colors, 'red') * .2126)
-    + (map-get($colors, 'green') * .7152)
-    + (map-get($colors, 'blue') * .0722);
+  @return (map.get($colors, 'red') * .2126)
+    + (map.get($colors, 'green') * .7152)
+    + (map.get($colors, 'blue') * .0722);
 }

tgui/packages/tgui/webpack.config.js

@@ -3,16 +3,6 @@ const path = require('path');
 const BuildNotifierPlugin = require('webpack-build-notifier');
 const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
 
-const SASS_FUNCTIONS = {
-  // Power function polyfill
-  'math-pow($number, $exp)': (number, exp) => {
-    const sass = require('sass');
-    return new sass.types.Number(Math.pow(
-      number.getValue(),
-      exp.getValue()));
-  },
-};
-
 module.exports = (env = {}, argv) => {
   const config = {
     mode: argv.mode === 'production' ? 'production' : 'development',
@@ -85,11 +75,7 @@ module.exports = (env = {}, argv) => {
             },
             {
               loader: 'sass-loader',
-              options: {
-                sassOptions: {
-                  functions: SASS_FUNCTIONS,
-                },
-              },
+              options: {},
             },
           ],
         },