Improve syntax highlighting, fix #14 By yuezk

Improve syntax highlighting, fix #14

Author: MaxMEllon

after/syntax/javascript.vim

@@ -21,34 +21,39 @@ if exists('s:current_syntax')
   let b:current_syntax = s:current_syntax
 endif
 
-"  <tag></tag>
-" s~~~~~~~~~~~e
+" <tag id="sample">
+" s~~~~~~~~~~~~~~~e
+" and self close tag
+" <tag id="sample"   />
+" s~~~~~~~~~~~~~~~~~e
+syntax region jsxTag
+      \ start=+<\([^ /!?<>="':]\+\)\@=+
+      \ skip=+</[^ /!?<>"']\+>+
+      \ end=+/\@<!>+
+      \ end=+\(/>\)\@=+
+      \ contained
+      \ contains=jsxTag,jsxError,jsxTagName,jsxAttrib,jsxEqual,jsxString,jsxEscapeJs,
+                \jsxCloseString
+      \ keepend
+      \ extend
+
+
+" <tag></tag>
+" s~~~~~~~~~e
+" and self close tag
+" <tag/>
+" s~~~~e
 syntax region jsxRegion
       \ start=+<\z([^ /!?<>="':]\+\)+
       \ skip=+<!--\_.\{-}-->+
-      \ end=+</\z1\_\s\{-}[^(=>)]>+
-      \ end=+>\n\?\s*)\@=+
-      \ end=+>\n\?\s*}\@=+
-      \ end=+>;\@=+
-      \ end=+\n\?\s\*,+
-      \ end=+\s*>,\@=+
-      \ end=+\s\+:\@=+
+      \ end=+</\z1>+
+      \ end=+/>+
       \ fold
-      \ contains=jsxCloseString,jsxCloseTag,jsxTag,jsxComment,jsFuncBlock,
+      \ contains=jsxRegion,jsxCloseString,jsxCloseTag,jsxTag,jsxComment,jsFuncBlock,
                 \@Spell
       \ keepend
       \ extend
 
-" <tag id="sample">
-" s~~~~~~~~~~~~~~~e
-syntax region jsxTag
-      \ start=+<[^ /!?<>"':]\@=+
-      \ end=+>+
-      \ matchgroup=jsxCloseTag end=+/>+
-      \ contained
-      \ contains=jsxError,jsxTagName,jsxAttrib,jsxEqual,jsxString,jsxEscapeJs,
-                \jsxCloseString
-
 " </tag>
 " ~~~~~~
 syntax match jsxCloseTag

sample.js

@@ -1,3 +1,22 @@
+class App extends Component {
+  render() {
+    // NOTCE: no `;` after.
+    const arr = <div></div>
+
+    // Codes highlight incorrectly
+    var foo = 'foo';
+    if (foo === 'foo') {
+      console.log('hello');
+    }
+
+    var el = a < 0
+      ? <div></div>
+      : <a></a>
+
+    var b = el || <div>hello, world</div>
+  }
+}
+
 class Hoge extends React.Component {
   constructor(props) {
     super(props);