Skip to content

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

@stevenle

Description

@stevenle

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions