IndieJS Idea

README.md

IndieJS

Make a cookie with the name indiejs and the value of a URL to your site’s IndieJS file. Remember, the JavaScript could be generated by any framework, even PHP.

<script>
function setIndieJS(src) {
	'indiejs=' + src + ';expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/';
}

// EXAMPLE USAGE
// setIndieJS('//jonneal.com/indiejs/');
</script>

Now your IndieJS can be asynchronously called from other sites just like Google Analytics.

<script>(function(d,m){if(m=d.cookie.match(/\bindiejs=([^\s,;]+)/)){d.head.appendChild(d.createElement("script")).src=m[1]}})(document)</script>

That entire line is 141 bytes

The IndieJS script on your site could search for elements with a data-indiejs attribute and do things with them.

<form>
	<div data-indiejs="isLoggedIn:true" style="display:none">
		<span>You are logged in as %user.</span>
		<img data-indiejs="" src alt>
	</div>

	<div data-indiejs="isLoggedIn:false">
		<label><span>Log In</span> <input name="domain"></label>
	</div>
</form>

To do this, the IndieJS script on your site might look like this:

<script>
(function (NAME, SEPARATOR) {
	var
	ATTR = 'data-' + NAME,
	SELECTOR = '[' + ATTR + ']',
	FEATURE = {
		isLoggedIn: function (isTrue) {
			this.style.display = isTrue ? 'block' : 'none';
		}
	};

	function onupdate() {
		// for all matching elements
		Array.prototype.forEach.call(document.querySelectorAll(SELECTOR), function (element) {
			var
			// get data from attribute
			data = element.getAttribute(ATTR),
			// detect separator
			separatorIndex = data.indexOf(SEPARATOR) !== -1 ? data.indexOf(SEPARATOR) : data.length,
			// separate feature from options
			feature = data.slice(0, separatorIndex),
			options = data.slice(separatorIndex + 1).split(',');

			// remove attribute
			element.removeAttribute(ATTR);

			// do something with the feature and options
			if (FEATURE[feature]) {
				FEATURE[feature].apply(element, options);
			}
		});
	}

	// update now or when DOM is ready
	if (/e/.test(document.readyState)) onupdate();
	else document.addEventListener('DOMContentLoaded', onupdate);

	// update when DOM changes
	document.addEventListener('DOMSubtreeModified', onupdate);
})('indiejs', ':');
</script>