JSX Compiler interpolation alternatives.

[DylanPiercey]

This will likely never change as it is far too late but it bothers me so I want to at least mention it.

I think that using curlies "{}" for interpolation inside JSX is confusing, unintuitive and ugly. Typically curlies refer to an object or a block neither of which can actually exist inside the interpolation within JSX.

Parens "()" are typically used to enclose an expression which is exactly what is going on in JSX.

I propose that we switch from this:

<div a={ { b: 1 } }/>

Which is confusing for beginners because it looks like an object in an object, or if you are coming from mustache something different entirely.

To:

<div a=( { b: 1 } )/>

Here it would be easy to explain that, like everywhere else in javascript, parans are used to represent an expression which in this case returns an object to the attribute of the virtual div.

Just my thoughts, feel free to discuss or close.

---

This was originally posted here: https://phabricator.babeljs.io/T7074

[yiminghe]

can just be simplified to

<div x={a:1}>

const spreadReg = /^\.\.\.[\w$_]/;
const objReg = /^[\w$_](?:[\w$_\d\s]+)?:/;
const es2015ObjReg = /^[\w$_](?:[\w$_\d\s]+)?,/;

// {a:1}, {...a}, {a,b} not {[a,1,2]}, {x}, { x + 1 }
function isObject(str) {
  return str.match(spreadReg) || str.match(objReg) || str.match(es2015ObjReg);
}

[DylanPiercey]

@yiminghe my issue was never the simplicity in terms of compactness, but the simplicity in terms of explaining it to others.

Like I said, in javascript curly braces are used to denote blocks/scopes and objects. Anything that can be wrapped in parentheses in javascript must be an expression. In React the interpolation is always an expression so I think it would make sense to make the syntax look such that you were dealing with an expression.

Looks like @sebmarkbage put this down as a consideration for JSX@2.0 which would be sweet.