Removes context from tgui (#80003)

## About The Pull Request
*Most context
This is a precursor PR for moving to React. Newer React (>16) does not
have the `context` parameter, so it needs removed. I want to make
converting to React look slightly less intimidating, so this is just
short-circuiting context here.

This shouldn't be considered a long term solution.
## Why It's Good For The Game
Moving to react is good actually
## Changelog
N/A hopefully no noticeable change

tgui/packages/common/redux.ts

@@ -201,12 +201,16 @@ export const createAction = <TAction extends string>(
 export const useDispatch = <TAction extends Action = AnyAction>(context: {
   store: Store<unknown, TAction>;
 }): Dispatch<TAction> => {
-  return context.store.dispatch;
+  return context?.store?.dispatch;
 };
 
 export const useSelector = <State, Selected>(
   context: { store: Store<State, Action> },
   selector: (state: State) => Selected
 ): Selected => {
-  return selector(context.store.getState());
+  if (!context) {
+    return {} as Selected;
+  }
+
+  return selector(context?.store?.getState());
 };

tgui/packages/tgui-panel/index.jsx

@@ -22,6 +22,7 @@ import { setupPanelFocusHacks } from './panelFocus';
 import { pingMiddleware, pingReducer } from './ping';
 import { settingsMiddleware, settingsReducer } from './settings';
 import { telemetryMiddleware } from './telemetry';
+import { setGlobalStore } from 'tgui/backend';
 
 perf.mark('inception', window.performance?.timing?.navigationStart);
 perf.mark('init');
@@ -47,6 +48,8 @@ const store = configureStore({
 });
 
 const renderApp = createRenderer(() => {
+  setGlobalStore(store);
+
   const { Panel } = require('./Panel');
   return (
     <StoreProvider store={store}>

tgui/packages/tgui/backend.ts

@@ -21,6 +21,12 @@ import { resumeRenderer, suspendRenderer } from './renderer';
 
 const logger = createLogger('backend');
 
+export let globalStore;
+
+export const setGlobalStore = (store) => {
+  globalStore = store;
+};
+
 export const backendUpdate = createAction('backend/update');
 export const backendSetSharedState = createAction('backend/setSharedState');
 export const backendSuspendStart = createAction('backend/suspendStart');
@@ -267,6 +273,10 @@ type BackendState<TData> = {
   shared: Record<string, any>;
   suspending: boolean;
   suspended: boolean;
+  debug?: {
+    debugLayout: boolean;
+    kitchenSink: boolean;
+  };
 };
 
 /**
@@ -280,9 +290,9 @@ export const selectBackend = <TData>(state: any): BackendState<TData> =>
  *
  * Includes the `act` function for performing DM actions.
  */
-export const useBackend = <TData>(context: any) => {
-  const { store } = context;
-  const state = selectBackend<TData>(store.getState());
+export const useBackend = <TData>() => {
+  const state: BackendState<TData> = globalStore?.getState()?.backend;
+
   return {
     ...state,
     act: sendAct,
@@ -308,18 +318,16 @@ type StateWithSetter<T> = [T, (nextState: T) => void];
  * @param initialState Initializes your global variable with this value.
  */
 export const useLocalState = <T>(
-  context: any,
   key: string,
   initialState: T
 ): StateWithSetter<T> => {
-  const { store } = context;
-  const state = selectBackend(store.getState());
-  const sharedStates = state.shared ?? {};
+  const state = globalStore?.getState()?.backend;
+  const sharedStates = state?.shared ?? {};
   const sharedState = key in sharedStates ? sharedStates[key] : initialState;
   return [
     sharedState,
     (nextState) => {
-      store.dispatch(
+      globalStore.dispatch(
         backendSetSharedState({
           key,
           nextState:
@@ -347,26 +355,22 @@ export const useLocalState = <T>(
  * @param initialState Initializes your global variable with this value.
  */
 export const useSharedState = <T>(
-  context: any,
   key: string,
   initialState: T
 ): StateWithSetter<T> => {
-  const { store } = context;
-  const state = selectBackend(store.getState());
-  const sharedStates = state.shared ?? {};
+  const state = globalStore?.getState()?.backend;
+  const sharedStates = state?.shared ?? {};
   const sharedState = key in sharedStates ? sharedStates[key] : initialState;
   return [
     sharedState,
     (nextState) => {
-      // prettier-ignore
       Byond.sendMessage({
         type: 'setSharedState',
         key,
-        value: JSON.stringify(
-          typeof nextState === 'function'
-            ? nextState(sharedState)
-            : nextState
-        ) || '',
+        value:
+          JSON.stringify(
+            typeof nextState === 'function' ? nextState(sharedState) : nextState
+          ) || '',
       });
     },
   ];

tgui/packages/tgui/components/Dropdown.tsx

@@ -180,33 +180,24 @@ export class Dropdown extends Component<DropdownProps, DropdownState> {
 
     const to_render = ops.length ? ops : 'No Options Found';
 
-    render(
-      <div>{to_render}</div>,
-      renderedMenu,
-      () => {
-        let singletonPopper = Dropdown.singletonPopper;
-        if (singletonPopper === undefined) {
-          singletonPopper = createPopper(
-            Dropdown.virtualElement,
-            renderedMenu!,
-            {
-              ...DEFAULT_OPTIONS,
-              placement: 'bottom-start',
-            }
-          );
+    render(<div>{to_render}</div>, renderedMenu, () => {
+      let singletonPopper = Dropdown.singletonPopper;
+      if (singletonPopper === undefined) {
+        singletonPopper = createPopper(Dropdown.virtualElement, renderedMenu!, {
+          ...DEFAULT_OPTIONS,
+          placement: 'bottom-start',
+        });
 
-          Dropdown.singletonPopper = singletonPopper;
-        } else {
-          singletonPopper.setOptions({
-            ...DEFAULT_OPTIONS,
-            placement: 'bottom-start',
-          });
+        Dropdown.singletonPopper = singletonPopper;
+      } else {
+        singletonPopper.setOptions({
+          ...DEFAULT_OPTIONS,
+          placement: 'bottom-start',
+        });
 
-          singletonPopper.update();
-        }
-      },
-      this.context
-    );
+        singletonPopper.update();
+      }
+    });
   }
 
   setOpen(open: boolean) {

tgui/packages/tgui/components/Popper.tsx

@@ -70,12 +70,7 @@ export class Popper extends Component<PopperProps> {
   renderPopperContent(callback: () => void) {
     // `render` errors when given false, so we convert it to `null`,
     // which is supported.
-    render(
-      this.props.popperContent || null,
-      this.renderedContent,
-      callback,
-      this.context
-    );
+    render(this.props.popperContent || null, this.renderedContent, callback);
   }
 
   render() {

tgui/packages/tgui/components/TextArea.jsx

@@ -12,8 +12,8 @@ import { toInputValue } from './Input';
 import { KEY_ENTER, KEY_ESCAPE, KEY_TAB } from 'common/keycodes';
 
 export class TextArea extends Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
     this.textareaRef = props.innerRef || createRef();
     this.state = {
       editing: false,

tgui/packages/tgui/components/Tooltip.tsx

@@ -103,33 +103,28 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
       return;
     }
 
-    render(
-      <span>{this.props.content}</span>,
-      renderedTooltip,
-      () => {
-        let singletonPopper = Tooltip.singletonPopper;
-        if (singletonPopper === undefined) {
-          singletonPopper = createPopper(
-            Tooltip.virtualElement,
-            renderedTooltip!,
-            {
-              ...DEFAULT_OPTIONS,
-              placement: this.props.position || 'auto',
-            }
-          );
-
-          Tooltip.singletonPopper = singletonPopper;
-        } else {
-          singletonPopper.setOptions({
+    render(<span>{this.props.content}</span>, renderedTooltip, () => {
+      let singletonPopper = Tooltip.singletonPopper;
+      if (singletonPopper === undefined) {
+        singletonPopper = createPopper(
+          Tooltip.virtualElement,
+          renderedTooltip!,
+          {
             ...DEFAULT_OPTIONS,
             placement: this.props.position || 'auto',
-          });
+          }
+        );
 
-          singletonPopper.update();
-        }
-      },
-      this.context
-    );
+        Tooltip.singletonPopper = singletonPopper;
+      } else {
+        singletonPopper.setOptions({
+          ...DEFAULT_OPTIONS,
+          placement: this.props.position || 'auto',
+        });
+
+        singletonPopper.update();
+      }
+    });
   }
 
   componentDidUpdate() {

tgui/packages/tgui/debug/KitchenSink.jsx

@@ -20,10 +20,10 @@ const r = require.context('../stories', false, /\.stories\.js$/);
  */
 const getStories = () => r.keys().map((path) => r(path));
 
-export const KitchenSink = (props, context) => {
+export const KitchenSink = (props) => {
   const { panel } = props;
-  const [theme] = useLocalState(context, 'kitchenSinkTheme');
-  const [pageIndex, setPageIndex] = useLocalState(context, 'pageIndex', 0);
+  const [theme] = useLocalState('kitchenSinkTheme');
+  const [pageIndex, setPageIndex] = useLocalState('pageIndex', 0);
   const stories = getStories();
   const story = stories[pageIndex];
   const Layout = panel ? Pane : Window;

tgui/packages/tgui/index.tsx

@@ -26,7 +26,7 @@ import './styles/themes/syndicate.scss';
 import './styles/themes/wizard.scss';
 import './styles/themes/admin.scss';
 
-import { StoreProvider, configureStore } from './store';
+import { configureStore } from './store';
 
 import { captureExternalLinks } from './links';
 import { createRenderer } from './renderer';
@@ -34,6 +34,7 @@ import { perf } from 'common/perf';
 import { setupGlobalEvents } from './events';
 import { setupHotKeys } from './hotkeys';
 import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
+import { setGlobalStore } from './backend';
 
 perf.mark('inception', window.performance?.timing?.navigationStart);
 perf.mark('init');
@@ -41,13 +42,11 @@ perf.mark('init');
 const store = configureStore();
 
 const renderApp = createRenderer(() => {
+  setGlobalStore(store);
+
   const { getRoutedComponent } = require('./routes');
   const Component = getRoutedComponent(store);
-  return (
-    <StoreProvider store={store}>
-      <Component />
-    </StoreProvider>
-  );
+  return <Component />;
 });
 
 const setupApp = () => {

tgui/packages/tgui/interfaces/AbductorConsole.jsx

@@ -3,8 +3,8 @@ import { Button, LabeledList, NoticeBox, Section, Tabs } from '../components';
 import { Window } from '../layouts';
 import { GenericUplink } from './Uplink/GenericUplink';
 
-export const AbductorConsole = (props, context) => {
-  const [tab, setTab] = useSharedState(context, 'tab', 1);
+export const AbductorConsole = (props) => {
+  const [tab, setTab] = useSharedState('tab', 1);
   return (
     <Window theme="abductor" width={600} height={532}>
       <Window.Content scrollable>
@@ -36,8 +36,8 @@ export const AbductorConsole = (props, context) => {
   );
 };
 
-const Abductsoft = (props, context) => {
-  const { act, data } = useBackend(context);
+const Abductsoft = (props) => {
+  const { act, data } = useBackend();
   const { experiment, points, credits, categories } = data;
 
   if (!experiment) {
@@ -81,8 +81,8 @@ const Abductsoft = (props, context) => {
   );
 };
 
-const EmergencyTeleporter = (props, context) => {
-  const { act, data } = useBackend(context);
+const EmergencyTeleporter = (props) => {
+  const { act, data } = useBackend();
   const { pad, gizmo } = data;
 
   if (!pad) {
@@ -114,8 +114,8 @@ const EmergencyTeleporter = (props, context) => {
   );
 };
 
-const VestSettings = (props, context) => {
-  const { act, data } = useBackend(context);
+const VestSettings = (props) => {
+  const { act, data } = useBackend();
   const { vest, vest_mode, vest_lock } = data;
 
   if (!vest) {

tgui/packages/tgui/interfaces/AccountingConsole.tsx

@@ -30,12 +30,8 @@ enum SCREENS {
   audit,
 }
 
-export const AccountingConsole = (props, context) => {
-  const [screenmode, setScreenmode] = useLocalState(
-    context,
-    'tab_main',
-    SCREENS.users
-  );
+export const AccountingConsole = (props) => {
+  const [screenmode, setScreenmode] = useLocalState('tab_main', SCREENS.users);
 
   return (
     <Window width={300} height={360}>
@@ -66,8 +62,8 @@ export const AccountingConsole = (props, context) => {
   );
 };
 
-const UsersScreen = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const UsersScreen = (props) => {
+  const { data } = useBackend<Data>();
   const { PlayerAccounts } = data;
 
   return (
@@ -93,8 +89,8 @@ const UsersScreen = (props, context) => {
   );
 };
 
-const AuditScreen = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const AuditScreen = (props) => {
+  const { data } = useBackend<Data>();
   const { AuditLog } = data;
 
   return (
@@ -110,8 +106,8 @@ const AuditScreen = (props, context) => {
 };
 
 /** The modal menu that contains the prompts to making new channels. */
-const MarketCrashing = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const MarketCrashing = (props) => {
+  const { data } = useBackend<Data>();
 
   const { Crashing } = data;
   if (!Crashing) {

tgui/packages/tgui/interfaces/Achievements.jsx

@@ -2,11 +2,10 @@ import { useBackend, useLocalState } from '../backend';
 import { Box, Flex, Icon, Table, Tabs, Tooltip } from '../components';
 import { Window } from '../layouts';
 
-export const Achievements = (props, context) => {
-  const { data } = useBackend(context);
+export const Achievements = (props) => {
+  const { data } = useBackend();
   const { categories } = data;
   const [selectedCategory, setSelectedCategory] = useLocalState(
-    context,
     'category',
     categories[0]
   );
@@ -39,7 +38,7 @@ export const Achievements = (props, context) => {
   );
 };
 
-const AchievementTable = (props, context) => {
+const AchievementTable = (props) => {
   const { achievements } = props;
   return (
     <Table>
@@ -90,14 +89,10 @@ const Achievement = (props) => {
   );
 };
 
-const HighScoreTable = (props, context) => {
-  const { data } = useBackend(context);
+const HighScoreTable = (props) => {
+  const { data } = useBackend();
   const { highscore: highscores, user_ckey } = data;
-  const [highScoreIndex, setHighScoreIndex] = useLocalState(
-    context,
-    'highscore',
-    0
-  );
+  const [highScoreIndex, setHighScoreIndex] = useLocalState('highscore', 0);
   const highscore = highscores[highScoreIndex];
   if (!highscore) {
     return null;

tgui/packages/tgui/interfaces/AdminBookViewer.tsx

@@ -9,8 +9,8 @@ type ViewerData = {
   view_raw: boolean;
 };
 
-export const AdminBookViewer = (_: any, context: any) => {
-  const { data } = useBackend<ViewerData>(context);
+export const AdminBookViewer = (_: any) => {
+  const { data } = useBackend<ViewerData>();
   return (
     <Window title={'Reading: ' + data.title}>
       <Window.Content scrollable>

tgui/packages/tgui/interfaces/AdminFax.jsx

@@ -2,7 +2,7 @@ import { useBackend, useLocalState } from '../backend';
 import { Section, Box, Dropdown, Button, Input, TextArea, Divider, NumberInput, Tooltip, Knob } from '../components';
 import { Window } from '../layouts';
 
-export const AdminFax = (props, context) => {
+export const AdminFax = (props) => {
   return (
     <Window title="Admin Fax Panel" width={400} height={675} theme="admin">
       <Window.Content>
@@ -12,26 +12,18 @@ export const AdminFax = (props, context) => {
   );
 };
 
-export const FaxMainPanel = (props, context) => {
-  const { act, data } = useBackend(context);
+export const FaxMainPanel = (props) => {
+  const { act, data } = useBackend();
 
-  const [fax, setFax] = useLocalState(context, 'fax', '');
-  const [saved, setSaved] = useLocalState(context, 'saved', false);
-  const [paperName, setPaperName] = useLocalState(context, 'paperName', '');
-  const [fromWho, setFromWho] = useLocalState(context, 'fromWho', '');
-  const [rawText, setRawText] = useLocalState(context, 'rawText', '');
-  const [stamp, setStamp] = useLocalState(context, 'stampType', '');
-  const [stampCoordX, setStampCoordX] = useLocalState(
-    context,
-    'stampCoordX',
-    0
-  );
-  const [stampCoordY, setStampCoordY] = useLocalState(
-    context,
-    'stampCoordY',
-    0
-  );
-  const [stampAngle, setStampAngle] = useLocalState(context, 'stampAngle', 0);
+  const [fax, setFax] = useLocalState('fax', '');
+  const [saved, setSaved] = useLocalState('saved', false);
+  const [paperName, setPaperName] = useLocalState('paperName', '');
+  const [fromWho, setFromWho] = useLocalState('fromWho', '');
+  const [rawText, setRawText] = useLocalState('rawText', '');
+  const [stamp, setStamp] = useLocalState('stampType', '');
+  const [stampCoordX, setStampCoordX] = useLocalState('stampCoordX', 0);
+  const [stampCoordY, setStampCoordY] = useLocalState('stampCoordY', 0);
+  const [stampAngle, setStampAngle] = useLocalState('stampAngle', 0);
   if (stamp && data.stamps[0] !== 'None') {
     data.stamps.unshift('None');
   }

tgui/packages/tgui/interfaces/AdminPDA.jsx

@@ -3,7 +3,7 @@ import { useBackend, useLocalState } from '../backend';
 import { Button } from '../components/Button';
 import { Window } from '../layouts';
 
-export const AdminPDA = (props, context) => {
+export const AdminPDA = (props) => {
   return (
     <Window title="Send PDA Message" width={300} height={575} theme="admin">
       <Window.Content>
@@ -15,15 +15,14 @@ export const AdminPDA = (props, context) => {
   );
 };
 
-const ReceiverChoice = (props, context) => {
-  const { data } = useBackend(context);
+const ReceiverChoice = (props) => {
+  const { data } = useBackend();
   const { users } = data;
   const receivers = Array.from(Object.values(users));
 
-  const [user, setUser] = useLocalState(context, 'user', '');
-  const [spam, setSpam] = useLocalState(context, 'spam', false);
+  const [user, setUser] = useLocalState('user', '');
+  const [spam, setSpam] = useLocalState('spam', false);
   const [showInvisible, setShowInvisible] = useLocalState(
-    context,
     'showInvisible',
     false
   );
@@ -66,9 +65,9 @@ const ReceiverChoice = (props, context) => {
   );
 };
 
-const SenderInfo = (props, context) => {
-  const [name, setName] = useLocalState(context, 'name', '');
-  const [job, setJob] = useLocalState(context, 'job', '');
+const SenderInfo = (props) => {
+  const [name, setName] = useLocalState('name', '');
+  const [job, setJob] = useLocalState('job', '');
 
   return (
     <Section title="From Who?" textAlign="center">
@@ -94,17 +93,16 @@ const SenderInfo = (props, context) => {
   );
 };
 
-const MessageInput = (props, context) => {
-  const { act } = useBackend(context);
+const MessageInput = (props) => {
+  const { act } = useBackend();
 
-  const [user, setUser] = useLocalState(context, 'user', '');
-  const [name, setName] = useLocalState(context, 'name', '');
-  const [job, setJob] = useLocalState(context, 'job', '');
-  const [messageText, setMessageText] = useLocalState(context, 'message', '');
-  const [spam, setSpam] = useLocalState(context, 'spam', false);
-  const [force, setForce] = useLocalState(context, 'force', false);
+  const [user, setUser] = useLocalState('user', '');
+  const [name, setName] = useLocalState('name', '');
+  const [job, setJob] = useLocalState('job', '');
+  const [messageText, setMessageText] = useLocalState('message', '');
+  const [spam, setSpam] = useLocalState('spam', false);
+  const [force, setForce] = useLocalState('force', false);
   const [showInvisible, setShowInvisible] = useLocalState(
-    context,
     'showInvisible',
     false
   );

tgui/packages/tgui/interfaces/Adminhelp.tsx

@@ -10,8 +10,8 @@ type AdminhelpData = {
   urgentAhelpPromptMessage: string;
 };
 
-export const Adminhelp = (props, context) => {
-  const { act, data } = useBackend<AdminhelpData>(context);
+export const Adminhelp = (props) => {
+  const { act, data } = useBackend<AdminhelpData>();
   const {
     adminCount,
     urgentAhelpEnabled,
@@ -19,20 +19,14 @@ export const Adminhelp = (props, context) => {
     urgentAhelpPromptMessage,
   } = data;
   const [requestForAdmin, setRequestForAdmin] = useLocalState(
-    context,
     'request_for_admin',
     false
   );
   const [currentlyInputting, setCurrentlyInputting] = useLocalState(
-    context,
     'confirm_request',
     false
   );
-  const [ahelpMessage, setAhelpMessage] = useLocalState(
-    context,
-    'ahelp_message',
-    ''
-  );
+  const [ahelpMessage, setAhelpMessage] = useLocalState('ahelp_message', '');
 
   const confirmationText = 'alert admins';
   return (

tgui/packages/tgui/interfaces/AdventureBrowser.tsx

@@ -23,10 +23,9 @@ type AdventureBrowserData = AdventureDataProvider & {
   delay_message: string;
 };
 
-const AdventureList = (props, context) => {
-  const { data, act } = useBackend<AdventureBrowserData>(context);
+const AdventureList = (props) => {
+  const { data, act } = useBackend<AdventureBrowserData>();
   const [openAdventure, setOpenAdventure] = useLocalState<string | null>(
-    context,
     'openAdventure',
     null
   );
@@ -57,8 +56,8 @@ const AdventureList = (props, context) => {
   );
 };
 
-const DebugPlayer = (props, context) => {
-  const { data, act } = useBackend<AdventureBrowserData>(context);
+const DebugPlayer = (props) => {
+  const { data, act } = useBackend<AdventureBrowserData>();
   return (
     <Section
       title="Playtest"
@@ -79,8 +78,8 @@ const DebugPlayer = (props, context) => {
   );
 };
 
-export const AdventureBrowser = (props, context) => {
-  const { data } = useBackend<AdventureBrowserData>(context);
+export const AdventureBrowser = (props) => {
+  const { data } = useBackend<AdventureBrowserData>();
 
   return (
     <Window width={600} height={400} title="Adventure Overview">

tgui/packages/tgui/interfaces/AiAirlock.jsx

@@ -17,8 +17,8 @@ const dangerMap = {
   },
 };
 
-export const AiAirlock = (props, context) => {
-  const { act, data } = useBackend(context);
+export const AiAirlock = (props) => {
+  const { act, data } = useBackend();
   const statusMain = dangerMap[data.power.main] || dangerMap[0];
   const statusBackup = dangerMap[data.power.backup] || dangerMap[0];
   const statusElectrify = dangerMap[data.shock] || dangerMap[0];

tgui/packages/tgui/interfaces/AiRestorer.tsx

@@ -24,8 +24,8 @@ export const AiRestorer = () => {
   );
 };
 
-export const AiRestorerContent = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AiRestorerContent = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     AI_present,
     error,

tgui/packages/tgui/interfaces/AiVoiceChanger.tsx

@@ -11,8 +11,8 @@ type Data = {
   name: string;
 };
 
-export const AiVoiceChanger = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AiVoiceChanger = (props) => {
+  const { act, data } = useBackend<Data>();
   const { loud, name, on, say_verb, voices } = data;
 
   return (

tgui/packages/tgui/interfaces/AirAlarm.tsx

@@ -43,8 +43,8 @@ type AirAlarmData = {
   thresholdTypeMap: Record<string, number>;
 };
 
-export const AirAlarm = (props, context) => {
-  const { act, data } = useBackend<AirAlarmData>(context);
+export const AirAlarm = (props) => {
+  const { act, data } = useBackend<AirAlarmData>();
   const locked = data.locked && !data.siliconUser;
   return (
     <Window width={475} height={650}>
@@ -57,8 +57,8 @@ export const AirAlarm = (props, context) => {
   );
 };
 
-const AirAlarmStatus = (props, context) => {
-  const { data } = useBackend<AirAlarmData>(context);
+const AirAlarmStatus = (props) => {
+  const { data } = useBackend<AirAlarmData>();
   const { envData } = data;
   const dangerMap = {
     0: {
@@ -142,8 +142,8 @@ const AIR_ALARM_ROUTES = {
 
 type Screen = keyof typeof AIR_ALARM_ROUTES;
 
-const AirAlarmControl = (props, context) => {
-  const [screen, setScreen] = useLocalState<Screen>(context, 'screen', 'home');
+const AirAlarmControl = (props) => {
+  const [screen, setScreen] = useLocalState<Screen>('screen', 'home');
   const route = AIR_ALARM_ROUTES[screen] || AIR_ALARM_ROUTES.home;
   const Component = route.component();
   return (
@@ -166,9 +166,9 @@ const AirAlarmControl = (props, context) => {
 //  Home screen
 // --------------------------------------------------------
 
-const AirAlarmControlHome = (props, context) => {
-  const { act, data } = useBackend<AirAlarmData>(context);
-  const [screen, setScreen] = useLocalState<Screen>(context, 'screen', 'home');
+const AirAlarmControlHome = (props) => {
+  const { act, data } = useBackend<AirAlarmData>();
+  const [screen, setScreen] = useLocalState<Screen>('screen', 'home');
   const {
     selectedModePath,
     panicSiphonPath,
@@ -238,8 +238,8 @@ const AirAlarmControlHome = (props, context) => {
 //  Vents
 // --------------------------------------------------------
 
-const AirAlarmControlVents = (props, context) => {
-  const { data } = useBackend<AirAlarmData>(context);
+const AirAlarmControlVents = (props) => {
+  const { data } = useBackend<AirAlarmData>();
   const { vents } = data;
   if (!vents || vents.length === 0) {
     return <span>Nothing to show</span>;
@@ -256,8 +256,8 @@ const AirAlarmControlVents = (props, context) => {
 //  Scrubbers
 // --------------------------------------------------------
 
-const AirAlarmControlScrubbers = (props, context) => {
-  const { data } = useBackend<AirAlarmData>(context);
+const AirAlarmControlScrubbers = (props) => {
+  const { data } = useBackend<AirAlarmData>();
   const { scrubbers } = data;
   if (!scrubbers || scrubbers.length === 0) {
     return <span>Nothing to show</span>;
@@ -274,8 +274,8 @@ const AirAlarmControlScrubbers = (props, context) => {
 //  Modes
 // --------------------------------------------------------
 
-const AirAlarmControlModes = (props, context) => {
-  const { act, data } = useBackend<AirAlarmData>(context);
+const AirAlarmControlModes = (props) => {
+  const { act, data } = useBackend<AirAlarmData>();
   const { modes, selectedModePath } = data;
   if (!modes || modes.length === 0) {
     return <span>Nothing to show</span>;
@@ -315,8 +315,8 @@ type EditingModalProps = {
   finish: () => void;
 };
 
-const EditingModal = (props: EditingModalProps, context) => {
-  const { act, data } = useBackend<AirAlarmData>(context);
+const EditingModal = (props: EditingModalProps) => {
+  const { act, data } = useBackend<AirAlarmData>();
   const { id, name, type, typeVar, typeName, unit, oldValue, finish } = props;
   return (
     <Modal>
@@ -370,12 +370,12 @@ const EditingModal = (props: EditingModalProps, context) => {
   );
 };
 
-const AirAlarmControlThresholds = (props, context) => {
-  const { act, data } = useBackend<AirAlarmData>(context);
+const AirAlarmControlThresholds = (props) => {
+  const { act, data } = useBackend<AirAlarmData>();
   const [activeModal, setActiveModal] = useLocalState<Omit<
     EditingModalProps,
     'oldValue'
-  > | null>(context, 'tlvModal', null);
+  > | null>('tlvModal', null);
   const { tlvSettings, thresholdTypeMap } = data;
   return (
     <>

tgui/packages/tgui/interfaces/AirlockController.tsx

@@ -16,8 +16,8 @@ type AirlockStatus = {
   color: string;
 };
 
-export const AirlockController = (props, context) => {
-  const { data } = useBackend<AirlockControllerData>(context);
+export const AirlockController = (props) => {
+  const { data } = useBackend<AirlockControllerData>();
   const { airlockState, pumpStatus, interiorStatus, exteriorStatus } = data;
   const currentStatus: AirlockStatus = getAirlockStatus(airlockState);
   const nameToUpperCase = (str: string) =>
@@ -55,8 +55,8 @@ export const AirlockController = (props, context) => {
 };
 
 /** Displays the buttons on top of the window to cycle the airlock */
-const AirLockButtons = (props, context) => {
-  const { act, data } = useBackend<AirlockControllerData>(context);
+const AirLockButtons = (props) => {
+  const { act, data } = useBackend<AirlockControllerData>();
   const { airlockState } = data;
   switch (airlockState) {
     case 'pressurize':
@@ -105,8 +105,8 @@ const AirLockButtons = (props, context) => {
 };
 
 /** Displays the numeric pressure alongside an icon for the user */
-const PressureIndicator = (props, context) => {
-  const { data } = useBackend<AirlockControllerData>(context);
+const PressureIndicator = (props) => {
+  const { data } = useBackend<AirlockControllerData>();
   const { sensorPressure } = data;
   const {
     currentStatus: { icon, color },

tgui/packages/tgui/interfaces/AirlockElectronics.tsx

@@ -14,8 +14,8 @@ type Data = {
   shell: BooleanLike;
 };
 
-export const AirLockMainSection = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AirLockMainSection = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     accesses = [],
     oneAccess,
@@ -138,7 +138,7 @@ export const AirLockMainSection = (props, context) => {
   );
 };
 
-export const AirlockElectronics = (props, context) => {
+export const AirlockElectronics = (props) => {
   return (
     <Window width={420} height={485}>
       <Window.Content>

tgui/packages/tgui/interfaces/AlertModal.tsx

@@ -17,8 +17,8 @@ type AlertModalData = {
 const KEY_DECREMENT = -1;
 const KEY_INCREMENT = 1;
 
-export const AlertModal = (props, context) => {
-  const { act, data } = useBackend<AlertModalData>(context);
+export const AlertModal = (props) => {
+  const { act, data } = useBackend<AlertModalData>();
   const {
     autofocus,
     buttons = [],
@@ -27,7 +27,7 @@ export const AlertModal = (props, context) => {
     timeout,
     title,
   } = data;
-  const [selected, setSelected] = useLocalState<number>(context, 'selected', 0);
+  const [selected, setSelected] = useLocalState<number>('selected', 0);
   // Dynamically sets window dimensions
   const windowHeight =
     115 +
@@ -89,8 +89,8 @@ export const AlertModal = (props, context) => {
  * Technically this handles more than 2 buttons, but you
  * should just be using a list input in that case.
  */
-const ButtonDisplay = (props, context) => {
-  const { data } = useBackend<AlertModalData>(context);
+const ButtonDisplay = (props) => {
+  const { data } = useBackend<AlertModalData>();
   const { buttons = [], large_buttons, swapped_buttons } = data;
   const { selected } = props;
 
@@ -127,8 +127,8 @@ const ButtonDisplay = (props, context) => {
 /**
  * Displays a button with variable sizing.
  */
-const AlertButton = (props, context) => {
-  const { act, data } = useBackend<AlertModalData>(context);
+const AlertButton = (props) => {
+  const { act, data } = useBackend<AlertModalData>();
   const { large_buttons } = data;
   const { button, selected } = props;
   const buttonWidth = button.length > 7 ? button.length : 7;

tgui/packages/tgui/interfaces/AnomalyRefinery.jsx

@@ -3,8 +3,8 @@ import { Button, Icon, Modal, Section, Stack, LabeledList, Box } from '../compon
 import { Window } from '../layouts';
 import { GasmixParser } from './common/GasmixParser';
 
-export const AnomalyRefinery = (props, context) => {
-  const { act, data } = useBackend(context);
+export const AnomalyRefinery = (props) => {
+  const { act, data } = useBackend();
   return (
     <Window title="Anomaly Refinery" width={550} height={350}>
       <Window.Content>
@@ -14,9 +14,9 @@ export const AnomalyRefinery = (props, context) => {
   );
 };
 
-const AnomalyRefineryContent = (props, context) => {
-  const { act, data } = useBackend(context);
-  const [currentTab, changeTab] = useSharedState(context, 'exploderTab', 1);
+const AnomalyRefineryContent = (props) => {
+  const { act, data } = useBackend();
+  const [currentTab, changeTab] = useSharedState('exploderTab', 1);
   const { core, valvePresent, active } = data;
   return (
     <Stack vertical fill>
@@ -59,8 +59,8 @@ const AnomalyRefineryContent = (props, context) => {
   );
 };
 
-const CoreCompressorContent = (props, context) => {
-  const { act, data } = useBackend(context);
+const CoreCompressorContent = (props) => {
+  const { act, data } = useBackend();
   const { core, requiredRadius, gasList, valveReady, active, valvePresent } =
     data;
   return (
@@ -160,8 +160,8 @@ const CoreCompressorContent = (props, context) => {
     </>
   );
 };
-const BombProcessorContent = (props, context) => {
-  const { act, data } = useBackend(context);
+const BombProcessorContent = (props) => {
+  const { act, data } = useBackend();
   const { gasList, reactionIncrement } = data;
   return (
     <>

tgui/packages/tgui/interfaces/AntagInfoBlob.tsx

@@ -14,7 +14,7 @@ type Data = {
 
 const BLOB_COLOR = '#556b2f';
 
-export const AntagInfoBlob = (props, context) => {
+export const AntagInfoBlob = (props) => {
   return (
     <Window width={400} height={550}>
       <Window.Content>
@@ -31,8 +31,8 @@ export const AntagInfoBlob = (props, context) => {
   );
 };
 
-const Overview = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const Overview = (props) => {
+  const { data } = useBackend<Data>();
   const { color, description, effects, name } = data;
 
   if (!name) {
@@ -89,7 +89,7 @@ const Overview = (props, context) => {
   );
 };
 
-const Basics = (props, context) => {
+const Basics = (props) => {
   return (
     <Collapsible title="The Basics">
       <LabeledList>
@@ -118,7 +118,7 @@ const Basics = (props, context) => {
   );
 };
 
-const Minions = (props, context) => {
+const Minions = (props) => {
   return (
     <Collapsible title="Minions">
       <LabeledList>
@@ -137,7 +137,7 @@ const Minions = (props, context) => {
   );
 };
 
-const Structures = (props, context) => {
+const Structures = (props) => {
   return (
     <Collapsible title="Structures">
       <Box>
@@ -173,8 +173,8 @@ const Structures = (props, context) => {
   );
 };
 
-const ObjectiveDisplay = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const ObjectiveDisplay = (props) => {
+  const { data } = useBackend<Data>();
   const { color, objectives } = data;
 
   return (

tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx

@@ -7,8 +7,8 @@ type Data = {
   objectives: Objective[];
 };
 
-export const AntagInfoBrainwashed = (porps, context) => {
-  const { data } = useBackend<Data>(context);
+export const AntagInfoBrainwashed = (porps) => {
+  const { data } = useBackend<Data>();
 
   return (
     <Window width={400} height={400} theme="abductor">

tgui/packages/tgui/interfaces/AntagInfoBrother.tsx

@@ -9,8 +9,8 @@ type Info = {
   brothers: string;
 };
 
-export const AntagInfoBrother = (props, context) => {
-  const { data } = useBackend<Info>(context);
+export const AntagInfoBrother = (props) => {
+  const { data } = useBackend<Info>();
   const { antag_name, brothers, objectives } = data;
   return (
     <Window width={620} height={250}>

tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx

@@ -54,7 +54,7 @@ type Info = {
   can_change_objective: BooleanLike;
 };
 
-export const AntagInfoChangeling = (props, context) => {
+export const AntagInfoChangeling = (props) => {
   return (
     <Window width={720} height={750}>
       <Window.Content
@@ -87,8 +87,8 @@ export const AntagInfoChangeling = (props, context) => {
   );
 };
 
-const HivemindSection = (props, context) => {
-  const { act, data } = useBackend<Info>(context);
+const HivemindSection = (props) => {
+  const { act, data } = useBackend<Info>();
   const { true_name } = data;
   return (
     <Section fill title="Hivemind">
@@ -115,8 +115,8 @@ const HivemindSection = (props, context) => {
   );
 };
 
-const IntroductionSection = (props, context) => {
-  const { act, data } = useBackend<Info>(context);
+const IntroductionSection = (props) => {
+  const { act, data } = useBackend<Info>();
   const { true_name, hive_name, objectives, can_change_objective } = data;
   return (
     <Section
@@ -145,8 +145,8 @@ const IntroductionSection = (props, context) => {
   );
 };
 
-const AbilitiesSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const AbilitiesSection = (props) => {
+  const { data } = useBackend<Info>();
   return (
     <Section fill title="Abilities">
       <Stack fill>
@@ -195,11 +195,10 @@ const AbilitiesSection = (props, context) => {
   );
 };
 
-const MemoriesSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const MemoriesSection = (props) => {
+  const { data } = useBackend<Info>();
   const { memories } = data;
   const [selectedMemory, setSelectedMemory] = useSharedState(
-    context,
     'memory',
     (!!memories && memories[0]) || null
   );
@@ -245,8 +244,8 @@ const MemoriesSection = (props, context) => {
   );
 };
 
-const VictimPatternsSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const VictimPatternsSection = (props) => {
+  const { data } = useBackend<Info>();
   const { stolen_antag_info } = data;
   return (
     <Section

tgui/packages/tgui/interfaces/AntagInfoDemon.tsx

@@ -18,8 +18,8 @@ type Info = {
   objectives: Objective[];
 };
 
-export const AntagInfoDemon = (props, context) => {
-  const { data } = useBackend<Info>(context);
+export const AntagInfoDemon = (props) => {
+  const { data } = useBackend<Info>();
   const { fluff, objectives, explain_attack } = data;
   return (
     <Window width={620} height={356} theme="syndicate">
@@ -84,7 +84,7 @@ export const AntagInfoDemon = (props, context) => {
   );
 };
 
-const DemonRunes = (props, context) => {
+const DemonRunes = (props) => {
   return (
     <Section height="102%" mt="-6px" fill>
       {/*

tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx

@@ -8,8 +8,8 @@ type Info = {
   objectives: Objective[];
 };
 
-export const AntagInfoGeneric = (props, context) => {
-  const { data } = useBackend<Info>(context);
+export const AntagInfoGeneric = (props) => {
+  const { data } = useBackend<Info>();
   const { antag_name, objectives } = data;
   return (
     <Window width={620} height={250}>

tgui/packages/tgui/interfaces/AntagInfoGlitch.tsx

@@ -17,8 +17,8 @@ const textStyles = {
   },
 } as const;
 
-export const AntagInfoGlitch = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const AntagInfoGlitch = (props) => {
+  const { data } = useBackend<Data>();
   const { antag_name, objectives = [] } = data;
 
   return (
@@ -64,8 +64,8 @@ export const AntagInfoGlitch = (props, context) => {
   );
 };
 
-const SpecificInfo = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const SpecificInfo = (props) => {
+  const { data } = useBackend<Data>();
   const { antag_name } = data;
 
   switch (antag_name) {

tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx

@@ -52,8 +52,8 @@ type Info = {
   can_change_objective: BooleanLike;
 };
 
-const IntroductionSection = (props, context) => {
-  const { data, act } = useBackend<Info>(context);
+const IntroductionSection = (props) => {
+  const { data, act } = useBackend<Info>();
   const { objectives, ascended, can_change_objective } = data;
 
   return (
@@ -176,8 +176,8 @@ const GuideSection = () => {
   );
 };
 
-const InformationSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const InformationSection = (props) => {
+  const { data } = useBackend<Info>();
   const { charges, total_sacrifices, ascended } = data;
   return (
     <Stack.Item>
@@ -212,8 +212,8 @@ const InformationSection = (props, context) => {
   );
 };
 
-const ResearchedKnowledge = (props, context) => {
-  const { data } = useBackend<KnowledgeInfo>(context);
+const ResearchedKnowledge = (props) => {
+  const { data } = useBackend<KnowledgeInfo>();
   const { learnedKnowledge } = data;
 
   return (
@@ -237,8 +237,8 @@ const ResearchedKnowledge = (props, context) => {
   );
 };
 
-const KnowledgeShop = (props, context) => {
-  const { data, act } = useBackend<KnowledgeInfo>(context);
+const KnowledgeShop = (props) => {
+  const { data, act } = useBackend<KnowledgeInfo>();
   const { learnableKnowledge } = data;
 
   return (
@@ -272,8 +272,8 @@ const KnowledgeShop = (props, context) => {
   );
 };
 
-const ResearchInfo = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const ResearchInfo = (props) => {
+  const { data } = useBackend<Info>();
   const { charges } = data;
 
   return (
@@ -299,11 +299,11 @@ const ResearchInfo = (props, context) => {
   );
 };
 
-export const AntagInfoHeretic = (props, context) => {
-  const { data } = useBackend<Info>(context);
+export const AntagInfoHeretic = (props) => {
+  const { data } = useBackend<Info>();
   const { ascended } = data;
 
-  const [currentTab, setTab] = useLocalState(context, 'currentTab', 0);
+  const [currentTab, setTab] = useLocalState('currentTab', 0);
 
   return (
     <Window width={675} height={635}>

tgui/packages/tgui/interfaces/AntagInfoMalf.tsx

@@ -35,8 +35,8 @@ type Info = {
   can_change_objective: BooleanLike;
 };
 
-const IntroductionSection = (props, context) => {
-  const { act, data } = useBackend<Info>(context);
+const IntroductionSection = (props) => {
+  const { act, data } = useBackend<Info>();
   const { intro, objectives, can_change_objective } = data;
   return (
     <Section fill title="Intro" scrollable>
@@ -61,8 +61,8 @@ const IntroductionSection = (props, context) => {
   );
 };
 
-const FlavorSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const FlavorSection = (props) => {
+  const { data } = useBackend<Info>();
   const { allies, goal } = data;
   return (
     <Section
@@ -116,8 +116,8 @@ const FlavorSection = (props, context) => {
   );
 };
 
-const CodewordsSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const CodewordsSection = (props) => {
+  const { data } = useBackend<Info>();
   const { has_codewords, phrases, responses } = data;
   return (
     <Section title="Codewords" mb={!has_codewords && -1}>
@@ -162,14 +162,10 @@ const CodewordsSection = (props, context) => {
   );
 };
 
-export const AntagInfoMalf = (props, context) => {
-  const { act, data } = useBackend<Info>(context);
+export const AntagInfoMalf = (props) => {
+  const { act, data } = useBackend<Info>();
   const { processingTime, categories } = data;
-  const [antagInfoTab, setAntagInfoTab] = useLocalState(
-    context,
-    'antagInfoTab',
-    0
-  );
+  const [antagInfoTab, setAntagInfoTab] = useLocalState('antagInfoTab', 0);
   const categoriesList: string[] = [];
   const items: Item[] = [];
   for (let i = 0; i < categories.length; i++) {

tgui/packages/tgui/interfaces/AntagInfoMorph.tsx

@@ -13,7 +13,7 @@ const noticestyle = {
   color: 'lightblue',
 };
 
-export const AntagInfoMorph = (props, context) => {
+export const AntagInfoMorph = (props) => {
   return (
     <Window width={620} height={170} theme="abductor">
       <Window.Content>

tgui/packages/tgui/interfaces/AntagInfoNightmare.tsx

@@ -9,7 +9,7 @@ const noticestyle = {
   color: 'lightblue',
 };
 
-export const AntagInfoNightmare = (props, context) => {
+export const AntagInfoNightmare = (props) => {
   return (
     <Window width={620} height={340}>
       <Window.Content backgroundColor="#0d0d0d">

tgui/packages/tgui/interfaces/AntagInfoNinja.tsx

@@ -13,8 +13,8 @@ type NinjaInfo = {
   can_change_objective: BooleanLike;
 };
 
-export const AntagInfoNinja = (props, context) => {
-  const { data } = useBackend<NinjaInfo>(context);
+export const AntagInfoNinja = (props) => {
+  const { data } = useBackend<NinjaInfo>();
   const { objectives, can_change_objective } = data;
   return (
     <Window width={550} height={450} theme="hackerman">

tgui/packages/tgui/interfaces/AntagInfoSentient.jsx

@@ -2,8 +2,8 @@ import { useBackend } from '../backend';
 import { BlockQuote, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
-export const AntagInfoSentient = (props, context) => {
-  const { act, data } = useBackend(context);
+export const AntagInfoSentient = (props) => {
+  const { act, data } = useBackend();
   const { enslaved_to, holographic, p_them, p_their } = data;
   return (
     <Window width={400} height={400} theme="neutral">

tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx

@@ -9,8 +9,8 @@ type Info = {
   nationColor: string;
 };
 
-export const AntagInfoSeparatist = (props, context) => {
-  const { data } = useBackend<Info>(context);
+export const AntagInfoSeparatist = (props) => {
+  const { data } = useBackend<Info>();
   const { nationColor } = data;
   return (
     <Window width={620} height={450}>
@@ -28,8 +28,8 @@ export const AntagInfoSeparatist = (props, context) => {
   );
 };
 
-const IntroductionObjectives = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const IntroductionObjectives = (props) => {
+  const { data } = useBackend<Info>();
   const { nation, objectives } = data;
   return (
     <Section fill>
@@ -48,8 +48,8 @@ const IntroductionObjectives = (props, context) => {
   );
 };
 
-const FrequentlyAskedQuestions = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const FrequentlyAskedQuestions = (props) => {
+  const { data } = useBackend<Info>();
   const { nation } = data;
   return (
     <Section fill>

tgui/packages/tgui/interfaces/AntagInfoShade.jsx

@@ -2,8 +2,8 @@ import { useBackend } from '../backend';
 import { Icon, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
-export const AntagInfoShade = (props, context) => {
-  const { act, data } = useBackend(context);
+export const AntagInfoShade = (props) => {
+  const { act, data } = useBackend();
   const { master_name } = data;
   return (
     <Window width={400} height={400} theme="abductor">

tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx

@@ -38,8 +38,8 @@ type Info = {
   objectives: Objective[];
 };
 
-const IntroductionSection = (props, context) => {
-  const { act, data } = useBackend<Info>(context);
+const IntroductionSection = (props) => {
+  const { act, data } = useBackend<Info>();
   const { intro, objectives } = data;
   return (
     <Section fill title="Intro" scrollable>
@@ -53,8 +53,8 @@ const IntroductionSection = (props, context) => {
   );
 };
 
-const EmployerSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const EmployerSection = (props) => {
+  const { data } = useBackend<Info>();
   const { allies, goal } = data;
   return (
     <Section
@@ -97,8 +97,8 @@ const EmployerSection = (props, context) => {
   );
 };
 
-const UplinkSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const UplinkSection = (props) => {
+  const { data } = useBackend<Info>();
   const {
     has_uplink,
     uplink_intro,
@@ -172,8 +172,8 @@ const UplinkSection = (props, context) => {
   );
 };
 
-const CodewordsSection = (props, context) => {
-  const { data } = useBackend<Info>(context);
+const CodewordsSection = (props) => {
+  const { data } = useBackend<Info>();
   const { has_codewords, phrases, responses } = data;
   return (
     <Section title="Codewords" mb={!has_codewords && -1}>
@@ -218,8 +218,8 @@ const CodewordsSection = (props, context) => {
   );
 };
 
-export const AntagInfoTraitor = (props, context) => {
-  const { data } = useBackend<Info>(context);
+export const AntagInfoTraitor = (props) => {
+  const { data } = useBackend<Info>();
   const { theme } = data;
   return (
     <Window width={620} height={580} theme={theme}>

tgui/packages/tgui/interfaces/AntagInfoWizard.tsx

@@ -48,8 +48,8 @@ type Info = {
   can_change_objective: BooleanLike;
 };
 
-export const AntagInfoWizard = (props, context) => {
-  const { data, act } = useBackend<Info>(context);
+export const AntagInfoWizard = (props) => {
+  const { data, act } = useBackend<Info>();
   const { ritual, objectives, can_change_objective } = data;
 
   return (
@@ -152,7 +152,7 @@ export const AntagInfoWizard = (props, context) => {
   );
 };
 
-const RitualPrintout = (props: { ritual: GrandRitual }, context) => {
+const RitualPrintout = (props: { ritual: GrandRitual }) => {
   const { ritual } = props;
   if (!ritual.next_area) {
     return null;

tgui/packages/tgui/interfaces/Apc.jsx

@@ -3,7 +3,7 @@ import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../co
 import { Window } from '../layouts';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
-export const Apc = (props, context) => {
+export const Apc = (props) => {
   return (
     <Window width={450} height={445}>
       <Window.Content scrollable>
@@ -54,8 +54,8 @@ const malfMap = {
   },
 };
 
-const ApcContent = (props, context) => {
-  const { act, data } = useBackend(context);
+const ApcContent = (props) => {
+  const { act, data } = useBackend();
   const locked = data.locked && !data.siliconUser;
   const externalPowerStatus =
     powerStatusMap[data.externalPower] || powerStatusMap[0];

tgui/packages/tgui/interfaces/ApcControl.jsx

@@ -6,8 +6,8 @@ import { Box, Button, Dimmer, Icon, Table, Tabs, Stack, Section } from '../compo
 import { Window } from '../layouts';
 import { AreaCharge, powerRank } from './PowerMonitor';
 
-export const ApcControl = (props, context) => {
-  const { data } = useBackend(context);
+export const ApcControl = (props) => {
+  const { data } = useBackend();
   return (
     <Window title="APC Controller" width={550} height={500}>
       <Window.Content>
@@ -18,8 +18,8 @@ export const ApcControl = (props, context) => {
   );
 };
 
-const ApcLoggedOut = (props, context) => {
-  const { act, data } = useBackend(context);
+const ApcLoggedOut = (props) => {
+  const { act, data } = useBackend();
   const { emagged } = data;
   const text = emagged === 1 ? 'Open' : 'Log In';
   return (
@@ -35,10 +35,10 @@ const ApcLoggedOut = (props, context) => {
   );
 };
 
-const ApcLoggedIn = (props, context) => {
-  const { act, data } = useBackend(context);
+const ApcLoggedIn = (props) => {
+  const { act, data } = useBackend();
   const { restoring } = data;
-  const [tabIndex, setTabIndex] = useLocalState(context, 'tab-index', 1);
+  const [tabIndex, setTabIndex] = useLocalState('tab-index', 1);
   return (
     <Box>
       <Tabs>
@@ -90,14 +90,10 @@ const ApcLoggedIn = (props, context) => {
   );
 };
 
-const ControlPanel = (props, context) => {
-  const { act, data } = useBackend(context);
+const ControlPanel = (props) => {
+  const { act, data } = useBackend();
   const { emagged, logging } = data;
-  const [sortByField, setSortByField] = useLocalState(
-    context,
-    'sortByField',
-    'name'
-  );
+  const [sortByField, setSortByField] = useLocalState('sortByField', 'name');
   return (
     <Stack justify="space-between">
       <Stack.Item>
@@ -146,10 +142,10 @@ const ControlPanel = (props, context) => {
   );
 };
 
-const ApcControlScene = (props, context) => {
-  const { data, act } = useBackend(context);
+const ApcControlScene = (props) => {
+  const { data, act } = useBackend();
 
-  const [sortByField] = useLocalState(context, 'sortByField', 'name');
+  const [sortByField] = useLocalState('sortByField', 'name');
 
   const apcs = flow([
     map((apc, i) => ({
@@ -243,8 +239,8 @@ const ApcControlScene = (props, context) => {
   );
 };
 
-const LogPanel = (props, context) => {
-  const { data } = useBackend(context);
+const LogPanel = (props) => {
+  const { data } = useBackend();
 
   const logs = flow([
     map((line, i) => ({

tgui/packages/tgui/interfaces/ApprenticeContract.tsx

@@ -4,7 +4,7 @@ import { useBackend } from '../backend';
 import { BlockQuote, Box, Button, Icon, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
-export const ApprenticeContract = (props, context) => {
+export const ApprenticeContract = (props) => {
   return (
     <Window width={620} height={600} theme="wizard">
       <Window.Content>
@@ -65,8 +65,8 @@ export const ApprenticeContract = (props, context) => {
   );
 };
 
-const ApprenticeSelection = (props, context) => {
-  const { act } = useBackend(context);
+const ApprenticeSelection = (props) => {
+  const { act } = useBackend();
   const { iconName, fluffName, schoolTitle, assetName, blurb } = props;
   return (
     <Section>

tgui/packages/tgui/interfaces/Aquarium.tsx

@@ -14,8 +14,8 @@ type Data = {
   feeding_interval: number;
 };
 
-export const Aquarium = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const Aquarium = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     temperature,
     fluid_type,

tgui/packages/tgui/interfaces/AtmosAlertConsole.tsx

@@ -7,8 +7,8 @@ type Data = {
   minor: string[];
 };
 
-export const AtmosAlertConsole = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AtmosAlertConsole = (props) => {
+  const { act, data } = useBackend<Data>();
   const { priority = [], minor = [] } = data;
 
   return (

tgui/packages/tgui/interfaces/AtmosControlConsole.tsx

@@ -12,25 +12,21 @@ type Chamber = {
   output_info?: { active: boolean; amount: number };
 };
 
-export const AtmosControlConsole = (props, context) => {
+export const AtmosControlConsole = (props) => {
   const { act, data } = useBackend<{
     chambers: Chamber[];
     maxInput: number;
     maxOutput: number;
     reconnecting: boolean;
     control: boolean;
-  }>(context);
+  }>();
   const chambers = data.chambers || [];
-  const [chamberId, setChamberId] = useLocalState(
-    context,
-    'chamberId',
-    chambers[0]?.id
-  );
+  const [chamberId, setChamberId] = useLocalState('chamberId', chambers[0]?.id);
   const selectedChamber =
     chambers.length === 1
       ? chambers[0]
       : chambers.find((chamber) => chamber.id === chamberId);
-  const [setActiveGasId, setActiveReactionId] = atmosHandbookHooks(context);
+  const [setActiveGasId, setActiveReactionId] = atmosHandbookHooks();
   return (
     <Window width={550} height={350}>
       <Window.Content scrollable>

tgui/packages/tgui/interfaces/AtmosControlPanel.jsx

@@ -4,8 +4,8 @@ import { useBackend } from '../backend';
 import { Box, Button, Flex, Section, Table } from '../components';
 import { Window } from '../layouts';
 
-export const AtmosControlPanel = (props, context) => {
-  const { act, data } = useBackend(context);
+export const AtmosControlPanel = (props) => {
+  const { act, data } = useBackend();
   const groups = flow([
     map((group, i) => ({
       ...group,

tgui/packages/tgui/interfaces/AtmosFilter.tsx

@@ -17,8 +17,8 @@ type Filter = {
   gas_id: string;
 };
 
-export const AtmosFilter = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AtmosFilter = (props) => {
+  const { act, data } = useBackend<Data>();
   const { filter_types = [], on, rate, max_rate } = data;
 
   return (

tgui/packages/tgui/interfaces/AtmosMixer.tsx

@@ -11,8 +11,8 @@ type Data = {
   node2_concentration: number;
 };
 
-export const AtmosMixer = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AtmosMixer = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     on,
     set_pressure,

tgui/packages/tgui/interfaces/AtmosPump.tsx

@@ -11,8 +11,8 @@ type Data = {
   max_pressure: number;
 };
 
-export const AtmosPump = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AtmosPump = (props) => {
+  const { act, data } = useBackend<Data>();
   const { on, max_rate, max_pressure, rate, pressure } = data;
 
   return (

tgui/packages/tgui/interfaces/AtmosTempGate.tsx

@@ -10,8 +10,8 @@ type Data = {
   max_temperature: number;
 };
 
-export const AtmosTempGate = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AtmosTempGate = (props) => {
+  const { act, data } = useBackend<Data>();
   const { on, temperature, min_temperature, max_temperature } = data;
 
   return (

tgui/packages/tgui/interfaces/AtmosTempPump.tsx

@@ -9,8 +9,8 @@ type Data = {
   max_heat_transfer_rate: number;
 };
 
-export const AtmosTempPump = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AtmosTempPump = (props) => {
+  const { act, data } = useBackend<Data>();
   const { on, rate, max_heat_transfer_rate } = data;
 
   return (

tgui/packages/tgui/interfaces/Autolathe.tsx

@@ -17,8 +17,8 @@ type AutolatheData = {
   active: BooleanLike;
 };
 
-export const Autolathe = (props, context) => {
-  const { data } = useBackend<AutolatheData>(context);
+export const Autolathe = (props) => {
+  const { data } = useBackend<AutolatheData>();
   const {
     materialtotal,
     materialsmax,
@@ -121,8 +121,8 @@ type PrintButtonProps = {
   maxmult: number;
 };
 
-const PrintButton = (props: PrintButtonProps, context) => {
-  const { act } = useBackend<AutolatheData>(context);
+const PrintButton = (props: PrintButtonProps) => {
+  const { act } = useBackend<AutolatheData>();
   const {
     design,
     quantity,
@@ -163,8 +163,8 @@ type AutolatheRecipeProps = {
   SHEET_MATERIAL_AMOUNT: number;
 };
 
-const AutolatheRecipe = (props: AutolatheRecipeProps, context) => {
-  const { act } = useBackend<AutolatheData>(context);
+const AutolatheRecipe = (props: AutolatheRecipeProps) => {
+  const { act } = useBackend<AutolatheData>();
   const { design, availableMaterials, SHEET_MATERIAL_AMOUNT } = props;
 
   const maxmult = design.maxmult;

tgui/packages/tgui/interfaces/AutomatedAnnouncement.tsx

@@ -16,8 +16,8 @@ type Data = {
   newhead: string;
 };
 
-export const AutomatedAnnouncement = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AutomatedAnnouncement = (props) => {
+  const { act, data } = useBackend<Data>();
   const { arrivalToggle, arrival, newheadToggle, newhead } = data;
   return (
     <Window title="Automated Announcement System" width={500} height={225}>

tgui/packages/tgui/interfaces/AuxBaseConsole.tsx

@@ -27,9 +27,9 @@ const STATUS_COLOR_KEYS = {
   'All Clear': 'good',
 } as const;
 
-export const AuxBaseConsole = (props, context) => {
-  const { data } = useBackend<Data>(context);
-  const [tab, setTab] = useLocalState(context, 'tab', 1);
+export const AuxBaseConsole = (props) => {
+  const { data } = useBackend<Data>();
+  const [tab, setTab] = useLocalState('tab', 1);
   const { type, blind_drop, turrets = [] } = data;
 
   return (
@@ -62,8 +62,8 @@ export const AuxBaseConsole = (props, context) => {
   );
 };
 
-export const AuxBaseConsoleContent = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const AuxBaseConsoleContent = (props) => {
+  const { act, data } = useBackend<Data>();
   const { turrets = [] } = data;
 
   return (

tgui/packages/tgui/interfaces/AvatarHelp.tsx

@@ -47,8 +47,8 @@ const boxHelp = [
   },
 ] as const;
 
-export const AvatarHelp = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const AvatarHelp = (props) => {
+  const { data } = useBackend<Data>();
   const { help_text = DEFAULT_HELP } = data;
 
   return (
@@ -96,7 +96,7 @@ export const AvatarHelp = (props, context) => {
 };
 
 // I wish I had media queries
-const BoxHelp = (props: { index: number }, context) => {
+const BoxHelp = (props: { index: number }) => {
   const { index } = props;
 
   return (

tgui/packages/tgui/interfaces/BankMachine.tsx

@@ -10,8 +10,8 @@ type Data = {
   station_name: string;
 };
 
-export const BankMachine = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BankMachine = (props) => {
+  const { act, data } = useBackend<Data>();
   const { current_balance, siphoning, station_name } = data;
 
   return (

tgui/packages/tgui/interfaces/BasketballPanel.tsx

@@ -13,8 +13,8 @@ type BasketballPanelData = {
   }[];
 };
 
-export const BasketballPanel = (props, context) => {
-  const { act, data } = useBackend<BasketballPanelData>(context);
+export const BasketballPanel = (props) => {
+  const { act, data } = useBackend<BasketballPanelData>();
 
   return (
     <Window title="Basketball" width={650} height={580}>

tgui/packages/tgui/interfaces/Biogenerator.tsx

@@ -32,8 +32,8 @@ type Design = {
   amount: number;
 };
 
-export const Biogenerator = (props, context) => {
-  const { act, data } = useBackend<BiogeneratorData>(context);
+export const Biogenerator = (props) => {
+  const { act, data } = useBackend<BiogeneratorData>();
   const {
     processing,
     beaker,
@@ -48,7 +48,6 @@ export const Biogenerator = (props, context) => {
     categories,
   } = data;
   const [selectedCategory, setSelectedCategory] = useLocalState<string>(
-    context,
     'category',
     data.categories[0]?.name
   );
@@ -163,11 +162,10 @@ export const Biogenerator = (props, context) => {
   );
 };
 
-const ItemList = (props, context) => {
-  const { act } = useBackend(context);
+const ItemList = (props) => {
+  const { act } = useBackend();
   const items = props.items.map((item) => {
     const [amount, setAmount] = useLocalState(
-      context,
       'amount' + item.name,
       item.is_reagent ? Math.min(Math.max(props.space, 1), 10) : 1
     );

tgui/packages/tgui/interfaces/BlackMarketUplink.tsx

@@ -34,8 +34,8 @@ type DeliveryMethod = {
   price: number;
 };
 
-export const BlackMarketUplink = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BlackMarketUplink = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     categories = [],
     markets = [],
@@ -124,8 +124,8 @@ export const BlackMarketUplink = (props, context) => {
   );
 };
 
-const ShipmentSelector = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+const ShipmentSelector = (props) => {
+  const { act, data } = useBackend<Data>();
   const { buying, ltsrbt_built, money } = data;
   if (!buying) {
     return null;

tgui/packages/tgui/interfaces/BloodFilter.tsx

@@ -7,8 +7,8 @@ type Data = {
   whitelist: string[];
 };
 
-export const BloodFilter = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const BloodFilter = (props) => {
+  const { data } = useBackend<Data>();
   const { whitelist = [] } = data;
 
   return (

tgui/packages/tgui/interfaces/BluespaceArtillery.tsx

@@ -10,8 +10,8 @@ type Data = {
   target: string;
 };
 
-export const BluespaceArtillery = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BluespaceArtillery = (props) => {
+  const { act, data } = useBackend<Data>();
   const { notice, connected, unlocked, target } = data;
 
   return (

tgui/packages/tgui/interfaces/BluespaceLocator.tsx

@@ -25,8 +25,8 @@ const DIRECTION_TO_ICON = {
   northwest: 315,
 } as const;
 
-export const BluespaceLocator = (props, context) => {
-  const [tab, setTab] = useLocalState(context, 'tab', 'implant');
+export const BluespaceLocator = (props) => {
+  const [tab, setTab] = useLocalState('tab', 'implant');
 
   return (
     <Window width={300} height={300}>
@@ -50,8 +50,8 @@ export const BluespaceLocator = (props, context) => {
   );
 };
 
-const TeleporterBeacons = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const TeleporterBeacons = (props) => {
+  const { data } = useBackend<Data>();
   const { telebeacons } = data;
 
   return (
@@ -68,8 +68,8 @@ const TeleporterBeacons = (props, context) => {
   );
 };
 
-const TrackingImplants = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const TrackingImplants = (props) => {
+  const { data } = useBackend<Data>();
   const { trackimplants } = data;
 
   return (
@@ -86,8 +86,8 @@ const TrackingImplants = (props, context) => {
   );
 };
 
-const SignalLocator = (props, context) => {
-  const { data } = useBackend<Data>(context);
+const SignalLocator = (props) => {
+  const { data } = useBackend<Data>();
   const { trackingrange } = data;
   const { name, direction, distance } = props;
 

tgui/packages/tgui/interfaces/BluespaceSender.tsx

@@ -29,8 +29,8 @@ type GasDisplayProps = {
 
 const mappedTopMargin = '2%';
 
-export const BluespaceSender = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BluespaceSender = (props) => {
+  const { act, data } = useBackend<Data>();
   const { gas_transfer_rate, credits, bluespace_network_gases = [], on } = data;
 
   const gases: Gas[] = flow([
@@ -106,8 +106,8 @@ export const BluespaceSender = (props, context) => {
   );
 };
 
-const GasDisplay = (props: GasDisplayProps, context) => {
-  const { act } = useBackend<Data>(context);
+const GasDisplay = (props: GasDisplayProps) => {
+  const { act } = useBackend<Data>();
   const {
     gas: { amount, id, name, price },
     gasMax,

tgui/packages/tgui/interfaces/BluespaceVendor.tsx

@@ -32,8 +32,8 @@ type GasDisplayProps = {
   gasMax: number;
 };
 
-export const BluespaceVendor = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BluespaceVendor = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     bluespace_network_gases = [],
     inserted_tank,
@@ -153,8 +153,8 @@ export const BluespaceVendor = (props, context) => {
   );
 };
 
-const GasDisplay = (props: GasDisplayProps, context) => {
-  const { act, data } = useBackend<Data>(context);
+const GasDisplay = (props: GasDisplayProps) => {
+  const { act, data } = useBackend<Data>();
   const { pumping, selected_gas, inserted_tank } = data;
   const {
     gas: { name, amount, price, id },

tgui/packages/tgui/interfaces/BorgHypo.tsx

@@ -16,8 +16,8 @@ type Reagent = {
   description: string;
 };
 
-export const BorgHypo = (props, context) => {
-  const { data } = useBackend<BorgHypoContext>(context);
+export const BorgHypo = (props) => {
+  const { data } = useBackend<BorgHypoContext>();
   const { maxVolume, theme, reagents, selectedReagent } = data;
 
   const dynamicHeight = reagents.length * 25 + 60;
@@ -37,8 +37,8 @@ export const BorgHypo = (props, context) => {
   );
 };
 
-const ReagentDisplay = (props, context) => {
-  const { act } = useBackend(context);
+const ReagentDisplay = (props) => {
+  const { act } = useBackend();
   const { reagents, selected, maxVolume } = props;
   if (reagents.length === 0) {
     return <NoticeBox>No reagents available!</NoticeBox>;

tgui/packages/tgui/interfaces/BorgPanel.jsx

@@ -2,8 +2,8 @@ import { useBackend } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 
-export const BorgPanel = (props, context) => {
-  const { act, data } = useBackend(context);
+export const BorgPanel = (props) => {
+  const { act, data } = useBackend();
   const borg = data.borg || {};
   const cell = data.cell || {};
   const cellPercent = cell.charge / cell.maxcharge;

tgui/packages/tgui/interfaces/BorgShaker.tsx

@@ -16,8 +16,8 @@ type Reagent = {
   description: string;
 };
 
-export const BorgShaker = (props, context) => {
-  const { data } = useBackend<BorgShakerContext>(context);
+export const BorgShaker = (props) => {
+  const { data } = useBackend<BorgShakerContext>();
   const { theme, minVolume, sodas, alcohols, selectedReagent } = data;
 
   const dynamicHeight =
@@ -47,8 +47,8 @@ export const BorgShaker = (props, context) => {
   );
 };
 
-const ReagentDisplay = (props, context) => {
-  const { act } = useBackend(context);
+const ReagentDisplay = (props) => {
+  const { act } = useBackend();
   const { reagents, selected, minimum } = props;
   if (reagents.length === 0) {
     return <NoticeBox>No reagents available!</NoticeBox>;

tgui/packages/tgui/interfaces/BountyBoard.tsx

@@ -31,7 +31,7 @@ type User = {
   name: string;
 };
 
-export const BountyBoard = (props, context) => {
+export const BountyBoard = (props) => {
   return (
     <Window width={550} height={600}>
       <Window.Content scrollable>
@@ -41,8 +41,8 @@ export const BountyBoard = (props, context) => {
   );
 };
 
-export const BountyBoardContent = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BountyBoardContent = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     accountName,
     requests = [],

tgui/packages/tgui/interfaces/BrigTimer.tsx

@@ -10,8 +10,8 @@ type Data = {
   flash_charging: BooleanLike;
 };
 
-export const BrigTimer = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const BrigTimer = (props) => {
+  const { act, data } = useBackend<Data>();
   const { timing, minutes, seconds, flash_charging } = data;
   return (
     <Window width={300} height={138}>

tgui/packages/tgui/interfaces/CTFPanel.tsx

@@ -19,8 +19,8 @@ type CTFPanelData =
       voted: BooleanLike;
     };
 
-export const CTFPanel = (props, context) => {
-  const { act, data } = useBackend<CTFPanelData>(context);
+export const CTFPanel = (props) => {
+  const { act, data } = useBackend<CTFPanelData>();
 
   return (
     <Window title="CTF Panel" width={700} height={600}>

tgui/packages/tgui/interfaces/CameraConsole.tsx

@@ -70,7 +70,7 @@ const selectCameras = (cameras: Camera[], searchText = ''): Camera[] => {
   ])(cameras);
 };
 
-export const CameraConsole = (props, context) => {
+export const CameraConsole = (props) => {
   return (
     <Window width={850} height={708}>
       <Window.Content>
@@ -80,7 +80,7 @@ export const CameraConsole = (props, context) => {
   );
 };
 
-export const CameraContent = (props, context) => {
+export const CameraContent = (props) => {
   return (
     <Stack fill>
       <Stack.Item grow>
@@ -93,9 +93,9 @@ export const CameraContent = (props, context) => {
   );
 };
 
-const CameraSelector = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
-  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
+const CameraSelector = (props) => {
+  const { act, data } = useBackend<Data>();
+  const [searchText, setSearchText] = useLocalState('searchText', '');
   const { activeCamera } = data;
   const cameras = selectCameras(data.cameras, searchText);
 
@@ -141,10 +141,10 @@ const CameraSelector = (props, context) => {
   );
 };
 
-const CameraControls = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+const CameraControls = (props) => {
+  const { act, data } = useBackend<Data>();
   const { activeCamera, can_spy, mapRef } = data;
-  const [searchText] = useLocalState(context, 'searchText', '');
+  const [searchText] = useLocalState('searchText', '');
 
   const cameras = selectCameras(data.cameras, searchText);
 

tgui/packages/tgui/interfaces/Canister.jsx

@@ -11,8 +11,8 @@ const formatPressure = (value) => {
   return formatSiUnit(value * 1000, 1, 'Pa');
 };
 
-export const Canister = (props, context) => {
-  const { act, data } = useBackend(context);
+export const Canister = (props) => {
+  const { act, data } = useBackend();
   const {
     portConnected,
     tankPressure,

tgui/packages/tgui/interfaces/Canvas.tsx

@@ -240,8 +240,8 @@ type CanvasData = {
   show_grid: boolean;
 };
 
-export const Canvas = (props, context) => {
-  const { act, data } = useBackend<CanvasData>(context);
+export const Canvas = (props) => {
+  const { act, data } = useBackend<CanvasData>();
   const [width, height] = getImageSize(data.grid);
   const scaled_width = width * data.px_per_unit;
   const scaled_height = height * data.px_per_unit;

tgui/packages/tgui/interfaces/Cargo.jsx

@@ -5,7 +5,7 @@ import { AnimatedNumber, Box, Button, Flex, Icon, Input, RestrictedInput, Labele
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
-export const Cargo = (props, context) => {
+export const Cargo = (props) => {
   return (
     <Window width={800} height={750}>
       <Window.Content scrollable>
@@ -15,9 +15,9 @@ export const Cargo = (props, context) => {
   );
 };
 
-export const CargoContent = (props, context) => {
-  const { data } = useBackend(context);
-  const [tab, setTab] = useSharedState(context, 'tab', 'catalog');
+export const CargoContent = (props) => {
+  const { data } = useBackend();
+  const [tab, setTab] = useSharedState('tab', 'catalog');
   const { cart = [], requests = [], requestonly } = data;
   const cart_length = cart.reduce((total, entry) => total + entry.amount, 0);
   return (
@@ -65,8 +65,8 @@ export const CargoContent = (props, context) => {
   );
 };
 
-const CargoStatus = (props, context) => {
-  const { act, data } = useBackend(context);
+const CargoStatus = (props) => {
+  const { act, data } = useBackend();
   const {
     department,
     grocery,
@@ -149,9 +149,9 @@ const searchForSupplies = (supplies, search) => {
   ])(supplies);
 };
 
-export const CargoCatalog = (props, context) => {
+export const CargoCatalog = (props) => {
   const { express } = props;
-  const { act, data } = useBackend(context);
+  const { act, data } = useBackend();
 
   const { self_paid, app_cost } = data;
 
@@ -159,16 +159,11 @@ export const CargoCatalog = (props, context) => {
   const { amount_by_name = [], max_order } = data;
 
   const [activeSupplyName, setActiveSupplyName] = useSharedState(
-    context,
     'supply',
     supplies[0]?.name
   );
 
-  const [searchText, setSearchText] = useSharedState(
-    context,
-    'search_text',
-    ''
-  );
+  const [searchText, setSearchText] = useSharedState('search_text', '');
 
   const activeSupply =
     activeSupplyName === 'search_results'
@@ -289,8 +284,8 @@ export const CargoCatalog = (props, context) => {
   );
 };
 
-const CargoRequests = (props, context) => {
-  const { act, data } = useBackend(context);
+const CargoRequests = (props) => {
+  const { act, data } = useBackend();
   const { requestonly, can_send, can_approve_requests } = data;
   const requests = data.requests || [];
   // Labeled list reimplementation to squeeze extra columns out of it
@@ -355,8 +350,8 @@ const CargoRequests = (props, context) => {
   );
 };
 
-const CargoCartButtons = (props, context) => {
-  const { act, data } = useBackend(context);
+const CargoCartButtons = (props) => {
+  const { act, data } = useBackend();
   const { requestonly, can_send, can_approve_requests } = data;
   const cart = data.cart || [];
   const total = cart.reduce((total, entry) => total + entry.cost, 0);
@@ -380,8 +375,8 @@ const CargoCartButtons = (props, context) => {
   );
 };
 
-const CartHeader = (props, context) => {
-  const { data } = useBackend(context);
+const CartHeader = (props) => {
+  const { data } = useBackend();
   return (
     <Section>
       <Stack>
@@ -397,8 +392,8 @@ const CartHeader = (props, context) => {
   );
 };
 
-const CargoCart = (props, context) => {
-  const { act, data } = useBackend(context);
+const CargoCart = (props) => {
+  const { act, data } = useBackend();
   const {
     requestonly,
     away,
@@ -484,7 +479,7 @@ const CargoCart = (props, context) => {
   );
 };
 
-const CargoHelp = (props, context) => {
+const CargoHelp = (props) => {
   return (
     <>
       <Section title="Department Orders">

tgui/packages/tgui/interfaces/CargoExpress.tsx

@@ -17,8 +17,8 @@ type Data = {
   message: string;
 };
 
-export const CargoExpress = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const CargoExpress = (props) => {
+  const { data } = useBackend<Data>();
   const { locked } = data;
 
   return (
@@ -31,8 +31,8 @@ export const CargoExpress = (props, context) => {
   );
 };
 
-const CargoExpressContent = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+const CargoExpressContent = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     hasBeacon,
     message,

tgui/packages/tgui/interfaces/CargoHoldTerminal.tsx

@@ -10,8 +10,8 @@ type Data = {
   status_report: string;
 };
 
-export const CargoHoldTerminal = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const CargoHoldTerminal = (props) => {
+  const { act, data } = useBackend<Data>();
   const { points, pad, sending, status_report } = data;
 
   return (

tgui/packages/tgui/interfaces/CellularEmporium.tsx

@@ -24,10 +24,9 @@ type Ability = {
   dna_required: number; // Checks against dna_count
 };
 
-export const CellularEmporium = (props, context) => {
-  const { act, data } = useBackend<CellularEmporiumContext>(context);
+export const CellularEmporium = (props) => {
+  const { act, data } = useBackend<CellularEmporiumContext>();
   const [searchAbilities, setSearchAbilities] = useLocalState(
-    context,
     'searchAbilities',
     ''
   );
@@ -78,9 +77,9 @@ export const CellularEmporium = (props, context) => {
   );
 };
 
-const AbilityList = (props, context) => {
-  const { act, data } = useBackend<CellularEmporiumContext>(context);
-  const [searchAbilities] = useLocalState(context, 'searchAbilities', '');
+const AbilityList = (props) => {
+  const { act, data } = useBackend<CellularEmporiumContext>();
+  const [searchAbilities] = useLocalState('searchAbilities', '');
   const {
     abilities,
     owned_abilities,

tgui/packages/tgui/interfaces/CentcomPodLauncher.jsx

@@ -12,14 +12,14 @@ const pod_grey = {
   color: 'grey',
 };
 
-const useCompact = (context) => {
-  const [compact, setCompact] = useLocalState(context, 'compact', false);
+const useCompact = () => {
+  const [compact, setCompact] = useLocalState('compact', false);
   const toggleCompact = () => setCompact(!compact);
   return [compact, toggleCompact];
 };
 
-export const CentcomPodLauncher = (props, context) => {
-  const [compact] = useCompact(context);
+export const CentcomPodLauncher = (props) => {
+  const [compact] = useCompact();
   return (
     <Window
       title="Supply Pod Menu (Use against Helen Weinstein)"
@@ -30,8 +30,8 @@ export const CentcomPodLauncher = (props, context) => {
   );
 };
 
-const CentcomPodLauncherContent = (props, context) => {
-  const [compact] = useCompact(context);
+const CentcomPodLauncherContent = (props) => {
+  const [compact] = useCompact();
   return (
     <Window.Content>
       <Stack fill vertical>
@@ -410,13 +410,9 @@ const EFFECTS_ALL = [
   },
 ];
 
-const ViewTabHolder = (props, context) => {
-  const { act, data } = useBackend(context);
-  const [tabPageIndex, setTabPageIndex] = useLocalState(
-    context,
-    'tabPageIndex',
-    1
-  );
+const ViewTabHolder = (props) => {
+  const { act, data } = useBackend();
+  const [tabPageIndex, setTabPageIndex] = useLocalState('tabPageIndex', 1);
   const { mapRef } = data;
   const TabPageComponent = TABPAGES[tabPageIndex].component();
   return (
@@ -505,7 +501,7 @@ const ViewTabHolder = (props, context) => {
   );
 };
 
-const TabPod = (props, context) => {
+const TabPod = (props) => {
   return (
     <Box color="label">
       Note: You can right click on this
@@ -515,8 +511,8 @@ const TabPod = (props, context) => {
   );
 };
 
-const TabBay = (props, context) => {
-  const { act, data } = useBackend(context);
+const TabBay = (props) => {
+  const { act, data } = useBackend();
   return (
     <>
       <Button
@@ -534,8 +530,8 @@ const TabBay = (props, context) => {
   );
 };
 
-const TabDrop = (props, context) => {
-  const { act, data } = useBackend(context);
+const TabDrop = (props) => {
+  const { act, data } = useBackend();
   return (
     <>
       <Button
@@ -553,9 +549,9 @@ const TabDrop = (props, context) => {
   );
 };
 
-const PodStatusPage = (props, context) => {
-  const { act, data } = useBackend(context);
-  const [compact, toggleCompact] = useCompact(context);
+const PodStatusPage = (props) => {
+  const { act, data } = useBackend();
+  const [compact, toggleCompact] = useCompact();
   return (
     <Section fill width="100%">
       <Stack>
@@ -671,13 +667,9 @@ const PodStatusPage = (props, context) => {
   );
 };
 
-const ReverseMenu = (props, context) => {
-  const { act, data } = useBackend(context);
-  const [tabPageIndex, setTabPageIndex] = useLocalState(
-    context,
-    'tabPageIndex',
-    1
-  );
+const ReverseMenu = (props) => {
+  const { act, data } = useBackend();
+  const [tabPageIndex, setTabPageIndex] = useLocalState('tabPageIndex', 1);
   return (
     <Section
       fill
@@ -782,8 +774,8 @@ class PresetsPage extends Component {
     storage.set('podlauncher_preset_' + id, data);
   }
 
-  async loadDataFromPreset(id, context) {
-    const { act } = useBackend(this.context);
+  async loadDataFromPreset(id) {
+    const { act } = useBackend();
     act('loadDataFromPreset', {
       payload: await storage.get('podlauncher_preset_' + id),
     });
@@ -822,23 +814,11 @@ class PresetsPage extends Component {
   }
   render() {
     const { presets } = this.state;
-    const { act, data } = useBackend(this.context);
-    const [presetIndex, setSelectedPreset] = useLocalState(
-      this.context,
-      'presetIndex',
-      0
-    );
-    const [settingName, setEditingNameStatus] = useLocalState(
-      this.context,
-      'settingName',
-      0
-    );
-    const [newNameText, setText] = useLocalState(
-      this.context,
-      'newNameText',
-      ''
-    );
-    const [hue, setHue] = useLocalState(this.context, 'hue', 0);
+    const { act, data } = useBackend();
+    const [presetIndex, setSelectedPreset] = useLocalState('presetIndex', 0);
+    const [settingName, setEditingNameStatus] = useLocalState('settingName', 0);
+    const [newNameText, setText] = useLocalState('newNameText', '');
+    const [hue, setHue] = useLocalState('hue', 0);
     return (
       <Section
         scrollable
@@ -962,9 +942,9 @@ class PresetsPage extends Component {
   }
 }
 
-const LaunchPage = (props, context) => {
-  const [compact] = useCompact(context);
-  const { act, data } = useBackend(context);
+const LaunchPage = (props) => {
+  const [compact] = useCompact();
+  const { act, data } = useBackend();
   return (
     <Button
       fluid
@@ -984,8 +964,8 @@ const LaunchPage = (props, context) => {
   );
 };
 
-const StylePage = (props, context) => {
-  const { act, data } = useBackend(context);
+const StylePage = (props) => {
+  const { act, data } = useBackend();
   return (
     <Section
       fill
@@ -1039,9 +1019,9 @@ const StylePage = (props, context) => {
   );
 };
 
-const Bays = (props, context) => {
-  const { act, data } = useBackend(context);
-  const [compact] = useCompact(context);
+const Bays = (props) => {
+  const { act, data } = useBackend();
+  const [compact] = useCompact();
   return (
     <Section
       fill
@@ -1085,8 +1065,8 @@ const Bays = (props, context) => {
   );
 };
 
-const Timing = (props, context) => {
-  const { act, data } = useBackend(context);
+const Timing = (props) => {
+  const { act, data } = useBackend();
   return (
     <Section
       fill
@@ -1129,8 +1109,8 @@ const Timing = (props, context) => {
   );
 };
 
-const DelayHelper = (props, context) => {
-  const { act, data } = useBackend(context);
+const DelayHelper = (props) => {
+  const { act, data } = useBackend();
   const { delay_list, reverse = false } = props;
   return (
     <LabeledControls wrap>
@@ -1167,8 +1147,8 @@ const DelayHelper = (props, context) => {
   );
 };
 
-const Sounds = (props, context) => {
-  const { act, data } = useBackend(context);
+const Sounds = (props) => {
+  const { act, data } = useBackend();
   return (
     <Section
       fill

tgui/packages/tgui/interfaces/ChameleonCard.jsx

@@ -2,8 +2,8 @@ import { useBackend } from '../backend';
 import { AccessList } from './common/AccessList';
 import { Window } from '../layouts';
 
-export const ChameleonCard = (props, context) => {
-  const { act, data } = useBackend(context);
+export const ChameleonCard = (props) => {
+  const { act, data } = useBackend();
 
   const {
     accesses,

tgui/packages/tgui/interfaces/Changelog.jsx

@@ -58,7 +58,7 @@ export class Changelog extends Component {
   }
 
   getData = (date, attemptNumber = 1) => {
-    const { act } = useBackend(this.context);
+    const { act } = useBackend();
     const self = this;
     const maxAttempts = 6;
 
@@ -90,7 +90,7 @@ export class Changelog extends Component {
   componentDidMount() {
     const {
       data: { dates = [] },
-    } = useBackend(this.context);
+    } = useBackend();
 
     if (dates) {
       dates.forEach((date) =>
@@ -105,7 +105,7 @@ export class Changelog extends Component {
     const { data, selectedDate, selectedIndex } = this.state;
     const {
       data: { dates },
-    } = useBackend(this.context);
+    } = useBackend();
     const { dateChoices } = this;
 
     const dateDropdown = dateChoices.length > 0 && (

tgui/packages/tgui/interfaces/CheckboxInput.tsx

@@ -17,8 +17,8 @@ type Data = {
 };
 
 /** Renders a list of checkboxes per items for input. */
-export const CheckboxInput = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const CheckboxInput = (props) => {
+  const { data } = useBackend<Data>();
   const {
     items = [],
     min_checked,
@@ -28,14 +28,9 @@ export const CheckboxInput = (props, context) => {
     title,
   } = data;
 
-  const [selections, setSelections] = useLocalState<string[]>(
-    context,
-    'selections',
-    []
-  );
+  const [selections, setSelections] = useLocalState<string[]>('selections', []);
 
   const [searchQuery, setSearchQuery] = useLocalState<string>(
-    context,
     'searchQuery',
     ''
   );

tgui/packages/tgui/interfaces/ChemAcclimator.tsx

@@ -14,8 +14,8 @@ type Data = {
   emptying: BooleanLike;
 };
 
-export const ChemAcclimator = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemAcclimator = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     chem_temp,
     target_temperature,

tgui/packages/tgui/interfaces/ChemDebugSynthesizer.tsx

@@ -9,8 +9,8 @@ type Data = {
   beaker: Beaker;
 };
 
-export const ChemDebugSynthesizer = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemDebugSynthesizer = (props) => {
+  const { act, data } = useBackend<Data>();
   const { amount, purity, beaker } = data;
 
   return (

tgui/packages/tgui/interfaces/ChemDispenser.tsx

@@ -25,11 +25,11 @@ type Data = {
   beaker: Beaker;
 };
 
-export const ChemDispenser = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemDispenser = (props) => {
+  const { act, data } = useBackend<Data>();
   const recording = !!data.recordingRecipe;
   const { recipeReagents = [], recipes = [], beaker } = data;
-  const [hasCol, setHasCol] = useLocalState(context, 'has_col', false);
+  const [hasCol, setHasCol] = useLocalState('has_col', false);
 
   const beakerTransferAmounts = beaker ? beaker.transferAmounts : [];
   const recordedContents =

tgui/packages/tgui/interfaces/ChemFilter.tsx

@@ -14,8 +14,8 @@ type Props = {
   buttonColor: string;
 };
 
-export const ChemFilterPane = (props: Props, context) => {
-  const { act } = useBackend(context);
+export const ChemFilterPane = (props: Props) => {
+  const { act } = useBackend();
   const { title, list, buttonColor } = props;
   const titleKey = title.toLowerCase();
 
@@ -54,8 +54,8 @@ export const ChemFilterPane = (props: Props, context) => {
   );
 };
 
-export const ChemFilter = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const ChemFilter = (props) => {
+  const { data } = useBackend<Data>();
   const { left = [], right = [] } = data;
 
   return (

tgui/packages/tgui/interfaces/ChemHeater.jsx

@@ -6,8 +6,8 @@ import { COLORS } from '../constants';
 import { Window } from '../layouts';
 import { BeakerContents } from './common/BeakerContents';
 
-export const ChemHeater = (props, context) => {
-  const { act, data } = useBackend(context);
+export const ChemHeater = (props) => {
+  const { act, data } = useBackend();
   const {
     targetTemp,
     isActive,

tgui/packages/tgui/interfaces/ChemMaster.tsx

@@ -56,8 +56,8 @@ type Container = {
   volume: number;
 };
 
-export const ChemMaster = (props, context) => {
-  const { data } = useBackend<Data>(context);
+export const ChemMaster = (props) => {
+  const { data } = useBackend<Data>();
   const { reagentAnalysisMode } = data;
   return (
     <Window width={400} height={620}>
@@ -68,8 +68,8 @@ export const ChemMaster = (props, context) => {
   );
 };
 
-const ChemMasterContent = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+const ChemMasterContent = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     isPrinting,
     printingProgress,
@@ -89,7 +89,7 @@ const ChemMasterContent = (props, context) => {
     suggestedContainer,
   } = data;
 
-  const [itemCount, setItemCount] = useLocalState(context, 'itemCount', 1);
+  const [itemCount, setItemCount] = useLocalState('itemCount', 1);
 
   return (
     <Box>
@@ -260,8 +260,8 @@ const ChemMasterContent = (props, context) => {
   );
 };
 
-const ReagentEntry = (props, context) => {
-  const { data, act } = useBackend<Data>(context);
+const ReagentEntry = (props) => {
+  const { data, act } = useBackend<Data>();
   const { chemical, transferTo } = props;
   const { isPrinting } = data;
   return (
@@ -342,8 +342,8 @@ const ReagentEntry = (props, context) => {
   );
 };
 
-const ContainerButton = ({ container, category }, context) => {
-  const { act, data } = useBackend<Data>(context);
+const ContainerButton = ({ container, category }) => {
+  const { act, data } = useBackend<Data>();
   const { isPrinting, selectedContainerRef } = data;
   const isPillPatch = ['pills', 'patches'].includes(category.name);
   return (
@@ -375,8 +375,8 @@ const ContainerButton = ({ container, category }, context) => {
   ) as any;
 };
 
-const AnalysisResults = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+const AnalysisResults = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     name,
     state,

tgui/packages/tgui/interfaces/ChemMixingChamber.tsx

@@ -17,16 +17,11 @@ export type MixingData = {
   isReacting: BooleanLike;
 };
 
-export const ChemMixingChamber = (props, context) => {
-  const { act, data } = useBackend<MixingData>(context);
+export const ChemMixingChamber = (props) => {
+  const { act, data } = useBackend<MixingData>();
 
-  const [reagentName, setReagentName] = useLocalState(
-    context,
-    'reagentName',
-    ''
-  );
+  const [reagentName, setReagentName] = useLocalState('reagentName', '');
   const [reagentQuantity, setReagentQuantity] = useLocalState(
-    context,
     'reagentQuantity',
     1
   );

tgui/packages/tgui/interfaces/ChemPress.tsx

@@ -23,8 +23,8 @@ type Data = {
   packaging_type: string;
 };
 
-export const ChemPress = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemPress = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     current_volume,
     product_name,
@@ -35,7 +35,6 @@ export const ChemPress = (props, context) => {
     packaging_type,
   } = data;
   const [categoryName, setCategoryName] = useLocalState(
-    context,
     'categoryName',
     packaging_category
   );

tgui/packages/tgui/interfaces/ChemReactionChamber.tsx

@@ -10,11 +10,10 @@ type ReactingData = MixingData & {
   reagentAlkaline: number;
 };
 
-export const ChemReactionChamber = (props, context) => {
-  const { act, data } = useBackend<ReactingData>(context);
+export const ChemReactionChamber = (props) => {
+  const { act, data } = useBackend<ReactingData>();
 
   const [reagentQuantity, setReagentQuantity] = useLocalState(
-    context,
     'reagentQuantity',
     1
   );

tgui/packages/tgui/interfaces/ChemRecipeDebug.jsx

@@ -4,8 +4,8 @@ import { AnimatedNumber, Box, Button, Flex, LabeledList, NumberInput, ProgressBa
 import { Window } from '../layouts';
 import { BeakerContents } from './common/BeakerContents';
 
-export const ChemRecipeDebug = (props, context) => {
-  const { act, data } = useBackend(context);
+export const ChemRecipeDebug = (props) => {
+  const { act, data } = useBackend();
   const {
     targetTemp,
     isActive,

tgui/packages/tgui/interfaces/ChemSeparator.tsx

@@ -15,8 +15,8 @@ type Data = {
   beaker_reagent_color: string;
 };
 
-export const ChemSeparator = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemSeparator = (props) => {
+  const { act, data } = useBackend<Data>();
   return (
     <Window width={470} height={130}>
       <Window.Content>

tgui/packages/tgui/interfaces/ChemSplitter.tsx

@@ -9,8 +9,8 @@ type Data = {
   max_transfer: number;
 };
 
-export const ChemSplitter = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemSplitter = (props) => {
+  const { act, data } = useBackend<Data>();
   const { straight, side, max_transfer } = data;
 
   return (

tgui/packages/tgui/interfaces/ChemSynthesizer.tsx

@@ -10,8 +10,8 @@ type Data = {
   possible_amounts: number[];
 };
 
-export const ChemSynthesizer = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const ChemSynthesizer = (props) => {
+  const { act, data } = useBackend<Data>();
   const {
     amount,
     current_reagent,

tgui/packages/tgui/interfaces/CircuitAccessChecker.tsx

@@ -10,8 +10,8 @@ type Data = {
   accesses: string[];
 };
 
-export const CircuitAccessChecker = (props, context) => {
-  const { act, data } = useBackend<Data>(context);
+export const CircuitAccessChecker = (props) => {
+  const { act, data } = useBackend<Data>();
   const { oneAccess, regions = [], accesses = [] } = data;
 
   return (

tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx

@@ -12,8 +12,8 @@ type CircuitAdminPanelData = {
   }[];
 };
 
-export const CircuitAdminPanel = (props, context) => {
-  const { act, data } = useBackend<CircuitAdminPanelData>(context);
+export const CircuitAdminPanel = (props) => {
+  const { act, data } = useBackend<CircuitAdminPanelData>();
 
   return (
     <Window title="Circuit Admin Panel" width={1200} height={500} resizable>

tgui/packages/tgui/interfaces/CircuitModule.jsx

@@ -2,8 +2,8 @@ import { useBackend } from '../backend';
 import { Stack, Section, Input, Button, Dropdown } from '../components';
 import { Window } from '../layouts';
 
-export const CircuitModule = (props, context) => {
-  const { act, data } = useBackend(context);
+export const CircuitModule = (props) => {
+  const { act, data } = useBackend();
   const { input_ports, output_ports, global_port_types } = data;
   return (
     <Window width={600} height={300}>
@@ -111,7 +111,7 @@ export const CircuitModule = (props, context) => {
   );
 };
 
-const PortEntry = (props, context) => {
+const PortEntry = (props) => {
   const {
     onRemove,
     onEnter,