Comments (15)
Since it's been a while since the last comment on this, I'd like to voice my support for this. I fairly often have constructs like this:
<div className={`${foo ? "foo" : "bar"} stuff`}/>
Reducing this to:
<div className=`${foo ? "foo" : "bar"} stuff`/>
would help to reduce the line noise a bit. I think the former and the latter form should be equivalent, everything in between the backticks should be valid JavaScript code. I don't think it is a good idea to special-case not having the braces around it.
from jsx.
Since JSX is an extension of ES it doesn't seem that far fetched to support template literals as an additional string type.
from jsx.
I think the conclusion is that since these forms are currently semantically different in JSX parsers:
<input value="Foo & Bar" /> // Foo & Bar
<input value={"Foo & Bar"} /> // Foo & Bar
We should keep it consistent which would mean that this would also be different:
<input value=`Foo & Bar` /> // Foo & Bar
<input value={`Foo & Bar`} /> // Foo & Bar
It's unclear if going down this route would be a good idea since it opens up a whole new set of parsing semantics. We would need to define how to parse a template literal with mixed placeholders and HTML escaping / encoding rules. That seems very bad.
Therefore the conclusion is that we will only do this if we also drop the HTML encoding in string attributes which is discussed in #4 .
Consider this open but dependent on #4 .
from jsx.
I don't get it. In Javascript we have '
and "
which we can both use in jsx. Now we have `
which is just another way to create a string. We should be able to use it in jsx.
Of course I would like jsx to support all javascript primitives, but that will put a lot more strain on the parser and I think it should be considered another issue entirely.
prop='...'
vs prop={'...'}
can behave the same for `
and "
Why not just add `
with the same semantics as '
and "
?
Support for custom tags can be skipped for now and they are a lot less common for properties.
from jsx.
Hm. That seems like a good idea but it's a bit of slippery slope. Currently the strings are treated as HTML attribute strings so they use escapes like &
instead of \"
. Should these template strings be proper JS strings? I would assume so.
Should we also allow single quotes '
? Are they JS strings or HTML strings? Is it weird that "
and '
use different formats/escape characters?
What else do we need shorthands for? Numbers?
from jsx.
Should we also allow single quotes '? Are they JS strings or HTML strings? Is it weird that " and ' use different formats/escape characters?
They are supported in both HTML and JSX.
Since JSX is an extension of ES it doesn't seem that far fetched to support template literals as an additional string type.
Agree - all of them are in the end string literals, and JSX adds only entity support (in single-/double-quoted strings it also extends them with multiline support, but in template literals we have that out of the box).
What else do we need shorthands for? Numbers?
Numbers are somewhat trickies case. On the other hand, we could probably support any JS atoms (array & object literals, numbers, single-/double-/back-quoted strings etc.) with no harm or ambiguity for JSX itself.
from jsx.
My position hasn't changed after 9 months, would still like this feature.
from jsx.
We do allow single quotes.
from jsx.
I would love to support all of them but object literals are ambiguous which complicates the story around what you can put in there. Since there is this special case.
Currently the special case for strings are only because they're in XML/HTML and treated as such.
On Jan 22, 2015, at 2:47 PM, Ingvar Stepanyan [email protected] wrote:
Should we also allow single quotes '? Are they JS strings or HTML strings? Is it weird that " and ' use different formats/escape characters?
They are supported in both HTML and JSX.
Since JSX is an extension of ES it doesn't seem that far fetched to support template literals as an additional string type.
Agree - all of them are in the end string literals, and JSX adds only entity support (in single-/double-quoted strings it also extends them with multiline support, but in template literals we have that out of the box).
What else do we need shorthands for? Numbers?
Numbers are somewhat trickies case. On the other hand, we could probably support any JS atoms (array & object literals, numbers, single-/double-/back-quoted strings etc.) with no harm or ambiguity for JSX itself.
—
Reply to this email directly or view it on GitHub.
from jsx.
@sebmarkbage Oh, you're right about object literals, sorry.
from jsx.
Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.
from jsx.
Has the consensus been reached regarding this feature?
The biggest reason for wanting template strings in JSXAttributeValue
is consistency, e.g. I am using ESLint quotes rule to enforce template strings for all instances of string. Unfortunately, JSX attribute value declaration is an exception.
from jsx.
Hello there,
I would like to come back to the question of @gajus in babel/babel#2309.
Is it possible to expand supported syntax via a parser plugin? Then anyone which doesn't use html entities in attributes - why would you - can include the plugin for their project or not.
Following https://lihautan.com/step-by-step-guide-for-writing-a-babel-transformation/ or https://lihautan.com/creating-custom-javascript-syntax-with-babel/ it looks like it is possible or do we need to consider special JSX handling?
from jsx.
consider this:
/** @jsx h */
/** @jsxTag t */
<el attr=`a${b}c` />
which means:
h('el', { attr: t`a${b}c` })
this may give user a chance to handle substitutions
(e. g. strip boolean
null
undefined
substitutions, like {b}
in children)
from jsx.
Going off of the comments in the Babel thread, I've submitted a PR that hopefully address the HTML encoding concerns, and also tries to explain this a bit more in the spec itself: #132 .
from jsx.
Related Issues (20)
- Add early error to disallow invalid adjacent JSX elements HOT 3
- can you provide a syntactic sugar? HOT 3
- Can we move JSX to be an extension of ES Spec that evolves forward like EcmaScript + TC39 ? HOT 3
- RFC: An evolved JSX 2.0 proposal HOT 1
- Get accessor in props HOT 1
- HTML and JSX spec HOT 1
- The syntax in website is missing JSXFragment as JSXChild
- Proposal: ability to return multiple chlidren by auto-wraping them into a Fragment HOT 2
- Proposal: using ! prefix on attributes to set them to `false`
- Ambiguous syntax HOT 2
- Spec out whitespacing / line break behaviors HOT 4
- Split Out Lexical Grammar
- Behavior of `�` and lone surrogates unicode entities HOT 2
- Proposal: Attributes with the same name as their value HOT 1
- Proposal: Syntactic sugar for props with same name as value passed HOT 1
- Distinguish tags from elements in the terminology
- Feature request: nameless closing tags
- Proposal: faster way to id and classes HOT 7
- Proposal: combining classes using only className HOT 2
- In this specification there is a reference to Babylon, now @babel-parser
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 jsx.