sj
v0.0.7sj
This module provides declarative require
in your DOM markup.
Example
This markup will install google analytics script on your page.
<!DOCTYPE html>
<html>
<head>
<title>Declarative require from html</title>
</head>
<body xmlns:s="require:./googleAnalytics">
<s:analytics domain='my.site.com' ua='UA-XXXXXXXX-1'/>
<script src="bundle.js"></script>
</body>
</html>
Notice special namespace on our body
tag? When sj
parses xml it finds all
custom prefixes and checks if their URN starts with require:XXX
. This gives
it a hint where to look actual analytics
export when it comes across
s:analytics
tag. In this case it's relative file, googleAnalytics.js
:
// googleAnalytics.js:
module.exports.analytics = function (root) {
var domain = root.attributes.getNamedItem('domain').nodeValue;
var ua = root.attributes.getNamedItem('ua').nodeValue;
// this is standard google analytics include script:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', ua, domain); // except that we pass our own arguments here
ga('send', 'pageview');
}
To make this all work we browserify our input files into a bundle:
sj index.html > bundle.js
Under the hood sj
binary finds all xmlns requires, and uses browserify to
create a bundle.
Note: sj
runtime is super tiny. As of this writing it's less than 100 lines of
unminified code. This entire google analytics example is only 121 lines long,
unminified. That maps to 2KB of gzipped, unminified code. Check network requests
on this demo page: google analytics tag.
With this tiny size it gives you incredible power: Anyone can use custom dom elements
via simple npm install ...
command.
install
With npm do:
npm install sj
license
MIT