Use more robust string -> fragment conversion

Using the wrapper technique from jQuery so that
utils.toFragment() can deal with table elements
and SVG elements (with proper namespace)

Author: yyx990803

component.json

@@ -11,6 +11,7 @@
         "src/emitter.js",
         "src/config.js",
         "src/utils.js",
+        "src/fragment.js",
         "src/compiler.js",
         "src/viewmodel.js",
         "src/binding.js",

src/compiler.js

@@ -222,8 +222,8 @@ CompilerProto.setupElement = function (options) {
         }
         // replace option: use the first node in
         // the template directly
-        if (options.replace && template.childNodes.length === 1) {
-            replacer = template.childNodes[0].cloneNode(true)
+        if (options.replace && template.firstChild === template.lastChild) {
+            replacer = template.firstChild.cloneNode(true)
             if (el.parentNode) {
                 el.parentNode.insertBefore(replacer, el)
                 el.parentNode.removeChild(el)

src/directives/html.js

@@ -1,4 +1,4 @@
-var guard = require('../utils').guard,
+var utils = require('../utils'),
     slice = [].slice
 
 /**
@@ -11,14 +11,13 @@ module.exports = {
         // {{{ inline unescaped html }}}
         if (this.el.nodeType === 8) {
             // hold nodes
-            this.holder = document.createElement('div')
             this.nodes = []
         }
     },
 
     update: function (value) {
-        value = guard(value)
-        if (this.holder) {
+        value = utils.guard(value)
+        if (this.nodes) {
             this.swap(value)
         } else {
             this.el.innerHTML = value
@@ -27,16 +26,16 @@ module.exports = {
 
     swap: function (value) {
         var parent = this.el.parentNode,
-            holder = this.holder,
-            nodes = this.nodes,
-            i = nodes.length, l
+            nodes  = this.nodes,
+            i      = nodes.length
+        // remove old nodes
         while (i--) {
             parent.removeChild(nodes[i])
         }
-        holder.innerHTML = value
-        nodes = this.nodes = slice.call(holder.childNodes)
-        for (i = 0, l = nodes.length; i < l; i++) {
-            parent.insertBefore(nodes[i], this.el)
-        }
+        // convert new value to a fragment
+        var frag = utils.toFragment(value)
+        // save a reference to these nodes so we can remove later
+        this.nodes = slice.call(frag.childNodes)
+        parent.insertBefore(frag, this.el)
     }
 }

src/fragment.js

@@ -0,0 +1,84 @@
+// string -> DOM conversion
+// wrappers originally from jQuery, scooped from component/domify
+var map = {
+    legend   : [1, '<fieldset>', '</fieldset>'],
+    tr       : [2, '<table><tbody>', '</tbody></table>'],
+    col      : [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+    _default : [0, '', '']
+}
+
+map.td =
+map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>']
+
+map.option =
+map.optgroup = [1, '<select multiple="multiple">', '</select>']
+
+map.thead =
+map.tbody =
+map.colgroup =
+map.caption =
+map.tfoot = [1, '<table>', '</table>']
+
+map.text =
+map.circle =
+map.ellipse =
+map.line =
+map.path =
+map.polygon =
+map.polyline =
+map.rect = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>']
+
+var TAG_RE = /<([\w:]+)/
+
+module.exports = function (template) {
+
+    if (typeof template !== 'string') {
+        return template
+    }
+
+    // template by ID
+    if (template.charAt(0) === '#') {
+        var templateNode = document.getElementById(template.slice(1))
+        if (!templateNode) return
+        // if its a template tag and the browser supports it,
+        // its content is already a document fragment!
+        if (templateNode.tagName === 'TEMPLATE' && templateNode.content) {
+            return templateNode.content
+        }
+        template = templateNode.innerHTML
+    }
+
+    var frag = document.createDocumentFragment(),
+        m = TAG_RE.exec(template)
+    // text only
+    if (!m) {
+        frag.appendChild(document.createTextNode(template))
+        return frag
+    }
+
+    var tag = m[1],
+        wrap = map[tag] || map._default,
+        depth = wrap[0],
+        prefix = wrap[1],
+        suffix = wrap[2],
+        node = document.createElement('div')
+
+    node.innerHTML = prefix + template.trim() + suffix
+    while (depth--) node = node.lastChild
+
+    // one element
+    if (node.firstChild === node.lastChild) {
+        frag.appendChild(node.firstChild)
+        return frag
+    }
+
+    // multiple nodes, return a fragment
+    var child
+    /* jshint boss: true */
+    while (child = node.firstChild) {
+        if (node.nodeType === 1) {
+            frag.appendChild(child)
+        }
+    }
+    return frag
+}

src/utils.js

@@ -4,13 +4,18 @@ var config    = require('./config'),
     console   = win.console,
     timeout   = win.setTimeout,
     def       = Object.defineProperty,
-    THIS_RE   = /[^\w]this[^\w]/,
     OBJECT    = 'object',
+    THIS_RE   = /[^\w]this[^\w]/,
     hasClassList = 'classList' in document.documentElement,
     ViewModel // late def
 
 var utils = module.exports = {
 
+    /**
+     *  Convert a string template to a dom fragment
+     */
+    toFragment: require('./fragment'),
+
     /**
      *  get a value from an object keypath
      */
@@ -164,36 +169,6 @@ var utils = module.exports = {
         return res
     },
 
-    /**
-     *  Convert a string template to a dom fragment
-     */
-    toFragment: function (template) {
-        if (typeof template !== 'string') {
-            return template
-        }
-        if (template.charAt(0) === '#') {
-            var templateNode = document.getElementById(template.slice(1))
-            if (!templateNode) return
-            // if its a template tag and the browser supports it,
-            // its content is already a document fragment!
-            if (templateNode.tagName === 'TEMPLATE' && templateNode.content) {
-                return templateNode.content
-            }
-            template = templateNode.innerHTML
-        }
-        var node = document.createElement('div'),
-            frag = document.createDocumentFragment(),
-            child
-        node.innerHTML = template.trim()
-        /* jshint boss: true */
-        while (child = node.firstChild) {
-            if (node.nodeType === 1) {
-                frag.appendChild(child)
-            }
-        }
-        return frag
-    },
-
     /**
      *  Convert the object to a ViewModel constructor
      *  if it is not already one

test/unit/specs/directives.js

@@ -120,7 +120,6 @@ describe('Directives', function () {
             dir.el = comment
 
             dir.bind()
-            assert.ok(dir.holder)
             assert.ok(dir.nodes)
 
             var pre = 'what!',

test/unit/specs/utils.js

@@ -223,6 +223,19 @@ describe('Utils', function () {
             assert.equal(frag.querySelector('p').textContent, 'ha')
         })
 
+        it('should work with table elements', function () {
+            var frag = utils.toFragment('<td></td>')
+            assert.ok(frag instanceof window.DocumentFragment)
+            assert.equal(frag.firstChild.tagName, 'TD')
+        })
+
+        it('should work with SVG elements', function () {
+            var frag = utils.toFragment('<polygon></polygon>')
+            assert.ok(frag instanceof window.DocumentFragment)
+            assert.equal(frag.firstChild.tagName.toLowerCase(), 'polygon')
+            assert.equal(frag.firstChild.namespaceURI, 'http://www.w3.org/2000/svg')
+        })
+
     })
 
     describe('toConstructor', function () {