dom environment - laverdet/js-xml-literal GitHub Wiki

dom-environment is a very lightweight API which will convert XML literals to corresponding API calls on a document object.

To get started you will have to first figure out a way to run your client-side JavaScript through a preprocess stage. The preprocess routine is just a single function included with js-xml-literal: require('xml-literals/lib/desugar/desugar').desugar. It takes a single argument which is the code to be processed, and returns the code with XML literals converted into regular JS. The best way to hook this into your existing static resource infrastructure is up to you.

You should include the dom-environment and js-xml-literal runtime code in your application. These two files can be found in lib/environment.js and lib/dom-environment.js. Then bootstrap your environment on each page with XMLEnvironment.set(new DOMXMLEnvironment(document));.

Once that is setup creating DOM elements becomes extremely easy.

// This:
var anchor = <a href="http://github.com/">Home</a>;

// Is equivalent to:
var anchor = document.createElement('a');
anchor.href = 'http://github.com/';
anchor.appendChild(document.createElement('Home'));

Just like with simple-html-dom, namespaces, document fragments, and text nodes are all supported like magic.