requireJS javascript dependancies

[scd]

From @brendanheywood

So the topo template would say something like

% requireJS('topo.js');

• If it gets required multiple times it gets ignored. The list of required js files files is retained in the order they were added.
• the normal file path expansion into the versioned file would still work
• Then the footer template can grab this list and render it in order. This would vastly simplify the way we manage the dependencies for each page and has the potential to streamline a lot of pages that don't need particular code.
• I think it would be good if the function took a second argument, which is a javascript expression which if true means the script is should be loaded. For almost all this will default to just 'true'. This allows us to do stuff like:

% requireJS('topo.js', 'Modernizr.inlinesvg');

So the topos will only get loaded in a browser that can support them.

% requireJS('maps.js', 'window.matchMedia( "(min-width: 500px)" ).matches');

So that the full google maps widget will only load if the browser window is over a certain size(otherwise fall back to a static map).

This expression would need to be available to the footer template to render into the javascript to execute the test and then write the script tag if it passes

[brendanheywood]

Thinking of making this a little more generic. A couple use cases:

• css dependencies. Generally css is wacked into the header not the footer for speed, but there might be cases where we want to optionally include large chunks of css which load asynchronously in the footer. So exactly the same as above, but footer will pump out some different loading code.
• inline svg, same again, a hidden inline svg file which then gets references by stuff elsewhere. Stuff like icons. Not 100% about this one, the best practice and rowser support keeps shifting, but would be nice to have it up our sleeves
• inline data json. eg we want to access stuff like the meta data for a route, so render it as json into the page so we can later access via js. But only want to do this one per route, and the route could be references 10 times on a page. Again a bit of a weird case and I may not do it but nice to have it available.
• potentially anything else that we can reference an de-duplicate in the source. It could also be used to simple mark something as rendered inline directly (rather than footer) so the next instance just omits it, instead of bundling them all into the footer.

So I'm thinking if we can just make this a little more generic by doing something like:

% require('js', 'topo.js', 'Modernizr.inlinesvg');

and then later in footer or whereever

% my @js = required('js') # note the 'd' on the end

The 3rd arg is arbitrary for require, and is just anything. It's only for the JS scope that is has a special meaning, so the full function signature could be:

% require(scope, key, value);

All are strings, value is optional. required(scope) returns an order list of a key => value pairs.

[scd]

this is really good. I presume we are going to roll our own.

[brendanheywood]

yeah this should only be a few lines of code

[scd]

done a while ago