JSX: Bug highlighting object spread with object property access

[jlmakes]

Reproducing The Issue

Spread over a nested object as component props, such as {...this.props} below:

const Component = () =>
    <Child {...this.props} option={400}>
        <div>foo</div>
        <div>bar</div>
        <div>jam</div>
    </Child>

. . .

Test Drive Results

The highlighting for the line <Child {...this.props} option={400}> is a bit off.

. . .

If we don't use the object property access operator, and replace this.props with somePropsObj for example, we can see how the highlighting kicks back in:

. . .

Related: #1235

[jlmakes]

I spy {\.{3}\w+\} in /components/prism-jsx.js on line 6

[Golmote]

Thanks for reporting. It should be fixed now.

Note, though, that Prism will still fail on other cases. AFAIK JSX can contain almost all JS has to offer in those tags, and matching everything would be really complicated with just regexps.

Examples that will fail, and I think we won't fix, include:

// Spread with anything other than a variable or a simple property access
<Child {...{foo: 'bar', bar: 'baz'}}>

// Nested objects in attribute value
<Child foo={{ foo: { bar: 'baz'}}}>

I'm not even sure those are valid JSX example, but I do know they would fail.

[jlmakes]

Really appreciate the fix @Golmote, hyper merci