What is the best way to integrate Highcharts with Curljs?

Question

Background

I am looking for an alternative to the current technique I use to load highcharts.js with my curljs modules. At present I am loading the required libraries in this fashion:

define("Test", ["jquery",
    "js!https://code.highcharts.com/highcharts",
    "js!https://code.highcharts.com/highcharts-more",
    "js!https://code.highcharts.com/modules/exporting"],

function ($, hchart, hchartmore, hchartexp) {
    var testFunc = function () {
        return {
            markup: function () {
                $("#mixer").html("did it");
            },
            chartIt: function () {
                window.chart = new Highcharts.Chart({

               // do the highchart configs});
    };


    return testFunc;
});

This currently works, and you can reference my jsfiddle demoing my current solution.

I attempted to shim Highchart using js! plugin and create a curl config object as specified by the curl documentation:

curl = {
    baseUrl: "",
    paths: {
        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js",
        "hchart": "js!https://code.highcharts.com/highcharts",
        "hchartmore":"js!https://code.highcharts.com/highcharts-more",
        "hchartmore":"js!https://code.highcharts.com/modules/exporting"}
}; 

but I receive the "define() is missing or duplicated" error when curl attempts to read through the highchart.js file.

My question then is my solution an appropriate, one, even though it works? Are there alternatives?

Answer 1

Try using curl.js's legacy loader. It's great for global scripts, such as highcharts.

var hchartBase = "https://code.highcharts.com/";
var hchartCfg = {
    loader: "curl/loader/legacy",
    exports: "Highcharts"
};
curl.config({
    baseUrl: "",
    paths: {
        "curl": "your/path/to/curl/curl.js",
        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js",
        "hchart": { location: hchartBase + "highcharts", config: hchartCfg },
        "hchartmore": { location: hchartBase + "highcharts-more", config: hchartCfg },
        "hchartexp": { location: hchartBase + "modules/exporting", config: hchartCfg }
    }
});

Note that I included a path to curl. This is needed for curl to find the legacy loader.

Normally, you wouldn't use the same legacy config for all three libs, but since I couldn't tell if the highcharts-more and exporting libs don't declare any useful globals that curl could export on your behalf, I just used the same config for all three.

More info is here: https://github.com/cujojs/curl/tree/master/src/curl/loader