javascriptParenObjectLiteral breaks vim-jsx syntax highlighting

Sorry if this is in the wrong place. It's related to JSX syntax highlighting (which yajs.vim doesn't support, so it's when used together with the mxw/vim-jsx plugin) but the offending syntax definition is part of this plugin. So think of it as furthering support for jsx plugins used in conjunction with yajs.vim [=

yajs.vim/syntax/javascript.vim:401:

syntax region javascriptParenObjectLiteral start=/(\_s*\ze{/ end=/)/ contains=javascriptObjectLiteral,@javascriptComments fold

The above definition causes the javascriptArrowFuncArg region to not be captured in the right place and instead be captured within the JSX, in the following example code. Simply commenting out the definition will fix this.

const App = () => (
  <Styles>
    <h1>🏁 React Final Form Example</h1>
    <h2>Synchronous Record-Level Validation</h2>
    <a href="https://github.com/erikras/react-final-form#-react-final-form">
      Read Docs
    </a>
    <Form
      onSubmit={onSubmit}
      validate={values => {
        const errors = {};
        if (!values.firstName) {
          errors.firstName = "Required";
        }
        if (!values.lastName) {
          errors.lastName = "Required";
        }
        if (!values.age) {
          errors.age = "Required";
        } else if (isNaN(values.age)) {
          errors.age = "Must be a number";
        } else if (values.age < 18) {
          errors.age = "No kids allowed";
        }
        return errors;
      }}
      render={({ handleSubmit, reset, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <Field name="firstName">
            {({ input, meta }) => (
              <div>
                <label>First Name</label>
                <input {...input} type="text" placeholder="First Name" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="lastName">
            {({ input, meta }) => (
              <div>
                <label>Last Name</label>
                <input {...input} type="text" placeholder="Last Name" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="age">
            {({ input, meta }) => (
              <div>
                <label>Age</label>
                <input {...input} type="text" placeholder="Age" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
            <button
              type="button"
              onClick={reset}
              disabled={submitting || pristine}
            >
              Reset
            </button>
          </div>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  </Styles>
);

Here's a screenshot of the faulty highlighting. The red text is what is captured as the javascriptArrowFuncArg region. https://a.pomf.cat/ziggfj.png

I'll try and make a pull request if I can figure out the vim regex. But you probably know this best. [=

othree / yajs.vim

javascriptParenObjectLiteral breaks vim-jsx syntax highlighting #157