React Migration - part 2

tgui/.eslintignore

@@ -3,4 +3,3 @@
 /**/*.bundle.*
 /**/*.chunk.*
 /**/*.hot-update.*
-/packages/inferno/**

tgui/babel.config.js

@@ -6,28 +6,36 @@
 
 const createBabelConfig = (options) => {
   const { presets = [], plugins = [], removeConsole } = options;
-  // prettier-ignore
   return {
     presets: [
-      [require.resolve('@babel/preset-typescript'), {
-        allowDeclareFields: true,
-      }],
-      [require.resolve('@babel/preset-env'), {
-        modules: 'commonjs',
-        useBuiltIns: 'entry',
-        corejs: '3',
-        spec: false,
-        loose: true,
-        targets: [],
-      }],
+      [
+        require.resolve('@babel/preset-typescript'),
+        {
+          allowDeclareFields: true,
+        },
+      ],
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          modules: 'commonjs',
+          useBuiltIns: 'entry',
+          corejs: '3.3.2',
+          spec: false,
+          loose: true,
+          targets: [],
+        },
+      ],
+      [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
       ...presets,
     ].filter(Boolean),
     plugins: [
-      [require.resolve('@babel/plugin-proposal-class-properties'), {
-        loose: true,
-      }],
+      [
+        require.resolve('@babel/plugin-transform-class-properties'),
+        {
+          loose: true,
+        },
+      ],
       require.resolve('@babel/plugin-transform-jscript'),
-      require.resolve('babel-plugin-inferno'),
       removeConsole && require.resolve('babel-plugin-transform-remove-console'),
       require.resolve('common/string.babel-plugin.cjs'),
       ...plugins,

tgui/package.json

@@ -22,9 +22,10 @@
   "dependencies": {
     "@babel/core": "^7.15.0",
     "@babel/eslint-parser": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@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",
     "@types/jest": "^27.0.1",
     "@types/jsdom": "^16.2.13",
@@ -34,7 +35,6 @@
     "@typescript-eslint/parser": "^4.29.1",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
-    "babel-plugin-inferno": "^6.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "common": "workspace:*",
     "css-loader": "^5.2.7",
@@ -44,7 +44,6 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-unused-imports": "^1.1.4",
     "file-loader": "^6.2.0",
-    "inferno": "^7.4.8",
     "jest": "^27.0.6",
     "jest-circus": "^27.0.6",
     "jsdom": "^16.7.0",

tgui/packages/common/keys.ts

@@ -0,0 +1,39 @@
+/**
+ * ### Key codes.
+ * event.keyCode is deprecated, use this reference instead.
+ *
+ * Handles modifier keys (Shift, Alt, Control) and arrow keys.
+ *
+ * For alphabetical keys, use the actual character (e.g. 'a') instead of the key code.
+ *
+ * Something isn't here that you want? Just add it:
+ * @url https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
+ * @usage
+ * ```ts
+ * import { KEY } from 'tgui/common/keys';
+ *
+ * if (event.key === KEY.Enter) {
+ *   // do something
+ * }
+ * ```
+ */
+export enum KEY {
+  Alt = 'Alt',
+  Backspace = 'Backspace',
+  Control = 'Control',
+  Delete = 'Delete',
+  Down = 'ArrowDown',
+  End = 'End',
+  Enter = 'Enter',
+  Escape = 'Escape',
+  Home = 'Home',
+  Insert = 'Insert',
+  Left = 'ArrowLeft',
+  PageDown = 'PageDown',
+  PageUp = 'PageUp',
+  Right = 'ArrowRight',
+  Shift = 'Shift',
+  Space = ' ',
+  Tab = 'Tab',
+  Up = 'ArrowUp',
+}

tgui/packages/common/react.ts

@@ -51,15 +51,6 @@ export const shallowDiffers = (a: object, b: object) => {
   return false;
 };
 
-/**
- * Default inferno hooks for pure components.
- */
-export const pureComponentHooks = {
-  onComponentShouldUpdate: (lastProps, nextProps) => {
-    return shallowDiffers(lastProps, nextProps);
-  },
-};
-
 /**
  * A helper to determine whether the object is renderable by React.
  */

tgui/packages/common/redux.ts

@@ -194,19 +194,3 @@ export const createAction = <TAction extends string>(
 
   return actionCreator;
 };
-
-// Implementation specific
-// --------------------------------------------------------
-
-export const useDispatch = <TAction extends Action = AnyAction>(context: {
-  store: Store<unknown, TAction>;
-}): Dispatch<TAction> => {
-  return context.store.dispatch;
-};
-
-export const useSelector = <State, Selected>(
-  context: { store: Store<State, Action> },
-  selector: (state: State) => Selected
-): Selected => {
-  return selector(context.store.getState());
-};

tgui/packages/tgui-bench/package.json

@@ -6,10 +6,9 @@
     "common": "workspace:*",
     "fastify": "^3.29.4",
     "fastify-static": "^4.2.3",
-    "inferno": "^7.4.8",
-    "inferno-vnode-flags": "^7.4.8",
     "lodash": "^4.17.21",
     "platform": "^1.3.6",
