Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spread attributes break when used w/ function called with more than 1 arg #39

Open
nemosupremo opened this issue Feb 24, 2015 · 3 comments

Comments

@nemosupremo
Copy link

Example: http://jsdf.github.io/coffee-react-transform/?code=IyBAY2pzeCBSZWFjdC5ET00KCkNhciA9IFJlYWN0LmNyZWF0ZUNsYXNzCiAgcmVuZGVyOiAtPiAoCiAgCTxkaXYgYT1iIHsuLi5wYW5lUHJvcHMoYSwgYil9PkRhc2hib2FyZDwvZGl2PgoJKQ%3D%3D

Remove the , b and the right side becomes valid coffeescript.

@jsdf
Copy link
Owner

jsdf commented Feb 24, 2015

At the moment I've only tried to support simple variable and property accesses in the spread operator, so you would have to do eg.

React.createClass
  render: ->
    props = paneProps(a, b)
    <div a="b" {...props}>Dashboard</div>

When I get time I'll add support for arbitrary expressions inside the spread operator but it's not the top priority right now.

@kballenegger
Copy link

Want to add a +1 to this. I'm using a function {...@style('first', 'second')} as a regular pattern and this is causing a lot of inelegant code (especially with larger JSX expressions).

Right now I have to write code like this:

render: ->
  <div {...@styled('example', @props.selected && 'example_selected')} >

Must be written as:

render: ->
  exampleStyles = @styled('example', @props.selected && 'example_selected')
  <div {...exampleStyles} >

This can often balloon to the point where every render function has a bunch of variable assignments like this.

@ifyoumakeit
Copy link

I played around and it seems like you can compile almost anything if you remove all of the spaces.

@nemothekid, you can remove the , and it'll compile correctly.

Car = React.createClass
  render: -> 
    <div a=b {...paneProps(a,b)}>Dashboard</div>    

http://jsdf.github.io/coffee-react-transform/?code=IyBAY2pzeCBSZWFjdC5ET00KCkNhciA9IFJlYWN0LmNyZWF0ZUNsYXNzCiAgcmVuZGVyOiAtPiAoCiAgCTxkaXYgYT1iIHsuLi5wYW5lUHJvcHMoYSxiKX0%2BRGFzaGJvYXJkPC9kaXY%2BCgkp

@kballenegger

render: ->
  <div {...@styled('example',@props.selected&&'example_selected')} >

http://jsdf.github.io/coffee-react-transform/?code=cmVuZGVyOiAtPgogIDxkaXYgey4uLkBzdHlsZWQoJ2V4YW1wbGUnLEBwcm9wcy5zZWxlY3RlZCYmJ2V4YW1wbGVfc2VsZWN0ZWQnKX0vPgo%3D

Object

render: ->
  <div {...@fizz(foo:false,bar:false,fooBar:true)} />

http://jsdf.github.io/coffee-react-transform/?code=IyBAY2pzeCBSZWFjdC5ET00KCnJlbmRlcjogLT4KICA8ZGl2IHsuLi5AZml6eihmb286ZmFsc2UsYmFyOmZhbHNlLGZvb0Jhcjp0cnVlKX0gLz4%3D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants