Allow several names for one script

[skeltoac]

This implements the syntax:
head.js(["jquery", "tools", "ui", "/path/to/concat.js"]);

[headjs]

still thinking about this whether including this.

I'm just wondering that if you are concatenating your scripts cannot you just do

head.ready(function() {});

which will be fired after all scripts files have been loaded.
or cannot you label it with one name such as "bundle".

for now I see this as an advanced feature.

[skeltoac]

It is true that the loader could re-map the dependencies of concatenated scripts to work with the one-to-one mapping in headjs, e.g. "bundle" as you suggested. I preferred to modify headjs because this way preserves the dependency information in the labels.

[headjs]

I'm sorry but I didn't understand what you meant.

[skeltoac]

I apologize for introducing complexity where it seems unnecessary. I know we could make it work without multiple script labels but that would require extra work and put additional constraints on how plug-ins use scripts.

If a plug-in assumes jquery's label is "jquery", it might use head.ready("jquery", func); but this breaks if we include jquery in a concatenation labeled "bundle". We would have to create a new API for printing scripts with the labels rewritten to "bundle". It is simpler, clearer, faster, and less constraining to apply multiple labels.

I'm also in favor of the syntax proposed by abackstrom which is more logical and extensible than the existing syntax for head.js but that deserves a new issue.

[Offroadcode]

I've been thinking about a nested labelling system. If I have a group of sitewide scripts I have no way of assigning multiple scripts to one label. For instance if I have some code that I know must be available site wide then I can't have anything running until this is available. I want to be able to do something like this:

head.js( { "core" : [
  "mootools.js", "sitewide.js", "settings.js", "core.js"
]} );

// Else where, maybe in other JS files
head.ready( "core", function() {
  // code to run only after all the core files have loaded
});

But currently I don't know of a way to have multiple scripts under one label. Mixed in with the idea above you could end up with a situation where individual scripts can have a label as well as groups of scripts. So you could have a "jQuery", "ui" labels for the individual files and then a grouping "bundle" label which refers to them all (or in my case a "core" label).

[tipiirai]

you could do this:

head.js("mootools.js", "sitewide.js", "settings.js", {core: "core.js"});

head.ready( "core", function() {
    // code to run only after all the core files have loaded
});

to achieve the same. does this work for you?

[Offroadcode]

Oooh, thats clever. Well that is one of my issues fixed.

My other grumble is that I have to (unless I'm understanding it wrong) load all my scripts in the one head.js call if I want to ensure they all load in the order I want. In my head though I would have though it would queue up calls and execute them in the order they where added to the queue. This would be handy where we include some files only on some pages (CMS driven templates for instance). These files rely on the core for instance being available. Now I have head.ready calls in my templates to fire/init/start various chunks of code but I'm also finding that some of my smaller included files are loading before the core stuff and is therefore referencing methods/variables that simply don't exist yet (well at least that is what I think I'm seeing). I'd don't want to re-write any of my existing js files (they have all been working for years and there is a lot of them) to make them totally reliant on head.ready by wrapping each of them with head.ready( "core", function() {}). Again I don't mind this in my templates as they are headjs aware but not my scripts.

Anyway of doing this so that files added from multiple head.js calls load/execute in the order they where added? Or is it something that could be added. I think this is a limiting factor for easy adoption, the method of loading my scripts should not need me to have to customise every script. In my mind it should be separated? It might already be doing this but thats not what I've seen so far.

[tipiirai]

does this help?

head.ready( "core", function() {
    head.js("load.js", "some.js", "more.js");
});

[Offroadcode]

I've played with that one before. Couple of issues with it though:

• All the code is no longer downloaded in parallel, it is staggers for each nested head.js call so loosing the "goodness" of head.js in the first place
• You loose the ability to use head.ready with out a label as it could fire twice (or more) so everything has to be labeled up
• To fake head.ready you then have to either label up your last js file or download a dummy file which you label up to simulate a psuedo head "onload".

I've really been hammering this hard to try to get it working well on our biggest site but it has been giving me some head scratching moments. I'll raise another case for one of the issues I've found to save this one getting too off topic.

[tipiirai]

understand your concern. the current implementation does not make it easy to queue head.js() calls and this certainly would go to some future version.

[andyscott12]

yeah im facing this problem now also :(

calls like

head.js( { "core" : [ "mootools.js", "sitewide.js", "settings.js", "core.js" ]} );

head.js( { "tools" : [ "mytools1.js", "mytools2.js" ]} );

and then

head.js('core', "somescript.js"); - don't seem to work in the current headjs ?

As well as multiple labels:

head.js('core', 'tools', 'specialscript.js');

Any chance this can be fixed along with @Offroadcodes problems ?