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)
- Question and suggest: The official identifier of Server Compnoent and Client Component HOT 3
- Bug: when installing the application, the old version of "react-scripts" is installed HOT 1
- Bug: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. HOT 4
- Bug: optimistic state (useOptimistic) shows both optimistic and returned from server data when running several async actions HOT 6
- [DevTools Bug]: React Profiler reports higher hook numbers than shown in Components HOT 2
- about the react performance (how to improve it) HOT 2
- Bug: use() hook HOT 4
- Bug: Flight (RSC) examples are not accessible HOT 1
- useMemo reruns when the dependencies not changed when memoised value is a fn HOT 3
- Bug: [Flight] Async server components in `ai/rsc` not serialized correctly HOT 1
- Bug: React Dev tools extension showing wrong source file path on inspection HOT 4
- Bug: Using the hook useDeferredValue - Suspense fallback didn't show the contents HOT 4
- Bug: react-intl formatMessage cannot format message with param that neat by Single quotation mark HOT 3
- custom use directives + using closure serializer
- In react fiber, is didReceiveUpdate related to dirty checking?
- Naming convention HOT 1
- Bug: Rapid click fails to catch the onClick event properly
- Bug: script element not suspending in canary
- Bug: [PPR] Resume failed when "moduleLoading === undefined" in function prepareDestinationWithChunks
- Bug: Expected a suspended thenable.
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.