Plugin communication

In order to communicate between the UI and the engine, the Plugin API and the SDK provide some utility methods.

Sending and receiving messages

To communicate from the UI to the engine, we use the sendMessage method.

/ui/index.ts

import { sendMessage } from "@qatium/plugin/ui";

sendMessage("my-message");

Then, in the Plugin Engine we listen for the onMessage event.

/plugin/index.ts

import { PluginI, SDK } from "@qatium/plugin/engine";

class Plugin implements PluginI<string> {
  run(sdk: SDK) {
    //...
  }

  onMessage(sdk: SDK, message: string) {
    console.log(message) // output: my-message
  }
}

To communicate from the engine to the UI, the procedure is very similar. We use the sendMessage method from the SDK.

/plugin/index.ts

import { PluginI, SDK } from "@qatium/plugin/engine";

class Plugin implements PluginI<string> {
  run(sdk: SDK) {
    sdk.ui.sendMessage("plugin developer");
  }
}

And then in the plugin UI we listen for the event, using the onMessage method:

/ui/index.ts

import { onMessage } from "@qatium/plugin/ui";

onMessage<string>((message) => {
  const element = document.getElementById("response");

  if (!element) {
    return;
  }

  element.innerHTML = `Hi ${message}!`;
});