preactjs / wmr

Describe the bug
New lines are replaced with a space character if they occur within a text node, but this is incorrect. New lines between tags and text nodes, regardless of whether they're in a text node, should be ignored.

To Reproduce

<p>
    Example text{" "}
    <a
        href="https://example-link-location/"
        target="_blank"
        rel="noreferrer"
    >
        link
    </a>
    , and this is a problematic line break.
</p>

This is a format that tools like Prettier will generate, putting the punctuation on a new line after the end of the anchor tag. After building with WMR, however, this gets transformed into a space:

<p>Example text <a href="https://example-link-location/" target="_blank" rel="noreferrer">link</a> , and this is a problematic line break.</p>

Expected behavior
New lines between tags and text nodes should be ignored, no extra whitespace.

Bug occurs with:

wmr or wmr start (development)
wmr build (production)
wmr serve

Additional context
Just seems to be missing logic here:

wmr/packages/wmr/src/lib/acorn-traverse.js

Lines 880 to 894 in 3401a9b

    
           // Newlines must be replaced with a space character, but only if 
        
           // we're inside a text node 
        
           // 
        
           // <p>hello 
        
           //    world</p>  -> <p>hello world</p> 
        
           // 
        
           // <p> 
        
           //    hello world  -> <p>hello world</p> 
        
           // </p> 
        
           // 
        
           // We can drop the whole matched string if it only contains 
        
           // whitespace characters, because that means we're at the 
        
           // beginning or at the end of the JSXText node 
        
           const replacement = /[^\s]/.test(value) ? ' ' : ''; 
        
           value = value.replace(/\s*\n+\s*/g, replacement);

Working on a fix myself and trying to see if there are any other inconsistencies at the moment.

Good catch. It looks like leading whitespace should be removed from JSXText nodes if it contains a newline, and likewise for trailing whitespace (babel repl examples):

value = value.replace(/(^\s*\n\s*|\s*\n\s*$)/g, '');

Ah, cheers. Might've forgotten to strip the trailing whitespace too.

	// Newlines must be replaced with a space character, but only if
	// we're inside a text node
	//
	// <p>hello
	// world</p> -> <p>hello world</p>
	//
	// <p>
	// hello world -> <p>hello world</p>
	// </p>
	//
	// We can drop the whole matched string if it only contains
	// whitespace characters, because that means we're at the
	// beginning or at the end of the JSXText node
	const replacement = /[^\s]/.test(value) ? ' ' : '';
	value = value.replace(/\s\n+\s/g, replacement);

Line breaks between tags and text nodes becomes whitespace if within a text node