Javascript XWiki augmentation

[mflorea]

As indicated on https://dev.xwiki.org/xwiki/bin/view/Community/DevelopmentPractices#HJavaScriptBestPractices JavaScript code should be organized in modules. What you did, by extending XWiki.widgets, is the old way. But more importantly you shouldn’t use Prototype.js anymore, and Class.create() is Prototype.js API. You should use the standard JavaScript syntax for creating classes Classes - JavaScript | MDN . This means:

define('xwiki-tabList', [...], function() {
  class KeyboardAccessibleTabList {
    ...
  }

  return KeyboardAccessibleTabList;
});

Next you need to publish this module to the global RequireJS configuration so that anyone else can use it:

• If the module code is in the XWiki WAR then you need to add a line to xwiki-platform/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/javascript.vm at master · xwiki/xwiki-platform · GitHub .
• if the module code is in a JSX, then you can use the https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/ExtensionPoint/RequireJS%20Module%20Config UI extension

Once the configuration is published anyone can write:

require(['xwiki-tabList'], function(TabList) {
  let tabList = new TabList();
  ...
});

Hope this helps,
Marius