Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
stevenle opened this issue Dec 15, 2022 · 1 comment

Comments

@stevenle
Copy link

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

@brandon-lb
Copy link

Yeah, same thing happened to me. The browser ended up interpreting some regular text with spaces around it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants