yui Class
The express-yui/lib/yui
exports the class used to create the app.yui
member that will be attached to the express app instance. This member
provides a set of functionalities to control the YUI version to be used
on the client as well as on the server.
The following is an example of how these features can be used:
var express = require('express'),
expyui = require('express-yui'),
app = express();
expyui.extend(app);
// Set some basic configs
app.yui.applyConfig({
fetchCSS: false
});
// Call expose middleware when a route match.
app.get('/index.html', expyui.expose(), anotherRoute);
In the example above, you can see that right after extending the
app
with expyui.extend()
a new member is available under app.yui
,
and it enable us to configure YUI in any way we want.
Also, the state
of the app will be serialized
per request, and can be used in the template to set up the client
side to run YUI with the same configuration used on the server side.
Here is an example of a handlebars template:
<script>
{{{state}}}
app.yui.use('node', function (Y) {
Y.one('#content').setContent('<p>Ready!</p>');
});
</script>
In this particular case, state
will hold all the
appropiated settings generated by expose
middleware.
Constructor
yui
()
static
Item Index
Methods
Properties
Methods
_buildUrls
-
modules
-
ext
-
filterMap
-
customConfig
Build a list of urls for a list of modules. Modules are described as <module-name>@<group-name>
.
Modules without the group denotation will be assumed as core modules from yui. ext
denotates
the type of the modules since this routine is able to produce css or js modules alike.
Parameters:
-
modules
Arraythe array of modules to generate the urls.
-
ext
Stringthe modules extension,
js
orcss
. -
filterMap
Objecthash table to translate filter values into suffix for modules. e.g.:
min
->-min
-
customConfig
Objectoptional configuration to overrule filter and combine per request when building the urls
-
filter
Stringoptional filter to overrule any filter
-
combine
Booleanoptional flag to overrule combine, when set to
false
, it will avoid creating combo urls.
-
Returns:
the href
url for each link tag to be inserted in the header of the page
addModuleToSeed
-
moduleName
Adds a yui module name into the core
YUI configuration
which is used by loader to identify the pieces that are
already part of the seed and should be attached to Y
automatically.
Parameters:
-
moduleName
Stringthe yui module name
applyConfig
-
supplier
Extends the static configuration with the supplier object(s). You can use it like this:
// Disable CSS computations
app.yui.applyConfig({
fetchCSS: false
});
Parameters:
-
supplier
Objectobjects to be mixed with the static configuration. All available settings from the YUI API Docs. can be used here.
applyGroupConfig
-
groupName
-
loaderConfig
Set a custom loader configuration for the group.
Here is an example of how to use it.
app.yui.applyGroupConfig('app', {
maxURLLength: 2048,
comboBase: "/combo?"
comboSep: "&"
});
Parameters:
-
groupName
Stringthe name of the group used by loader.
-
loaderConfig
Objectcustom loader configuration for the group.
buildCSSUrls
-
modules
Build a list of urls to load a list of css modules.
var links = app.yui.buildCSSUrls('cssbase', 'cssflickr@hermes');
As a result, links
will be an array with the urls that
you can use in your templates to provision styles.
Modules as cssflickr@hermes
denotate a module from a particular group,
as in <module-name>@<group-name>
. Modules without the group denotation
will be assumed as core modules from yui.
Parameters:
-
modules
String multipleOne or more module name (and optional @
)
Returns:
the href
url for each link tag to be inserted in the header of the page
buildJSUrls
-
modules
Build a list of urls to load a list of modules.
var scripts = app.yui.buildJSUrls('node', 'photos@hermes');
As a result, scripts
will be an array with one or more urls that
you can use in your templates to insert script tags.
Modules as photos@hermes
denotate a module from a particular group,
as in <module-name>@<group-name>
. Modules without the group denotation
will be assumed as core modules from yui.
Parameters:
-
modules
String multipleOne or more module name (and optional @
)
Returns:
the src
url for each script tag that forms the seed
config
-
supplier
Extends the static configuration with the supplier object(s)
or returns the current static configuration reference. This
configuration is static, and attached to the server object.
Once you call yui.expose()
middleware for the first time,
this configuration becomes inmutable.
Parameters:
-
supplier
ObjectOptional supplier objects that, if passed, will be mix with the static configuration.
Returns:
static configuration
getDefaultSeed
()
Array
protected
Gets the default list of module names that should be part of the seed files.
Returns:
list of modules in seed
getSeedUrls
-
customConfig
Build the list of urls to load the seed files for the app.
var scripts = app.yui.getSeedUrls();
As a result, scripts
will be an array with one or more urls that
you can use in your templates to provision YUI. Keep in mind that if
use expressYUI.expose()
middleware, you don't need to provision the
seed, it will be provisioned automatically as part of the state
object.
Parameters:
-
customConfig
Objectoptional configuration to overrule filter and combine per request when building the urls. This is useful if you have a custom middleware to turn debug mode on, and combine off by passing some special parameter.
-
filter
Stringoptional filter to overrule any filter
-
combine
Booleanoptional flag to overrule combine, when set to
false
, it will avoid creating combo urls.
-
Returns:
the src
url for each script tag that forms the seed
ready
-
callback
Waits for the app to be ready, including the YUI instance to notify back that the
ready
state of the app was reached by calling the callback
. The ready state is
bound to the locator instance mounted into the express app thru app.set('locator', locator);
and depending on app.get('locator').ready.then()
promise result, the ready state
will be reached or not.
app.yui.ready(function (err) {
if (err) {
throw err;
}
// do something!
});
Parameters:
-
callback
Functionwhen the app is ready. If an error occurr, the error object will be passed as the first argument of the callback function.
registerBundle
-
bundle
Create a synthetic group off the bundle renference to register its modules
into the server and/or client Y instance so they can be used thru app.yui.use()
.
Parameters:
-
bundle
ObjectA locator bundle reference.
registerGroup
-
groupName
-
groupRoot
-
metaModuleName
Register a group by defining the group configuration for the loader.
Groups can be served from origin app or from CDN by calling applyGroupConfig
or by setting yui default base
, yui default root
and yui combo config
thru
app.set()
.
Here is an example on how to use it, assuming that the YUI metadata are
located in the build
directory under the app root.
app.yui.registerGroup('app', __dirname + '/build', 'loader-app');
Parameters:
-
groupName
Stringthe name of the group used by loader.
-
groupRoot
Stringfilesystem path for the group. This will be used to analyze all modules in the group.
-
metaModuleName
Stringoptional module name to denotate the yui module that holds the metas for the group. Default value:
loader-<groupName>
require
()
public
Creates a YUI Instance, and wraps the call to Y.require()
to work appropiatly on
the server side. The require
method can be called once the ready
state is achieved
thru app.yui.ready()
.
app.yui.ready(function (err) {
if (err) {
throw err;
}
app.yui.require('json-stringify', function (Y, imports) {
Y.JSON.stringify({ entry: 'value' });
});
});
seed
-
modules
Specify a list of modules to use as seed. This
method extends the yui static configuration,
specifically setting the app.yui.config().seed
value.
app.yui.seed(["yui-base", "loader"]);
Parameters:
-
modules
Arraylist of modules to use
Returns:
express middleware
setCoreFromAppOrigin
-
loaderConfig
Set YUI Core Modules from the same origin as to where the application is hosted.
This is not recommended for production and instead you should use a
cdn
to server the build folder, but it is a very useful feature for
development. Here is an example on how to use it:
app.yui.setCoreFromAppOrigin();
Parameters:
-
loaderConfig
Objectoptional loader configuration for the core
setCoreFromCDN
-
loaderConfig
Set up a default group in loader that represents the core yui modules to be loaded from YUI CDN.
app.yui.setCoreFromCDN();
Parameters:
-
loaderConfig
ObjectOptional loader configuration objects that, if passed, will be mix with the default configuration for yui CDN.
use
()
Object
public
Creates a YUI Instance, and wraps the call to Y.use()
to work appropiatly on
the server side. The use
method can be called once the ready
state is achieved
thru app.yui.ready()
.
app.yui.ready(function (err) {
if (err) {
throw err;
}
app.yui.use('json-stringify', function (Y) {
Y.JSON.stringify({ entry: 'value' });
});
});
Returns:
Y instance
Properties
CSS_FILTERS_MAP
Object
The default mapping for suffix based on the config filter
value for css modules.
DEFAULT_FILTER
String
The default filter suffix for yui modules urls.
JS_FILTERS_MAP
Object
The default mapping for suffix based on the config filter
value for js modules.