Load external script

raafirivero

I need to install an external script via NPM to use in the front-end customization extension I'm building. Do I cd/ into the JS directory of my package and install it there? then use import { slider } from 'mithril-slider'; on my main JS file? Or do I install it into the vendor folder?

clarkwinkelmann

raafirivero you can add any npm dependency to the build process. Your assumptions are correct.

You can see how a few extensions include external libraries, for example the tags extension "embeds" the "html5sortable" library https://github.com/flarum/tags/blob/master/js/package.json#L6

If multiple extensions need a same dependency that's not part of code, each extension will include that library in their dist file.

raafirivero

I'm trying to get an external library to manage a slider and a couple simple animations. I've tried calling its function using the "oncreate" hook of the nodes I'm creating via Mithril. (the Mithril handbook says 'oncreate' is the best place to initialize third-party libraries and animations). Unfortunately the nodes I'm making aren't attached to the DOM at oncreate because they need calls to external APIs to source content from YouTube and other places. I use the view() function to combine the results of m.request()s into vnodes and display them. But view() does not have a callback. Is there something else that fires when everything is in the DOM so that I can build my slider?

datitisev

raafirivero oncreate lifecycle hooks are not available in our current Mithril version, 0.2.x. We are working on updating Flarum to Mithril v2, but for right now, you can only use init and config methods.

raafirivero

datitisev I'm getting the same problem when using config - the data doesn't appear to have been attached to the DOM yet and the slider script can't find it.

datitisev

raafirivero It might help if you could show the code you have. config runs multiple times - it has an isInitialized parameter that basically distinguises oncreate from onupdate (I think), and another one that might be the DOM element - I can never remember.

raafirivero

datitisev here's a simple couple functions I wrote to test everything without the complication of fetching data. The slider function tnsWrap() needs to find an element in the DOM named ".my-slider":

function silly_boxes(){
    var fewboxes = [];
    for(var i=1; i<10; i++) {
        fewboxes.push( m("box"+i,{style:"background: orange"},"box: "+i) );
    }
    return fewboxes;
}


var makeBoxes = {
    oninit: console.log("init works"),
    config: tnsWrap(), 
    view: function(){
        return [
            m(".my-slider",{style:"background: blue"},[
                silly_boxes()
            ]),
            console.log("made a box")
        ]
    }
}

m.mount(socialrow, makeBoxes);

reading up on the 0.2 spec now to see how to set the Initialized variable

raafirivero

datitisev - think I just found it! You're right about config running multiple times and this example from the Mithril 0.2.5 spec shows that I need to include an isInitialized variable in the function that calls on the real DOM. Thanks for the 0.2x pointers.

datitisev

raafirivero In the code you provided, what is tnsWrap()? Does that return a function? If not, I don't think you should be calling it there - that just returns the value of the function and sets it to the config. Probs should be config: () => tnsWrap()

raafirivero

datitisev tnsWrap() is the function that makes the slider work. The way I got it to work and actually build the slider is below. Basically, it's declaring config:tnsWrap within the Mithril function that builds the vnode:

function silly_boxes(){
    var fewboxes = [];
    for(var i=1; i<10; i++) {
        fewboxes.push( m("box"+i,{style:"background: orange"},"box: "+i) );
    }
    return fewboxes;
}


var makeBoxes = {
    view: function(){
        return [
            m(".my-slider",{style:"background: blue", config:tnsWrap},[
                silly_boxes()
            ]),
        ]
    }
}

datitisev

raafirivero Yeah, the code you showed earlier had you calling tnsWrap, not just setting config equal to that function. It works now, then?

raafirivero

datitisev yes it works now - thanks! - got slider working with youTube players now, too.