preactjs / preactjs/preact-render-to-string
renderToString with {pretty: true} causes undesirable newlines with text nodes
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 727
- Forks
- 101
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 6
Description
Issue:
When using renderToString(vdom, {}, { pretty: true }), text nodes that normally do not have whitespace between it and its siblings are rendered on a newline, which can create undesirable whitespace issues.
Minimal sample project with the issue:
https://stackblitz.com/edit/js-imcswy?file=index.js
Sample code:
/** @jsx h */
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
function Text() {
return (
<p>
Lorem ipsum <a>click me</a>. Dolor sit amet.
</p>
);
}
const html = renderToString(<Text />, {}, { pretty: true });
console.log(html);
console.log output:
<p>
Lorem ipsum
<a>click me</a>
. Dolor sit amet.
</p>
Proposed resolution:
When there is no explicit whitespace between a text node and its sibling, the pretty renderer should keep the output on the same line. For the example above, I'd expect an output of:
<p>
Lorem ipsum
<a>click me</a>. Dolor sit amet.
</p>

Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the renderToString entry point and trace the pretty:true handling for adjacent text and element nodes, using the minimal sample as the reproduction. Done means the period remains adjacent to the closing anchor while intentional whitespace and pretty formatting are preserved, with a regression test covering this case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100