Maybe interpolate within JSX attributes?

Would be cool and useful if <div title="hello {there}"> compiled down into

React.DOM.div({title: "hello " + there})

or similar, though it looks like I’m fighting an uphill battle here:

22:56 < balpert> any reason why <div title="hello {there}"> shouldn't interpolate?
22:58 <@zpao> lbljeffmo: that's in your court :)
22:58 <@lbljeffmo> balpert: because that's hard :)
22:58 <@lbljeffmo> We'd basically need to eval strings
22:58 < balpert> I mean, <div>hello {there}</div> already works?
22:58 <@lbljeffmo> let me think for more than a second...
23:00 <@lbljeffmo> also, we'd need to escape the output
23:00 < balpert> what do you mean?
23:00 <@zpao> well, react will escape the whole attr when creating html
23:01 <@lbljeffmo> what would it interpolate to?
23:01 < balpert> {title: "hello " + there}?
23:01 < balpert> or maybe something like {title: ["hello ", there]} if we made that work
23:01 <@zpao> yea
23:01 <@zpao> same as <div title={'hello ' + there}/>
23:02 <@lbljeffmo> I'm hesitant because it changes the semantics of a string (but I'm still processing…)
23:02  * zpao isn't sure this is really quite a path we want to go down but it interesting to think about
23:02 < balpert> yeah, I'm unsure too
23:03 < balpert> a coworker asked though and it would seem to make JSX a bit more consistent
23:03 <@lbljeffmo> also, string literals would act differently from refs to string lits
23:03 < balpert> lbljeffmo: what do you mean?
23:03 <@zpao> well, JSX ≠ templating, which it sounds like your coworker actually wants
23:03 <@lbljeffmo> var stuff = "dude"; var myStuff = "Hello {stuff}"; <div title={stuff} />;
23:04 <@lbljeffmo> we only have the opportunity to re-write the string if we can analyze it at compile time
23:04 <@lbljeffmo> not at run time
23:04 < balpert> correct
23:04 < balpert> I definitely wouldn't expect that interpolation to work
23:05 <@lbljeffmo> seems unclear to a noob though who hasn't thought about the depths of the transform though
23:05 <@lbljeffmo> I'm inclined to suggest that this would be something you'd want to do with a templating library and then pass the result of the template processing in
23:07 < balpert> lbljeffmo: I dunno, it seems pretty simple to have JSX interpolate {...} in attrs and element bodies
23:07 < balpert> I don't think anyone who knows anything about how JSX works would get confused when var myStuff = "Hello {stuff}"; <div title={stuff} /> doesn't work
23:08 <@lbljeffmo> ya maybe not
23:09 < balpert> well, something to think about
23:09 <@zpao> at that point we might as well just make jsx handlebars
23:09 < balpert> obviously not a big deal
23:10 <@zpao> handlerbars + xml
23:10 <@lbljeffmo> but the "jsx is not a templating tool" argument still makes a lot of sense to me -- using a real templating utility seems more modular and less slippery-slopey down the new-templating-features slope
23:13 < balpert> this particular feature doesn't feel at all like "new features" to me, but I agree with your general argument
23:14 < balpert> obviously (to me, at least) it doesn't make sense to add loops or anything like that to JSX
23:14 < balpert> at least, certainly not some {{#each ...}} thing
23:14 <@lbljeffmo> see also: http://wiki.ecmascript.org/doku.php?id=harmony:quasis

[sophiebits]

Doesn’t seem so. With ES6 template literals you can do

title={`Hello ${name}`}

which isn’t too bad, so I’ll close this out. (Maybe we can drop the outer curlies there someday.)

[syranide]

@spicyj You shouldn’t 😃, because I started editing my thoughts while posting and mixed up what you were proposing title="Hello {name}" with title={"Hello {name}"}. Your proposal makes sense, and I stand by my first sentence, that I could probably massage JSX into doing it.