Comments (12)
+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>
would still be equivalent to <div>{this.props.greeting}{this.props.name}</div>
with no space in between.
from react.
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>
);
}
});
from react.
@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
To me the output of my current rules seem intuitive, except for the last one, it seems like it should produce a whitespace in the middle (or perhaps not?), and that would be easy to fix. But, are there other things to consider perhaps? Is this change to the implementation acceptable or is remaining 100% compatible more important now?
from react.
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')
);
With my fix it produces the following code:
(I intentionally mirror the structure/newlines of the original code, this can be removed if needed)
Thought... perhaps the whitespace between the two w's should be kept as-is, i.e, produce "w<3 spaces>w"
and not just "w<1 space>w"
, seeing as it is probably intentional, as well as for z {'awd4'}
. This would be very simple to fix as well.
=> " 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')
);
This is what JSXTransformer currently produces:
(A lot of, in my opinion, unintended whitespace resulting from newlines as well as "awd2" and "awd3" NOT being separated by whitespace as one would perhaps expect.)
=> " 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')
);
from react.
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.
Related Issues (20)
- Bug: react-server-dom-webpack gets confused by package.json#exports map and crashes
- how to use <Profiler> to get dom performance data with headless browser? HOT 1
- Bug: Why did react use「Window.event」 to implement the event lane which has been declared abandoned by MDN?
- Bug: Suspense fallback is not interactive
- I have the same Problem (macOS Sonoma 14.1.1) while executing `sudo gem install cocoapods` and I get the following error message:
- Bug: The development build file is missing React.__ SECRET_ INTERNALS_ DO_ NOT_ USE_ OR_ YOU_ Will_ BE_ FIRED.Scheduler HOT 2
- Bug: createPortal does not add anything to the DOM HOT 7
- Bug: States not mainted in the page HOT 1
- [DevTools Bug]: hook parsing fails while using functional component + redux or alternative
- EqualityFn for useEffect, useMemo, useCallback HOT 2
- Doc's: missing information about using useCallback for Custom Hooks HOT 1
- Missing Information about useCallback in Custom Hooks Documentation
- [DevTools Bug] Cannot add node "1590" because a node with that id is already in the Store. HOT 4
- Bug: `use` in `lazy` returns content from previous `use` calls on first request
- Bug: `use()` yields incorrect value during first SSR HOT 1
- StrictMode does not support lazily initialized useRef
- Bug: Misleading error message when using "use" hook without a Suspense wrapper
- Bug: import(metadata.specifier) cause error on windows HOT 1
- Inconsistency Between Server-Side Rendering and Client-Side Rendering Causes "Prop did not match" Error
- Security issue: React is vulnerable to supply chain attacks HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.