(Breaking) Feature Request: Make JSX even more like JS

[kasperpeulen]

I think it is time to make JSX even more like JS and less like HTML. Consider the following JSX:

const name = "Kasper";
const message = <p>Hello, {name}!</p>;
const container = <div>{element}</div>;

What about writing it like this:

const name = "Kasper";
const message = <h1>"Hello, ${name}!"</h1>;
const container = <div>message</div>;

My main subjective reason is that it just looks more right to me. A more objective reason would be that you could introduce javascript comment syntax:

const name = "Kasper";
const message = <h1>"Hello, ${name}!"</h1>;
const container = ( 
  <div>
    // we currently only message the first name
    message
  </div>
);

Similar things could be done for jsx attributes. Instead of:

const element = <Counter count={0}/>;
const element2 = <img src={user.avatarUrl}/>;
const element3 = <div className="header"></div>

I would like it as:

const element = <Counter count=0/>;
const element2 = <img src=user.avatarUrl/>;
const element3 = <div className="header"/>;

Or even better, (I haven't put much thought in this):

const element = <Counter count: 0/>;
const element2 = <img src: user.avatarUrl/>;
const element3 = <div className: "header"/>;

More generally:

<Component
  bool: true,
  num: 1,
  string: "bar",
  expr: x + y,
  valueByPropName,
  ...spreadObject
/>

Inspiration comes from: https://twitter.com/emilpersson/status/795640485683560449

By just making the syntax more close to javascript, I think many long-standing problems would be more easily fixed:

• 23 - support object literal property value shorthand

• 25, #51, #64 - Drop the need for curlies around attribute values if they're a single literal, or parenthesis.

• 35 - Drop implicit text content and curlies as children.

• 7 - Extend JSXText with Comment?

[gaearon]

Please also see the discussion in https://github.com/facebook/jsx/issues/65.

[kasperpeulen]

Seems like this is also how reason implemented jsx: http://facebook.github.io/reason/#diving-deeper-jsx

[hinell]

This would be in line with many other tools like that historically use ${foo} to refer to foo variable.