🐛 Fix #6 Indentation breaks when passing javascript object as attribute to element.

Author: MaxMEllon

after/indent/javascript.vim

@@ -35,6 +35,7 @@ else
 endif
 
 let s:endtag = '^\s*\/\?>\s*;\='
+let s:real_endtag = '\s*<\/\+[A-Za-z]*>'
 
 let s:has_vim_javascript = exists('*GetJavascriptIndent')
 
@@ -68,14 +69,38 @@ function! SynJSXDepth(syns)
   return len(filter(copy(a:syns), 'v:val ==# "jsxRegion"'))
 endfunction
 
-function! SynJsFuncBrace(syns)
+function! SynJsFuncBraces(syns)
   return len(filter(copy(a:syns), 'v:val ==# "jsFuncBraces"'))
 endfunction
 
+function! SynJsRepeatBraces(syns)
+  return len(filter(copy(a:syns), 'v:val ==# "jsRepeatBraces"'))
+endfunction
+
+function! SynJsIfElseBlock(syns)
+  return len(filter(copy(a:syns), 'v:val ==# "jsIfElseBlock"'))
+endfunction
+
 function! SynJSXCloseTag(syns)
   return len(filter(copy(a:syns), 'v:val ==# "jsxCloseTag"'))
 endfunction
 
+function! SynJsReturn(syns)
+  return len(filter(copy(a:syns), 'v:val ==# "jsReturn"'))
+endfunction
+
+function! SynJsxAttrib(syns)
+  return len(filter(copy(a:syns), 'v:val ==# "jsxAttrib"'))
+endfunction
+
+function! SynJsxTag(syns)
+  return len(filter(copy(a:syns), 'v:val ==# "jsxTag"'))
+endfunction
+
+function! SynJsxEscapeJs(syns)
+  return len(filter(copy(a:syns), 'v:val ==# "jsxEscapeJs"'))
+endfunction
+
 function! SynJSXContinues(cursyn, prevsyn)
   let curdepth = SynJSXDepth(a:cursyn)
   let prevdepth = SynJSXDepth(a:prevsyn)
@@ -93,10 +118,6 @@ function! GetJsxIndent()
         \ SynJSXContinues(cursyn, prevsyn)
     let ind = XmlIndentGet(v:lnum, 0)
 
-    if getline(v:lnum - 1) =~? '(' || getline(v:lnum - 1) =~? '{'
-      let ind = ind + s:sw()
-    endif
-
     if getline(v:lnum) =~? s:endtag
       let ind = ind - s:sw()
     endif
@@ -105,41 +126,31 @@ function! GetJsxIndent()
       let ind = ind + s:sw()
     endif
 
-    " <div>                  | <div>
-    "   {(test => test.length|   {(test => test.length
-    "      ? 'foo'           |      ? 'foo'
-    "      : 'bar'           |      : 'bar'
-    "   ####)()}             |   )()} <----
-    " </div>                 | </div>
-    if getline(v:lnum - 1) =~? ':' && getline(v:lnum - 2) =~? '?'
-      let ind = ind - s:sw() * 2
-    endif
 
-    " <div       | <div
-    "   foo={    |   foo={
-    "     <Bar />|     <Bar />
-    "   ##}      |   } <--
-    " >          | >
-    if getline(v:lnum) =~? '}' && SynJSXCloseTag(prevsyn) && !SynJsFuncBrace(nextsyn)
-      let ind = ind - s:sw()
+    " <div           | <div
+    "   hoge={       |   hoge={
+    "   <div></div>  |   ##<div></div>
+    if SynJsxEscapeJs(prevsyn) && !(getline(v:lnum - 1) =~? '}') && getline(v:lnum - 1) =~? '{'
+      let ind = ind + s:sw()
     endif
 
-    " </div>               | </div>
-    "   {(hoge => {        |   {(hoge => {
-    "     if (hoge) {      |     if (hoge) {
-    "       return <div />;|       return <div />;
-    "     }                |     }
-    "   })()}              |   })()}
-    " ##</div>             | </div> <--
-    if match(getline(v:lnum), '<[^!?<>]\+>', '') != -1 && SynJsFuncBrace(prevsyn)
+    " <div            | <div
+    "   hoge={        |   hoge={
+    "     <div></div> |     <div></div>
+    "     }           |   }##
+    if SynJsxEscapeJs(cursyn) && getline(v:lnum) =~? '}' && !(getline(v:lnum) =~? '{')
       let ind = ind - s:sw()
     endif
 
     " return ( | return (
     "   <div>  |   <div>
     "   </div> |   </div>
     " ##);     | ); <--
-    if getline(v:lnum) =~? ');'
+    if getline(v:lnum) =~? ');\?' && SynJSXCloseTag(prevsyn)
+      let ind = ind - s:sw()
+    endif
+
+    if (SynJsIfElseBlock(cursyn) || SynJsRepeatBraces(cursyn)) && SynJSXCloseTag(prevsyn)
       let ind = ind - s:sw()
     endif
   else

sample.js

@@ -2,19 +2,33 @@ class Hoge extends React.Component {
   constructor(props) {
     super(props);
     this.state = { };
-    if ( foo <= 300 ) {
-
+    if (foo <= 300) {
+      return <div style={{margin:0}}>
+        Hello world
+      </div>
     }
   }
 
+  hoge() {
+    Hoge.poge(
+      <div>
+        <div></div>
+        {this.hoge}
+        <div></div>
+      </div>
+    );
+  }
+
   renderHoge() {
     return (
       <div
         foo={
           <bar foo='aaa' >
             <div
               hoge={
-                <div></div>
+                <div
+                  hoge={'aaa'}
+                ></div>
               }
             />
           </bar>
@@ -40,6 +54,28 @@ class Hoge extends React.Component {
   }
 }
 
+export const Hoge = () => (
+  <div>
+    <div
+      hoge={aaa}
+      hoge={aaa}
+    ></div>
+    <div
+      hoge={aaa}
+      hoge={aaa}
+    />
+  </div>
+)
+
+ReactDOM.render(
+  <div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>,
+  document.getElementById('body');
+)
+
 const hoge = () => {
   ReactDOM.render(
     <div></div>,