Rendering WebComponents in MediaWiki

[DawnPaladin]

Hello! I work for a nonprofit that studies ancient Hebrew literature. We use Argdown to map and analyze arguments about interpreting the Psalms. We think Argdown's text-based nature will pair really well with MediaWiki's revision control features, so I'm building a plugin that will render Argdown on MediaWiki pages.

I have a version of the plugin that successfully renders Argdown as HTML. Here's the relevant JavaScript that's running on the server:

import { argdown, StdOutPlugin } from "@argdown/node";

argdown.addPlugin(new StdOutPlugin());
argdown.defaultProcesses["wiki-plugin"] = [
    "parse-input", "build-model", "build-map", "export-html"
];

let argument = process.argv[2];

const request = {
    input: argument,
    process: "wiki-plugin",
    html: {
        headless: true
    }
};

const response = argdown.run(request);
const html = response.html;
console.log(html); // output to MediaWiki via stdout

This works! Arguments are formatted by Argdown into pretty HTML. Now I'm trying to get argument maps to work. Here's what I'm trying:

import { argdown, StdOutPlugin } from "@argdown/node";

argdown.addPlugin(new StdOutPlugin());
argdown.defaultProcesses["wiki-plugin"] = [
    "parse-input", "build-model", "build-map", "highlight-source", "export-dot", "export-svg", "export-web-component"
];

let argument = process.argv[2];

const request = {
    input: argument,
    process: "wiki-plugin",
    html: {
        headless: true
    }
};

const response = argdown.run(request);

console.log(response.webComponent); // output to MediaWiki via stdout

When I do that, here's what I get:

The argument being passed into Argdown is:

[statement]: I am a statement. #tag1
 - <argument 1>
 + <argument 2>
    <_ <argument 3>

 # I am a group

<argument 1>: I am an attacking argument. #tag2

<argument 2>: I am a supporting argument. #tag3

## I am a subgroup

<argument 3>: I am an undercut argument. #tag4

My console says:

Uncaught TypeError: da is undefined
    ea symbol]:37
    <anonymous> symbol.ts:37
    <anonymous> webcomponents-bundle-index.js:52

There are no errors in the Network tab. I do get a couple of warnings about source maps - MediaWiki isn't delivering the source maps properly to the front end, so I'm not able to inspect deeper into symbol.ts. However, poking around in the Debugger tab shows the full path for the file that's erroring out:

https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/[synthetic:es6/symbol]

That can't be right. File names shouldn't have square brackets in them. Any idea what's going on? How can I help resolve this issue?

[christianvoigt]

Hi, you can simply use the Argdown app instance of @argdown/core as a starting point. That way you will automatically keep up to date if I add new plugins to some of the default processes.

At the moment it is not easy to bundle @argdown/core (if you are planning to do so) because of its use of viz.js. I am currently working on that and hope to provide a simple webpack 5 example for anyone who wants to integrate Argdown into another web app.

[christianvoigt]

Or if you run it on node you can use the Argdown app of @argdown/node (containing additional async plugins).

[DawnPaladin]

I figured out why viewBox="0.00... was appearing instead of the argument map - it was something MediaWiki was doing. I'm now able to display formatted arguments and argument maps on my wiki! 🎉

I'm testing my plugin with my team. Once we're sure it works, we'll release it for other MediaWiki users.

I am still seeing the Uncaught TypeError: da is undefined in the console, though it doesn't seem to be affecting functionality. If I put more than one on a page, I also see Uncaught DOMException: CustomElementRegistry.define: 'argdown-map' has already been defined as a custom element. Do you know why it's doing that?

[DawnPaladin]

I resolved Uncaught TypeError: da is undefined by locally hosting webcomponents-loader.js, so now I'm down to Uncaught DOMException: CustomElementRegistry.define: 'argdown-map' has already been defined as a custom element when I place multiple argument blocks.

[christianvoigt]

Hi @DawnPaladin,
sorry for the late answer, the last days I was occupied with releasing v1.7.0 (check out the cool new features).

The error message you get is thrown because you are loading the argdown-map.js file multiple times on your page. Check out this section of the guide, especially the following paragraph:

The Markdown parser plugins will load these files once at the top of the generated HTML, even if it contains many Argdown web components. If you export the web components manually from different Argdown files, the files are loaded each time at the beginning of the generated web component HTML. If you use several components on the same page, you should avoid loading the same files over and over again.

For that purpose you can deactivate this behaviour in your Argdown configuration...

You then have to take care of loading these files yourself in your html document.

It would probably be best if argdown-map.js would check if the component is already registered so that the error is not thrown. Ideally it should still log a warning, so that it is clear to website devs that the file is loaded multiple times.

[DawnPaladin]

Thanks for your hard work on Argdown!!

Trying to get MediaWiki to load the library exactly once is complicated. I'm putting it on my todo list.

[DawnPaladin]

I've published the MediaWiki extension for others to use!