How to use primeelements in Aurelia

Help Requests
5

I tried including them as script tags as follows:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="node_modules/x-tag/dist/x-tag-core.js"></script>
<script src="node_modules/primeui/primeui.js"></script>
<script src="node_modules/primeui/primeelements.js"></script>
<script src="dist/bootstrapper.js" ></script> <!-- calls Aurelia bootstrapper -->

The problem with this is, that primeui requires jquery and jquery is loaded via SystemJS insidedist/bootstrapper.js. So primeui gets loaded too early when I do it like shown above.

I then tried to load the primeui stuff using SystemJS.

Basically, I have my template:

<template>
    <require from="primeui/primeelements"></require>
</template>

Primeelements assumes to have access to the global PUI variable defined by primeui and to the global xtag variable defined by x-tag. Thus I configured the primeelements package in SystemJS as described here:

System.config({
  ...
  packages: {
    "primeui": {
      "meta": {
        "primeelements.js": {
          "globals": {
            "PUI": "primeui/primeui",
            "xtag": "x-tag/dist/x-tag-core.js"
          }
        }
      }
    }
  },
  ...
})

This indeed results in the required globals being available when primeelements.js is invoked. However, it seems that the primeui module is not loaded beforehand. It contains jquery UI widget definitions that look like this:

(function(factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
      module.exports = function(root, jQuery) {
        factory(jQuery);
        return jQuery;
      };
    } else {
      factory(jQuery);
    }
  }(function($) {
    $.widget("primeui.puidropdown", {
      // ....
    });
}));

For the above module, module.exports is called but then the module is never instantiated via the factory method. Thus, the widget is never defined which causes following error when the webcomponent tags are processed by x-tag:

Uncaught TypeError: this.xtag.select.puidropdown is not a function
    at HTMLElement.created (primeelements.js:1096)
    at HTMLElement.value [as createdCallback] (x-tag-core.js:3837)
    at ViewFactory.create (aurelia-templating.js:2406)
    at HtmlBehaviorResource.create (aurelia-templating.js:4114)
    at eval (router-view.js:129)
    at <anonymous>

this.xtag.select is a jQuery object.

It feels like I am almost there… Unfortunately I’m not an expert with this whole SystemJS and module loading stuff. So I hope you can help!