caridy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    What is this?

This is a gist to showcase how to have client affinity modules that are required by common affinity modules without breaking the app when trying to use the common affinity modules on the server side.
Instalation

npm install
node app.js


## app.js
/*jslint node:true, nomen: true*/

'use strict';

var express = require('express'),
    expyui  = require('express-yui'),
    Locator = require('locator'),
    LocatorHandlebars = require('locator-handlebars'),
    app = express();

expyui.augment(app);  // becoming .extend() soon

app.set('view', app.yui.view());

// serving static yui modules
app.use(expyui['static']());

// creating a page with YUI embeded
app.get('/', expyui.expose(), function (req, res, next) {
    // requiring `bar` which works on server and client
    req.app.yui.use('bar');
    // rendering the page after getting `bar` ready
    res.render('demo');
});

// locator initialiation
new Locator({
    buildDirectory: 'build'
})
    .plug(LocatorHandlebars.yui())
    .plug(app.yui.plugin({
        registerGroup: true,
        registerServerModules: true
    }))
    .parseBundle(__dirname, {}).then(function (have) {

        // listening for traffic only after locator finishes the walking process
        app.listen(3000, function () {
            console.log("Server listening on port 3000");
        });

    }, function (e) {
        console.log(e);
        console.log(e.stack);
    });

## bar.js
YUI.add('bar', function (Y, NAME) {
    console.log(NAME);
}, '0.1', {
    "requires": ["io-base"]
});

## demo.hbs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>demo - affinity</title>

</head>
<body>

    <div id="content">
        Loading optional client side affinity module
    </div>

    <script>{{{state}}}</script>
    <script>
    app.yui.use('bar', function (Y) {
        alert('done');
    });
    </script>
</body>
</html>

## foo.js
YUI.add('foo', function (Y, NAME) {
    console.log(NAME);
    // this module is inserted right before "bar" (the trigger) is attached, but only on the client side
}, '0.1', {
    "affinity": "client",
    "requires": ["node"],
    "condition": {
        "name": "foo",
        "trigger": "bar",
        "when": "before"
    }
});

## package.json
{
    "name": "demo",
    "description": "Overruling YUI.",
    "version": "0.0.1",
    "private": true,
    "main": "app.js",
    "dependencies": {
        "express": "*",
        "express-yui": "*",
        "locator": "~0.3.0",
        "locator-handlebars": "*",
        "yui": "~3.11.0"
    }
}
	/jslint node:true, nomen: true/

	'use strict';

	var express = require('express'),
	expyui = require('express-yui'),
	Locator = require('locator'),
	LocatorHandlebars = require('locator-handlebars'),
	app = express();

	expyui.augment(app); // becoming .extend() soon

	app.set('view', app.yui.view());

	// serving static yui modules
	app.use(expyui['static']());

	// creating a page with YUI embeded
	app.get('/', expyui.expose(), function (req, res, next) {
	// requiring `bar` which works on server and client
	req.app.yui.use('bar');
	// rendering the page after getting `bar` ready
	res.render('demo');
	});

	// locator initialiation
	new Locator({
	buildDirectory: 'build'
	})
	.plug(LocatorHandlebars.yui())
	.plug(app.yui.plugin({
	registerGroup: true,
	registerServerModules: true
	}))
	.parseBundle(__dirname, {}).then(function (have) {

	// listening for traffic only after locator finishes the walking process
	app.listen(3000, function () {
	console.log("Server listening on port 3000");
	});

	}, function (e) {
	console.log(e);
	console.log(e.stack);
	});
	YUI.add('bar', function (Y, NAME) {
	console.log(NAME);
	}, '0.1', {
	"requires": ["io-base"]
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />

	<title>demo - affinity</title>

	</head>
	<body>

	<div id="content">
	Loading optional client side affinity module
	</div>

	<script>{{{state}}}</script>
	<script>
	app.yui.use('bar', function (Y) {
	alert('done');
	});
	</script>
	</body>
	</html>
	YUI.add('foo', function (Y, NAME) {
	console.log(NAME);
	// this module is inserted right before "bar" (the trigger) is attached, but only on the client side
	}, '0.1', {
	"affinity": "client",
	"requires": ["node"],
	"condition": {
	"name": "foo",
	"trigger": "bar",
	"when": "before"
	}
	});
	{
	"name": "demo",
	"description": "Overruling YUI.",
	"version": "0.0.1",
	"private": true,
	"main": "app.js",
	"dependencies": {
	"express": "*",
	"express-yui": "*",
	"locator": "~0.3.0",
	"locator-handlebars": "*",
	"yui": "~3.11.0"
	}
	}