mirror of
https://github.com/clusterio/clusterio.git
synced 2026-11-11 15:04:52 +09:00
Hornwitser
5dcaca4d0b
Migrate the usage of CommonJS specific code and imports to ESM. Roughly summarised this: - Changes all require() calls to import statement or expressions. - Changes usage of module.exports to export statements. - Replaces require.resolve with import.meta.resolve. - Replaces conditional imports with conditional subpath imports. - Replaces module === require.main with import.meta.main. - Adds the full filename with extention to all relative imports. - Changes all usage of __dirname and __filename to their import.meta equivalents. - Sets "type": "module" in package.json files. - Removes usage of "use strict". - Adds .ts an an alias of .js for the webpack build. Due to differences in how require and import resolves files the plugin entrypoints will have to include the filename and extension after this migration in order to work.
94 lines
2.8 KiB
React
94 lines
2.8 KiB
React
import React, {
|
|
useContext, useEffect, useState,
|
|
//%if controller // Subscribing requires web content and the controller
|
|
useCallback, useSyncExternalStore,
|
|
//%endif
|
|
} from "react";
|
|
|
|
// import {
|
|
//
|
|
// } from "antd";
|
|
|
|
import {
|
|
BaseWebPlugin, PageLayout, PageHeader, Control, ControlContext, notifyErrorHandler,
|
|
} from "@clusterio/web_ui";
|
|
//%if multi_context // Messages requires multi context
|
|
|
|
import {
|
|
PluginExampleEvent, PluginExampleRequest,
|
|
//%endif
|
|
//%if controller // Subscribing requires web content and the controller
|
|
ExampleSubscribableUpdate, ExampleSubscribableValue,
|
|
//%endif
|
|
//%if multi_context // Messages requires multi context
|
|
} from "../messages.js";
|
|
//%endif
|
|
|
|
import * as lib from "@clusterio/lib";
|
|
|
|
function MyTemplatePage() {
|
|
let control = useContext(ControlContext);
|
|
//%if controller // Subscribing requires web content and the controller
|
|
const plugin = control.plugins.get("__plugin_name__");
|
|
const [subscribableData, synced] = plugin.useSubscribableData();
|
|
//%endif
|
|
|
|
return <PageLayout nav={[{ name: "__plugin_name__" }]}>
|
|
<PageHeader title="__plugin_name__" />
|
|
//%if controller // Subscribing requires web content and the controller
|
|
Synced: {String(synced)} Data: {JSON.stringify([...subscribableData.values()])}
|
|
//%endif
|
|
</PageLayout>;
|
|
}
|
|
|
|
export class WebPlugin extends BaseWebPlugin {
|
|
//%if controller // Subscribing requires web content and the controller
|
|
subscribableData = new lib.MapSubscriber(ExampleSubscribableUpdate, this.control);
|
|
|
|
//%endif
|
|
async init() {
|
|
this.pages = [
|
|
{
|
|
path: "/__plugin_name__",
|
|
sidebarName: "__plugin_name__",
|
|
// This permission is client side only, so it must match the permission string of a resource request to be secure
|
|
// An undefined value means that the page will always be visible
|
|
//%if controller // Subscribing requires web content and the controller
|
|
permission: "__plugin_name__.example.permission.subscribe",
|
|
//%endif
|
|
//%if !controller
|
|
permission: "__plugin_name__.example.permission.view",
|
|
//%endif
|
|
content: <MyTemplatePage/>,
|
|
},
|
|
];
|
|
//%if multi_context
|
|
|
|
this.control.handle(PluginExampleEvent, this.handlePluginExampleEvent.bind(this));
|
|
this.control.handle(PluginExampleRequest, this.handlePluginExampleRequest.bind(this));
|
|
//%endif
|
|
}
|
|
//%if controller// Subscribing requires web content and the controller
|
|
|
|
useSubscribableData() {
|
|
const control = useContext(ControlContext);
|
|
const subscribe = useCallback((callback) => this.subscribableData.subscribe(callback), [control]);
|
|
return useSyncExternalStore(subscribe, () => this.subscribableData.getSnapshot());
|
|
}
|
|
//%endif
|
|
//%if multi_context
|
|
|
|
async handlePluginExampleEvent(event) {
|
|
this.logger.info(JSON.stringify(event));
|
|
}
|
|
|
|
async handlePluginExampleRequest(request) {
|
|
this.logger.info(JSON.stringify(request));
|
|
return {
|
|
myResponseString: request.myString,
|
|
myResponseNumbers: request.myNumberArray,
|
|
};
|
|
}
|
|
//%endif
|
|
}
|