[MIRROR] Ports React [READY] [MDB IGNORE] (#25505)

* Ports React [READY]

* Fix merge conflicts

* I hate you javascript

* Fixes some issues

* Bring back the padding

* Update JobsPage.tsx

* Squeezing every last drop of space

* Update AntagInfoAssaultops.tsx

* More react compat

---------

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

tgui/.eslintignore

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

tgui/.yarnrc.yml

@@ -6,11 +6,6 @@ logFilters:
   - code: YN0062
     level: discard
 
-packageExtensions:
-  'babel-plugin-inferno@*':
-    dependencies:
-      '@babel/core': '*'
-
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'

tgui/README.md

@@ -16,10 +16,9 @@ If you are completely new to frontend and prefer to **learn by doing**, start wi
 
 ### Guides
 
-This project uses **Inferno** - a very fast UI rendering engine with a similar API to React. Take your time to read these guides:
+This project uses React. Take your time to read the guide:
 
-- [React guide](https://reactjs.org/docs/hello-world.html)
-- [Inferno documentation](https://infernojs.org/docs/guides/components) - highlights differences with React.
+- [React guide](https://react.dev/learn)
 
 If you were already familiar with an older, Ractive-based tgui, and want to translate concepts between old and new tgui, read this [interface conversion guide](docs/converting-old-tgui-interfaces.md).
 
@@ -71,6 +70,7 @@ However, if you want finer control over the installation or build process, you w
 - `tools/build/build tgui-clean` - Clean up tgui folder.
 
 > With Juke Build, you can run multiple targets together, e.g.:
+>
 > ```
 > tools/build/build tgui tgui-lint tgui-tsc tgui-test
 > ```
@@ -137,7 +137,7 @@ Press `F12` or click the green bug to open the KitchenSink interface. This inter
 playground to test various tgui components.
 
 **Layout Debugger.**
-Press `F11` to toggle the *layout debugger*. It will show outlines of
+Press `F11` 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.
 

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-transform-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/docs/component-reference.md

@@ -65,17 +65,13 @@ it is used a lot in this framework.
 
 **Event handlers.**
 Event handlers are callbacks that you can attack to various element to
-listen for browser events. Inferno supports camelcase (`onClick`) and
-lowercase (`onclick`) event names.
+listen for browser events. React supports camelcase (`onClick`) event names.
 
 - Camel case names are what's called *synthetic* events, and are the
 **preferred way** of handling events in React, for efficiency and
 performance reasons. Please read
-[Inferno Event Handling](https://infernojs.org/docs/guides/event-handling)
+[React Event Handling](https://react.dev/learn/responding-to-events)
 to understand what this is about.
-- Lower case names are native browser events and should be used sparingly,
-for example when you need an explicit IE8 support. **DO NOT** use
-lowercase event handlers unless you really know what you are doing.
 
 ## `tgui/components`
 
@@ -370,7 +366,7 @@ dropdown when open. See Dropdown.tsx for more adcanced usage with DropdownEntry
 - `over: boolean` - Dropdown renders over instead of below
 - `color: string` - Color of dropdown button
 - `nochevron: boolean` - Whether or not the arrow on the right hand side of the dropdown button is visible
-- `displayText: string | number | InfernoNode` - Text to always display in place of the selected text
+- `displayText: string | number | ReactNode` - Text to always display in place of the selected text
 - `onClick: (e) => void` - Called when dropdown button is clicked
 - `onSelected: (value) => void` - Called when a value is picked from the list, `value` is the value that was picked
 
@@ -665,7 +661,7 @@ to perform some sort of action), there is a way to do that:
 **Props:**
 
 - `className: string` - Applies a CSS class to the element.
-- `label: string|InfernoNode` - Item label.
+- `label: string|ReactNode` - Item label.
 - `labelWrap: boolean` - Lets the label wrap and makes it not take the minimum width.
 - `labelColor: string` - Sets the color of the label.
 - `color: string` - Sets the color of the content text.
@@ -760,7 +756,7 @@ Popper lets you position elements so that they don't go out of the bounds of the
 
 **Props:**
 
-- `popperContent: InfernoNode` - The content that will be put inside the popper.
+- `popperContent: ReactNode` - The content that will be put inside the popper.
 - `options?: { ... }` - An object of options to pass to `createPopper`. See [https://popper.js.org/docs/v2/constructors/#options], but the one you want most is `placement`. Valid placements are "bottom", "top", "left", and "right". You can affix "-start" and "-end" to achieve something like top left or top right respectively. You can also use "auto" (with an optional "-start" or "-end"), where a best fit will be chosen.
 - `additionalStyles: { ... }` - A map of CSS styles to add to the element that will contain the popper.
 

tgui/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "tgui-workspace",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "packageManager": "[email protected]",
   "workspaces": [
     "packages/*"
@@ -25,6 +25,7 @@
     "@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",
     "@types/jest": "^29.5.10",
     "@types/jsdom": "^21.1.6",
@@ -34,7 +35,6 @@
     "@typescript-eslint/parser": "^5.62.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.3.0",
-    "babel-plugin-inferno": "^6.7.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "common": "workspace:*",
     "css-loader": "^6.8.1",

tgui/packages/common/keys.ts

@@ -22,18 +22,18 @@ export enum KEY {
   Backspace = 'Backspace',
   Control = 'Control',
   Delete = 'Delete',
-  Down = 'Down',
+  Down = 'ArrowDown',
   End = 'End',
   Enter = 'Enter',
-  Escape = 'Esc',
+  Escape = 'Escape',
   Home = 'Home',
   Insert = 'Insert',
-  Left = 'Left',
+  Left = 'ArrowLeft',
   PageDown = 'PageDown',
   PageUp = 'PageUp',
-  Right = 'Right',
+  Right = 'ArrowRight',
   Shift = 'Shift',
   Space = ' ',
   Tab = 'Tab',
-  Up = 'Up',
+  Up = 'ArrowUp',
 }

tgui/packages/common/react.ts

@@ -52,13 +52,10 @@ export const shallowDiffers = (a: object, b: object) => {
 };
 
 /**
- * Default inferno hooks for pure components.
+ * A common case in tgui, when you pass a value conditionally, these are
+ * the types that can fall through the condition.
  */
-export const pureComponentHooks = {
-  onComponentShouldUpdate: (lastProps, nextProps) => {
-    return shallowDiffers(lastProps, nextProps);
-  },
-};
+export type BooleanLike = number | boolean | null | undefined;
 
 /**
  * A helper to determine whether the object is renderable by React.
@@ -69,9 +66,3 @@ export const canRender = (value: unknown) => {
     && value !== null
     && typeof value !== 'boolean';
 };
-
-/**
- * A common case in tgui, when you pass a value conditionally, these are
- * the types that can fall through the condition.
- */
-export type BooleanLike = number | boolean | null | undefined;

tgui/packages/common/redux.ts

@@ -194,23 +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 => {
-  if (!context) {
-    return {} as Selected;
-  }
-
-  return selector(context?.store?.getState());
-};

tgui/packages/tgui-bench/package.json

@@ -1,15 +1,14 @@
 {
   "private": true,
   "name": "tgui-bench",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "dependencies": {
     "@fastify/static": "^6.12.0",
     "common": "workspace:*",
     "fastify": "^3.29.5",
-    "inferno": "^7.4.11",
-    "inferno-vnode-flags": "^7.4.11",
     "lodash": "^4.17.21",
     "platform": "^1.3.6",
+    "react": "^18.2.0",
     "tgui": "workspace:*"
   }
 }

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

@@ -1,11 +1,8 @@
-import { linkEvent } from 'inferno';
 import { Button } from 'tgui/components';
 import { createRenderer } from 'tgui/renderer';
 
 const render = createRenderer();
 
-const handleClick = () => undefined;
-
 export const SingleButton = () => {
   const node = <Button>Hello world!</Button>;
   render(node);
@@ -16,13 +13,6 @@ export const SingleButtonWithCallback = () => {
   render(node);
 };
 
-export const SingleButtonWithLinkEvent = () => {
-  const node = (
-    <Button onClick={linkEvent(null, handleClick)}>Hello world!</Button>
-  );
-  render(node);
-};
-
 export const ListOfButtons = () => {
   const nodes: JSX.Element[] = [];
   for (let i = 0; i < 100; i++) {
@@ -45,19 +35,6 @@ export const ListOfButtonsWithCallback = () => {
   render(<div>{nodes}</div>);
 };
 
-export const ListOfButtonsWithLinkEvent = () => {
-  const nodes: JSX.Element[] = [];
-  for (let i = 0; i < 100; i++) {
-    const node = (
-      <Button key={i} onClick={linkEvent(null, handleClick)}>
-        Hello world! {i}
-      </Button>
-    );
-    nodes.push(node);
-  }
-  render(<div>{nodes}</div>);
-};
-
 export const ListOfButtonsWithIcons = () => {
   const nodes: JSX.Element[] = [];
   for (let i = 0; i < 100; i++) {

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

@@ -1,22 +1,20 @@
-import { StoreProvider, configureStore } from 'tgui/store';
+import { configureStore } from 'tgui/store';
 
 import { DisposalUnit } from 'tgui/interfaces/DisposalUnit';
-import { backendUpdate } from 'tgui/backend';
+import { backendUpdate, setGlobalStore } from 'tgui/backend';
 import { createRenderer } from 'tgui/renderer';
 
 const store = configureStore({ sideEffects: false });
 
 const renderUi = createRenderer((dataJson: string) => {
+  setGlobalStore(store);
+
   store.dispatch(
     backendUpdate({
       data: Byond.parseJson(dataJson),
     })
   );
-  return (
-    <StoreProvider store={store}>
-      <DisposalUnit />
-    </StoreProvider>
-  );
+  return <DisposalUnit />;
 });
 
 export const data = JSON.stringify({

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "tgui-dev-server",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "type": "module",
   "dependencies": {
     "axios": "^1.6.2",

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>
@@ -113,7 +113,7 @@ const HoboPanel = (props, context) => {
             position: 'fixed',
             top: '1em',
             right: '2em',
-            'z-index': 1000,
+            zIndex: 1000,
           }}
           selected={settings.visible}
           onClick={() => settings.toggle()}>