Provide control at init time for web plugins

The control interface is required for adding handlers for message types
a plugin defines, but the plugins were loaded before the Control
instance was created. This meant there was no sensible way for web
plugins to register handlers for their own message types.

Move the creating of the Control instance to before plugins are loaded
and set this.control for web plugins before init is called.

packages/web_ui/src/BaseWebPlugin.ts

@@ -1,5 +1,6 @@
 import type React from "react";
-import type { AccountRole, Link, Logger, PluginWebpackEnvInfo } from "@clusterio/lib";
+import type { AccountRole, Logger, PluginWebpackEnvInfo } from "@clusterio/lib";
+import type { Control } from "./util/websocket";
 
 /**
  * Plugin supplied login form
@@ -77,11 +78,6 @@ export default class BaseWebPlugin {
 	 * Contents of the plugin's package.json file
 	 */
 	package: any;
-	/**
-	 * Control link to the controller, not available until the
-	 * connect event in onControllerConnectionEvent is signaled.
-	 */
-	control?: Link;
 	/**
 	 * Logger for this plugin
 	 *
@@ -152,6 +148,12 @@ export default class BaseWebPlugin {
 		 * The plugin's own info module
 		 */
 		public info: PluginWebpackEnvInfo,
+		/**
+		 * Control link to the controller
+		 *
+		 * Not connected at the time init is invoked.
+		 */
+		public control: Control,
 		logger: Logger,
 	) {
 		this.package = packageData;

packages/web_ui/src/bootstrap.tsx

@@ -67,8 +67,8 @@ async function loadPluginInfos(): Promise<lib.PluginWebpackEnvInfo[]> {
 	return pluginInfos;
 }
 
-async function loadPlugins(pluginInfos: lib.PluginWebpackEnvInfo[]) {
+async function loadPlugins(pluginInfos: lib.PluginWebpackEnvInfo[], control: Control) {
-	let plugins = new Map();
+	let plugins = new Map<string, BaseWebPlugin>();
 	for (let pluginInfo of pluginInfos) {
 		if (!pluginInfo.enabled) {
 			continue;
@@ -83,7 +83,7 @@ async function loadPlugins(pluginInfos: lib.PluginWebpackEnvInfo[]) {
 				WebPluginClass = webModule.WebPlugin;
 			}
 
-			let plugin = new WebPluginClass(pluginInfo.container, pluginInfo.package, pluginInfo, logger);
+			let plugin = new WebPluginClass(pluginInfo.container, pluginInfo.package, pluginInfo, control, logger);
 			await plugin.init();
 			plugins.set(pluginInfo.name, plugin);
 
@@ -106,11 +106,11 @@ export default async function bootstrap() {
 	lib.registerPluginMessages(pluginInfos);
 	lib.registerPluginConfigGroups(pluginInfos);
 	lib.finalizeConfigs();
-	let plugins = await loadPlugins(pluginInfos);
 
 	let wsUrl = new URL(webRoot, document.location.href);
 	let controlConnector = new ControlConnector(wsUrl.href, 120, undefined);
-	let control = new Control(controlConnector, plugins);
+	let control = new Control(controlConnector);
+	control.plugins = await loadPlugins(pluginInfos, control);
 
 	const root = createRoot(document.getElementById("root") as HTMLDivElement);
 	root.render(<App control={control}/>);

packages/web_ui/src/index.ts

@@ -2,6 +2,7 @@
 export { default as bootstrap } from "./bootstrap";
 export { default as notify, notifyErrorHandler } from "./util/notify";
 export { default as BaseWebPlugin } from "./BaseWebPlugin";
+export * from "./util/websocket";
 
 export * from "./model/instance";
 export * from "./model/host";

packages/web_ui/src/util/websocket.ts

@@ -52,6 +52,9 @@ export class Control extends lib.Link {
 	/** Roles of the account this control link is connected as. */
 	accountRoles: lib.AccountRole[] | null = null;
 
+	/** Plugins loaded in the web interface */
+	public plugins = new Map<string, BaseWebPlugin>();
+
 	/** Updates not handled by the subscription service */
 	accountUpdateHandlers: accountHandler[] = [];
 	logHandlers: Map<lib.LogFilter, logHandler[]> = new Map();
@@ -85,14 +88,9 @@ export class Control extends lib.Link {
 
 	constructor(
 		connector: ControlConnector,
-		public plugins: Map<string, BaseWebPlugin>,
 	) {
 		super(connector);
 
-		for (let plugin of plugins.values()) {
-			plugin.control = this;
-		}
-
 		this.connector.on("connect", data => {
 			this.accountName = data.account.name;
 			this.accountRoles = data.account.roles;