babel-sublime: Highlighting breaks if no semicolon after type expressions

I got this working using @Xazzzi’s rough change in the flowtype-declaration section. Notably, I had to the change the sublime-syntax file, not the tmLanguage file: ~/Library/Application Support/Sublime Text 3/Packages/Babel/JavaScript (Babel).sublime-syntax

My final flowtype-declaration looks like:

flowtype-declaration:
  - match: (?<!\.)\b(declare)\b
    scope: support.type.declare.flowtype.js

  - match: (?<!\.)\b(type)\b(?=\s*[_$a-zA-Z])
    scope: support.type.type.flowtype.js
    push:
      - meta_scope: meta.type.flowtype.js
      - match: (?=\s*(;|from))
        pop: true
      - include: flowtype-tokens
      - match: $
        pop: true

  - match: (?<!\.)\b(type)\b(?=\s*{)
    scope: support.type.type.flowtype.js
    push:
      - meta_scope: meta.type.flowtype.js
      - match: (?<=})
        pop: true
      - include: flowtype-brackets
      - include: flowtype-polymorph
      - match: ([_$a-zA-Z][$\w]*)
        scope: entity.name.type.js
      - match: $
        pop: true

starting at L207

Screenshot:

Not sure if it’s related but same for static class properties:

class Component extends React.Component {
  static propTypes = {
    config: PropTypes.object
  }

  static defaultProps = {
    config: {}
  }
}

Thanks @Xazzzi @sankarravi, this has to be a PR. I almost switched to atom, but then found this.

@michaelcarter It hasn’t been released yet. So you have to go the ~/Library/Application Support/Sublime Text 3/Packages/Babel and edit the file JavaScript (Babel).sublime-syntax accordingly:

For sublime, try https://github.com/borela/naomi

@Xazzzi @sankarravi you two are legends! Saved me the effort of switching to vscode 😅

You are welcome to test if it works for you.

@emwalker use Naomi (above in thread).

I wonder if it could be merged. I dont have any experience in language defs DSL’s either and found this fix by trying different things (and failing a lot). This repo seems pretty much abandoned, as last update was 9 month ago. We can ask @zertosh maybe ?

NICE @sankarravi @Xazzzi 👏

Any word on getting this merged into a release?

@mareksuscak @Xazzzi Ok, I’ve got the file there now but editing it does nothing to improve my syntax highlighting. I’m left with code like this:

Drop in a ; at the end of the type declaration and I get this (much better!):

Thanks for all your help so far.

JS Custom provides JSX highlighting and more. It’s based directly on the core JavaScript syntax, so it will never be left behind as the core syntax continues to improve.

Curious what the status of this is. In an earlier PR by @Xazzzi, the fix was placed in the tmLanguage file, and that seems to have caused problems. In @sankarravi’s comment above, by contrast, the fix was placed in the sublime-syntax file, and this worked for me and at least one other person without causing any obvious issues.

This bug makes it hard to want to use flow if your repo doesn’t use semicolons, and the fix seems to be an easy one. @zertosh, are there further considerations we should be aware of, or would you be open to a PR?