Wikimedia Developer Support

ResourceLoader fails when loading OOUI

mediawiki
ooui
extensions

#1

I’m developing a special page extension and I want to add some interactive OOUI elements. When I add the scripts or dependencies to my extension.json, ResourceLoader fails and the CSS of my page breaks. I’ve looked at Using OOUI in MediaWiki as well as copying code from other extensions. I’ve ensured that my ResourceFileModulePaths is correct and I’ve tried variations on the module name like ooui-core or just oojs which I see in some extensions.

Here is the relevant snippet from my extension.json:

"ResourceModules": {
    "ext.WikiActivity": {
        "scripts": [
            "WikiActivity.js"
        ],
        "styles": [
            "WikiActivity.css"
        ],
        "dependencies": [
            "oojs-ui-core",
            "oojs-ui-widgets"
        ]
    }
},

#2

Check the resourceloader log channel.


#3

Thank you! After looking at the logs, it seems that I was trying to add scripts/dependencies to what should have been a styles-only module. I put it into a separate module and the CSS no longer breaks.

The thing is, now I’m not sure if my JavaScript is being run after my special page is loaded. To start, I just want to find a page element with the class wa-header and append anything to it. I’ve looked through lots of tutorials like this and this but all of them deal with using OOUI in standalone web pages. MediaWiki has many more layers of abstraction so I’m not sure how to glue together the PHP and JavaScript of my extension.

Can you please show me a minimal example of a script that does this? What should my WikiActivity.js look like and how should I call it once my PHP has finished outputting the HTML?


#4

Typically if you create the page in PHP, you’d use HTMLForm, which can create OOUI widgets without any need for ResourceLoader modules.


#5

Is there any way to do this webpage in a combination of PHP and JavaScript? The page is generated in PHP and JavaScript adds the widgets and callbacks? I took a look at HTMLForm but it’s missing OOUI widgets I need like MenuTagMultiselectWidget. These aren’t available in the PHP API either. The HTMLForm tutorial is also very outdated and uses the old style of extension registering instead of extension.json.

My end goal is something like Special:RecentChanges where the user can toggle which log types are shown. Parameters like start-date and log-type would be passed in via GET parameters after the page reloads.


#6

I think HTMLComboboxField and HTMLMultiSelectField both can be used for something like that. You can create OOUI widgets purely from Javascript as well but I’m not really familiar with it.
(And yes, on-wiki HTMLForm docs are borderline useless. You’d have to look at the code.)


#7

I wasn’t aware that HTML equivalents of all of the OOUI widgets existed! I’ll take a look at the documentation and give this a try.


#8

Not all of them, but most. Also, there are several multiselect widgets, with slight differences in behavior that you might ultimately not care too much about.