briancavalier/_background.md

## _background.md

      
    Raw
  

              _background.md
            
          
    There are a couple of things that bug me about RequireJS's data-main method of single-script loading:
<script src="js/requirejs/require.js" data-main="app/main.js"></script>

the built file (bundle) must be named "require.js". WAT.
it just seems backwards.
data-main does not follow w3c recommendations since it's not name-spaced.

Here are two examples of what came to mind when I spent a few minutes thinking about alternatives.  The first one is an example of a double-script bootstrap.  This is a great alternative if loading curl.js from a CDN since the scripts will load in parallel.
The second example uses a single script element.  This is a great alternative if you decide to bundle curl.js into run.js.  The problem is that there's a lot of boilerplate in run.js.  However, the example run.js compresses down to 500 bytes (333 gzipped).  Not too bad?

  
## double-script-page.html
<!DOCTYPE html>
<html>
<head>
<title></title>

<!-- these scripts will load in parallel -->
<script src="http://mycdn.com/curl/curl.js" async="async"></script>
<script src="double-script-run.js" async="async"></script>

</head>
<body>

</body>
</html>

## double-script-run.js
(function () {

	var config = {
		baseUrl: '',
		destUrl: 'test/output/built.js',
		paths: {
			curl: './support/curl/src/curl',
			"test-js": 'test'
		},
		pluginPath: 'curl/plugin',
		main: ['test-js/tiny']
	};

	// we don't know if curl loaded first or not...
	if (typeof curl == 'undefined') {
		// set a global curl variable for curl to pick up when it loads:
		curl = config;
	}
	else {
		// curl loaded first, configure and go:
		curl(config);
	}

}());

## single-script-page.html
<!DOCTYPE html>
<html>
<head>
<title></title>

<!-- single-script loading -->
<script src="single-script-run.js" async="async" data-curl="js/curl/curl.js"></script>

</head>
<body>

</body>
</html>

## single-script-run.js
(function () {

	// If the "simple" case could be as minimal as this:
	var config = {
		run: ['test-js/tiny'],
		packages: {
			// ...
		}
	};

	if (typeof curl == 'undefined') {
		loadCurlThenRun();
	}
	else {
		run();
	}

	function run () {
		curl(config);
	}

	function loadCurlThenRun () {
		var doc, els, i, url, el;

		doc = document;
		els = doc.getElementsByTagName('script');

		i = 0;
		while (!url && (el = els[i++])) url = el.getAttribute('data-curl');

		if (!url) throw new Error('could not find data-curl script');

		el = doc.createElement('script');
		el.onload = run;
		el.onerror = function () { throw new Error('could not load curl: ' + url); };
		el.src = url;
		(doc.head || doc.getElementsByTagName('head')[0]).appendChild(el);
	}

}());
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>

	<!-- these scripts will load in parallel -->
	<script src="http://mycdn.com/curl/curl.js" async="async"></script>
	<script src="double-script-run.js" async="async"></script>

	</head>
	<body>

	</body>
	</html>
	(function () {

	var config = {
	baseUrl: '',
	destUrl: 'test/output/built.js',
	paths: {
	curl: './support/curl/src/curl',
	"test-js": 'test'
	},
	pluginPath: 'curl/plugin',
	main: ['test-js/tiny']
	};

	// we don't know if curl loaded first or not...
	if (typeof curl == 'undefined') {
	// set a global curl variable for curl to pick up when it loads:
	curl = config;
	}
	else {
	// curl loaded first, configure and go:
	curl(config);
	}

	}());
	(function () {

	// If the "simple" case could be as minimal as this:
	var config = {
	run: ['test-js/tiny'],
	packages: {
	// ...
	}
	};

	if (typeof curl == 'undefined') {
	loadCurlThenRun();
	}
	else {
	run();
	}

	function run () {
	curl(config);
	}

	function loadCurlThenRun () {
	var doc, els, i, url, el;

	doc = document;
	els = doc.getElementsByTagName('script');

	i = 0;
	while (!url && (el = els[i++])) url = el.getAttribute('data-curl');

	if (!url) throw new Error('could not find data-curl script');

	el = doc.createElement('script');
	el.onload = run;
	el.onerror = function () { throw new Error('could not load curl: ' + url); };
	el.src = url;
	(doc.head \|\| doc.getElementsByTagName('head')[0]).appendChild(el);
	}

	}());