coffee-react-transform icon indicating copy to clipboard operation
coffee-react-transform copied to clipboard

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

Open nemosupremo opened this issue 9 years ago • 3 comments

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

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

nemosupremo avatar Feb 24 '15 03:02 nemosupremo

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.

jsdf avatar Feb 24 '15 03:02 jsdf

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.

kballenegger avatar Jun 03 '15 00:06 kballenegger

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

ifyoumakeit avatar Jun 26 '15 16:06 ifyoumakeit