Merge pull request #19 from yuezk/syntax-improve

Improve syntax highlighting

Author: MaxMEllon

after/syntax/javascript.vim

@@ -27,7 +27,7 @@ endif
 " <tag id="sample"   />
 " s~~~~~~~~~~~~~~~~~e
 syntax region jsxTag
-      \ start=+<\([^ /!?<>="':]\+\)\@=+
+      \ start=+<\([^/!?<>="':]\+\)\@=+
       \ skip=+</[^ /!?<>"']\+>+
       \ end=+/\@<!>+
       \ end=+\(/>\)\@=+
@@ -45,9 +45,9 @@ syntax region jsxTag
 " s~~~~e
 " A big start regexp borrowed from https://git.io/vDyxc
 syntax region jsxRegion
-      \ start=+\(\((\|{\|}\|\[\|\]\|,\|&&\|||\|?\|:\|=\|=>\|\Wreturn\|^return\|\Wdefault\|^\|>\)\_s*\)\@<=<\z([_\$a-zA-Z]\(\.\?[\$0-9a-zA-Z]\+\)*\)+
+      \ start=+\(\((\|{\|}\|\[\|\]\|,\|&&\|||\|?\|:\|=\|=>\|\Wreturn\|^return\|\Wdefault\|^\|>\)\_s*\)\@<=<\_s*\z([_\$a-zA-Z]\(\.\?[\$0-9a-zA-Z]\+\)*\)+
       \ skip=+<!--\_.\{-}-->+
-      \ end=+</\z1>+
+      \ end=+</\_s*\z1>+
       \ end=+/>+
       \ fold
       \ contains=jsxRegion,jsxCloseString,jsxCloseTag,jsxTag,jsxComment,jsFuncBlock,
@@ -58,9 +58,9 @@ syntax region jsxRegion
 " </tag>
 " ~~~~~~
 syntax match jsxCloseTag
-      \ +</[^ /!?<>"']\+>+
+      \ +</\_s*[^/!?<>"']\+>+
       \ contained
-      \ contains=jsxNamespace,jsxAttribPunct
+      \ contains=jsxNamespace
 
 syntax match jsxCloseString
       \ +/>+
@@ -76,20 +76,17 @@ syntax match jsxEntityPunct contained "[&.;]"
 " <tag key={this.props.key}>
 "  ~~~
 syntax match jsxTagName
-    \ +[<]\@<=[^ /!?<>"']\++
+    \ +<\_s*\zs[^/!?<>"']\++
     \ contained
     \ display
 
 " <tag key={this.props.key}>
 "      ~~~
 syntax match jsxAttrib
-    \ +[-'"<]\@<!\<[a-zA-Z:_][-.0-9a-zA-Z0-9:_]*\>\(['"]\@!\|$\)+
+    \ +\(\(<\_s*\)\@<!\_s\)\@<=\<[a-zA-Z_][-0-9a-zA-Z_]*\>\(\_s\+\|\_s*[=/>]\)\@=+
     \ contained
-    \ contains=jsxAttribPunct,jsxAttribHook
     \ display
 
-syntax match jsxAttribPunct +[:.]+ contained display
-
 " <tag id="sample">
 "        ~
 " syntax match jsxEqual +=+ display

sample.js

@@ -34,11 +34,11 @@ class Hoge extends React.Component {
     super(props);
     this.state = { };
     if (foo <= 300) {
-      return <div style={{margin:0}}>
+      return <  div style={{margin:0}}>
         <div>hello, world</div>
         <table.row hello="world">
         </table.row>
-      </div>
+      </ div>
     }
   }
 
@@ -92,7 +92,7 @@ class Hoge extends React.Component {
       <div>
         {(hoge => {
           if (hoge) {
-            return <div />;
+            return <div foo-bar foo/>;
           }
         })()}
       </div>
@@ -103,8 +103,10 @@ class Hoge extends React.Component {
 export const Hoge = () => (
   <div>
     <div
+      hoge
       hoge={aaa}
       hoge={aaa}
+      hoge
     ></div>
     <div
       hoge={aaa}