Skip to content

Commit

Permalink
Add option to preserve whitespace for certain elements
Browse files Browse the repository at this point in the history
Add an option to preserve whitespace/indentation for certain elements. Defaults to `['pre']`

Signed-off-by: Sven Tschui <sventschui@gmail.com>
  • Loading branch information
sventschui committed Jun 2, 2020
1 parent 09d7675 commit 82daf0f
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 3 deletions.
7 changes: 4 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const noop = () => {};
* @param {Boolean} [options.shallow=false] If `true`, renders nested Components as HTML elements (`<Foo a="b" />`).
* @param {Boolean} [options.xml=false] If `true`, uses self-closing tags for elements without children.
* @param {Boolean} [options.pretty=false] If `true`, adds whitespace for readability
* @param {Boolean} [options.preserveWhitespace=['pre']] Array of HTML tags for which to preserve indentation.
*/
renderToString.render = renderToString;

Expand Down Expand Up @@ -51,7 +52,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
context = context || {};
opts = opts || {};

let pretty = opts.pretty,
let pretty = (opts.preserveWhitespace || ['pre']).indexOf(nodeName) === -1 && opts.pretty,
indentChar = pretty && typeof pretty==='string' ? pretty : '\t';

// #text nodes
Expand All @@ -73,7 +74,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
for (let i = 0; i < children.length; i++) {
rendered += (i > 0 && pretty ? '\n' : '') + renderToString(children[i], context, opts, opts.shallowHighOrder!==false, isSvgMode, selectValue);
}
return rendered;
return pretty ? indent(rendered, indentChar) : rendered;
}
else {
let rendered;
Expand Down Expand Up @@ -269,7 +270,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
}
if (pretty && hasLarge) {
for (let i=pieces.length; i--; ) {
pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
pieces[i] = '\n' + indentChar + pieces[i];
}
}
}
Expand Down
13 changes: 13 additions & 0 deletions test/pretty.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,19 @@ describe('pretty', () => {
expect(rendered).to.equal(`<section><a href="/foo">foo</a>bar<p>hello</p></section>`);
});

it('should preserve indentation of pre content', () => {
let rendered = prettyRender(
<div>
<pre dangerouslySetInnerHTML={{ __html: 'foo\nbar' }} />
</div>
);

expect(rendered).to.equal(`<div>
<pre>foo
bar</pre>
</div>`);
});

it('should render whitespace when pretty=true', () => {
let rendered = prettyRender(
<section>
Expand Down
11 changes: 11 additions & 0 deletions test/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -712,6 +712,17 @@ describe('render', () => {
expect(html).to.equal('<div>\n\t<div>foo</div>\n\t<div>bar</div>\n\t<div>\n\t\t<div>baz</div>\n\t\t<div>quux</div>\n\t</div>\n</div>');
});

it('should preserve indentation of pre content', () => {
let rendered = render(
<div>
<pre dangerouslySetInnerHTML={{ __html: 'foo\nbar' }} />
</div>
);

expect(rendered).to.equal(`<div><pre>foo
bar</pre></div>`);
});

it('should skip Fragment even if it has props', () => {
let html = render(
<div>
Expand Down

0 comments on commit 82daf0f

Please sign in to comment.