Integrating 3rd Party scripts

Framework Knowledge
1

I am trying to add query.sparkline to my Aurelia project. I have tried adding:

  "jquery.sparkline": {
       "id": "jquery.sparkline",
       "path": "../node_modules/jquery.sparkline",
      "deps": [
              "jquery"
      ]
  }

to aurelia.json

and in my component I added the lines (in sparkling.ts)

import {inject, bindable, bindingMode, DOM, noView} from 'aurelia-framework';
import $ from 'jquery';
import {} from 'jquery.sparkline';

@noView()
@inject(Element)
export class Sparkline {
  domElement: any;

  constructor(private elm: Element) {}


  attached() {
    this.domElement = $(this.elm);

    this.domElement.sparkline([10,8,5,7,4,4,1]);
  }
}

I can see that jquery is loaded (in the browser) but not jquery.sparkline

I am using aurelia cli and webpack 4. Any help would be appreciated.

Regards,
Mark.

2

I got this to work using the following in aurelia.json:

          {
            "name": "jquery.sparkline",
            "path": "../node_modules/jquery-sparkline",
            "main": "jquery.sparkline",
            "deps": ["jquery"]
          },

Note that the path element has a hyphen for jquery-sparkline. In your example you put a "." - to be fair, so did I at first! Hope that solves your issue.

3

This didn’t work for me. I took a step back and added moments successfully. Aurelia.json changes are not required.

After a bit of investigation I found out that even though import {} from 'jquery.sparkline' might be the correct statement the script was not being loaded as the script was not referenced in the code. If its not referenced, webpack won’t load it . for example,

import * as moment from 'moment';
...
console.log("The time is " + moment());
...

Moment.js will load because its referenced. However, with sparkline, the plugin is injected into jQuery and webpack has no way of knowing that $(this.elm).sparkline() refers to the jQuery.sparkline plugin.

So what I did (in sparkling.ts) was change the import to
require('../../../node_modules/jquery.sparkline/jquery.sparkline');
As a result, the component works as expected.

The only thing is that I am not happy with providing the full path to the script file. Does anyone have a solution for this?

Regards,
Mark.

4

I could not find npm package named jquery.sparkline in npmjs.com, are you sure you are not using jquery-sparkline?

Change

import {} from 'jquery.sparkline';

To

import {} from 'jquery-sparkline';
// or just
import 'jquery-sparkline';

It works fine.

BTW, webpack doesn’t use aurelia.json to define dependencies (they are for requirejs/systemjs based apps).

5

Thanks, thats cleaner. The version that I had was from a distribution (non-npm) that I moved across.

Of the two I found
import 'jquery-sparkline';
to work.
The other still doesn’t (for the reason I gave above).