[MIRROR] [TGUI 5.0 Prep] JS to JSX (#7414)

Co-authored-by: Selis <sirlionfur@hotmail.de>
Co-authored-by: Selis <selis@xynolabs.com>

tgui/package.json

@@ -38,6 +38,7 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "common": "workspace:*",
     "css-loader": "^6.7.1",
+    "esbuild-loader": "^4.0.2",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-radar": "^0.2.1",
@@ -53,7 +54,6 @@
     "sass": "^1.52.1",
     "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.1",
     "typescript": "^4.6.4",
     "webpack": "^5.76.0",
     "webpack-bundle-analyzer": "^4.5.0",

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 { createLogger } from './logging';
-import { require } from './require.js';
+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 { createCompiler } from './webpack';
-import { reloadByondCache } from './reloader.js';
+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 { createLogger } from '../logging';
-import { require } from '../require.js';
+import { require } from '../require';
-import { resolveGlob } from '../util.js';
+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 { createLogger, directLog } from '../logging';
-import { require } from '../require.js';
+import { require } from '../require';
-import { loadSourceMaps, retrace } from './retrace.js';
+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 { DreamSeeker } from './dreamseeker';
-import { createLogger } from './logging.js';
+import { createLogger } from './logging';
-import { resolveGlob, resolvePath } from './util.js';
+import { resolveGlob, resolvePath } from './util';
-import { regQuery } from './winreg.js';
+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 { loadSourceMaps, setupLink } from './link/server';
-import { createLogger } from './logging.js';
+import { createLogger } from './logging';
-import { reloadByondCache } from './reloader.js';
+import { reloadByondCache } from './reloader';
-import { resolveGlob } from './util.js';
+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/components/FakeTerminal.jsx

@@ -0,0 +1,51 @@
+import { Box } from './Box';
+import { Component, Fragment } from 'inferno';
+
+export class FakeTerminal extends Component {
+  constructor(props) {
+    super(props);
+    this.timer = null;
+    this.state = {
+      currentIndex: 0,
+      currentDisplay: [],
+    };
+  }
+
+  tick() {
+    const { props, state } = this;
+    if (state.currentIndex <= props.allMessages.length) {
+      this.setState((prevState) => {
+        return {
+          currentIndex: prevState.currentIndex + 1,
+        };
+      });
+      const { currentDisplay } = state;
+      currentDisplay.push(props.allMessages[state.currentIndex]);
+    } else {
+      clearTimeout(this.timer);
+      setTimeout(props.onFinished, props.finishedTimeout);
+    }
+  }
+
+  componentDidMount() {
+    const { linesPerSecond = 2.5 } = this.props;
+    this.timer = setInterval(() => this.tick(), 1000 / linesPerSecond);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    return (
+      <Box m={1}>
+        {this.state.currentDisplay.map((value) => (
+          <Fragment key={value}>
+            {value}
+            <br />
+          </Fragment>
+        ))}
+      </Box>
+    );
+  }
+}