Loader dynamically loads script and css files. It includes the dependency info for the version of the library in use, and will automatically pull in dependencies for the modules requested. It can load the files from the Yahoo! CDN, and it can utilize the combo service provided on this network to reduce the number of http connections required to download YUI files. You can also specify an external, custom combo service to host your modules as well.
var Y = YUI();
var loader = new Y.Loader({
filter: 'debug',
base: '../../',
root: 'build/',
combine: true,
require: ['node', 'dd', 'console']
});
var out = loader.resolve(true);
If the Loader needs to be patched before it is used for the first time, it
should be done through the doBeforeLoader
hook. Simply make the patch
available via configuration before YUI is loaded:
YUI_config = YUI_config || {};
YUI_config.doBeforeLoader = function (config) {
var resolve = this.context.Loader.prototype.resolve;
this.context.Loader.prototype.resolve = function () {
// do something here
return resolve.apply(this, arguments);
};
};
Loader
config
config
Object
an optional set of configuration options.
base
String
The base dir which to fetch this module from
comboBase
String
The Combo service base path. Ex: http://yui.yahooapis.com/combo?
root
String
The root path to prepend to module names for the combo service. Ex: 2.5.2/build/
filter
String | Object
A filter to apply to result urls. See filter property
filters
Object
Per-component filter specification. If specified for a given component, this overrides the filter config.
combine
Boolean
Use a combo service to reduce the number of http connections required to load your dependencies
[async=true]
Boolean
optional
Fetch files in async
ignore:
Array
A list of modules that should never be dynamically loaded
force
Array
A list of modules that should always be loaded when required, even if already present on the page
insertBefore
HTMLElement | String
Node or id for a node that should be used as the insertion point for new nodes
jsAttributes
Object
Object literal containing attributes to add to script nodes
cssAttributes
Object
Object literal containing attributes to add to link nodes
timeout
Number
The number of milliseconds before a timeout occurs when dynamically loading nodes. If not set, there is no timeout
context
Object
Execution context for all callbacks
onSuccess
Function
Callback for the 'success' event
onFailure
Function
Callback for the 'failure' event
onTimeout
Function
Callback for the 'timeout' event
onProgress
Function
Callback executed each time a script or css file is loaded
modules
Object
A list of module definitions. See Loader.addModule for the supported module metadata
groups
Object
A list of group definitions. Each group can contain specific definitions for base
, comboBase
, combine
, and accepts a list of modules
.
2in3
String
The version of the YUI 2 in 3 wrapper to use. The intrinsic support for YUI 2 modules in YUI 3 relies on versions of the YUI 2 components inside YUI 3 module wrappers. These wrappers change over time to accomodate the issues that arise from running YUI 2 in a YUI 3 sandbox.
yui2
String
When using the 2in3 project, you can select the version of YUI 2 to use. Valid values are 2.2.2
, 2.3.1
, 2.4.1
, 2.5.2
, 2.6.0
, 2.7.0
, 2.8.0
, 2.8.1
and 2.9.0
[default] -- plus all versions of YUI 2 going forward.
doBeforeLoader
Function
An optional hook that allows for the patching of the loader instance. The Y
instance is available as this.context
and the only argument to the function is the Loader configuration object.
_addLangPack
lang
m
packName
Creates a "psuedo" package for languages provided in the lang array
The module definition
_addSkin
skin
mod
parent
Adds the skin def to the module info
the module name for the skin.
_canBeAttached
module
Returns true
if the module can be attached to the YUI instance. Runs
the module's test if there is one and caches its result.
module
String
Name of the module to check.
Result of the module's test if it has one, or true
.
_config
o
Apply a new config to the Loader instance
o
Object
The new configuration
_continue
Once a loader operation is completely finished, process any additional queued items.
_expandAliases
list
Expand the names that are aliases to other modules.
list
String[]
a module name or a list of names to be expanded
_explode
Inspects the required modules list looking for additional dependencies. Expands the required list to include all required modules. Called by calculate()
_explodeRollups
Grab all the items that were asked for, check to see if the Loader meta-data contains a "use" array. If it doesm remove the asked item and replace it with the content of the "use". This will make asking for: "dd" Actually ask for: "dd-ddm-base,dd-ddm,dd-ddm-drop,dd-drag,dd-proxy,dd-constrain,dd-drop,dd-scroll,dd-drop-plugin"
_filter
u
name
Apply filter defined for this instance to a url/path
the filtered string.
_finish
msg
success
Handles the queue when a module has been loaded for all cases
_insert
source
o
type
[skipcalc=false]
Handles the actual insertion of script/link tags
_onFailure
The default Loader onFailure handler, calls this.onFailure with a payload
_onProgress
The default Loader onProgress handler, calls this.onProgress with a payload
_onSuccess
The default Loader onSuccess handler, calls this.onSuccess with a payload
_onTimeout
transaction
The default Loader onTimeout handler, calls this.onTimeout with a payload
transaction
Get.Transaction
The Transaction object from Y.Get
_patternTest
mname
pname
The default method used to test a module against a pattern
_populateConditionsCache
Populate the conditions cache from raw modules, this is necessary because no other module will require a conditional module, instead the condition has to be executed and then the module is analyzed to be included in the final requirement list. Without this cache conditional modules will be simply ignored.
_reduce
Remove superceded modules and loaded modules. Called by calculate() after we have the mega list of all dependencies
the reduced dependency hash.
_resetModules
Reset modules in the module cache to a pre-processed state so additional computations with a different skin or language will work as expected.
_rollup
Look for rollup packages to determine if all of the modules a rollup supersedes are required. If so, include the rollup to help reduce the total number of connections required. Called by calculate(). This is an optional feature, and requires the appropriate submodule to function.
_setup
Investigates the current YUI configuration on the page. By default, modules already detected will not be loaded again unless a force option is encountered. Called by calculate()
_sort
Sorts the dependency tree. The last step of calculate()
_url
path
name
[base]
Generates the full url for a module
the full url.
_visit
name
visited
Recursively visits the dependencies of the module name
passed in, and appends each module name to the sorted
property.
addAlias
use
name
Adds an alias module to the system
var loader = new Y.Loader({});
loader.addAlias([ 'node', 'yql' ], 'davglass');
loader.require(['davglass']);
var out = loader.resolve(true);
//out.js will contain Node and YQL modules
addGroup
config
name
Add a new module group
var loader = new Y.Loader({});
loader.addGroup({
name: 'davglass',
combine: true,
comboBase: '/combo?',
root: '',
modules: {
//Module List here
}
}, 'davglass');
addModule
config
[name]
Add a new module to the component metadata.
config
Object
An object containing the module data.
name
String
Required, the component name
type
String
Required, the component type (js or css)
path
String
Required, the path to the script from base
requires
Array
Array of modules required by this component
[optional]
Array
optional
Array of optional modules for this component
[supersedes]
Array
optional
Array of the modules this component replaces
[after]
Array
optional
Array of modules the components which, if present, should be sorted above this one
[after_map]
Object
optional
Faster alternative to 'after' -- supply a hash instead of an array
[rollup]
Number
optional
The number of superseded modules required for automatic rollup
[fullpath]
String
optional
If fullpath
is specified, this is used instead of the configured base + path
[skinnable]
Boolean
optional
Flag to determine if skin assets should automatically be pulled in
[submodules]
Object
optional
Hash of submodules
[group]
String
optional
The group the module belongs to -- this is set automatically when it is added as part of a group configuration.
[lang]
Array
optional
Array of BCP 47 language tags of languages for which this module has localized resource bundles, e.g., ["en-GB", "zh-Hans-CN"]
[condition]
Object
optional
Specifies that the module should be loaded automatically if a condition is met. This is an object with up to four fields:
[trigger]
String
optional
[test]
Function
optional
[ua]
String
optional
[when]
String
optional
before
, after
, or instead
. The default is after
.
[testresults]
Object
optional
A hash of test results from Y.Features.all()
[configFn]
Function
optional
A function to exectute when configuring this module
mod
Object
[optionalRequires]
String[]
optional
List of dependencies that may optionally be loaded by this loader. This is targeted mostly at polyfills, since they should not be in the list of requires because polyfills are assumed to be available in the global scope.
[test]
Function
optional
Test to be called when this module is
added as an optional dependency of another module. If the test function
returns false
, the module will be ignored and will not be attached to
this YUI instance.
[name]
String
optional
The module name, required if not in the module data.
the module definition or null if the object passed in did not provide all required attributes.
calculate
o
type
Calculates the dependency tree, the result is stored in the sorted property.
filterRequires
r
Explodes the required array to remove aliases and replace them with real modules
r
Array
The original requires array
The new array of exploded requirements
formatSkin
skin
mod
Returns the skin module name for the specified skin name. If a module name is supplied, the returned skin module name is specific to the module passed in.
the full skin module name.
getLangPackName
lang
mname
Builds a module name for a language pack
the language pack module name.
getModule
mname
Get's the loader meta data for the requested module
mname
String
The module name to get
The module metadata
getModuleInfo
name
Gets the module info from the local moduleInfo hash, or from the default metadata and populate the local moduleInfo hash.
name
String
of the module
getProvides
name
Returns a hash of module names the supplied module satisfies.
name
String
The name of the module.
what this module provides.
getRequires
mod
Returns an object containing properties for all modules required in order to load the requested module
mod
Object
The module definition from moduleInfo.
the expanded requirement list.
insert
o
type
inserts the requested modules and their dependencies.
type
can be "js" or "css". Both script and
css are inserted if type is not provided.
isCSSLoaded
name
skip
Check to see if named css module is already loaded on the page
Boolean
load
cb
Shortcut to calculate, resolve and load all modules.
var loader = new Y.Loader({
ignoreRegistered: true,
modules: {
mod: {
path: 'mod.js'
}
},
requires: [ 'mod' ]
});
loader.load(function() {
console.log('All modules have loaded..');
});
cb
Function
Executed after all load operations are complete
loadNext
mname
Executed every time a module is loaded, and if we are in a load cycle, we attempt to load the next script. Public so that it is possible to call this if using a method other than Y.register to determine when scripts are fully loaded
mname
String
optional the name of the module that has been loaded (which is usually why it is time to load the next one).
onFailure
Callback that will be executed if there is a failure
onProgress
Callback executed each time a script or css file is loaded
onSuccess
Callback that will be executed when the loader is finished with an insert
onTimeout
Callback that will be executed if a timeout occurs
require
what
Add a requirement for one or more module
what
String[] | string
the modules to load.
resolve
[calc=false]
[sorted=loader.sorted]
Returns an Object hash of file arrays built from loader.sorted
or from an arbitrary list of sorted modules.
Object hash (js and css) of two arrays of file lists
This method can be used as an off-line dep calculator
var Y = YUI();
var loader = new Y.Loader({
filter: 'debug',
base: '../../',
root: 'build/',
combine: true,
require: ['node', 'dd', 'console']
});
var out = loader.resolve(true);
_internalCallback
Internal callback to handle multiple internal insert() calls so that css is inserted prior to js
async
Should Loader fetch scripts in async
, defaults to true
combine
If configured, the loader will attempt to use the combo service for YUI resources and configured external resources.
Default: true if a base dir isn't in the config
context
The execution context for all callbacks
Default: {YUI} the YUI instance
data
Data that is passed to all callbacks
dirty
Flag to indicate the dependency tree needs to be recomputed if insert is called again.
Default: true
filter
A filter to apply to result urls. This filter will modify the default path for all modules. The default path for the YUI library is the minified version of the files (e.g., event-min.js). The filter property can be a predefined filter or a custom filter. The valid predefined filters are:
myFilter: {
'searchExp': "-min\\.js",
'replaceStr': "-debug.js"
}
filters
per-component filter specification. If specified for a given component, this overrides the filter config.
force
A list of modules that should always be loaded, even if they have already been inserted into the page.
ignore
A list of modules that should not be loaded, even if they turn up in the dependency tree
ignoreRegistered
Ignore modules registered on the YUI global
Default: false
inserted
List of modules inserted by the utility
loaded
Set when beginning to compute the dependency tree. Composed of what YUI reports to be loaded combined with what has been loaded by any instance on the page with the version number specified in the metadata.
loadOptional
Whether or not to load optional dependencies for the requested modules
Default: false
maxURLLength
Max url length for combo urls. The default is 1024. This is the URL limit for the Yahoo! hosted combo servers. If consuming a different combo service that has a different URL limit it is possible to override this default by supplying the maxURLLength config option. The config option will only take effect if lower than the default.
patterns
If a module name is predefined when requested, it is checked againsts the patterns provided in this property. If there is a match, the module is added with the default configuration.
At the moment only supporting module prefixes, but anticipate supporting at least regular expressions.
REGEX_CSS
Regex that matches a CSS URL. Used to guess the file type when it's not specified.
required
The list of requested modules
rollups
List of rollup files found in the library metadata
skin
Provides the information used to skin the skinnable components. The following skin definition would result in 'skin1' and 'skin2' being loaded for calendar (if calendar was requested), and 'sam' for all other skinnable components:
skin: {
// The default skin, which is automatically applied if not
// overriden by a component-specific skin definition.
// Change this in to apply a different skin globally
defaultSkin: 'sam',
// This is combined with the loader base property to get
// the default root directory for a skin. ex:
// http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/
base: 'assets/skins/',
// Any component-specific overrides can be specified here,
// making it possible to load different skins for different
// components. It is possible to load more than one skin
// for a given component as well.
overrides: {
calendar: ['skin1', 'skin2']
}
}
skipped
List of skipped modules during insert() because the module was not defined
sorted
All of the derived dependencies in sorted order, which will be populated when either calculate() or insert() is called
timeout
Timeout value in milliseconds. If set, self value will be used by the get utility. the timeout event will fire if a timeout occurs.