Add support for fragments

Closes GH-54.

Author: wooorm

index.js

@@ -7,17 +7,23 @@ var sanitize = require('hast-util-sanitize')
 var toH = require('hast-to-hyperscript')
 var tableCellStyle = require('@mapbox/hast-util-table-cell-style')
 
+var globalReact
 var globalCreateElement
+var globalFragment
 
+/* istanbul ignore next - Hard to test */
 try {
-  globalCreateElement = require('react').createElement
+  globalReact = require('react')
+  globalCreateElement = globalReact.createElement
+  globalFragment = globalReact.Fragment
 } catch (error) {}
 
 var own = {}.hasOwnProperty
 
 function react(options) {
   var settings = options || {}
   var createElement = settings.createElement || globalCreateElement
+  var Fragment = settings.fragment || globalFragment
   var clean = settings.sanitize !== false
   var scheme =
     clean && typeof settings.sanitize !== 'boolean' ? settings.sanitize : null
@@ -28,24 +34,29 @@ function react(options) {
 
   // Wrapper around `createElement` to pass components in.
   function h(name, props, children) {
-    var component = own.call(components, name) ? components[name] : name
-
-    return createElement(component, props, children)
+    return createElement(
+      own.call(components, name) ? components[name] : name,
+      props,
+      children
+    )
   }
 
   // Compile mdast to React.
   function compile(node) {
-    var hast = {
-      type: 'element',
-      tagName: 'div',
-      properties: {},
-      children: toHAST(node, toHastOptions).children
-    }
+    var tree = toHAST(node, toHastOptions)
+    var root
 
     if (clean) {
-      hast = sanitize(hast, scheme)
+      tree = sanitize(tree, scheme)
+    }
+
+    root = toH(h, tableCellStyle(tree), settings.prefix)
+
+    // If this compiled to a `<div>`, but fragment are possible, use those.
+    if (root.type === 'div' && Fragment) {
+      root = createElement(Fragment, {}, root.props.children)
     }
 
-    return toH(h, tableCellStyle(hast), settings.prefix)
+    return root
   }
 }

readme.md

@@ -77,6 +77,11 @@ Transform markdown to React.
 How to create elements or components (`Function`).
 Default: `require('react').createElement`)
 
+###### `options.fragment`
+
+Create fragments instead of an outer `<div>` if available (`Function`).
+Default: `require('react').Fragment`)
+
 ###### `options.sanitize`
 
 Sanitation schema to use (`object` or `boolean`, default: `undefined`).

test/index.js

@@ -76,7 +76,7 @@ versions.forEach(function(reactVersion) {
           })
           .processSync('# Foo').contents
       ),
-      '<div><h2>Foo</h2></div>',
+      '<h2>Foo</h2>',
       'should use custom components'
     )
 
@@ -90,10 +90,23 @@ versions.forEach(function(reactVersion) {
           })
           .processSync('```empty\n```').contents
       ),
-      '<div><pre><code class="language-empty"></code></pre></div>',
+      '<pre><code class="language-empty"></code></pre>',
       'does not sanitize input when `sanitize` option is set to false'
     )
 
+    t.equal(
+      React.renderToStaticMarkup(
+        remark()
+          .use(reactRenderer, {
+            createElement: React.createElement,
+            fragment: React.Fragment
+          })
+          .processSync('# Hello\nWorld').contents
+      ),
+      '<h1>Hello</h1>\n<p>World</p>',
+      'should support given fragments'
+    )
+
     t.equal(
       React.renderToStaticMarkup(
         remark()
@@ -103,7 +116,7 @@ versions.forEach(function(reactVersion) {
           })
           .processSync('# Foo').contents
       ),
-      '<div><h1>Foo</h1></div>',
+      '<h1>Foo</h1>',
       'passes toHast options to inner toHAST() function'
     )
 

test/react/v16/fixtures/html-sanitize/output.html

@@ -1 +1 @@
-<div><p>Foo bar baz qux.</p></div>
+<p>Foo bar baz qux.</p>

test/react/v16/fixtures/html/output.html

@@ -1 +1 @@
-<div><p>Foo bar baz qux.</p></div>
+<p>Foo bar baz qux.</p>

test/react/v16/fixtures/tables/output.html

@@ -1,4 +1,4 @@
-<div><table>
+<table>
 <thead>
 <tr>
 <th>Alpha</th>
@@ -39,4 +39,4 @@
 <td style="text-align:center"></td>
 </tr>
 </tbody>
-</table></div>
+</table>

test/react/v16/fixtures/yaml/output.html

@@ -1 +1 @@
-<div><h1>Hello world</h1></div>
+<h1>Hello world</h1>