Browser support?

[curioustechizen]

From the description, it looks like DOMly's pre-compiled templates will work on IE8 and above (based on info about the use of createElement, DocumentFragment and Node). Is this assumption correct? Is there a browser support list?

[lazd]

DOMly uses the following DOM methods and properties:

• document.createComment()
  • All browsers
• document.createDocumentFragment()
  • All browsers
• Element.setAttribute()
  • All browsers
• Node.appendChild()
  • All browsers
• Node.cloneNode()
  • All browsers
  • IE has a quirk where it combines text nodes, but this doesn't affect DOMly
• document.createTextNode()
  • All browsers
  • No support for appending to <style> in IE < 9, but DOMly will use textContent in this case (see below)
• document.createElement()
  • All browsers
  • IE < 8 has a quirk surrounding nodeName that don't affect DOMly
• Node.textContent
  • IE 9+

This was brought up before and we decided to expose DOMly's compiler so you can easily extend DOMly to support IE < 9 by overriding the setTextContent method:

var domly = require('domly');

// Extend DOMly's compiler
var Compiler = function() {
  domly.Compiler.call(this);
};

Compiler.prototype = Object.create(domly.Compiler.prototype);

/**
  Support: IE < 9
  Use innerText instead of textContent if it's not available
*/
Compiler.prototype.setTextContent = function(elName, text) {
  this.pushStatement(elName+'[typeof '+elName+'.textContent === "undefined" ? "innerText" : "textContent"] = '+this.makeVariableStatement(text)+';');
};

// Export a module that uses our new compiler
module.exports = {
  Compiler: Compiler,
  compile: function(html, options) {
    var compiler = new Compiler(options);
    return compiler.compile(html);
  },
  precompile: function(html, options) {
    var compiler = new Compiler(options);
    return compiler.precompile(html);
  }
};

I'm not interested in adding support for IE < 9 to DOMly itself due to the performance hit and a general desire to push the web forward :). That said, it would be wise to add the above description to a wiki page or markdown file so it's clear to users what browsers are supported as well as how to override DOMly and integrate the overridden version when using grunt-domly and gulp-domly. I'll leave this issue open until that's done.