Creating custom plugin for Converse.js 9.1.1

Question

I downloaded conversejs 9.1.1 and I am trying to learn the plugin architecture by making my own custom plugin. I looked at the http-auth plugin here to see how to add a plugin. https://github.com/conversejs/community-plugins/tree/master/packages/http-auth

To install the plugin it directs me to the instructions here: https://m.conversejs.org/docs/html/plugin_development.html

I understand I have to modify my webpage to whitelist the plugin, but for some reason I can't grok a few things. Here is my awesome plugin which resides in a file called Hello-World.js

import { converse } from "@converse/headless/core";

const plugin = {
    initialize() {
        console.error("Hello World!")
    }
}

if (typeof converse === "undefined") {
    window.addEventListener(
        'converse-loaded',
        () => converse.plugins.add("Hello-World", plugin)
    );
} else {
    converse.plugins.add("Hello-World", plugin);
}

1. The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
2. I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
3. Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.

If it matters I am testing my plugin by running make serve in the conversejs directory and directing my web-browser (Chrome) to localhost:8000/fullscreen.html

Thanks, Wray

Answer 1

The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?

converse is available as a global once converse.js has been loaded via the <script> tag.

That's why there's the if (typeof converse === "undefined") { check at the end of the plugin. It waits for converse.js to be loaded if converse isn't yet defined.

I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?

Most community plugins are developed in such a way that they're loaded separately via <script> tags. If you do it like that, it doesn't matter where they live.

Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.

You can do it like that if you want to include your plugin inside a custom build of Converse, then you can also import stuff from converse.

The alternative is to load your plugin separately via a <script> tag, but then you can't import stuff and have to use the converse global and the closured _converse object that is passed to your plugin's initialize function.