JSX whitespace coalescing should work like regular HTML about react HOT 12 CLOSED

+1

Similar to how closure's soy templates do this, it might be useful to retain the whitespace in this instance, where the space is clearly between two elements on a single line.

However, seems ideal to delete all whitespace if the elements are on separate lines, so that:

return <div>
  {this.props.greeting}
  {this.props.name}
</div>

Ugly, but I use the following until a fix:

var SPACE = ' ';
var MyComponent = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.foo}
                {SPACE}
                {this.props.bar}
            </div>
        );
    }
});

@adambrunner yep, that's the only way right now (though I use {' '} directly, myself). This is definitely something we want to fix.

from react.

I'm currently looking into amending this and have done some experimentation with good results.

My current implementation basically removes all whitespace that is broken by a newline, and after that all remaining whitespace is collapsed into a single space (and it properly retains whitespace in the produced code).

Basically code can be arbitrarily spread over multiple lines without whitespace being produced, and any explicit whitespace within a line produces a single space (i.e, <div> </div> keeps the whitespace).

"# #"      =>  "# #"
"# \n #"   =>  "##"
"# S #"    =>  "# S #"
"# S\n #"  =>  "# S#"
"S # S"    =>  "S # S"
"S S"      =>  "S S"
"S \n S"   =>  "SS"

# is <tag> and {code}, S is text

I agree that those all seem pretty reasonable except the last one. I wouldn't personally find keeping newlines between two tags helpful, though it's at least worth considering because removing it is inconsistent with HTML.

from react.

I'm personally perhaps kind of biased in this as I've always run a preprocessor similar to this over all my HTML, because whitespace would otherwise creep in everywhere causing unwanted spacing to appear "randomly". I personally don't know why anyone would ever want to have a newline translate into whitespace.

To be consistent with HTML all whitespace would have to be kept as-is (CSS white-space: pre, etc), but if you ever want that behavior then {' x '} seems like a reasonable solution to me.

Here's an intentionally horrible example along with the code it currently produces with my patch, note that now "S \n S" => "S S".

React.renderComponent(
    <div>    x 
        <span alt="color: #000000" x={123 + 1}></span>w{'awd2'}  {'awd3'}

        o


            l


        {'awd7'}

            {'awd6'}


         z    {'awd4'} 

         w   w   
           {'awd5'}   
         x
    </div>,
    document.getElementById('content')
);

=> " xwawd2 awd3o lawd7awd6z awd4w wawd5x"

React.renderComponent(
    React.DOM.div(null,     " x", 
        React.DOM.span( {alt:"color: #000000", x:123 + 1}),"w",'awd2',  " ",  'awd3',

        "o "+


            "l",


        'awd7',

            'awd6',


         "z ",    'awd4', 

         "w w",   
           'awd5',   
         "x"
    ),
    document.getElementById('content')
);

=> " x wawd2awd3 o l awd7awd6 z awd4 w w awd5 x "

React.renderComponent(
    React.DOM.div(null,     " x " ,
        React.DOM.span( {alt:"color: #000000", x:123 + 1}),"w",'awd2',  'awd3',
        " o "+
            "l ",
        'awd7',

            'awd6',
         " z ",    'awd4', 
         " w   w "   ,
           'awd5',   
         " x "
    ),
    document.getElementById('content')
);

cc @jeffmo

from react.

I like where this is going, and agree with your proposed next step: whitespace that does not contain a newline should not be collapsed.

Hopefully since react is not at 1.0 yet, this would still within the range of acceptable compatibility breakages, given a proper writeup in the docs.

from react.

I think I'm onboard with this conceptually. I think this set of rules is, at least, the most intuitive we've come up with thus far. Sounds like everyone else is on board too, so lets do it.

(man, whitespace is a bitch...)

from react.

FYI, pull request and more detailed information available at #480

from react.

Is this something we could provide a codemod/recast script for?

When we tweaked this.props.children from always being an array to sometimes being an array it was a huge headache for IG since every callsite had to be manually tested. I want to make sure we don't have to test every callsite and look at whitespace to be sure.

from react.

Fixed by #480.

from react.