yajs + es.next.syntax.vim

work fine. but

yajs + es.next.syntax.vim + vim-jsx

break indent when enter pressed.

It seems like that when you export a async function by default:
export default async function somefun(x) { ...
The async keyword is not recognized in this case.

I will try to take a look in the source, but I do not know a lot on vim syntax files. (any resources would be welcome!)

Thanks in advance!

Hi, I'm using yajs and es.next.syntax.vim together.
I'm using flowtype but keywords like const, if, return, etc are highlighted as errors in typed method body. And also some flow keywords like implements, void, boolean are highlighted as errors.

Are there any workaround for this?

I just did a :PluginUpdate and for some reason, import and from are no longer highlighted like before:

vim-javascript has Flow support, but is missing many other ES2016+ features like decorators.

https://github.com/pangloss/vim-javascript/blob/master/extras/flow.vim

My vim syntax skills aren't good enough to splice these together :(

I'm not totally sure if this is the right place to be filing an issue. But here's the problem anyway:

with semicolons:

  componentDidMount = _ => {
    updatePosition(this.refs['SELECT_PEOPLE']);
    updatePosition(this.refs['OPTIONLIST']);
  }

  getOptionList = _ => this.refs['OPTIONLIST'];
  setOption = console.log;

without semicolons:

  componentDidMount = _ => {
    updatePosition(this.refs['SELECT_PEOPLE'])
      updatePosition(this.refs['OPTIONLIST'])
  }

  getOptionList = _ => this.refs['OPTIONLIST']
    setOption = console.log

I'm finding this especially problematic for arrow functions inside class definition.
Don't think this is related, but here's another problem:

    renderHeader = (name) => {
      return (
          <View style={styles.header}>
          <Button style={styles.button}>Cancel</Button>
          <Text style={styles.headerText}>Review for {name}</Text>
          <Button style={styles.button}>Submit</Button>
          </View>
          )
    }

The plugins I'm using:

        Plug 'mxw/vim-jsx'
        Plug 'othree/yajs'
        Plug 'othree/javascript-libraries-syntax.vim'
        Plug 'othree/es.next.syntax.vim'
        Plug 'maxmellon/vim-jsx-pretty'

import() function highlited as javascriptReserved

this is test case:

Vue.component("password-widget",      () => import("js/widgets/password-widget.vue"));
Vue.component("progressbar",          () => import("js/widgets/progressbar.vue"));

The async keyword is currently not highlighted when it precedes a class method name. (I'm not sure if async methods are part of the official spec, but I know that Babel at least supports using async in this context.)

I'm using this following plugins:

Plugin 'othree/yajs.vim'
Plugin 'othree/es.next.syntax.vim'
Plugin 'mxw/vim-jsx'

Sometimes when returning an expression surrounded with (``), the syntax highlighting breaks, e.g.:

const preset = (context, { loose } = {}) => ({
  plugins: [
    ...es2015,
    ...es2016,
    ...es2017,
  ].map((plugin) => [plugin, { loose }]),
})

Hi there! Thanks for the plugins you make.

It seems that this last commit, 29bc7a1, breaks typescript syntax highlighting for decorators while using yats.vim

Hi,

I don't know if this belongs here or not, so feel free to redirect me elsewhere.

I've found that when this plugin is used together with vim-jsx it breaks at inline JSX props containing arrow functions like onClick={() => this.setState({ isShowing: !state.isShowing })}.

Here's the broken screenshot:

I tracked it down to the type hint definition for javascriptArrowFuncDef. Without it, it renders fine:

I have no idea how to fix it though, would you know how to go about it?
Thanks!

Here's the code in case it comes in handy to test it:

import Gif from './Gif.js'
import React from 'react'

class App extends React.Component {
  state = {
    isShowing: true,
  }

  render() {
    const { props, state } = this

    return (
      <div>
        <button onClick={() => ''}>
          {state.isShowing ? 'hide' : 'show'}
        </button>

        {state.isShowing && (
          <div>
            {props.list.map(image => <Gif key={image.id} {...image} />)}
          </div>
        )}
      </div>
    )
  }
}

export default App

With System.import being deprecated and replaced with import('./stuff') it would be nice to have support for it especially since webpack 2 supports import() now: beta-28.

currently it's coded as <javascriptReserved> javascriptReserved> lo<Error>

Hi, I'm not sure if this is intended, however the else part of a ternary conditional is highlighted. This is whether it is a function, variable or string. If I remove es.next.syntax.vim then the highlighting does not occur. I tried various color schemes and can reproduce the results. Is this highlighting intentional or some side effect of another bug? Thanks.

Hi there!

When writing the regexp /\/$/, the plugin will highlight reserved words. For example:

Adding any other text, for example /foo$/, will not cause the issue.

Hello, i'm using es.next.syntax.vim with yajs, and sometimes it incorrectly hilights null as error. Like this:

Here is minimal reproducible input:

'test' ? obj.a : null;

instead of null it will hight as error import() typeof and probably other keywords.

import { static as staticFile } from 'statics'

var static = 'test'

let static = 'test2'

class testing {
  static test
}

Except for the static keyword inside the class, static is highlighted red.

This could be just a question, since I'm using a library that uses the word static as an identifier. Will javascript prevent static from being used as a variable name or identifier in the future?
If so, then I guess it makes sense for this plugin to highlight it as red. Sort of like an extra linting capability of the syntax highlighting.

Hey man!

Thanks for an awesome repo. Was wondering if this is currently supported?

class Hello extends React.Component {
  constructor(props) {
    super(props)
  }

  hello() {
    return "hello, " + this.props.name;
  }

  render() {
    <div>{::hello()}</div>
  }
}

Basically, that ::hello() is the same as hello().bind(this).

Hi, this plugin is amazing and crucial for those of us working with bleeding-edge JavaScript, thank you! I would also like to suggest adding syntax support for more recent Babel proposals as found here https://github.com/babel/proposals including support for optional chaining, for example, to distinguish with other uses of the ? operator such as with https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

Perhaps support for these are already underway or planned for the future, however it would be greatly appreciated if this plugin supported more ES7/ES8+ syntax for those of us who like to live in the future, keep up the good work!