JSX Spread operator throws syntax error

[zovt]

for example:

const x = this.someArray.map((props) => <Component {...props} />);

[Wilfred]

Support for the object spread operator was released in 0cda392 (version 20160623), and added in 2a904e0.

It's not clear to me which parts of the parser are JSX related and need to be updated. Relevant JSX docs: https://facebook.github.io/react/docs/jsx-spread.html

[dgutov]

It seems like this would require us to support JS syntax like this first:

var b = ...c;

Is there some ESn proposal like this? Can this even make sense?

Alternatively, we'd have to parse interpolated expressions inside XML literals like functions parameters..?

[Wilfred]

Is there some ESn proposal like this?

... is supported in the following situations:

rest parameters, e.g. function foo(x, y, ...more) { whatever() }

spread syntax e.g. [...iterableObj, 4, 5, 6] and myFunction(-1, ...args, 2, ...[3]); and var foo = [...bar]

destructuring assignment e.g. ({a, b, ...rest} = {a:1, b:2, c:3, d:4});

So your example doesn't make sense, but you can use ... in an awful lot of contexts.

[dgutov]

Yes. Too bad E4X doesn't interpret { ... } like one of those contexts.

[Wilfred]

Alternatively, we'd have to parse interpolated expressions inside XML literals like functions parameters..?

Would there be any downsides to doing this? I'm not familiar with the js2-mode code.

[dgutov]

It will likely break E4X support, to some extent. Which is the (outdated) technology we actually support, not JSX.

[aaronjensen]

fwiw {...props} is a jsx specific construct. It exists and is usable even in situations where object rest and object spread is not available.

[Wilfred]

It looks like https://github.com/felipeochoa/rjsx-mode has solved this problem.

[zovt]

is this still a problem in this package? is the suggested rjsx-mode the fix? If so, I can close this issue as wontfix

[ibrahima]

I can confirm that using rjsx-mode (which extends js2-mode) fixes this issue, so this can probably be closed.

[dgutov]

Yeah, ok. 😃