preactjs / preactjs/preact-render-to-string

renderToString with {pretty: true} causes undesirable newlines with text nodes

Open
#273 2 comments 2 reactions 0 assignees View on GitHub

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>

preact renderToString pretty issue

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.