add proper support for void elements even if not closed.

add support for self-closing void custom elements/components.
add a rudimentary speed test just for getting rough impression of impact of changes while developing.
add support for multiple root elements

Author: HenrikJoreteg

README.md

@@ -73,7 +73,7 @@ console.log(ast);
 
     // whether this is a self-closing tag
     // such as <img/>
-    selfClosing: false,
+    voidElement: false,
 
     // an array of child nodes
     // we see the same structure
@@ -83,7 +83,7 @@ console.log(ast);
             type: 'tag',
             name: 'p',
             attrs: {},
-            selfClosing: false,
+            voidElement: false,
             children: [
                 // this is a text node
                 // it also has a `type`
@@ -110,7 +110,7 @@ properties:
 - `type` - will always be `tag` for this type of node
 - `name` - tag name, such as 'div'
 - `attrs` - an object of key/value pairs. If an attribute has multiple space-separated items such as classes, they'll still be in a single string, for example: `class: "class1 class2"`
-- `selfClosing` - `true` or `false`. Whether this tag has a self-closing slash such as: `<img/>`, or `<input/>`
+- `voidElement` - `true` or `false`. Whether this tag is a known void element as defined by [spec](http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements).
 - `children` - array of child nodes. Note that any continuous string of text is a text node child, see below.
 
 ### 2. text
@@ -131,7 +131,7 @@ properties:
 - `type` - will always be `component` for this type of node
 - `name` - tag name, such as 'div'
 - `attrs` - an object of key/value pairs. If an attribute has multiple space-separated items such as classes, they'll still be in a single string, for example: `class: "class1 class2"`
-- `selfClosing` - `true` or `false`. Whether this tag has a self-closing slash such as: `<img/>`, or `<input/>`
+- `voidElement` - `true` or `false`. Whether this tag is a known void element as defined by [spec](http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements).
 - `children` - it will still have a `children` array, but it will always be empty.
 
 

lib/parse-tag.js

@@ -1,22 +1,45 @@
 var attrRE = /([\w-]+)|['"]{1}([^'"]*)['"]{1}/g;
 
+// create optimized lookup object for
+// void elements as listed here: 
+// http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements
+var lookup = (Object.create) ? Object.create(null) : {};
+lookup.area = true;
+lookup.base = true;
+lookup.br = true;
+lookup.col = true;
+lookup.embed = true;
+lookup.hr = true;
+lookup.img = true;
+lookup.input = true;
+lookup.keygen = true;
+lookup.link = true;
+lookup.menuitem = true;
+lookup.meta = true;
+lookup.param = true;
+lookup.source = true;
+lookup.track = true;
+lookup.wbr = true;
 
 module.exports = function (tag) {
     var i = 0;
     var key;
     var res = {
-        selfClosing: tag.slice(-2, -1) === '/',
-        attrs: {},
         type: 'tag',
-        children: [],
-        name: ''
+        name: '',
+        voidElement: false,
+        attrs: {},
+        children: []
     };
 
     tag.replace(attrRE, function (match) {
         if (i % 2) {
             key = match;
         } else {
             if (i === 0) {
+                if (lookup[match] || tag.charAt(tag.length - 2) === '/') {
+                    res.voidElement = true;
+                }
                 res.name = match;
             } else {
                 res.attrs[key] = match.replace(/['"]/g, '');

lib/parse.js

@@ -1,13 +1,13 @@
 var tagRE = /<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g;
 var parseTag = require('./parse-tag');
-
+// re-used obj for quick lookups of components
+var empty = Object.create ? Object.create(null) : {};
 
 module.exports = function parse(html, options) {
-    options = options || {};
-    options.components = options.components || {};
-    var result;
+    options || (options = {});
+    options.components || (options.components = empty);
+    var result = [];
     var current;
-    var previous;
     var level = -1;
     var arr = [];
     var byTag = {};
@@ -26,8 +26,6 @@ module.exports = function parse(html, options) {
         var nextChar = html.charAt(start);
         var parent;
 
-        previous = current;
-        
         if (isOpen) {
             level++;
 
@@ -37,7 +35,7 @@ module.exports = function parse(html, options) {
                 inComponent = true;
             }
 
-            if (!inComponent && nextChar !== '<') {
+            if (!inComponent && nextChar && nextChar !== '<') {
                 current.children.push({
                     type: 'text',
                     content: html.slice(start, html.indexOf('<', start))
@@ -46,10 +44,8 @@ module.exports = function parse(html, options) {
 
             byTag[current.tagName] = current;
 
-            // this is our base if we don't already have one
-            if (!previous) {
-                result = current;
-            }
+            // if we're at root, push new base node
+            if (level === 0) result.push(current);
 
             parent = arr[level - 1];
 
@@ -60,7 +56,7 @@ module.exports = function parse(html, options) {
             arr[level] = current;
         }
 
-        if (!isOpen || current.selfClosing) {
+        if (!isOpen || current.voidElement) {
             level--;
             if (!inComponent && nextChar !== '<' && nextChar) {
                 // trailing text node

lib/stringify.js

@@ -14,14 +14,16 @@ function stringify(buff, doc) {
     case 'text':
         return buff + doc.content;
     case 'tag':
-        buff += '<' + doc.name + (doc.attrs ? attrString(doc.attrs) : '') + (doc.selfClosing ? '/>' : '>');
-        if (doc.selfClosing) {
+        buff += '<' + doc.name + (doc.attrs ? attrString(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
+        if (doc.voidElement) {
             return buff;
         }
         return buff + doc.children.reduce(stringify, '') + '</' + doc.name + '>';
     }
 }
 
 module.exports = function (doc) {
-    return stringify('', doc);
+    return doc.reduce(function (token, rootEl) {
+        return token + stringify('', rootEl);
+    }, '');
 };

package.json

@@ -26,5 +26,8 @@
   },
   "scripts": {
     "test": "node test/index.js | tap-spec"
+  },
+  "dependencies": {
+    "void-elements": "^1.0.0"
   }
 }

test/parse-tag.js

@@ -14,7 +14,7 @@ test('parseTag', function (t) {
             quote: 'me '
         },
         name: 'div',
-        selfClosing: false,
+        voidElement: false,
         children: []
     });
 
@@ -26,7 +26,7 @@ test('parseTag', function (t) {
             class: 'single quoted thing'
         },
         name: 'something-custom',
-        selfClosing: false,
+        voidElement: false,
         children: []
     });
 
@@ -36,7 +36,7 @@ test('parseTag', function (t) {
         type: 'tag',
         attrs: {},
         name: 'p',
-        selfClosing: false,
+        voidElement: false,
         children: []
     });
 
@@ -49,7 +49,7 @@ test('parseTag', function (t) {
             alt: 'sweet picture'
         },
         name: 'img',
-        selfClosing: true,
+        voidElement: true,
         children: []
     });