Port packages/web_ui to TypeScript (#508)

* .jsx to .tsx

* controller: tsc --build before webpack-cli

* Type Annotation

* disabled move into the <Input/> and <Checkbox/>

* cleanup debug left over

* documentation

* default ModPack

* modPackUpdateHandlers no undefined

* PluginInfo changes proposition

* PluginInfo changes proposition miss

* ModRecord & ModInfo feedback loop at const mods = [ ?

* ["connect", "drop", "resume", "close"] as const

* .tsx to .ts when possible

packages/controller/src/ControlConnection.ts

@@ -76,13 +76,10 @@ export default class ControlConnection extends BaseConnection {
 			}
 		});
 
-		for (let event of ["connect", "drop", "resume", "close"]) {
+		for (let event of ["connect", "drop", "resume", "close"] as const) {
 			this.connector.on(event, () => {
 				for (let controllerPlugin of this._controller.plugins.values()) {
-					controllerPlugin.onControlConnectionEvent(
-						this,
-						event as "connect" | "drop" | "resume" | "close"
-					);
+					controllerPlugin.onControlConnectionEvent(this, event);
 				}
 			});
 		}

packages/controller/src/Controller.ts

@@ -45,7 +45,7 @@ const logSizeGauge = new Gauge(
 export default class Controller {
 	clusterLogger: winston.Logger;
 	/** Array of plugin info objects for known plugins */
-	pluginInfos: lib.PluginInfo[];
+	pluginInfos: lib.PluginNodeEnvInfo[];
 	configPath: string;
 	/** Controller config. */
 	config: lib.ControllerConfig;

packages/controller/src/HostConnection.ts

@@ -54,11 +54,11 @@ export default class HostConnection extends BaseConnection {
 			plugins: registerData.plugins,
 		});
 
-		for (let event of ["connect", "drop", "resume", "close"]) {
+		for (let event of ["connect", "drop", "resume", "close"] as const) {
 			// eslint-disable-next-line no-loop-func
 			this.connector.on(event, () => {
 				for (let plugin of this._controller.plugins.values()) {
-					plugin.onHostConnectionEvent(this, event as "connect"|"drop"|"resume"|"close");
+					plugin.onHostConnectionEvent(this, event);
 				}
 			});
 		}

packages/controller/src/WsServer.ts

@@ -1,7 +1,6 @@
 import type { IncomingMessage } from "http";
 import type { Duplex } from "stream";
 import type Controller from "./Controller";
-import type { WebSocketClusterio } from "./WsServerConnector";
 
 import jwt from "jsonwebtoken";
 import WebSocket, { WebSocketServer } from "ws";
@@ -55,7 +54,7 @@ export default class WsServer {
 			noServer: true,
 			path: "/api/socket",
 		});
-		this.wss.on("connection", (socket: WebSocketClusterio, req: IncomingMessage) => this.handleConnection(socket, req));
+		this.wss.on("connection", (socket: lib.WebSocketClusterio, req: IncomingMessage) => this.handleConnection(socket, req));
 	}
 
 	async stop(): Promise<void> {
@@ -98,19 +97,19 @@ export default class WsServer {
 		});
 	}
 
-	handleConnection(socket: WebSocketClusterio, req: IncomingMessage) {
+	handleConnection(socket: lib.WebSocketClusterio, req: IncomingMessage) {
 		logger.verbose(`WsServer | new connection from ${req.socket.remoteAddress}`);
 
 		// Track statistics
 		wsConnectionsCounter.inc();
-		socket.on("message", (message) => {
+		socket.on("message", (message: WebSocket.RawData) => {
 			wsMessageCounter.labels("in").inc();
 			if (!socket.clusterio_ignore_dump) {
 				this.controller.debugEvents.emit("message", { direction: "in", content: message });
 			}
 		});
 		let originalSend = socket.send;
-		socket.send = (...args) => {
+		socket.send = (...args: any[]) => {
 			wsMessageCounter.labels("out").inc();
 			if (typeof args[0] === "string" && !socket.clusterio_ignore_dump) {
 				this.controller.debugEvents.emit("message", { direction: "out", content: args[0] });
@@ -120,7 +119,7 @@ export default class WsServer {
 		};
 
 		// Start connection handshake.
-		let loadedPlugins: any = {};
+		let loadedPlugins: {[key:string]: string} = {};
 		for (let [name, plugin] of this.controller.plugins) {
 			loadedPlugins[name] = plugin.info.version;
 		}

packages/controller/src/WsServerConnector.ts

@@ -5,10 +5,6 @@ import events from "events";
 import * as lib from "@clusterio/lib";
 const { logger } = lib;
 
-export interface WebSocketClusterio extends WebSocket {
-	clusterio_ignore_dump?: boolean;
-}
-
 
 /**
  * Connector for controller connections
@@ -18,7 +14,6 @@ export interface WebSocketClusterio extends WebSocket {
  */
 export default class WsServerConnector extends lib.WebSocketBaseConnector {
 	_timeoutId: ReturnType<typeof setTimeout> | null = null;
-	declare _socket: WebSocketClusterio | null;
 
 	constructor(
 		dst: lib.Address,

packages/controller/src/routes.ts

@@ -82,7 +82,7 @@ async function getMetrics(req: Request, res: Response, next: any) {
 			}
 		}
 	}
-	
+
 	// TODO: results seem to mix deserialized and serialized lib.CollectorResult ?
 	// mergeSamples imply samples be [string, [string, number][]]
 	// but lib.defaultRegistry.collect() imply Map<string, Map<string, number>>
@@ -99,8 +99,21 @@ async function getMetrics(req: Request, res: Response, next: any) {
 	res.send(text);
 }
 
+
+export type PluginWebApi = {
+	name: string;
+	version: string;
+	enabled: boolean;
+	loaded: boolean;
+	web: {
+		main: string;
+		error?: string;
+	};
+	requirePath: string;
+}
+
 function getPlugins(req: Request, res: Response) {
-	let plugins = [];
+	let plugins: PluginWebApi[] = [];
 	for (let pluginInfo of req.app.locals.controller.pluginInfos) {
 		let name = pluginInfo.name;
 		let loaded = req.app.locals.controller.plugins.has(name);