Can't load PgnViewerJS with MediaWiki ResourceLoader

[xeyownt]

Ideally CSS & JS scripts must be loaded with MediaWiki ResourceLoader. Here a summary of things I tried.

Tried to import from LocalSettings.php using ResourceLoader.

    // register a ResourceLoader module...
    $wgResourceModules['custom.foo.whatever'] = array(
        'scripts' => array( 'extensions/PgnJS/js/pgnvjs.js' ),
        // could e.g. add dependencies on core modules here
    );

    // ...and set up a hook to add it to every page
    function addMyCustomScripts( &$out ) {
        $out->addModules( 'custom.foo.whatever' );
        return true;
    }
    // $wgHooks['BeforePageDisplay'][] = 'addMyCustomScripts';

This does not work. Apparently the JS script is embeded in some kind of lambda expression in a mw loader call whatever thingy.

Found a working hack on Stackoverflow. Add to LocalSettings.php:

    # Add onBeforePageDisplay function to BeforePageDisplay Hook
    $wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay';

    function onBeforePageDisplay( OutputPage &$out, Skin &$skin )
    {
        $script = '<script type="text/javascript" src="http://localhost/PgnViewerJS/dist/js/pgnvjs.js"></script>';
        $out->addHeadItem("itemName", $script);
        return true;
    };

I added the hook to the extension, and this works.

This must be a temporary solution only since now JS is added to all wiki pages. The SO page linked above contains many useful information on linking in a JS script. Maybe the solution is there.

[xeyownt]

PgnViewerJS embeds a copy of JQuery, but MediaWiki already has JQuery loaded. But apparently JQuery is only available when loaded via ResourceLoader. When loaded with addHeadItem, we get in browser console:

ReferenceError: jQuery is not defined [Learn More]               pgnvjs.js:14:3

[xeyownt]

50 browser tabs later about learning on MediaWiki, Javascript, Node.js and whatever, I have some explanations about the issues:

• Current PgnJS implementation embeds inlined javascript code that calls directly PgnViewerJS function pgnView. As a result, the function must be loaded before parsing these inlined javascript, or we will get an unknown reference 'pgnView'error.
• When using the ResourceLoader, the JS libraries are loaded asynchronously. So this goes against the idea of using inlined javascript code, unless if that code only uses standard functions or objects.
• When loading JS libraries with the ResourceLoader, the symbols are placed in a separate default "context", which is not the same as when the script are loaded directly through a <script> tag in the head section. To have access to this context, one solution is to add an anonymous function in the ResourceLoader queue, RLQ.

As a result, I went for the following solution:

• For each wiki tag <pgn>, we will generate a small JS script that will record the content of wiki tag in a JS variable. This variable must be global, so will simply attach it to global context window.
• We will load PgnViewerJS and a small JS library with the RL. When done, our small JS library will scan all variables, and make the calls to PgnViewerJS functions as necessary.