How we use modules today TODO: inline modules for mocks/testing

anonymous.js

/**
 * This is a simple module with no id.  The loader will assign an id
 * according to the url where this file was found.  This is done with
 * a mapping of id:url, typically, but could be done via url:id as is 
 * proposed by some ES6 discussions.
 */
define(function (require) {
	var wire, spec;
	
	wire = require('wire');
	spec = require('app/main');
	
	return wire(spec);
});

bundled.js

/**
 * This is a bundle of related modules.  In order for the loader to know how
 * to differentiate the modules, each one must have a unique id.  (The 
 * loader could automatically assign an id to one anonymous module in the 
 * bundle, but this isn't useful in typical use cases.)
 * 
 * Third-party libs could also be bundled in, along with CSS and HTML, 
 * creating a one-file application.  As the application grows, it's often
 * better to partition the app into multiple bundles and load it 
 * incrementally, as needed.
 */
define('app/view/template', '<div class="hello">Hello world!</div>');

define('app/theme/red', function () {
	var ss = document.createElement('style');
	ss.appendChild(document.createTextNode('.hello { border: 1px solid blue; }'));
});

define('app/main', {
	view: {
		render: { module: 'app/view/template' },
		insert: { at: { $ref: 'dom.first!body' } }
	},
	theme: { module: 'app/theme/red' },
	plugins: [
		{ module: 'wire/dom' },
		{ module: 'wire/dom/render' }
	]
});
/**
 * The order of these modules shouldn't matter.  However, it does
 * in many loaders, including curl.js 0.7.x.  curl.js 0.8.0 should
 * fix this.
 */