+    "react": "^18.2.0",
     "tgui": "workspace:*"
   }
 }

tgui/packages/tgui-bench/tests/Button.test.tsx

@@ -1,4 +1,4 @@
-import { linkEvent } from 'inferno';
+import { linkEvent } from 'react';
 import { Button } from 'tgui/components';
 import { createRenderer } from 'tgui/renderer';
 

tgui/packages/tgui-panel/Panel.js → tgui/packages/tgui-panel/Panel.jsx

@@ -14,17 +14,17 @@ import { PingIndicator } from './ping';
 import { ReconnectButton } from './reconnect';
 import { SettingsPanel, useSettings } from './settings';
 
-export const Panel = (props, context) => {
+export const Panel = (props) => {
   // IE8-10: Needs special treatment due to missing Flex support
   if (Byond.IS_LTE_IE10) {
     return <HoboPanel />;
   }
-  const audio = useAudio(context);
-  const settings = useSettings(context);
-  const game = useGame(context);
+  const audio = useAudio();
+  const settings = useSettings();
+  const game = useGame();
   if (process.env.NODE_ENV !== 'production') {
     const { useDebug, KitchenSink } = require('tgui/debug');
-    const debug = useDebug(context);
+    const debug = useDebug();
     if (debug.kitchenSink) {
       return <KitchenSink panel />;
     }
@@ -103,8 +103,8 @@ export const Panel = (props, context) => {
   );
 };
 
-const HoboPanel = (props, context) => {
-  const settings = useSettings(context);
+const HoboPanel = (props) => {
+  const settings = useSettings();
   return (
     <Pane theme={settings.theme}>
       <Pane.Content scrollable>

tgui/packages/tgui-panel/audio/NowPlayingWidget.jsx

@@ -0,0 +1,109 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { toFixed } from 'common/math';
+import { useDispatch, useSelector } from 'tgui/backend';
+import { Button, Collapsible, Flex, Knob, Section } from 'tgui/components';
+import { useSettings } from '../settings';
+import { selectAudio } from './selectors';
+
+export const NowPlayingWidget = (props) => {
+  const audio = useSelector(selectAudio),
+    dispatch = useDispatch(),
+    settings = useSettings(),
+    title = audio.meta?.title,
+    URL = audio.meta?.link,
+    Artist = audio.meta?.artist || 'Unknown Artist',
+    upload_date = audio.meta?.upload_date || 'Unknown Date',
+    album = audio.meta?.album || 'Unknown Album',
+    duration = audio.meta?.duration,
+    date = !isNaN(upload_date)
+      ? upload_date?.substring(0, 4) +
+      '-' +
+      upload_date?.substring(4, 6) +
+      '-' +
+      upload_date?.substring(6, 8)
+      : upload_date;
+
+  return (
+    <Flex align="center">
+      {(audio.playing && (
+        <Flex.Item
+          mx={0.5}
+          grow={1}
+          style={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}>
+          {
+            <Collapsible title={title || 'Unknown Track'} color={'blue'}>
+              <Section>
+                {URL !== 'Song Link Hidden' && (
+                  <Flex.Item grow={1} color="label">
+                    URL: {URL}
+                  </Flex.Item>
+                )}
+                <Flex.Item grow={1} color="label">
+                  Duration: {duration}
+                </Flex.Item>
+                {Artist !== 'Song Artist Hidden' &&
+                  Artist !== 'Unknown Artist' && (
+                    <Flex.Item grow={1} color="label">
+                      Artist: {Artist}
+                    </Flex.Item>
+                  )}
+                {album !== 'Song Album Hidden' && album !== 'Unknown Album' && (
+                  <Flex.Item grow={1} color="label">
+                    Album: {album}
+                  </Flex.Item>
+                )}
+                {upload_date !== 'Song Upload Date Hidden' &&
+                  upload_date !== 'Unknown Date' && (
+                    <Flex.Item grow={1} color="label">
+                      Uploaded: {date}
+                    </Flex.Item>
+                  )}
+              </Section>
+            </Collapsible>
+          }
+        </Flex.Item>
+      )) || (
+        <Flex.Item grow={1} color="label">
+          Nothing to play.
+        </Flex.Item>
+      )}
+      {audio.playing && (
+        <Flex.Item mx={0.5} fontSize="0.9em">
+          <Button
+            tooltip="Stop"
+            icon="stop"
+            onClick={() =>
+              dispatch({
+                type: 'audio/stopMusic',
+              })
+            }
+          />
+        </Flex.Item>
+      )}
+      <Flex.Item mx={0.5} fontSize="0.9em">
+        <Knob
+          minValue={0}
+          maxValue={1}
+          value={settings.adminMusicVolume}
+          step={0.0025}
+          stepPixelSize={1}
+          format={(value) => toFixed(value * 100) + '%'}
+          onDrag={(e, value) =>
+            settings.update({
+              adminMusicVolume: value,
+            })
+          }
+        />
+      </Flex.Item>
+    </Flex>
+  );
+};