Contextless and .js -> .jsx (#2331)

tgui/docs/tutorial-and-examples.md

@@ -127,8 +127,8 @@ import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
-export const SampleInterface = (props, context) => {
-  const { act, data } = useBackend(context);
+export const SampleInterface = (props) => {
+  const { act, data } = useBackend();
   // Extract `health` and `color` variables from the `data` object.
   const {
     health,
@@ -158,7 +158,7 @@ export const SampleInterface = (props, context) => {
 };
 ```
 
-Here are the key variables you get from a `useBackend(context)` function:
+Here are the key variables you get from a `useBackend()` function:
 
 - `config` is part of core tgui. It contains meta-information about the
 interface and who uses it, BYOND refs to various objects, and so forth.
@@ -259,7 +259,7 @@ import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
-export const SampleInterface = (props, context) => {
+export const SampleInterface = (props) => {
   return (
     <Window resizable>
       <Window.Content scrollable>
@@ -269,8 +269,8 @@ export const SampleInterface = (props, context) => {
   );
 };
 
-const HealthStatus = (props, context) => {
-  const { act, data } = useBackend(context);
+const HealthStatus = (props) => {
+  const { act, data } = useBackend();
   const {
     user,
   } = props;
@@ -330,8 +330,8 @@ import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
-export const SampleInterface = (props, context) => {
-  const { act, data } = useBackend(context);
+export const SampleInterface = (props) => {
+  const { act, data } = useBackend();
   // Extract `health` and `color` variables from the `data` object.
   const {
     health,

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-dev-server/dreamseeker.js

@@ -6,8 +6,8 @@
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
-import { createLogger } from './logging.js';
-import { require } from './require.js';
+import { createLogger } from './logging';
+import { require } from './require';
 
 const axios = require('axios');
 const logger = createLogger('dreamseeker');

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

@@ -4,8 +4,8 @@
  * @license MIT
  */
 
-import { createCompiler } from './webpack.js';
-import { reloadByondCache } from './reloader.js';
+import { createCompiler } from './webpack';
+import { reloadByondCache } from './reloader';
 
 const noHot = process.argv.includes('--no-hot');
 const noTmp = process.argv.includes('--no-tmp');

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

@@ -6,9 +6,9 @@
 
 import fs from 'fs';
 import { basename } from 'path';
-import { createLogger } from '../logging.js';
-import { require } from '../require.js';
-import { resolveGlob } from '../util.js';
+import { createLogger } from '../logging';
+import { require } from '../require';
+import { resolveGlob } from '../util';
 
 const SourceMap = require('source-map');
 const { parse: parseStackTrace } = require('stacktrace-parser');

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

@@ -6,9 +6,9 @@
 
 import http from 'http';
 import { inspect } from 'util';
-import { createLogger, directLog } from '../logging.js';
-import { require } from '../require.js';
-import { loadSourceMaps, retrace } from './retrace.js';
+import { createLogger, directLog } from '../logging';
+import { require } from '../require';
+import { loadSourceMaps, retrace } from './retrace';
 
 const WebSocket = require('ws');
 

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

@@ -7,10 +7,10 @@
 import fs from 'fs';
 import os from 'os';
 import { basename } from 'path';
-import { DreamSeeker } from './dreamseeker.js';
-import { createLogger } from './logging.js';
-import { resolveGlob, resolvePath } from './util.js';
-import { regQuery } from './winreg.js';
+import { DreamSeeker } from './dreamseeker';
+import { createLogger } from './logging';
+import { resolveGlob, resolvePath } from './util';
+import { regQuery } from './winreg';
 
 const logger = createLogger('reloader');
 

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

@@ -6,7 +6,7 @@
 
 import fs from 'fs';
 import path from 'path';
-import { require } from './require.js';
+import { require } from './require';
 
 const globPkg = require('glob');
 

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

@@ -7,10 +7,10 @@
 import fs from 'fs';
 import { createRequire } from 'module';
 import { dirname } from 'path';
-import { loadSourceMaps, setupLink } from './link/server.js';
-import { createLogger } from './logging.js';
-import { reloadByondCache } from './reloader.js';
-import { resolveGlob } from './util.js';
+import { loadSourceMaps, setupLink } from './link/server';
+import { createLogger } from './logging';
+import { reloadByondCache } from './reloader';
+import { resolveGlob } from './util';
 
 const logger = createLogger('webpack');
 

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

@@ -8,7 +8,7 @@
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
-import { createLogger } from './logging.js';
+import { createLogger } from './logging';
 
 const logger = createLogger('winreg');
 

tgui/packages/tgui-panel/index.js → 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

@@ -192,33 +192,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',
-            }
-          );
-
-          Dropdown.singletonPopper = singletonPopper;
-        } else {
-          singletonPopper.setOptions({
-            ...DEFAULT_OPTIONS,
-            placement: 'bottom-start',
-          });
-
-          singletonPopper.update();
-        }
-      },
-      this.context
-    );
+    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',
+        });
+
+        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.js → 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,