Add support for React.Fragment as a root

Closes GH-9.
rehypejs · Jun 28, 2019 · 21bb91c · 21bb91c
1 parent 0ce41fc
commit 21bb91c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/index.js b/index.js
@@ -11,25 +11,29 @@ var has = {}.hasOwnProperty
 function rehypeReact(options) {
   var settings = options || {}
   var createElement = settings.createElement
+  var Fragment = settings.Fragment
   var components = settings.components || {}
 
   this.Compiler = compiler
 
   function compiler(node) {
+    var res = toH(h, tableCellStyle(node), settings.prefix)
+
     if (node.type === 'root') {
-      if (node.children.length === 1 && node.children[0].type === 'element') {
-        node = node.children[0]
+      // Invert <https://github.com/syntax-tree/hast-to-hyperscript/blob/d227372/index.js#L46-L56>.
+      if (
+        res.type === 'div' &&
+        (node.children.length !== 1 || node.children[0].type !== 'element')
+      ) {
+        res = res.children
       } else {
-        node = {
-          type: 'element',
-          tagName: 'div',
-          properties: node.properties || {},
-          children: node.children
-        }
+        res = [res]
       }
+
+      return createElement(Fragment || 'div', {}, res)
     }
 
-    return toH(h, tableCellStyle(node), settings.prefix)
+    return res
   }
 
   // Wrap `createElement` to pass components in.

diff --git a/readme.md b/readme.md
@@ -100,6 +100,12 @@ When using TypeScript, cast the type on your side.
 ###### `options.createElement`
 
 How to create elements or components (`Function`).
+You should typically pass `React.createElement`.
+
+###### `options.Fragment`
+
+Create fragments instead of an outer `<div>` if available (`symbol`).
+You should typically pass `React.Fragment`.
 
 ###### `options.components`
 

diff --git a/test.js b/test.js
@@ -16,15 +16,15 @@ test('React ' + React.version, function(t) {
     function() {
       unified()
         .use(rehype2react)
-        .stringify(h('body'))
+        .stringify(h('p'))
     },
     /^TypeError: createElement is not a function$/,
     'should fail without `createElement`'
   )
 
   t.deepEqual(
-    processor.stringify(h('body')),
-    React.createElement('body', {key: 'h-1'}, undefined),
+    processor.stringify(h('p')),
+    React.createElement('p', {key: 'h-1'}, undefined),
     'should transform an element'
   )
 
@@ -63,22 +63,37 @@ test('React ' + React.version, function(t) {
   )
 
   t.deepEqual(
-    processor.stringify(u('root', [h('body')])),
-    React.createElement('body', {key: 'h-1'}, undefined),
-    'should skip `root`s'
+    processor.stringify(u('root', [h('p')])),
+    React.createElement('div', {}, [
+      React.createElement('p', {key: 'h-1'}, undefined)
+    ]),
+    'should transform `root` to a `div` by default'
+  )
+
+  t.deepEqual(
+    unified()
+      .use(rehype2react, {
+        createElement: React.createElement,
+        Fragment: React.Fragment
+      })
+      .stringify(u('root', [h('p')])),
+    React.createElement(React.Fragment, {}, [
+      React.createElement('p', {key: 'h-1'}, undefined)
+    ]),
+    'should transform `root` to a `Fragment` if given'
   )
 
   t.deepEqual(
     processor.stringify(u('root', [u('doctype', {name: 'html'})])),
-    React.createElement('div', {key: 'h-1'}, undefined),
+    React.createElement('div', {}, undefined),
     'should skip `doctype`s'
   )
 
   t.deepEqual(
     processor.stringify(
-      h('body', h('h1.main-heading', {dataFoo: 'bar'}, h('span', 'baz')))
+      h('section', h('h1.main-heading', {dataFoo: 'bar'}, h('span', 'baz')))
     ),
-    React.createElement('body', {key: 'h-1'}, [
+    React.createElement('section', {key: 'h-1'}, [
       React.createElement(
         'h1',
         {