Add support for root nodes

Closes GH-10.

Amended-by: Titus Wormer <[email protected]>

Author: derhuerst

index.js

@@ -18,17 +18,28 @@ function wrapper(h, node, prefix) {
     throw new Error('h is not a function');
   }
 
-  if (!is('element', node)) {
-    throw new Error('Expected element, not `' + node + '`');
-  }
-
   r = react(h);
   v = vdom(h);
 
   if (prefix === null || prefix === undefined) {
     prefix = r === true || v === true ? 'h-' : false;
   }
 
+  if (is('root', node)) {
+    if (node.children.length === 1 && is('element', node.children[0])) {
+      node = node.children[0];
+    } else {
+      node = {
+        type: 'element',
+        tagName: 'div',
+        properties: {},
+        children: node.children
+      };
+    }
+  } else if (!is('element', node)) {
+    throw new Error('Expected root or element, not `' + ((node && node.type) || node) + '`');
+  }
+
   return toH(h, node, {
     prefix: prefix,
     key: 0,

readme.md

@@ -78,11 +78,24 @@ Transform [HAST][] to something else through a hyperscript DSL.
 
 ###### Caveats
 
-Although there are lots of libs mentioning support for this interface,
-there are significant differences between them.  For example, hyperscript
-doesn’t support classes in `attrs`, `virtual-dom/h` needs an `attributes`
-object inside `attrs` most of the time.  `hast-to-hyperscript` works
-around these differences for:
+**Nodes**: Most hyperscript implementations only support elements and text (as
+leave nodes).  HAST supports `doctype`, `comment`, and `root` as well.
+
+*   If anything other than an `element` or `root` node is given,
+    `hast-to-hyperscript` throws
+*   If a `root` is given with one element child, that element is
+    transformed
+*   If a `root` with no children, a non-element only child, or more than one
+    children, the children are wrapped in a `div` element
+
+If unknown nodes are found deeper in the tree, they are ignored: only `text`
+and `element` nodes are transformed.
+
+**Support**: Although there are lots of libs mentioning support for this
+interface, there are significant differences between them.  For example,
+hyperscript doesn’t support classes in `attrs`, `virtual-dom/h` needs an
+`attributes` object inside `attrs` most of the time.  `hast-to-hyperscript`
+works around these differences for:
 
 *   [`React.createElement`][react]
 *   [`virtual-dom/h`][vdom]

test.js

@@ -28,15 +28,15 @@ test('hast-to-hyperscript', function (t) {
   t.test('should throw if not given a node', function (st) {
     t.throws(function () {
       toH(h);
-    }, /Expected element, not `undefined`/);
+    }, /Expected root or element, not `undefined`/);
 
     t.throws(function () {
-      toH(h, 'text');
-    }, /Error: Expected element, not `text`/);
+      toH(h, u('text', 'Alpha'));
+    }, /Error: Expected root or element, not `text`/);
 
     t.throws(function () {
       toH(h, u('text', 'value'));
-    }, /Expected element/);
+    }, /Expected root or element/);
 
     st.end();
   });
@@ -274,6 +274,49 @@ test('hast-to-hyperscript', function (t) {
     st.end();
   });
 
+  t.test('flattens a `root` with one element child to that child', function (st) {
+    var actual = toH(h, u('root', [u('element', {tagName: 'h1', properties: {id: 'a'}}, [])]));
+    var expected = h('h1#a');
+    var doc = '<h1 id="a"></h1>';
+
+    st.deepEqual(html(actual.outerHTML), html(doc), 'equal output');
+    st.deepEqual(html(expected.outerHTML), html(doc), 'equal output baseline');
+    st.end();
+  });
+
+  t.test('flattens a `root` without children to a `div`', function (st) {
+    var actual = toH(h, u('root', []));
+    var expected = h('div');
+    var doc = '<div></div>';
+
+    st.deepEqual(html(actual.outerHTML), html(doc), 'equal output');
+    st.deepEqual(html(expected.outerHTML), html(doc), 'equal output baseline');
+    st.end();
+  });
+
+  t.test('flattens a `root` with a text child to a `div`', function (st) {
+    var actual = toH(h, u('root', [u('text', 'Alpha')]));
+    var expected = h('div', 'Alpha');
+    var doc = '<div>Alpha</div>';
+
+    st.deepEqual(html(actual.outerHTML), html(doc), 'equal output');
+    st.deepEqual(html(expected.outerHTML), html(doc), 'equal output baseline');
+    st.end();
+  });
+
+  t.test('flattens a `root` with more children to a `div`', function (st) {
+    var actual = toH(h, u('root', [
+      u('element', {tagName: 'h1'}, [u('text', 'Alpha')]),
+      u('element', {tagName: 'p'}, [u('text', 'Bravo')])
+    ]));
+    var expected = h('div', [h('h1', 'Alpha'), h('p', 'Bravo')]);
+    var doc = '<div><h1>Alpha</h1><p>Bravo</p></div>';
+
+    st.deepEqual(html(actual.outerHTML), html(doc), 'equal output');
+    st.deepEqual(html(expected.outerHTML), html(doc), 'equal output baseline');
+    st.end();
+  });
+
   t.end();
 });