Skip to content
This repository has been archived by the owner on Oct 1, 2024. It is now read-only.

Commit

Permalink
Add support for fragments
Browse files Browse the repository at this point in the history
Closes GH-54.
  • Loading branch information
wooorm committed Nov 25, 2018
1 parent 780b4cd commit 860d56d
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 20 deletions.
35 changes: 23 additions & 12 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
}
}
5 changes: 5 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`).
Expand Down
19 changes: 16 additions & 3 deletions test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ versions.forEach(function(reactVersion) {
})
.processSync('# Foo').contents
),
'<div><h2>Foo</h2></div>',
'<h2>Foo</h2>',
'should use custom components'
)

Expand All @@ -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()
Expand All @@ -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'
)

Expand Down
2 changes: 1 addition & 1 deletion test/react/v16/fixtures/html-sanitize/output.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div><p>Foo bar baz qux.</p></div>
<p>Foo bar baz qux.</p>
2 changes: 1 addition & 1 deletion test/react/v16/fixtures/html/output.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div><p>Foo bar baz qux.</p></div>
<p>Foo bar baz qux.</p>
4 changes: 2 additions & 2 deletions test/react/v16/fixtures/tables/output.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div><table>
<table>
<thead>
<tr>
<th>Alpha</th>
Expand Down Expand Up @@ -39,4 +39,4 @@
<td style="text-align:center"></td>
</tr>
</tbody>
</table></div>
</table>
2 changes: 1 addition & 1 deletion test/react/v16/fixtures/yaml/output.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div><h1>Hello world</h1></div>
<h1>Hello world</h1>

0 comments on commit 860d56d

Please sign in to comment.