Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    sjpublic

    sj

    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

    Keywords

    none

    install

    npm i sj

    Downloadsweekly downloads

    14

    version

    0.0.7

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar