feat: modify to fix vue syntax and indent

README.md

@@ -1,2 +1,5 @@
 # vim-vue
-Vue plugin for vim
+
+Vim plugin for `.vue` file syntax and indent. Mainly inspired by [mxw/vim-jsx][1]
+
+[1]: https://github.com/mxw/vim-jsx "mxw: vim-jsx"

after/ftplugin/vue.vim

@@ -1 +0,0 @@
-setlocal suffixesadd+=.vue

after/indent/vue.vim

@@ -1,114 +1,81 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim indent file
+" Vim ftplugin file
 "
-" Language: JSX (JavaScript)
+" Language: Vue (Wepy)
-" Maintainer: Max Wang <mxawng@gmail.com>
+" Maintainer: leafOfTree <leafvocation@gmail.com>
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 
+se sw=2 ts=2
+
 " Save the current JavaScript indentexpr.
-let b:jsx_js_indentexpr = &indentexpr
+let b:vue_js_indentexpr = &indentexpr
 
-" Prologue; load in XML indentation.
+" Prologue; load XML indentation.
 if exists('b:did_indent')
   let s:did_indent=b:did_indent
   unlet b:did_indent
 endif
-exe 'runtime! indent/xml.vim'
+
+runtime! indent/xml.vim
+
 if exists('s:did_indent')
   let b:did_indent=s:did_indent
 endif
 
-setlocal indentexpr=GetJsxIndent()
+" JavaScript indentkeys
-
-" JS indentkeys
 setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
 " XML indentkeys
 setlocal indentkeys+=*<Return>,<>>,<<>,/
 
-" Multiline end tag regex (line beginning with '>' or '/>')
+let s:vue_tag = '\v\<\/?(template|script|style)'
-let s:endtag = '^\s*\/\?>\s*;\='
+let s:end_tag = '^\s*\/\?>\s*;\='
 
-" Get all syntax types at the beginning of a given line.
+setlocal indentexpr=GetVueIndent()
-fu! SynSOL(lnum)
-  return map(synstack(a:lnum, 1), 'synIDattr(v:val, "name")')
-endfu
 
-" Get all syntax types at the end of a given line.
+function! SynsEOL(lnum)
-fu! SynEOL(lnum)
   let lnum = prevnonblank(a:lnum)
   let col = strlen(getline(lnum))
   return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
-endfu
+endfunction
 
-" Check if a syntax attribute is XMLish.
+function! SynsHTMLish(syns)
-fu! SynAttrXMLish(synattr)
+  let last_syn = get(a:syns, -1)
-  return a:synattr =~ "^xml" || a:synattr =~ "^jsx"
+  return last_syn =~? '\v^(html)'
-endfu
+endfunction
 
-" Check if a synstack is XMLish (i.e., has an XMLish last attribute).
+function! SynsVueScope(syns)
-fu! SynXMLish(syns)
+  let first_syn = get(a:syns, 0)
-  return SynAttrXMLish(get(a:syns, -1))
+  return first_syn =~? '\v^(vueStyle)|(vueTemplate)|(vueScript)'
-endfu
+endfunction
 
-" Check if a synstack denotes the end of a JSX block.
+function! GetVueIndent()
-fu! SynJSXBlockEnd(syns)
+  let curline = getline(v:lnum)
-  return get(a:syns, -1) =~ '\%(js\|javascript\)Braces' &&
+  let cursyns = SynsEOL(v:lnum)
-       \ SynAttrXMLish(get(a:syns, -2))
+  let prevsyns = SynsEOL(v:lnum - 1)
-endfu
 
-" Determine how many jsxRegions deep a synstack is.
+  if SynsHTMLish(prevsyns)
-fu! SynJSXDepth(syns)
-  return len(filter(copy(a:syns), 'v:val ==# "jsxRegion"'))
-endfu
-
-" Check whether `cursyn' continues the same jsxRegion as `prevsyn'.
-fu! SynJSXContinues(cursyn, prevsyn)
-  let curdepth = SynJSXDepth(a:cursyn)
-  let prevdepth = SynJSXDepth(a:prevsyn)
-
-  " In most places, we expect the nesting depths to be the same between any
-  " two consecutive positions within a jsxRegion (e.g., between a parent and
-  " child node, between two JSX attributes, etc.).  The exception is between
-  " sibling nodes, where after a completed element (with depth N), we return
-  " to the parent's nesting (depth N - 1).  This case is easily detected,
-  " since it is the only time when the top syntax element in the synstack is
-  " jsxRegion---specifically, the jsxRegion corresponding to the parent.
-  return prevdepth == curdepth ||
-      \ (prevdepth == curdepth + 1 && get(a:cursyn, -1) ==# 'jsxRegion')
-endfu
-
-" Cleverly mix JS and XML indentation.
-fu! GetJsxIndent()
-  let cursyn  = SynSOL(v:lnum)
-  let prevsyn = SynEOL(v:lnum - 1)
-
-  " Use XML indenting iff:
-  "   - the syntax at the end of the previous line was either JSX or was the
-  "     closing brace of a jsBlock whose parent syntax was JSX; and
-  "   - the current line continues the same jsxRegion as the previous line.
-  if (SynXMLish(prevsyn) || SynJSXBlockEnd(prevsyn)) &&
-        \ SynJSXContinues(cursyn, prevsyn)
     let ind = XmlIndentGet(v:lnum, 0)
 
     " Align '/>' and '>' with '<' for multiline tags.
-    if getline(v:lnum) =~? s:endtag
+    if curline =~? s:end_tag 
       let ind = ind - &sw
     endif
-
-    " Then correct the indentation of any JSX following '/>' or '>'.
-    if getline(v:lnum - 1) =~? s:endtag
-      let ind = ind + &sw
-    endif
   else
-    if len(b:jsx_js_indentexpr)
+    if curline =~ s:vue_tag
-      " Invoke the base JS package's custom indenter.  (For vim-javascript,
+      let ind = 0
-      " e.g., this will be GetJavascriptIndent().)
-      let ind = eval(b:jsx_js_indentexpr)
     else
-      let ind = cindent(v:lnum)
+      if len(b:vue_js_indentexpr)
+        let ind = eval(b:vue_js_indentexpr)
+      else
+        let ind = cindent(v:lnum)
+      endif
     endif
   endif
 
+  if SynsVueScope(cursyns) && ind == 0
+    let ind = &sw
+  endif
+
   return ind
-endfu
+endfunction

after/syntax/vue.vim

@@ -1,4 +1,3 @@
-echom 'vim for vue'
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim syntax file
 "
@@ -9,40 +8,19 @@ echom 'vim for vue'
 " CREDITS: Inspired by mxw/vim-jsx.
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+unlet b:current_syntax
+" runtime! syntax/html.vim
+syn include @HTMLSyntax syntax/html.vim
 
-" load in XML syntax.
+unlet! b:current_syntax
-if exists('b:current_syntax')
+syn include @CSSSyntax syntax/css.vim
-  let s:current_syntax=b:current_syntax
-  unlet b:current_syntax
-endif
-syn include @XMLSyntax syntax/xml.vim
-if exists('s:current_syntax')
-  let b:current_syntax=s:current_syntax
-endif
 
-" load in HTML syntax
+let b:current_syntax='vue'
-if exists('b:current_syntax')
-  let s:current_syntax=b:current_syntax
-  unlet b:current_syntax
-endif
-syn include @HTMLSyntax syntax/css.vim
-if exists('s:current_syntax')
-  let b:current_syntax=s:current_syntax
-endif
-
-" load in CSS syntax
-if exists('b:current_syntax')
-  let s:current_syntax=b:current_syntax
-  unlet b:current_syntax
-endif
-syn include @CSSSyntax syntax/javascript.vim
-if exists('s:current_syntax')
-  let b:current_syntax=s:current_syntax
-endif
 
 " Find tag <script> / <style> and enable javascript / css syntax
-syn region vueScript contained start=+<script\(\s.\{-}\)\?>+ end=+</script>+ keepend contains=@jsAll,jsImport,jsExport,@XMLSyntax
+syn region vueTemplate start=+<template\(\s.\{-}\)\?>+ end=+</template>+ keepend contains=@HTMLSyntax
-syn region vueStyle contained start=+<style\(\s.\{-}\)\?>+ end=+</style>+ keepend contains=@CSSSyntax
+syn region vueScript start=+<script\(\s.\{-}\)\?>+ end=+</script>+ keepend contains=@jsAll,jsImport,jsExport
+syn region vueStyle start=+<style\(\s.\{-}\)\?>+ end=+</style>+ keepend contains=@CSSSyntax
 
 " Officially, vim-jsx depends on the pangloss/vim-javascript syntax package
 " (and is tested against it exclusively).  However, in practice, we make some
@@ -58,21 +36,3 @@ syn region vueStyle contained start=+<style\(\s.\{-}\)\?>+ end=+</style>+ keepen
 " Vue attributes should color as JS.  Note the trivial end pattern; we let
 " jsBlock take care of ending the region.
 syn region xmlString contained start=+{+ end=++ contains=jsBlock,javascriptBlock
-
-" Note that we prohibit Vue tags from having a < or word character immediately
-" preceding it, to avoid conflicts with, respectively, the left shift operator
-" and generic Flow type annotations (http://flowtype.org/).
-syn region vueRegion
-  \ contains=@Spell,@XMLSyntax,jsBlock,javascriptBlock,vueScript,vueStyle
-  \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\>[:,]\@!\)\([^>]*>(\)\@!+
-  \ skip=+<!--\_.\{-}-->+
-  \ end=+</\z1\_\s\{-}>+
-  \ end=+/>+
-  \ keepend
-  \ extend
-"
-" Add vueRegion to the lowest-level JS syntax cluster.
-syn cluster jsExpression add=vueRegion
-
-" Allow vueRegion to contain reserved words.
-syn cluster javascriptNoReserved add=vueRegion