Arrow function problems in classes

[Kareeeeem]

Hi, I updated my plugins today and I encountered an error.

When putting arrow functions inside (react) classes it breaks highlighting and also matchfinding of braces.

This is what was working fine before. Notice the messed up highlighting and the last brace of the class that is mistakenly highlighted as an error.

To fix it I have to write normal functions like so.

for completeness here is the code and the minimal vimrc (I elimited the jsx highlighter as the culprit.)

filetype off                                                                    

call plug#begin('~/.vim/plugged')                                               

Plug 'pangloss/vim-javascript', {'for': '*javascript*'}                         
Plug 'mxw/vim-jsx', {'for': '*javascript*'}                                     
call plug#end()                                                                 
colorscheme ron                                                                 
let g:jsx_ext_required = 0

import React, { Component } from 'react'
import { connect } from 'react-redux'

function Button (props) {
  return <button
    name={props.name}
    onClick={props.handlePagination}
    disabled={props.disabled}
  >
    {props.children}
  </button>
}

function Pagination (props) {
  return (
    <div>
      <Button
        name='prev'
        handlePagination={props.handlePagination}
        disabled={props.disabledPrev}
      > prev </Button>

      <Button
        name='next'
        handlePagination={props.handlePagination}
        disabled={props.disabledNext}
      > next </Button>
    </div>
  )
}

class Paginated extends Component {
  handlePagination = (e) => {
    const pageTurn = e.target.name // either 'prev' or 'next'
    const newPageUrl = this.props.page[pageTurn] // either link or undefined
    // Only dispatch the pageturn if the newPageUrl evaluates to true
    // Pagination option should be diabled but just to be defensive against
    // errors.
    if (newPageUrl) this.props.getNewPage(newPageUrl)
  }

  componentDidMount () {
    if (!this.props.children.length) this.props.getNewPage()
  }

  render () {
    return (
      <div>
        {this.props.children}
        <Pagination
          disabledPrev={this.props.page.prev ? false : true}
          disabledNext={this.props.page.next ? false : true}
          handlePagination={this.handlePagination}
        />
      </div>
    )
  }
}

Paginated.propTypes = {
  page: React.PropTypes.object.isRequired,
  getNewPage: React.PropTypes.func.isRequired,
}

export default Paginated

[Kareeeeem]

I saw vim-plug supports specifying commits and I just went back in time and the issue persists. So it wasnt an update.

I don't get it though because I've been working on this project for a while and today is the first time the highlighting broke.

[amadeus]

@Kareeeeem I think the reason I missed this, is because technically this feature is something from ES7, not ES6. I have a fix ready for this, although it does make me wonder what other ES7 things should be supported that might not be currently?

[amadeus]

I have created a fix for this in #366

[Kareeeeem]

Wow that was quick. And i just installed it to check and it works.

However though as I mentioned above. I have been working on this project for a while and the highlighting broke today. I'm stumped. Anyways I'll keep your fork installed until it's merged. Thanks!

[amadeus]

@Kareeeeem the reason it appeared broken recently, is we just recently merged a bunch of stuff into the master branch, and thus you saw it all of a sudden.

[amadeus]

This issue should now be fixed in develop