jsx

Author: JohnFulpWillard

tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/index.ts

@@ -8,7 +8,7 @@ import { Feature } from "./base";
 // while also preventing downstreams from needing to mutate existing files.
 const features: Record<string, Feature<unknown>> = {};
 
-const requireFeature = require.context("./", true, /.tsx$/);
+const requireFeature = require.context('./', true, /.tsx$/);
 
 for (const key of requireFeature.keys()) {
   if (key === "index" || key === "base") {

tgui/packages/tgui/routes.js tgui/packages/tgui/routes.tsxtgui/packages/tgui/routes.js renamed to tgui/packages/tgui/routes.tsx

@@ -4,27 +4,34 @@
  * @license MIT
  */
 
+import { Store } from 'common/redux';
+import { Window } from './layouts';
 import { selectBackend } from './backend';
 import { selectDebug } from './debug/selectors';
-import { Window } from './layouts';
 
 const requireInterface = require.context('./interfaces');
 
-const routingError = (type, name) => () => {
-  return (
-    <Window>
-      <Window.Content scrollable>
-        {type === 'notFound' && (
-          <div>Interface <b>{name}</b> was not found.</div>
-        )}
-        {type === 'missingExport' && (
-          <div>Interface <b>{name}</b> is missing an export.</div>
-        )}
-      </Window.Content>
-    </Window>
-  );
-};
+const routingError =
+  (type: 'notFound' | 'missingExport', name: string) => () => {
+    return (
+      <Window>
+        <Window.Content scrollable>
+          {type === 'notFound' && (
+            <div>
+              Interface <b>{name}</b> was not found.
+            </div>
+          )}
+          {type === 'missingExport' && (
+            <div>
+              Interface <b>{name}</b> is missing an export.
+            </div>
+          )}
+        </Window.Content>
+      </Window>
+    );
+  };
 
+// Displays an empty Window with scrollable content
 const SuspendedWindow = () => {
   return (
     <Window>
@@ -33,7 +40,8 @@ const SuspendedWindow = () => {
   );
 };
 
-export const getRoutedComponent = store => {
+// Get the component for the current route
+export const getRoutedComponent = (store: Store) => {
   const state = store.getState();
   const { suspended, config } = selectBackend(state);
   if (suspended) {
@@ -48,19 +56,20 @@ export const getRoutedComponent = store => {
   }
   const name = config?.interface;
   const interfacePathBuilders = [
-    name => `./${name}.tsx`,
-    name => `./${name}.js`,
-    name => `./${name}/index.tsx`,
-    name => `./${name}/index.js`,
+    (name: string) => `./${name}.tsx`,
+    (name: string) => `./${name}.jsx`,
+    (name: string) => `./${name}.js`,
+    (name: string) => `./${name}/index.tsx`,
+    (name: string) => `./${name}/index.jsx`,
+    (name: string) => `./${name}/index.js`,
   ];
   let esModule;
   while (!esModule && interfacePathBuilders.length > 0) {
-    const interfacePathBuilder = interfacePathBuilders.shift();
+    const interfacePathBuilder = interfacePathBuilders.shift()!;
     const interfacePath = interfacePathBuilder(name);
     try {
       esModule = requireInterface(interfacePath);
-    }
-    catch (err) {
+    } catch (err) {
       if (err.code !== 'MODULE_NOT_FOUND') {
         throw err;
       }

tgui/webpack.config.js

@@ -49,13 +49,13 @@ module.exports = (env = {}, argv) => {
       chunkLoadTimeout: 15000,
     },
     resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
+      extensions: ['.tsx', '.ts', '.js', '.jsx'],
       alias: {},
     },
     module: {
       rules: [
         {
-          test: /\.(js|cjs|ts|tsx)$/,
+          test: /\.(js|jsx|cjs|ts|tsx)$/,
           use: [
             {
               loader: require.resolve('babel-loader'),