Open nojvek opened 4 years ago
@sebmarkbage / @ryancavanaugh just wondering if you have any opinions ^
I wonder who else needs to be pinged to have a serious discussion of pros/cons and viability.
A part of me wants to create a typescript prototype with “jsxVersion: 2” compiler flag.
I acknowledge that the old JSX 2.0 proposal (#65) had way too many comments to keep up a discussion and is closed for discussion.
This proposal tries to accomodate many existing issues. It is based on the existing JSX 2.0 proposal by @sebmarkbage.
Guiding principles
What this proposal isn't
No special behavior for control structures like if, else e.g special behavior for
<If>
tags. JSX semantics should only focus on expressing the tree structure of tags and expressions. The logic structure should be dictated by existing JS syntax e.g ternaryx ? y : z
andsomeArray.map
to iterate over arrays. Whendo
expressions make it to ES spec, they can focus on more expressive logic semantics.Concerned with how jsx gets transpiled and emitted. This proposal purely focuses on syntax. i.e no special syntax for event handler binding.
81 namespaces for passing nested objects (jsx already supports namespaces) - this is emit level behavior
122 syntatic sugar for bind
104 special sugar for child functions
Issues taken into consideration
The proposal purely focuses on parser level semantics
4 - Drop HTML encoding in text and attributes.
21 - Computed attribute names.
23 - Object short hand notation.
25, #51, #64 - Drop the need for curlies around attribute values if they're a single literal, or parenthesis.
35, #8 - Crazy Idea: Deprecate JSXText?
68 - Make JSX even more like JS
7 - Comments in JSXElement
117 - non-breaking changes for attribute values
108 - Computed attribute names
103 - Curly braces for attribute expressions are pointless and ugly
76 - Destructuring
53 - Remove
JSXElement
fromJSXAttributeValue
productionThe major breaking changes to existing spec
{...}
->(...)
JSX Elements
JSXElement remains as is. No changes here.
<div></div>
</br/>
<Context.Provider></Context.Provider>
-<hello:world></hello:world>
<> </>
JSXAttribute
<div x y>
evaluated like JS object shorthand as<div x=x y=y
, instead of current behavior<div x=true y=true>
. Maps to JS object syntax:jsx('div', {x, y})
.<div ...props>
instead of currentdiv {...props}
. Maps to JS object syntax:jsx('div', {...props})
<div ['hello' + 2]='world'>
. Maps to JS object syntaxjsx('div', {['hello' + 2]: 'world'})
x=y
maps to{x:y}
in JS object syntax.JSXAttributeValue
x="hello"
,x='hello'
,x=2
,x=true
,x=null
x=`some ${value}`
x=foo_ba$r23
x=(1+2)
,x=({key: val})
,x=(<div/>)
JSXFragment- Removed: Usex=(<></>)
instead ofx=<></>
JSXElement- Removed: Usex=(<div/>)
instead ofx=<div/>
. Typescript to-date hasn't support this production. It's support is lacking amongst diffent tools and is needlesly complex. It can be echieved with just two extra characters. See #53ParensExpression:
(expr)
replaces{expr}
as expression syntax since JS already understands(...)
. Forx={{hello:world}}
,{
has double meaning. The first use is to signify expression, and the next use is the object initializer.x=((((((1))))))
still means an expression, no matter how many parentheses.JSXChild
JSXText- Removed. Have to use explicit strings instead e.g<div>"Hello World"</div>
. Whitespace can be explicitly noted e.g<div> " Hello World " </div>
<div> 1 foobar true null "SomeStr" `Hello ${world}`</div>
. Any space separated literals work.<div>(user.isLoggedIn() > 0 ? <Login/> : <Home/>)</div>
- Replaces{}
as the expression with()
//
or/* */
Complex Example: