feat(syntax): support short segment syntax, fix #40

after/indent/javascript.vim

@@ -109,7 +109,7 @@ function! GetJsxIndent()
     "   <div>  |   <div>
     "   </div> |   </div>
     " ##);     | );
-    if preline =~# '\v(\s?|\k?)\($'
+    if preline =~# '\v(\s?|\k?)\($' || preline =~# '\v^\s*\<\>'
       return indent(v:lnum - 1) + s:sw()
     endif
 
@@ -123,7 +123,7 @@ function! GetJsxIndent()
     endif
 
     " />
-    if preline =~# '\v^\s*\/?\>$'
+    if preline =~# '\v^\s*\/?\>$' || currline =~# '\v^\s*\<\/\>'
       "let ind = currline =~# '\v^\s*\<\/' ? ind : ind + s:sw()
       let ind = ind + s:sw()
     " }> or }}\> or }}>

after/syntax/javascript.vim

@@ -23,15 +23,15 @@ endif
 " <tag id="sample">
 " s~~~~~~~~~~~~~~~e
 syntax region jsxTag
-      \ matchgroup=jsxTag start=+<[^ }/!?<>"'=:]\@=+
+      \ matchgroup=jsxTag start=+<[^ }/!?<"'=:]\@=+
       \ matchgroup=jsxTag end=+\/\?>+
       \ contained
       \ contains=jsxTagName,jsxAttrib,jsxEqual,jsxString,jsxEscapeJsAttributes
 
 " </tag>
 " ~~~~~~
 syntax match jsxEndTag
-      \ +</[^ /!?<>"']\+>+
+      \ +</[^ /!?<>"']*>+
       \ contained
       \ contains=jsxEndString
 
@@ -47,7 +47,7 @@ syntax match jsxSelfClosingTag +<[^ /!?<>"'=:]\+\%(\%(=>\|[>]\@!\_.\)\)\{-}\/>+
 "  <tag></tag>
 " s~~~~~~~~~~~e
 syntax region jsxRegion
-      \ start=+\%(<\|\w\)\@<!<\z([^ /!?<>"'=:]\+\)+
+      \ start=+\%(<\|\w\)\@<!<\z([^ /!?<>"'=:]*\)+
       \ skip=+<!--\_.\{-}-->+
       \ end=+</\z1\_s\{-}>+
       \ end=+/>+

react.js

@@ -10,7 +10,7 @@ class TodoApp extends React.Component {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.state = {items: [], text: ''};
+    this.state = { items: [], text: '' };
   }
 
   render() {
@@ -27,7 +27,7 @@ class TodoApp extends React.Component {
   }
 
   handleChange(e) {
-    this.setState({text: e.target.value});
+    this.setState({ text: e.target.value });
   }
 
   handleSubmit(e) {
@@ -61,11 +61,11 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = {value: 'Type some *markdown* here!'};
+    this.state = { value: 'Type some *markdown* here!' };
   }
 
   handleChange() {
-    this.setState({value: this.refs.textarea.value});
+    this.setState({ value: this.refs.textarea.value });
   }
 
   getRawMarkup() {
@@ -82,6 +82,9 @@ class MarkdownEditor extends React.Component {
           ref="textarea"
           defaultValue={this.state.value} />
         <h3>Output</h3>
+        <>
+          <div></div>
+        </>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}