Load all tags after syntax instead of only style

Add Stylus support

.gitignore

@@ -1 +1,3 @@
 README.html
+test.vue
+.DS_STORE

.travis.yml

@@ -0,0 +1,19 @@
+dist: focal
+
+language: minimal
+  
+before_install:
+  - sudo add-apt-repository ppa:neovim-ppa/stable -y
+  - sudo apt-get update
+  - sudo apt-get -y install neovim
+
+install:
+  - git clone https://github.com/leafOfTree/test ../test --depth=1 
+
+  - git clone https://github.com/digitaltoad/vim-pug ../vim-pug --depth=1
+  - git clone https://github.com/kchmck/vim-coffee-script ../vim-coffee-script --depth=1
+  - git clone https://github.com/leafgarland/typescript-vim ../typescript-vim --depth=1
+  - git clone https://github.com/iloginow/vim-stylus.git ../vim-stylus --depth=1
+
+script:
+  - bash ../test/start.sh vue vim-vue-plugin

README.md

@@ -1,81 +1,243 @@
+<img src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-icon.svg" width="60" height="60" alt="icon" align="left"/>
+
 # vim-vue-plugin
 
-Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][1].
+<p align="center">
+<a href="https://github.com/altercation/vim-colors-solarized">
+<img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png" width="260" />
+</a>
+</p>
 
-## Install
+Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][1]
 
-- Use [VundleVim][2]
+## Installation
 
-        Plugin 'leafOfTree/vim-vue-plugin'
+You could install it just like other plugins. The filetype will be set to `vue`. Feel free to open an issue or a pull request if any questions
 
-- Use [vim-pathogen][5]
+<details>
+<summary><a>How to install</a></summary>
 
-        cd ~/.vim/bundle && \
-        git clone https://github.com/leafOfTree/vim-vue-plugin
+- [VundleVim][2]
 
-- Use [vim-plug][7]
+    ```vim
+    Plugin 'leafOfTree/vim-vue-plugin'
+    ```
 
-        Plug 'leafOfTree/vim-vue-plugin'
-        :PlugInstall
+- [vim-pathogen][5]
 
-- Or manually, clone this plugin, drop it in custom `path/to/this_plugin`, and add it to `rtp` in vimrc
+    ```
+    cd ~/.vim/bundle
+    git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1
+    ```
 
-        set rpt+=path/to/this_plugin
+- [vim-plug][7]
 
-Plugin works if `filetype` is set to `vue`. Please stay up to date. Feel free to open an issue or a pull request.
+    ```vim
+    Plug 'leafOfTree/vim-vue-plugin'
+    :PlugInstall
+    ```
 
-**Note**: `filetype` used to be `javascript.vue`, which caused `javascript`syntax to be loaded multiple times and a significant delay. Now `filetype` is set to `vue` and autocmds for `javascript` have to be manually added for `vue`.
+- Or manually, clone this plugin to `path/to/this_plugin`, and add it to `rtp` in vimrc
+
+    ```vim
+    set rtp+=path/to/this_plugin
+
+    " If filetype is not set to 'vue', try
+    filetype off
+    set rtp+=path/to/this_plugin
+    filetype plugin indent on
+    ```
+<br />
+</details>
 
 ## How it works
 
-Since `.vue` is a combination of CSS, HTML and JavaScript, so is `vim-vue-plugin`. (Like XML and JavaScript for `.jsx`).
+It loads multiple syntax and indent files for `.vue` and enables them to work together
 
-Supports
-
-- Pug with [vim-pug][4] (see Configuration).
-- Less with or without [vim-less][9] (see Configuration).
-- Sass/Scss (see Configuration).
-- `.wpy` files from [WePY][6]
+- Blocks (both `template/script/style` and custom blocks) with any specified syntax, including `pug, typescript, coffee, scss, sass, less, stylus, ...`. Syntax plugins need to be installed if not provided by Vim
+- Attribute, directive, and keyword highlight
+- [emmet-vim][10] `html, javascript, css, ...` filetype detection
+- Context-based behavior, such as to get current tag or syntax, and set local options like `commentstring`
+- A built-in `foldexpr` foldmethod
 
 ## Configuration
 
-Set global variable to `1` to enable or `0` to disable.
+`g:vim_vue_plugin_config` is the only configuration. You can copy its **default value** below as a starting point
 
-Ex:
+```vim
+let g:vim_vue_plugin_config = { 
+      \'syntax': {
+      \   'template': ['html'],
+      \   'script': ['javascript'],
+      \   'style': ['css'],
+      \},
+      \'full_syntax': [],
+      \'initial_indent': [],
+      \'attribute': 0,
+      \'keyword': 0,
+      \'foldexpr': 0,
+      \'debug': 0,
+      \}
+```
 
-    let g:vim_vue_plugin_load_full_syntax = 1
+### Description
 
-| variable                              | description                                                                                            | default                    |
-|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|----------------------------|
-| `g:vim_vue_plugin_load_full_syntax`\* | Enable: load all syntax files in `runtimepath` to enable related syntax plugins. Disable: only in `syntax`, `~/.vim/syntax` and `$VIM/vimfiles/syntax` | 0 |
-| `g:vim_vue_plugin_use_pug`\*          | Enable `vim-pug` pug syntax for `<template lang="pug">`.                                               | 0 |
-| `g:vim_vue_plugin_use_less`           | Enable less syntax for `<style lang="less">`.                                                          | 0 |
-| `g:vim_vue_plugin_use_sass`           | Enable sass/scss syntax for `<style lang="sass">`(or scss).                                            | 0 |
-| `g:vim_vue_plugin_debug`              | Echo debug message in `messages` list. Useful to debug if unexpendted indents occur.                   | 0 |
-| `g:vim_vue_plugin_has_init_indent`    | Initially indent one tab inside `style/script` tags.                                                   | 0 for `.vue`. 1 for `.wpy` |
+It has the following options
 
-\*: Vim may be slow if the feature is enabled. Find balance between syntax highlight and speed. By the way, custom syntax could be added in `~/.vim/syntax` or `$VIM/vimfiles/syntax`.
+- **syntax**
+    - **key**: *string*. Block tag name
+    - **value**: *string list*. Block syntax
+        - `lang="..."` on block tag decides the effective syntax
+        - When no valid `lang="..."` is present, the first syntax in the list will be used.
+        - By default, only syntax files from `['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']` are loaded. If none is found, then **full** syntax files, including those from plugins, will be loaded
+- **full_syntax**: *string list*. Syntax whose **full** syntax files will always be loaded
+- **initial_indent**: *string list*. Tag/syntax with initial one tab indent. The format can be `tag.syntax`, `tag`, or `syntax`
 
-## Screenshot
+For *boolean* options below, set `1` to enable or `0` to disable
 
-![screenshot](https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png)
+- **attribute**: *boolean*. Highlight attribute as expression instead of string
+- **keyword** : *boolean*. Highlight keyword such as `data`, `methods`, ...
+- **foldexpr**: *boolean*. Enable built-in `foldexpr` foldmethod
+- **debug**: *boolean*. Echo debug messages in `messages` list
+
+### Example
+
+Only for demo. Try to set syntax as little as possible for performance.
+
+```vim
+let g:vim_vue_plugin_config = { 
+      \'syntax': {
+      \   'template': ['html', 'pug'],
+      \   'script': ['javascript', 'typescript', 'coffee'],
+      \   'style': ['css', 'scss', 'sass', 'less', 'stylus'],
+      \   'i18n': ['json', 'yaml'],
+      \   'route': 'json',
+      \},
+      \'full_syntax': ['json'],
+      \'initial_indent': ['i18n', 'i18n.json', 'yaml'],
+      \'attribute': 1,
+      \'keyword': 1,
+      \'foldexpr': 1,
+      \'debug': 0,
+      \}
+```
+
+<img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vue-config-example.png" />
+
+You can still change options later as if they are global variables.
+
+```vim
+let g:vim_vue_plugin_config.foldexpr = 0
+```
+
+Note
+
+- `typescript` matches `lang="ts"`
+- `list` options can be `string` if only one
+- The first item of syntax list will be used if no "lang=..."
+- For `.wpy`, `initial_indent` defaults to `['script', 'style']`
+- You could check `:h dict` and `:h list` for details about the complex data types
+
+## Context-based behavior
+
+There are more than one language in `.vue` file. Different mappings, completions, and local options may be required under different tags or syntax (current language filetype)
+
+This plugin provides functions to get the tag/syntax where the cursor is in
+
+- `GetVueTag() => String` Return value is one of `'template', 'script', 'style'`
+
+    ```vim
+    " Example
+    autocmd FileType vue inoremap <buffer><expr> : InsertColon()
+
+    function! InsertColon()
+      let tag = GetVueTag()
+      return tag == 'template' ? ':' : ': '
+    endfunction
+    ```
+
+- `GetVueSyntax() => String` Return value is one of `'html', 'javascript', 'css', 'scss', ...`
+
+- `OnChangeVueSyntax(syntax)` An event listener that is called when syntax changes
+
+    You can define it in your `vimrc` to set local options based on current syntax
+
+    ```vim
+    " Example: set local options based on syntax
+    function! OnChangeVueSyntax(syntax)
+      echom 'Syntax is '.a:syntax
+      if a:syntax == 'html'
+        setlocal commentstring=<!--%s-->
+        setlocal comments=s:<!--,m:\ \ \ \ ,e:-->
+      elseif a:syntax =~ 'css'
+        setlocal comments=s1:/*,mb:*,ex:*/ commentstring&
+      else
+        setlocal commentstring=//%s
+        setlocal comments=sO:*\ -,mO:*\ \ ,exO:*/,s1:/*,mb:*,ex:*/,://
+      endif
+    endfunction
+    ```
+
+> It has been renamed to `GetVueSyntax, OnChangeVueSyntax` from `GetVueSubtype, OnChangeVueSubtype` for consistency
+
+### emmet-vim
+
+Currently emmet-vim works regarding your `html, javascript, css, ...` emmet settings, but it depends on how emmet-vim gets `filetype` and may change in the future. Feel free to report an issue if any problem appears
+
+For `sass` using emmet-vim, please check out [this issue][17]
+
+## Avoid overload
+
+Since there are many sub-languages included, most delays come from syntax files overload. A variable named `b:current_loading_main_syntax` is set to `vue` which can be used as a loading condition if you'd like to manually find and modify the syntax files causing overload
+
+For example, the built-in syntax `sass.vim` and `less.vim` in vim8.1 runtime and `pug.vim` in vim-pug/syntax always load `css.vim` which this plugin already loads. It can be optimized like
+
+`$VIMRUNTIME/syntax/sass.vim`
+```diff
+- runtime! syntax/css.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/css.vim
++ endif
+```
+
+`$VIMRUNTIME/syntax/vue.vim`
+```diff
+-   runtime! syntax/html.vim
++ if !exists("b:current_loading_main_syntax")
++   runtime! syntax/html.vim
++ endif
+```
 
 ## Acknowledgments & Refs
 
-[mxw/vim-jsx][1]
+- [mxw/vim-jsx][1]
 
-[Single File Components][3]
+- [Single File Components][3]
+
+## See also
+
+- [vim-svelte-plugin][9] 
+
+    [Svelte][13] is a compilation web framework that shares a similar syntax to Vue
 
 ## License
 
-This plugin is under [The Unlicense][8].
+This plugin is under [The Unlicense][8]. Other than this, `lib/indent/*` files are extracted from vim runtime
 
 [1]: https://github.com/mxw/vim-jsx "mxw: vim-jsx"
 [2]: https://github.com/VundleVim/Vundle.vim
 [3]: https://vuejs.org/v2/guide/single-file-components.html
 [4]: https://github.com/digitaltoad/vim-pug
 [5]: https://github.com/tpope/vim-pathogen
-[6]: https://tencent.github.io/wepy
+[6]: https://github.com/Tencent/wepy
 [7]: https://github.com/junegunn/vim-plug
 [8]: https://choosealicense.com/licenses/unlicense/
-[9]: https://github.com/groenewege/vim-less
+[9]: https://github.com/leafOfTree/vim-svelte-plugin
+[10]: https://github.com/mattn/emmet-vim
+[11]: https://github.com/kchmck/vim-coffee-script
+[12]: https://travis-ci.com/leafOfTree/vim-vue-plugin.svg?branch=master
+[13]: https://svelte.dev/
+[14]: https://github.com/leafgarland/typescript-vim
+[15]: https://github.com/HerringtonDarkholme/yats.vim
+[16]: https://github.com/iloginow/vim-stylus
+[17]: https://github.com/leafOfTree/vim-vue-plugin/issues/23#issuecomment-628306633

_config.yml

@@ -1 +1,4 @@
-theme: jekyll-theme-cayman
+theme: jekyll-theme-cayman
+markdown: CommonMarkGhPages
+commonmark: 
+  extensions: ["table"]

autoload/vue.vim

@@ -0,0 +1,334 @@
+" Since vue#Log and vue#GetConfig are always called 
+" in syntax and indent files,
+" this file will be sourced on opening the first vue file
+
+function! s:GetConfig(name, default)
+  let name = 'g:vim_vue_plugin_'.a:name
+  let value =  exists(name) ? eval(name) : a:default
+
+  if a:name == 'config'
+    let value = s:MergeUserConfigIntoDefault(value)
+  endif
+
+  return value
+endfunction
+
+function! s:MergeUserConfigIntoDefault(user)
+  let default = { 
+        \'syntax': {
+        \   'template': ['html'],
+        \   'script': ['javascript'],
+        \   'style': ['css'],
+        \},
+        \'full_syntax': [],
+        \'initial_indent': [],
+        \'attribute': 0,
+        \'keyword': 0,
+        \'foldexpr': 0,
+        \'debug': 0,
+        \}
+
+  let user = a:user
+  for key in keys(default)
+    if has_key(user, key)
+      let default[key] = user[key]
+    endif
+  endfor
+
+  " For backwards compatibility with 'init_indent'
+  if !has_key(user, 'initial_indent')
+    if has_key(user, 'init_indent')
+          \ ? user.init_indent
+          \ : expand('%:e') == 'wpy'
+      let default.initial_indent = ['script', 'style']
+    endif
+  endif
+
+  return default
+endfunction
+
+function! s:CheckVersion()
+  if !exists('g:vim_vue_plugin_config')
+    let prev_configs = [
+          \'g:vim_vue_plugin_load_full_syntax',
+          \'g:vim_vue_plugin_use_pug',
+          \'g:vim_vue_plugin_use_coffee',
+          \'g:vim_vue_plugin_use_typescript',
+          \'g:vim_vue_plugin_use_less',
+          \'g:vim_vue_plugin_use_sass',
+          \'g:vim_vue_plugin_use_scss',
+          \'g:vim_vue_plugin_use_stylus',
+          \'g:vim_vue_plugin_has_init_indent',
+          \'g:vim_vue_plugin_highlight_vue_attr',
+          \'g:vim_vue_plugin_highlight_vue_keyword',
+          \'g:vim_vue_plugin_use_foldexpr',
+          \'g:vim_vue_plugin_custom_blocks',
+          \'g:vim_vue_plugin_debug',
+          \]
+    let has_prev_config = 0
+    for config in prev_configs
+      if exists(config)
+        let has_prev_config = 1
+        break
+      endif
+    endfor
+
+    if has_prev_config
+      let message =  'Hey, it seems that you just upgraded. Please use `g:vim_vue_plugin_config` to replace previous configs'
+      let message2 = 'For details, please check README.md ## Configuration or https://github.com/leafOfTree/vim-vue-plugin'
+      echom '['.s:name.'] '.message
+      echom '['.s:name.'] '.message2
+    endif
+  endif
+endfunction
+
+function! s:Main()
+  let s:name = 'vim-vue-plugin'
+  let s:config = s:GetConfig('config', {})
+  let s:full_syntax = s:config.full_syntax
+  let s:debug = s:config.debug
+
+  call s:CheckVersion()
+endfunction
+
+function! vue#Log(msg)
+  if s:debug
+    echom '['.s:name.'] '.a:msg
+  endif
+endfunction
+
+function! vue#LogWithLnum(msg)
+  if s:debug
+    echom '['.s:name.']['.v:lnum.'] '.a:msg
+  endif
+endfunction
+
+function! vue#Warn(msg)
+  if s:debug
+    echohl WarningMsg
+    echom '['.s:name.'] '.a:msg
+    echohl None
+  endif
+endfunction
+
+function! vue#GetConfig(name, default)
+  return s:GetConfig(a:name, a:default)
+endfunction
+
+if exists('##CursorMoved') && (exists('*OnChangeVueSyntax') || exists('*OnChangeVueSubtype'))
+  augroup vim_vue_plugin
+    autocmd!
+    autocmd CursorMoved,CursorMovedI,WinEnter *.vue,*.wpy
+          \ call s:CheckSyntax()
+  augroup END
+
+  if exists('*OnChangeVueSyntax')
+    let s:OnChangeListener = function('OnChangeVueSyntax')
+  else
+    let s:OnChangeListener = function('OnChangeVueSubtype')
+  endif
+
+  let s:syntax = ''
+  function! s:CheckSyntax()
+    let syntax = GetVueSyntax()
+
+    if s:syntax != syntax
+      call s:OnChangeListener(syntax)
+      let s:syntax = syntax
+    endif
+  endfunction
+endif
+
+function! s:SyntaxListAtEnd(lnum)
+  let plnum = prevnonblank(a:lnum)
+  let pline = getline(plnum)
+
+  " return [] if prevnonblank is an end tag
+  if pline =~ '^<\/'
+    return []
+  endif
+
+  let col = strlen(pline)
+  return map(synstack(plnum, col), 'synIDattr(v:val, "name")')
+endfunction
+
+function! s:SyntaxAtEnd(lnum)
+  let syns = s:SyntaxListAtEnd(a:lnum)
+  let syntax_name = empty(syns) ? '' : get(syns, 0, '')
+  let syntax_name = s:RemoveCssPrefix(syntax_name)
+  return syntax_name
+endfunction
+
+function! vue#SyntaxSecondAtEnd(lnum)
+  let syns = s:SyntaxListAtEnd(a:lnum)
+  return get(syns, 1, '')
+endfunction
+
+function! s:GetBlockTag(lnum)
+  let syntax_name = s:SyntaxAtEnd(a:lnum)
+  let tag = matchstr(syntax_name, '\(\u\U\+\)\+\zeBlock')
+  let tag = substitute(tag, '\U\zs\(\u\)', "-\\1", 'g')
+  let tag = tolower(tag)
+  return tag
+endfunction
+
+let s:style_with_css_prefix = ['scss', 'less', 'stylus']
+
+" Adjust syntax name to support emmet-vim by adding css prefix
+function! vue#AlterSyntaxForEmmetVim(name, syntax)
+  let name = a:name
+  if count(s:style_with_css_prefix, a:syntax)
+    let name = 'css'.toupper(name[0]).name[1:]
+  endif
+  return name
+endfunction
+
+" Remove css prefix
+function! s:RemoveCssPrefix(syntax_name)
+  let syntax_name = a:syntax_name
+  let syntax = matchstr(syntax_name, '^\U\+')
+  if syntax == 'css'
+    let next_syntax = tolower(matchstr(syntax_name, '^\U\+\zs\u\U\+'))
+    if count(s:style_with_css_prefix, next_syntax)
+      let syntax_name = matchstr(syntax_name, '^\U\+\zs.*')
+      let syntax_name = tolower(syntax_name[0]).syntax_name[1:]
+    endif
+  endif
+  return syntax_name
+endfunction
+
+function! s:GetBlockSyntax(lnum)
+  let syntax_name = s:SyntaxAtEnd(a:lnum)
+  let syntax = matchstr(syntax_name, '^\U\+')
+  return syntax
+endfunction
+
+function! vue#GetBlockTag(lnum)
+  return s:GetBlockTag(a:lnum)
+endfunction
+
+function! vue#GetBlockSyntax(lnum)
+  return s:GetBlockSyntax(a:lnum)
+endfunction
+
+function! GetVueSubtype()
+  let syntax = vue#GetBlockSyntax(line('.'))
+  return syntax
+endfunction
+
+function! GetVueSyntax()
+  let syntax = vue#GetBlockSyntax(line('.'))
+  return syntax
+endfunction
+
+function! GetVueTag(...)
+  let lnum = a:0 > 0 ? a:1 : line('.')
+  return vue#GetBlockTag(lnum)
+endfunction
+
+function! vue#LoadSyntax(group, syntax)
+  let group = a:group
+  let syntax = a:syntax
+  if s:IncludeOrEqual(s:full_syntax, syntax)
+    call vue#LoadFullSyntax(group, syntax)
+  else
+    let loaded = vue#LoadDefaultSyntax(group, syntax)
+    if !loaded
+      call vue#LoadFullSyntax(group, syntax)
+    endif
+  endif
+endfunction
+
+function! vue#LoadDefaultSyntax(group, syntax)
+  unlet! b:current_syntax
+  let loaded = 0
+  let syntax_paths = ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
+  for path in syntax_paths
+    let file = expand(path).'/syntax/'.a:syntax.'.vim'
+    if filereadable(file)
+      let loaded = 1
+      execute 'syntax include '.a:group.' '.file
+    endif
+  endfor
+  if loaded
+    call vue#Log(a:syntax.': load default')
+  else
+    call vue#Warn(a:syntax.': syntax not found in '.string(syntax_paths))
+    call vue#Warn(a:syntax.': load full instead')
+  endif
+  return loaded
+endfunction
+
+" Load all syntax files in 'runtimepath'
+" Useful if there is no default syntax file provided by vim
+function! vue#LoadFullSyntax(group, syntax)
+  call vue#Log(a:syntax.': load full')
+  call s:SetCurrentSyntax(a:syntax)
+  execute 'syntax include '.a:group.' syntax/'.a:syntax.'.vim'
+endfunction
+
+" Settings to avoid syntax overload
+function! s:SetCurrentSyntax(type)
+  if a:type == 'coffee'
+    " Avoid `syntax/javascript.vim` in kchmck/vim-coffee-script
+    let b:current_syntax = 'vue'
+    syntax cluster coffeeJS contains=@javascript,@htmlJavaScript
+  else
+    unlet! b:current_syntax
+  endif
+endfunction
+
+function! vue#GetSyntaxList(config_syntax)
+  let syntax_list = []
+  for syntax in values(a:config_syntax)
+    let type = type(syntax)
+    if type == v:t_string
+      if !count(syntax_list, syntax)
+        call add(syntax_list, syntax)
+      endif
+    elseif type == v:t_list
+      for syn in syntax
+        if !count(syntax_list, syn)
+          call add(syntax_list, syn)
+        endif
+      endfor
+    else
+      echoerr '[vim-vue-plugin] syntax value type'
+            \.' must be either string or list'
+    endif
+  endfor
+
+  call s:ModifySyntaxOrder(syntax_list)
+
+  return syntax_list
+endfunction
+
+function! s:IncludeOrEqual(listOrString, item)
+  let listOrString = a:listOrString
+  let item = a:item
+  let type = type(listOrString)
+  return (type == v:t_list && count(listOrString, item))
+        \ || (type == v:t_string && listOrString == item)
+endfunction
+
+function! vue#IncludeOrEqual(listOrString, item)
+  return s:IncludeOrEqual(a:listOrString, a:item)
+endfunction
+
+function! s:ModifySyntaxOrder(syntax_list)
+  let syntax_list = a:syntax_list
+
+  " Move basic syntax to the end of the list, so we can check
+  " if they are already loaded by other syntax.
+  " Order matters
+  let load_last = ['html', 'javascript', 'css']
+  for syntax in load_last
+    let idx = index(syntax_list, syntax)
+    if idx >= 0
+      call remove(syntax_list, idx)
+      call add(syntax_list, syntax)
+    endif
+  endfor
+endfunction
+
+call s:Main()

filetype.vim

@@ -1,16 +0,0 @@
-au BufNewFile,BufRead *.vue,*.wpy call s:setFiletype()
-
-function! s:setFiletype()
-  " enable JavaScript autocmds first
-  " let &filetype = 'javascript'
-
-  " then set filetype
-  let &filetype = 'vue'
-endfunction
-
-if !exists("g:vim_vue_plugin_has_init_indent")
-  let ext = expand("%:e")
-  if ext == 'wpy'
-    let g:vim_vue_plugin_has_init_indent = 1
-  endif
-endif

ftdetect/vue.vim

@@ -0,0 +1 @@
+autocmd BufNewFile,BufRead *.vue,*.wpy setf vue

ftplugin/vue.vim

@@ -0,0 +1,19 @@
+if exists("b:did_ftplugin") | finish | endif
+let b:did_ftplugin = 1
+
+if !has('nvim')
+  setlocal matchpairs+=<:>
+endif
+
+if exists("loaded_matchit")
+  let b:match_ignorecase = 1
+  let b:match_words = '<:>,' .
+        \ '<\@<=[ou]l\>[^>]*\%(>\|$\):<\@<=li\>:<\@<=/[ou]l>,' .
+        \ '<\@<=dl\>[^>]*\%(>\|$\):<\@<=d[td]\>:<\@<=/dl>,' .
+        \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
+endif
+
+" Indent correctly with template string for vim-javascript/built-in
+" indentexpr
+let b:syng_str = '^\%(.*template\)\@!.*string\|special'
+let b:syng_strcom = '^\%(.*template\)\@!.*string\|comment\|regex\|special\|doc'

ftplugin/vue/fold.vim

@@ -0,0 +1,95 @@
+let s:config = vue#GetConfig('config', {})
+let s:enable_foldexpr = s:config.foldexpr
+
+if !s:enable_foldexpr | finish | endif
+
+" Useful for debugging foldexpr
+" set debug=msg
+
+function! VueFoldMain(...)
+  if line('$') < 1000
+    let s:empty_line = '^\s*$'
+    let s:vue_tag_start = '^<\w\+'
+    let s:vue_tag_end = '^<\/\w\+'
+
+    setlocal foldexpr=GetVueFold(v:lnum)
+    setlocal foldmethod=expr
+  endif
+endfunction
+
+"  see :h fold-expr
+"  value             meaning
+"  0                 the line is not in a fold
+"  1, 2, ..          the line is in a fold with this level
+"  -1                the fold level is undefined, use the fold level of a
+"                    line before or after this line, whichever is the
+"                    lowest.
+"  "="               use fold level from the previous line
+"  "a1", "a2", ..    add one, two, .. to the fold level of the previous
+"			               line, use the result for the current line
+"  "s1", "s2", ..    subtract one, two, .. from the fold level of the
+"  ">1", ">2", ..    a fold with this level starts at this line
+"  "<1", "<2", ..    a fold with this level ends at this line
+function! GetVueFold(lnum)
+  let this_line = getline(a:lnum)
+  let value = s:FoldForSpecialLine(this_line)
+  if value == -2
+    " Fold by indent
+    let this_indent = s:IndentLevel(a:lnum)
+
+    " For <script> block
+    if GetVueTag(a:lnum) == 'script'
+      let value = s:FoldForScript(a:lnum, this_line, this_indent)
+    else
+      let value = this_indent
+    endif
+  endif
+  call vue#LogWithLnum('foldlevel '.value)
+  return value
+endfunction
+
+function! s:FoldForScript(lnum, this_line, this_indent)
+  let value = -2
+  if a:lnum > 1
+    let prev_indent = s:IndentLevel(a:lnum - 1)
+  else
+    let prev_indent = 0
+  endif
+  let next_indent = s:IndentLevel(nextnonblank(a:lnum + 1))
+
+  if a:this_line =~ '^\s*[]})]\+,\?\s*$'
+    " Closing ']})'
+    let value = '<'.prev_indent
+  elseif a:this_indent < next_indent
+    " --this
+    " ----next
+    let value = '>'.next_indent
+  else
+    " ----this
+    " --next
+    let value = a:this_indent
+  endif
+
+  return value
+endfunction
+
+function! s:FoldForSpecialLine(this_line)
+  if a:this_line =~ s:empty_line
+    return '='
+  elseif a:this_line =~ s:vue_tag_start
+    return '>1'
+  elseif a:this_line =~ s:vue_tag_end
+    " If return '<1', fold will get incorrect with prev line
+    return 1
+  else
+    return -2
+  endif
+endfunction
+
+function! s:IndentLevel(lnum)
+  " Add 1 to indentLevel, so start/end tags can fold properly
+  return indent(a:lnum) / &shiftwidth + 1
+endfunction
+"}}}
+
+call VueFoldMain()

indent/vue.vim

@@ -1,154 +1,307 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim indent file
-"
-" Language: Vue (Wepy)
-" Maintainer: leafOfTree <leafvocation@gmail.com>
-"
-" CREDITS: Inspired by mxw/vim-jsx.
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-if exists("b:did_vue_indent")
-    finish
-endif
+" Language: Vue
+" Maintainer: leaf <https://github.com/leafOfTree>
+" Credits: Inspired by mxw/vim-jsx.
 
-se sw=2 ts=2
+if exists('b:did_indent') | finish |endif
 
-let s:name = 'vim-vue-plugin'
-let s:debug = exists("g:vim_vue_plugin_debug")
-      \ && g:vim_vue_plugin_debug == 1
-let s:use_pug = exists("g:vim_vue_plugin_use_pug")
-      \ && g:vim_vue_plugin_use_pug == 1
-let s:use_sass = exists("g:vim_vue_plugin_use_sass")
-      \ && g:vim_vue_plugin_use_sass == 1
-let s:has_init_indent = exists("g:vim_vue_plugin_has_init_indent")
-      \ && g:vim_vue_plugin_has_init_indent == 1
+let s:test = exists('g:vim_vue_plugin_test')
 
-" Let <template> handled by HTML indent
-let s:vue_tag = '\v^\<(script|style)' 
+function! s:Init()
+  """ Configs
+  let s:config = vue#GetConfig('config', {})
+  let s:config_syntax = s:config.syntax
+  let s:initial_indent = s:config.initial_indent
 
-let s:vue_end_tag = '\v\<\/(template|script|style)'
-let s:end_tag = '^\s*\/\?>\s*'
+  """ Variables
+  let s:indent = {}
+  let s:block_tag = '<\/\?\('.join(keys(s:config_syntax), '\|').'\)'
 
-" Save the current JavaScript indentexpr.
-let b:vue_js_indentexpr = &indentexpr
-
-" Load xml indent method
-unlet! b:did_indent
-runtime! indent/xml.vim
-
-" Load css indent method
-unlet! b:did_indent
-runtime! indent/css.vim
-
-if s:use_pug
-  " Load pug indent method
-  unlet! b:did_indent
-  runtime! indent/pug.vim
-endif
-
-if s:use_sass
-  " Load sass indent method
-  unlet! b:did_indent
-  runtime! indent/sass.vim
-endif
-
-let b:did_indent = 1
-let b:did_vue_indent = 1
-
-" JavaScript indentkeys
-setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
-" XML indentkeys
-setlocal indentkeys+=*<Return>,<>>,<<>,/
-
-setlocal indentexpr=GetVueIndent()
-
-function! SynsEOL(lnum)
-  let lnum = prevnonblank(a:lnum)
-  let col = strlen(getline(lnum))
-  return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
+  " To adjust HTML
+  let s:empty_tagname = '(area|base|br|col|embed|hr|input|img|'
+        \.'keygen|link|meta|param|source|track|wbr)'
+  let s:empty_tag = '\v\<'.s:empty_tagname.'.*(/)@<!\>'
+  let s:empty_tag_start = '\v\<'.s:empty_tagname.'[^>]*$'
+  let s:empty_tag_end = '\v^\s*[^<>/]*\/?\>\s*'
+  let s:tag_start = '\v^\s*\<\w*'   " <
+  let s:tag_end = '\v^\s*\/?\>\s*'  " />
+  let s:full_tag_end = '\v^\s*\<\/' " </...>
+  let s:ternary_q = '^\s\+?'
+  let s:ternary_e = '^\s\+:.*,\s*$'
 endfunction
 
-function! SynsHTML(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueTemplate)'
+function! s:SetVueIndent()
+  """ Settings
+  " JavaScript indentkeys
+  setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,:
+  " XML indentkeys
+  setlocal indentkeys+=*<Return>,<>>,<<>,/
+  setlocal indentexpr=GetVueIndent()
 endfunction
 
-function! SynsPug(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueTemplatePug)'
-endfunction
-
-function! SynsSASS(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyleSASS)'
-endfunction
-
-function! SynsCSS(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyle)'
-endfunction
-
-function! SynsVueScope(syns)
-  let first_syn = get(a:syns, 0)
-  return first_syn =~? '\v^(vueStyle)|(vueScript)'
-endfunction
-
-function! GetVueIndent()
-  let curline = getline(v:lnum)
-  let prevline = getline(v:lnum - 1)
-  let cursyns = SynsEOL(v:lnum)
-  let prevsyns = SynsEOL(v:lnum - 1)
-
-  if SynsPug(prevsyns)
-    call s:LogMsg('syntax: pug')
-    let ind = GetPugIndent()
-
-  elseif SynsHTML(prevsyns)
-    call s:LogMsg('syntax: html')
-    let ind = XmlIndentGet(v:lnum, 0)
-
-    " Align '/>' and '>' with '<' for multiline tags.
-    if curline =~? s:end_tag 
-      let ind = ind - &sw
-    endif
-    " Then correct the indentation of any element following '/>' or '>'.
-    if prevline =~? s:end_tag
-      let ind = ind + &sw
-    endif
-  elseif SynsSASS(prevsyns)
-    call s:LogMsg('syntax: sass')
-    let ind = GetSassIndent()
-  elseif SynsCSS(prevsyns)
-    call s:LogMsg('syntax: css')
-    let ind = GetCSSIndent()
+function! s:GetIndentFile(syntax)
+  let syntax = a:syntax
+  " lib/indent/* files are perferred for better indent result
+  " from previous version Vim
+  if syntax == 'html'
+    let file = 'lib/indent/xml.vim'
+  elseif syntax == 'css'
+    let file = 'lib/indent/css.vim'
+  elseif syntax == 'javascript'
+    let file = 'lib/indent/typescript.vim'
   else
-    call s:LogMsg('syntax: javascript')
-    if len(b:vue_js_indentexpr)
-      let ind = eval(b:vue_js_indentexpr)
-    else
-      let ind = cindent(v:lnum)
-    endif
+    let file = 'indent/'.syntax.'.vim'
   endif
+  return file
+endfunction
 
-  if curline =~? s:vue_tag || curline =~? s:vue_end_tag 
-    call s:LogMsg('current line is vue tag')
-    let ind = 0
-  elseif s:has_init_indent
-    if SynsVueScope(cursyns) && ind == 0
-      call s:LogMsg('add initial indent')
-      let ind = &sw
-    endif
-  elseif prevline =~? s:vue_tag || prevline =~? s:vue_end_tag
-    call s:LogMsg('prev line is vue tag')
-    let ind = 0
+function! s:SetSyntaxIndentExpr(syntax_list)
+  let saved_shiftwidth = &shiftwidth
+  let saved_formatoptions = &formatoptions
+
+  for syntax in a:syntax_list
+    unlet! b:did_indent
+    let &l:indentexpr = ''
+    execute 'runtime '.s:GetIndentFile(syntax)
+    let s:indent[syntax] = &l:indentexpr
+  endfor
+
+  let &shiftwidth = saved_shiftwidth
+  let &formatoptions = saved_formatoptions
+endfunction
+
+function! s:GetBlockIndent(syntax)
+  let syntax = a:syntax
+  let indentexpr = get(s:indent, syntax) 
+  if !empty(indentexpr)
+    let ind = eval(indentexpr)
+  else
+    call vue#LogWithLnum('indentexpr not found for '.syntax.', use cindent')
+    let ind = cindent(v:lnum)
+  endif
+  return ind
+endfunction
+
+function! s:GetIndentByContext(tag, syntax)
+  let ind = -1
+  let prevline = getline(s:PrevNonBlankNonComment(v:lnum))
+  let curline = getline(v:lnum)
+
+  if a:tag != 'template' && a:syntax == 'html'
+    " Set indent to 0 for custom tag with 'html' syntax
+    if curline =~ s:block_tag && empty(prevline)
+      let ind = 0
+    endif
+  elseif a:tag == 'template'
+    " When 'pug' syntax in <template>, set block tags indent to 0
+    if a:syntax == 'pug'
+      if curline =~ s:block_tag
+        let ind = 0
+      endif
+    endif
+  else
+    " When not in <template> and not 'html'
+    " Set indent to 0 if current or prev line is block tag
+    if curline =~ s:block_tag || prevline =~ s:block_tag
+      let ind = 0
+    endif
   endif
-  call s:LogMsg('result indent: '.ind)
 
   return ind
 endfunction
 
-function! s:LogMsg(msg)
-  if s:debug
-    echom '['.s:name.'] '.a:msg
-  endif
+function! s:PrevNonBlankNonComment(lnum)
+  let lnum = a:lnum - 1
+  let prevlnum = prevnonblank(lnum)
+  let prevsyn = vue#SyntaxSecondAtEnd(prevlnum)
+  while prevsyn =~? 'comment' && lnum > 1
+    let lnum = lnum - 1
+    let prevlnum = prevnonblank(lnum)
+    let prevsyn = vue#SyntaxSecondAtEnd(prevlnum)
+  endwhile
+  return prevlnum
 endfunction
+
+function! s:AdjustBlockIndent(syntax, ind)
+  let block = a:block
+  let syntax = a:syntax
+  let ind = a:ind
+
+  if syntax == 'html'
+    let ind = s:AdjustHTMLIndent(ind)
+  elseif syntax == 'javascript'
+    let ind = s:AdjustJavaScriptIndent(ind)
+  elseif syntax == 'css'
+    let ind = s:AdjustCSSIndent(ind)
+  endif
+
+  return ind
+endfunction
+
+function! s:CheckInitialIndent(tag, syntax, ind)
+  let ind = a:ind
+  let add = 0
+
+  if ind == 0 && getline(v:lnum) !~ s:block_tag
+    let add = vue#IncludeOrEqual(s:initial_indent, a:tag.'.'.a:syntax)
+          \ || vue#IncludeOrEqual(s:initial_indent, a:tag)
+          \ || vue#IncludeOrEqual(s:initial_indent, a:syntax)
+  endif
+  if add
+    call vue#LogWithLnum('add initial indent')
+    let ind = &sw
+  endif
+  return ind
+endfunction
+
+function! s:PrevMultilineEmptyTag(lnum)
+  let lnum = a:lnum - 1
+  let lnums = [0, 0]
+  while lnum > 0
+    let line = getline(lnum)
+    if line =~? s:empty_tag_end
+      let lnums[1] = lnum
+    endif
+
+    if line =~? s:tag_start
+      if line =~? s:empty_tag_start
+        let lnums[0] = lnum
+        return lnums
+      else
+        return [0, 0]
+      endif
+    endif
+
+    let lnum = lnum - 1
+  endwhile
+endfunction
+
+function! s:AdjustHTMLIndent(ind)
+  let ind = a:ind
+  let prevlnum = prevnonblank(v:lnum - 1)
+  let prevline = getline(prevlnum)
+  let curline = getline(v:lnum)
+
+  if prevline =~? s:empty_tag
+    call vue#LogWithLnum('previous line is an empty tag')
+    let ind = ind - &sw
+  endif
+
+  " Align '/>' and '>' with '<'
+  if curline =~? s:tag_end 
+    let ind = ind - &sw
+  endif
+  " Then correct the indentation of any element following '/>' or '>'.
+  if prevline =~? s:tag_end
+    let ind = ind + &sw
+
+    " Decrease indent if prevlines are a multiline empty tag
+    let [start, end] = s:PrevMultilineEmptyTag(v:lnum)
+    if prevlnum == end
+      call vue#LogWithLnum('previous line is a multiline empty tag')
+      let ind = indent(v:lnum - 1)
+      if curline =~? s:full_tag_end 
+        let ind = ind - &sw
+      endif
+    endif
+  endif
+
+  " Multiline array/object in attribute like v-*="[
+  "   ...
+  " ]
+  if prevline =~ '[[{]\s*$'
+    call vue#LogWithLnum('previous line is an open bracket')
+    let ind = indent(prevlnum) + &sw
+  endif
+  if curline =~ '^\s*[]}][^"]*"\?\s*$'
+    call vue#LogWithLnum('current line is a closing bracket')
+    let ind = indent(prevlnum) - &sw
+  endif
+
+  " Multiline ternary 'a ? b : c' in attribute
+  if curline =~ s:ternary_q
+    call vue#LogWithLnum('current line is ?...')
+    let ind = indent(prevlnum) + &sw
+  endif
+  if curline =~ s:ternary_e && prevline =~ s:ternary_q
+    call vue#LogWithLnum('current line is :...')
+    let ind = indent(prevlnum)
+  endif
+  if prevline =~ s:ternary_e
+    call vue#LogWithLnum('prevline line is :...')
+    let ind = indent(prevlnum) - &sw
+  endif
+
+  " Angle bracket in attribute, like v-if="isEnabled('item.<name>')"
+  if prevline =~ '="[^"]*<[^"]*>[^"]*"'
+    call vue#LogWithLnum('prevline line is angle bracket in attribute')
+    let ind = ind - &sw
+  endif
+
+  return ind
+endfunction
+
+function! s:AdjustJavaScriptIndent(ind)
+  let ind = a:ind
+  let prevlnum = prevnonblank(v:lnum - 1)
+  let prevline = getline(prevlnum)
+  let curline = getline(v:lnum)
+
+  if prevline =~ '^\s*\w.*$' && curline =~ '^\s*\.'
+    call vue#LogWithLnum('current line is the first chain call')
+    let ind = indent(prevlnum) + &sw
+  endif
+
+  if prevline =~ '\s=>\s.*,\s*$' && curline !~ '^\s*[]}])\?,\?\s*$'
+    call vue#LogWithLnum('previous line is arrow function property')
+    let ind = indent(prevlnum)
+  endif
+  if prevline =~ '\s||\s*$'
+    call vue#LogWithLnum('previous line ends with "||"')
+    let ind = indent(prevlnum) + &sw
+  endif
+  return ind
+endfunction
+
+function! s:AdjustCSSIndent(ind)
+  let ind = a:ind
+  let prevlnum = prevnonblank(v:lnum - 1)
+  let prevline = getline(prevlnum)
+  let curline = getline(v:lnum)
+
+  if prevline =~ ':\s.*,\s*$'
+    call vue#LogWithLnum('previous line is css function')
+    let ind = indent(prevlnum) + &sw
+  endif
+  if curline =~ '^\s*);\?\s*$'
+    call vue#LogWithLnum('curline is closing round bracket')
+    let ind = indent(prevlnum) - &sw
+  endif
+  return ind
+endfunction
+
+function! GetVueIndent()
+  let tag = vue#GetBlockTag(v:lnum)
+  let syntax = vue#GetBlockSyntax(v:lnum)
+  let ind = s:GetIndentByContext(tag, syntax)
+  if ind == -1
+    let ind = s:GetBlockIndent(syntax)
+    let ind = s:AdjustBlockIndent(syntax, ind)
+    call vue#LogWithLnum('syntax '.syntax.', ind '.ind)
+  else
+    call vue#LogWithLnum('context, ind '.ind)
+  endif
+
+  let ind = s:CheckInitialIndent(tag, syntax, ind)
+  return ind
+endfunction
+
+function! VimVuePluginIndentMain(...)
+  call s:Init()
+  let syntax_list = vue#GetSyntaxList(s:config_syntax)
+  call s:SetSyntaxIndentExpr(syntax_list)
+  call s:SetVueIndent()
+endfunction
+
+call VimVuePluginIndentMain()
+
+let b:did_indent = 1

lib/indent/css.vim

@@ -0,0 +1,87 @@
+" Vim indent file
+" Language:	    CSS
+" Maintainer:	    Nikolai Weibull <now@bitwi.se>
+" Latest Revision:  2012-05-30
+"		    Use of shiftwidth() added by Oleg Zubchenko.	
+
+" Changes: 1) Reacquire the line while checking comment lines.
+
+if exists("b:did_indent")
+  finish
+endif
+let b:did_indent = 1
+
+setlocal indentexpr=GetCSSIndent()
+setlocal indentkeys=0{,0},!^F,o,O
+setlocal nosmartindent
+
+let b:undo_indent = "setl smartindent< indentkeys< indentexpr<"
+
+if exists("*GetCSSIndent")
+  finish
+endif
+let s:keepcpo= &cpo
+set cpo&vim
+
+function s:prevnonblanknoncomment(lnum)
+  let lnum = a:lnum
+  while lnum > 1
+    let lnum = prevnonblank(lnum)
+    let line = getline(lnum)
+    if line =~ '\*/'
+      while lnum > 1 && line !~ '/\*'
+        let lnum -= 1
+        let line = getline(lnum)
+      endwhile
+      if line =~ '^\s*/\*'
+        let lnum -= 1
+      else
+        break
+      endif
+    else
+      break
+    endif
+  endwhile
+  return lnum
+endfunction
+
+function s:count_braces(lnum, count_open)
+  let n_open = 0
+  let n_close = 0
+  let line = getline(a:lnum)
+  let pattern = '[{}]'
+  let i = match(line, pattern)
+  while i != -1
+    if synIDattr(synID(a:lnum, i + 1, 0), 'name') !~ 'css\%(Comment\|StringQ\{1,2}\)'
+      if line[i] == '{'
+        let n_open += 1
+      elseif line[i] == '}'
+        if n_open > 0
+          let n_open -= 1
+        else
+          let n_close += 1
+        endif
+      endif
+    endif
+    let i = match(line, pattern, i + 1)
+  endwhile
+  return a:count_open ? n_open : n_close
+endfunction
+
+function GetCSSIndent()
+  let line = getline(v:lnum)
+  if line =~ '^\s*\*'
+    return cindent(v:lnum)
+  endif
+
+  let pnum = s:prevnonblanknoncomment(v:lnum - 1)
+  if pnum == 0
+    return 0
+  endif
+
+  return indent(pnum) + s:count_braces(pnum, 1) * shiftwidth()
+        \ - s:count_braces(v:lnum, 0) * shiftwidth()
+endfunction
+
+let &cpo = s:keepcpo
+unlet s:keepcpo

lib/indent/typescript.vim

@@ -0,0 +1,518 @@
+" Vim indent file
+" Language: TypeScript
+" Maintainer: See https://github.com/HerringtonDarkholme/yats.vim
+" Last Change: 2019 Oct 18
+" Acknowledgement: Based off of vim-ruby maintained by Nikolai Weibull http://vim-ruby.rubyforge.org
+
+" 0. Initialization {{{1
+" =================
+
+" Only load this indent file when no other was loaded.
+if exists("b:did_indent")
+  finish
+endif
+let b:did_indent = 1
+
+setlocal nosmartindent
+
+" Now, set up our indentation expression and keys that trigger it.
+setlocal indentexpr=GetTypescriptIndent()
+setlocal formatexpr=Fixedgq(v:lnum,v:count)
+setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
+
+" Only define the function once.
+if exists("*GetTypescriptIndent")
+  finish
+endif
+
+let s:cpo_save = &cpo
+set cpo&vim
+
+" 1. Variables {{{1
+" ============
+
+let s:js_keywords = '^\s*\(break\|case\|catch\|continue\|debugger\|default\|delete\|do\|else\|finally\|for\|function\|if\|in\|instanceof\|new\|return\|switch\|this\|throw\|try\|typeof\|var\|void\|while\|with\)'
+
+" Regex of syntax group names that are or delimit string or are comments.
+let s:syng_strcom = 'string\|regex\|comment\c'
+
+" Regex of syntax group names that are strings.
+let s:syng_string = 'regex\c'
+
+" Regex of syntax group names that are strings or documentation.
+let s:syng_multiline = 'comment\c'
+
+" Regex of syntax group names that are line comment.
+let s:syng_linecom = 'linecomment\c'
+
+" Expression used to check whether we should skip a match with searchpair().
+let s:skip_expr = "synIDattr(synID(line('.'),col('.'),1),'name') =~ '".s:syng_strcom."'"
+
+let s:line_term = '\s*\%(\%(\/\/\).*\)\=$'
+
+" Regex that defines continuation lines, not including (, {, or [.
+let s:continuation_regex = '\%([\\*+/.:]\|\%(<%\)\@<![=-]\|\W[|&?]\|||\|&&\|[^=]=[^=].*,\)' . s:line_term
+
+" Regex that defines continuation lines.
+" TODO: this needs to deal with if ...: and so on
+let s:msl_regex = s:continuation_regex
+let s:msl_exclude_regex = '++'
+
+let s:one_line_scope_regex = '\<\%(if\|else\|for\|while\)\>[^{;]*' . s:line_term
+let s:one_line_scope_exclue_regex = '\<return\>'
+let s:closing_bracket = '[]}],\?\s*$'
+
+" Regex that defines blocks.
+let s:block_regex = '\%([{[]\)\s*\%(|\%([*@]\=\h\w*,\=\s*\)\%(,\s*[*@]\=\h\w*\)*|\)\=' . s:line_term
+
+let s:var_stmt = '^\s*var'
+
+let s:comma_first = '^\s*,'
+let s:comma_last = ',\s*$'
+
+let s:ternary = '^\s\+[?|:]'
+let s:ternary_q = '^\s\+?'
+let s:ternary_e = '^\s\+:'
+
+" 2. Auxiliary Functions {{{1
+" ======================
+
+" Check if the character at lnum:col is inside a string, comment, or is ascii.
+function s:IsInStringOrComment(lnum, col)
+  return synIDattr(synID(a:lnum, a:col, 1), 'name') =~ s:syng_strcom
+endfunction
+
+" Check if the character at lnum:col is inside a string.
+function s:IsInString(lnum, col)
+  return synIDattr(synID(a:lnum, a:col, 1), 'name') =~ s:syng_string
+endfunction
+
+" Check if the character at lnum:col is inside a multi-line comment.
+function s:IsInMultilineComment(lnum, col)
+  return !s:IsLineComment(a:lnum, a:col) && synIDattr(synID(a:lnum, a:col, 1), 'name') =~ s:syng_multiline
+endfunction
+
+" Check if the character at lnum:col is a line comment.
+function s:IsLineComment(lnum, col)
+  return synIDattr(synID(a:lnum, a:col, 1), 'name') =~ s:syng_linecom
+endfunction
+
+" Find line above 'lnum' that isn't empty, in a comment, or in a string.
+function s:PrevNonBlankNonString(lnum)
+  let in_block = 0
+  let lnum = prevnonblank(a:lnum)
+  while lnum > 0
+    " Go in and out of blocks comments as necessary.
+    " If the line isn't empty (with opt. comment) or in a string, end search.
+    let line = getline(lnum)
+    if line =~ '/\*'
+      if in_block
+        let in_block = 0
+      else
+        break
+      endif
+    elseif !in_block && line =~ '\*/'
+      let in_block = 1
+    elseif !in_block && line !~ '^\s*\%(//\).*$' && !(s:IsInStringOrComment(lnum, 1) && s:IsInStringOrComment(lnum, strlen(line)))
+      break
+    endif
+    let lnum = prevnonblank(lnum - 1)
+  endwhile
+  return lnum
+endfunction
+
+" Find line above 'lnum' that started the continuation 'lnum' may be part of.
+function s:GetMSL(lnum, in_one_line_scope)
+  " Start on the line we're at and use its indent.
+  let msl = a:lnum
+  if s:Match(msl, s:closing_bracket)
+    return msl
+  endif
+
+  let lnum = s:PrevNonBlankNonString(a:lnum - 1)
+  while lnum > 0
+    " If we have a continuation line, or we're in a string, use line as MSL.
+    " Otherwise, terminate search as we have found our MSL already.
+    let line = getline(lnum)
+    let col = match(line, s:msl_exclude_regex) == -1
+          \ && match(line, s:msl_regex) + 1 
+    if (col > 0 && !s:IsInStringOrComment(lnum, col)) || s:IsInString(lnum, strlen(line))
+      let msl = lnum
+    else
+      " Don't use lines that are part of a one line scope as msl unless the
+      " flag in_one_line_scope is set to 1
+      "
+      if a:in_one_line_scope
+        break
+      end
+      let msl_one_line = s:Match(lnum, s:one_line_scope_regex)
+            \ && !s:Match(lnum, s:one_line_scope_exclude_regex)
+      if msl_one_line == 0
+        break
+      endif
+    endif
+    let lnum = s:PrevNonBlankNonString(lnum - 1)
+  endwhile
+  return msl
+endfunction
+
+function s:RemoveTrailingComments(content)
+  let single = '\/\/\(.*\)\s*$'
+  let multi = '\/\*\(.*\)\*\/\s*$'
+  return substitute(substitute(a:content, single, '', ''), multi, '', '')
+endfunction
+
+" Find if the string is inside var statement (but not the first string)
+function s:InMultiVarStatement(lnum)
+  let lnum = s:PrevNonBlankNonString(a:lnum - 1)
+
+"  let type = synIDattr(synID(lnum, indent(lnum) + 1, 0), 'name')
+
+  " loop through previous expressions to find a var statement
+  while lnum > 0
+    let line = getline(lnum)
+
+    " if the line is a js keyword
+    if (line =~ s:js_keywords)
+      " check if the line is a var stmt
+      " if the line has a comma first or comma last then we can assume that we
+      " are in a multiple var statement
+      if (line =~ s:var_stmt)
+        return lnum
+      endif
+
+      " other js keywords, not a var
+      return 0
+    endif
+
+    let lnum = s:PrevNonBlankNonString(lnum - 1)
+  endwhile
+
+  " beginning of program, not a var
+  return 0
+endfunction
+
+" Find line above with beginning of the var statement or returns 0 if it's not
+" this statement
+function s:GetVarIndent(lnum)
+  let lvar = s:InMultiVarStatement(a:lnum)
+  let prev_lnum = s:PrevNonBlankNonString(a:lnum - 1)
+
+  if lvar
+    let line = s:RemoveTrailingComments(getline(prev_lnum))
+
+    " if the previous line doesn't end in a comma, return to regular indent
+    if (line !~ s:comma_last)
+      return indent(prev_lnum) - shiftwidth()
+    else
+      return indent(lvar) + shiftwidth()
+    endif
+  endif
+
+  return -1
+endfunction
+
+
+" Check if line 'lnum' has more opening brackets than closing ones.
+function s:LineHasOpeningBrackets(lnum)
+  let open_0 = 0
+  let open_2 = 0
+  let open_4 = 0
+  let line = getline(a:lnum)
+  let pos = match(line, '[][(){}]', 0)
+  while pos != -1
+    if !s:IsInStringOrComment(a:lnum, pos + 1)
+      let idx = stridx('(){}[]', line[pos])
+      if idx % 2 == 0
+        let open_{idx} = open_{idx} + 1
+      else
+        let open_{idx - 1} = open_{idx - 1} - 1
+      endif
+    endif
+    let pos = match(line, '[][(){}]', pos + 1)
+  endwhile
+  return (open_0 > 0) . (open_2 > 0) . (open_4 > 0)
+endfunction
+
+function s:Match(lnum, regex)
+  let col = match(getline(a:lnum), a:regex) + 1
+  return col > 0 && !s:IsInStringOrComment(a:lnum, col) ? col : 0
+endfunction
+
+function s:IndentWithContinuation(lnum, ind, width)
+  " Set up variables to use and search for MSL to the previous line.
+  let p_lnum = a:lnum
+  let lnum = s:GetMSL(a:lnum, 1)
+  let line = getline(lnum)
+
+  " If the previous line wasn't a MSL and is continuation return its indent.
+  " TODO: the || s:IsInString() thing worries me a bit.
+  if p_lnum != lnum
+    if s:Match(p_lnum,s:continuation_regex)||s:IsInString(p_lnum,strlen(line))
+      return a:ind
+    endif
+  endif
+
+  " Set up more variables now that we know we aren't continuation bound.
+  let msl_ind = indent(lnum)
+
+  " If the previous line ended with [*+/.-=], start a continuation that
+  " indents an extra level.
+  if s:Match(lnum, s:continuation_regex)
+    if lnum == p_lnum
+      return msl_ind + a:width
+    else
+      return msl_ind
+    endif
+  endif
+
+  return a:ind
+endfunction
+
+function s:InOneLineScope(lnum)
+  let msl = s:GetMSL(a:lnum, 1)
+  if msl > 0 && s:Match(msl, s:one_line_scope_regex)
+        \ && !s:Match(msl, s:one_line_scope_exclude_regex)
+    return msl
+  endif
+  return 0
+endfunction
+
+function s:ExitingOneLineScope(lnum)
+  let msl = s:GetMSL(a:lnum, 1)
+  if msl > 0
+    " if the current line is in a one line scope ..
+    if s:Match(msl, s:one_line_scope_regex)
+        \ && !s:Match(msl, s:one_line_scope_exclude_regex)
+      return 0
+    else
+      let prev_msl = s:GetMSL(msl - 1, 1)
+      if s:Match(prev_msl, s:one_line_scope_regex)
+            \ && !s:Match(prev_msl, s:one_line_scope_exclude_regex)
+        return prev_msl
+      endif
+    endif
+  endif
+  return 0
+endfunction
+
+" 3. GetTypescriptIndent Function {{{1
+" =========================
+
+function GetTypescriptIndent()
+  " 3.1. Setup {{{2
+  " ----------
+
+  " Set up variables for restoring position in file.  Could use v:lnum here.
+  let vcol = col('.')
+
+  " 3.2. Work on the current line {{{2
+  " -----------------------------
+
+  let ind = -1
+  " Get the current line.
+  let line = getline(v:lnum)
+  " previous nonblank line number
+  let prevline = prevnonblank(v:lnum - 1)
+
+  " If we got a closing bracket on an empty line, find its match and indent
+  " according to it.  For parentheses we indent to its column - 1, for the
+  " others we indent to the containing line's MSL's level.  Return -1 if fail.
+  let col = matchend(line, '^\s*[],})]')
+  if col > 0 && !s:IsInStringOrComment(v:lnum, col)
+    call cursor(v:lnum, col)
+
+    let lvar = s:InMultiVarStatement(v:lnum)
+    if lvar
+      let prevline_contents = s:RemoveTrailingComments(getline(prevline))
+
+      " check for comma first
+      if (line[col - 1] =~ ',')
+        " if the previous line ends in comma or semicolon don't indent
+        if (prevline_contents =~ '[;,]\s*$')
+          return indent(s:GetMSL(line('.'), 0))
+        " get previous line indent, if it's comma first return prevline indent
+        elseif (prevline_contents =~ s:comma_first)
+          return indent(prevline)
+        " otherwise we indent 1 level
+        else
+          return indent(lvar) + shiftwidth()
+        endif
+      endif
+    endif
+
+
+    let bs = strpart('(){}[]', stridx(')}]', line[col - 1]) * 2, 2)
+    if searchpair(escape(bs[0], '\['), '', bs[1], 'bW', s:skip_expr) > 0
+      if line[col-1]==')' && col('.') != col('$') - 1
+        let ind = virtcol('.')-1
+      else
+        let ind = indent(s:GetMSL(line('.'), 0))
+      endif
+    endif
+    return ind
+  endif
+
+  " If the line is comma first, dedent 1 level
+  if (getline(prevline) =~ s:comma_first)
+    return indent(prevline) - shiftwidth()
+  endif
+
+  if (line =~ s:ternary)
+    if (getline(prevline) =~ s:ternary_q)
+      return indent(prevline)
+    else
+      return indent(prevline) + shiftwidth()
+    endif
+  elseif (getline(prevline) =~ s:ternary_e)
+      return indent(prevline) - shiftwidth()
+  endif
+
+  " If we are in a multi-line comment, cindent does the right thing.
+  if s:IsInMultilineComment(v:lnum, 1) && !s:IsLineComment(v:lnum, 1)
+    return cindent(v:lnum)
+  endif
+
+  " Check for multiple var assignments
+"  let var_indent = s:GetVarIndent(v:lnum)
+"  if var_indent >= 0
+"    return var_indent
+"  endif
+
+  " 3.3. Work on the previous line. {{{2
+  " -------------------------------
+
+  " If the line is empty and the previous nonblank line was a multi-line
+  " comment, use that comment's indent. Deduct one char to account for the
+  " space in ' */'.
+  if line =~ '^\s*$' && s:IsInMultilineComment(prevline, 1)
+    return indent(prevline) - 1
+  endif
+
+  " Find a non-blank, non-multi-line string line above the current line.
+  let lnum = s:PrevNonBlankNonString(v:lnum - 1)
+
+  " If the line is empty and inside a string, use the previous line.
+  if line =~ '^\s*$' && lnum != prevline
+    return indent(prevnonblank(v:lnum))
+  endif
+
+  " At the start of the file use zero indent.
+  if lnum == 0
+    return 0
+  endif
+
+  " Set up variables for current line.
+  let line = getline(lnum)
+  let ind = indent(lnum)
+
+  " If the previous line ended with a block opening, add a level of indent.
+  if s:Match(lnum, s:block_regex)
+    return indent(s:GetMSL(lnum, 0)) + shiftwidth()
+  endif
+
+  " If the previous line contained an opening bracket, and we are still in it,
+  " add indent depending on the bracket type.
+  if line =~ '[[({]'
+    let counts = s:LineHasOpeningBrackets(lnum)
+    if counts[0] == '1' && searchpair('(', '', ')', 'bW', s:skip_expr) > 0
+      if col('.') + 1 == col('$')
+        return ind + shiftwidth()
+      else
+        return virtcol('.')
+      endif
+    elseif counts[1] == '1' || counts[2] == '1'
+      return ind + shiftwidth()
+    else
+      call cursor(v:lnum, vcol)
+    end
+  endif
+
+  " 3.4. Work on the MSL line. {{{2
+  " --------------------------
+
+  let ind_con = ind
+  let ind = s:IndentWithContinuation(lnum, ind_con, shiftwidth())
+
+  " }}}2
+  "
+  "
+  let ols = s:InOneLineScope(lnum)
+  if ols > 0
+    let ind = ind + shiftwidth()
+  else
+    let ols = s:ExitingOneLineScope(lnum)
+    while ols > 0 && ind > 0
+      let ind = ind - shiftwidth()
+      let ols = s:InOneLineScope(ols - 1)
+    endwhile
+  endif
+
+  return ind
+endfunction
+
+" }}}1
+
+let &cpo = s:cpo_save
+unlet s:cpo_save
+
+function! Fixedgq(lnum, count)
+    let l:tw = &tw ? &tw : 80
+
+    let l:count = a:count
+    let l:first_char = indent(a:lnum) + 1
+
+    if mode() == 'i' " gq was not pressed, but tw was set
+        return 1
+    endif
+
+    " This gq is only meant to do code with strings, not comments
+    if s:IsLineComment(a:lnum, l:first_char) || s:IsInMultilineComment(a:lnum, l:first_char)
+        return 1
+    endif
+
+    if len(getline(a:lnum)) < l:tw && l:count == 1 " No need for gq
+        return 1
+    endif
+
+    " Put all the lines on one line and do normal spliting after that
+    if l:count > 1
+        while l:count > 1
+            let l:count -= 1
+            normal J
+        endwhile
+    endif
+
+    let l:winview = winsaveview()
+
+    call cursor(a:lnum, l:tw + 1)
+    let orig_breakpoint = searchpairpos(' ', '', '\.', 'bcW', '', a:lnum)
+    call cursor(a:lnum, l:tw + 1)
+    let breakpoint = searchpairpos(' ', '', '\.', 'bcW', s:skip_expr, a:lnum)
+
+    " No need for special treatment, normal gq handles edgecases better
+    if breakpoint[1] == orig_breakpoint[1]
+        call winrestview(l:winview)
+        return 1
+    endif
+
+    " Try breaking after string
+    if breakpoint[1] <= indent(a:lnum)
+        call cursor(a:lnum, l:tw + 1)
+        let breakpoint = searchpairpos('\.', '', ' ', 'cW', s:skip_expr, a:lnum)
+    endif
+
+
+    if breakpoint[1] != 0
+        call feedkeys("r\<CR>")
+    else
+        let l:count = l:count - 1
+    endif
+
+    " run gq on new lines
+    if l:count == 1
+        call feedkeys("gqq")
+    endif
+
+    return 0
+endfunction

lib/indent/xml.vim

@@ -0,0 +1,107 @@
+" Language:	xml
+" Maintainer:	Johannes Zellner <johannes@zellner.org>
+" Last Change:	2017 Jun 13
+" Notes:	1) does not indent pure non-xml code (e.g. embedded scripts)
+"		2) will be confused by unbalanced tags in comments
+"		or CDATA sections.
+"		2009-05-26 patch by Nikolai Weibull
+" TODO: 	implement pre-like tags, see xml_indent_open / xml_indent_close
+
+" Only load this indent file when no other was loaded.
+if exists("b:did_indent")
+    finish
+endif
+let b:did_indent = 1
+let s:keepcpo= &cpo
+set cpo&vim
+
+" [-- local settings (must come before aborting the script) --]
+setlocal indentexpr=XmlIndentGet(v:lnum,0)
+setlocal indentkeys=o,O,*<Return>,<>>,<<>,/,{,}
+
+if !exists('b:xml_indent_open')
+    let b:xml_indent_open = '.\{-}<\a'
+    " pre tag, e.g. <address>
+    " let b:xml_indent_open = '.\{-}<[/]\@!\(address\)\@!'
+endif
+
+if !exists('b:xml_indent_close')
+    let b:xml_indent_close = '.\{-}</'
+    " end pre tag, e.g. </address>
+    " let b:xml_indent_close = '.\{-}</\(address\)\@!'
+endif
+
+let &cpo = s:keepcpo
+unlet s:keepcpo
+
+" [-- finish, if the function already exists --]
+if exists('*XmlIndentGet')
+  finish
+endif
+
+let s:keepcpo= &cpo
+set cpo&vim
+
+fun! <SID>XmlIndentWithPattern(line, pat)
+    let s = substitute('x'.a:line, a:pat, "\1", 'g')
+    return strlen(substitute(s, "[^\1].*$", '', ''))
+endfun
+
+" [-- check if it's xml --]
+fun! <SID>XmlIndentSynCheck(lnum)
+    if '' != &syntax
+	let syn1 = synIDattr(synID(a:lnum, 1, 1), 'name')
+	let syn2 = synIDattr(synID(a:lnum, strlen(getline(a:lnum)) - 1, 1), 'name')
+	if '' != syn1 && syn1 !~ 'xml' && '' != syn2 && syn2 !~ 'xml'
+	    " don't indent pure non-xml code
+	    return 0
+	elseif syn1 =~ '^xmlComment' && syn2 =~ '^xmlComment'
+	    " indent comments specially
+	    return -1
+	endif
+    endif
+    return 1
+endfun
+
+" [-- return the sum of indents of a:lnum --]
+fun! <SID>XmlIndentSum(lnum, style, add)
+    let line = getline(a:lnum)
+    if a:style == match(line, '^\s*</')
+	return (shiftwidth() *
+	\  (<SID>XmlIndentWithPattern(line, b:xml_indent_open)
+	\ - <SID>XmlIndentWithPattern(line, b:xml_indent_close)
+	\ - <SID>XmlIndentWithPattern(line, '.\{-}/>'))) + a:add
+    else
+	return a:add
+    endif
+endfun
+
+fun! XmlIndentGet(lnum, use_syntax_check)
+    " Find a non-empty line above the current line.
+    let lnum = prevnonblank(a:lnum - 1)
+
+    " Hit the start of the file, use zero indent.
+    if lnum == 0
+	return 0
+    endif
+
+    if a:use_syntax_check
+	let check_lnum = <SID>XmlIndentSynCheck(lnum)
+	let check_alnum = <SID>XmlIndentSynCheck(a:lnum)
+	if 0 == check_lnum || 0 == check_alnum
+	    return indent(a:lnum)
+	elseif -1 == check_lnum || -1 == check_alnum
+	    return -1
+	endif
+    endif
+
+    let ind = <SID>XmlIndentSum(lnum, -1, indent(lnum))
+    let ind = <SID>XmlIndentSum(a:lnum, 0, ind)
+
+    return ind
+endfun
+
+let &cpo = s:keepcpo
+unlet s:keepcpo
+
+" vim:ts=8

syntax/patch/coffee.vim

@@ -0,0 +1,3 @@
+silent! syntax clear coffeeConstant
+syn match coffeeConstant '\v<\u\C[A-Z0-9_]+>' display 
+      \ containedin=@coffeeIdentifier

syntax/patch/css.vim

@@ -0,0 +1,14 @@
+" Use a different name in order to avoid css syntax interference
+silent! syntax clear cssUnitDecorators
+syntax match cssUnitDecorators2 
+      \ /\(#\|-\|+\|%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|ch\|rem\|vh\|vw\|vmin\|vmax\|dpi\|dppx\|dpcm\|Hz\|kHz\|s\|ms\|deg\|grad\|rad\)\ze\(;\|$\)/
+      \ contained
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
+
+silent! syntax clear cssKeyFrameProp
+syn match cssKeyFrameProp2 /\d*%\|from\|to/ 
+      \ contained nextgroup=cssDefinition
+      \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute,stylusCssAttribute
+
+highlight default link cssUnitDecorators2 Number
+highlight default link cssKeyFrameProp2 Constant

syntax/patch/html.vim

@@ -0,0 +1,110 @@
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Config {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+let s:config = vue#GetConfig('config', {})
+let s:attribute = s:config.attribute
+"}}}
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+"
+" Syntax highlight {{{
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Clear htmlHead that may cause highlighting out of bounds
+silent! syntax clear htmlHead
+
+" html5 data-*
+syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@html
+
+" Vue ref attribute
+syntax match htmlArg 'ref' containedin=@html
+
+" Use syn-match in order to highlight both transition and transition-group
+" according to syn-priority
+syntax match VueComponentName containedin=htmlTagN '\v(component|slot|transition)' 
+syntax match VueComponentName containedin=htmlTagN '\v\C<[a-z0-9]+(-[a-z0-9]+)+>'
+syntax match VueComponentName containedin=htmlTagN '\v\C<([A-Z][a-zA-Z0-9]+)+>'
+
+syntax match VueAttr '\v(\S)@<![v:\@][^=/>[:blank:]]+(\=\"[^"]*\")?' 
+      \ keepend
+      \ containedin=htmlTag 
+      \ contains=VueKey,VueQuote
+
+syntax match VueKey contained '\v[v:\@][^=/>[:blank:]]+'
+syntax region VueQuote contained 
+      \ start='"' end='"' 
+      \ contains=VueValue
+
+syntax match VueInject contained '\v\$\w*'
+
+syntax region VueExpression 
+      \ containedin=ALLBUT,htmlComment
+      \ matchgroup=VueBrace
+      \ transparent
+      \ start="{{"
+      \ end="}}"
+
+" Just to avoid error when using pattern in containedin
+syntax match htmlTemplateBlock /htmlTemplateBlock/
+syntax region VueExpression 
+      \ containedin=VueValue,htmlString,htmlValue,.*TemplateBlock,html.*Block
+      \ contains=@simpleJavascriptExpression
+      \ matchgroup=VueBrace
+      \ start="{{"
+      \ end="}}"
+
+" Transition attributes
+syntax match htmlArg contained "\<\(enter-from-class\|enter-active-class\|enter-to-class\|leave-from-class\|leave-active-class\|leave-to-class\)\>"
+
+" Wepy directive syntax
+syntax match VueAttr '\v(\S)@<!wx[^\=>[:blank:]]+(\=\"[^"]*\")?'
+      \ containedin=htmlTag  
+      \ contains=VueKey,VueQuote
+
+" Mini program syntax
+syntax match VueKey contained '\vwx[^\=>[:blank:]]+'
+syntax match VueCustomTag containedin=htmlTagN '\v<(view|text|block|image|checkbox|radio)>'
+
+syntax cluster simpleJavascriptExpression contains=\CjavaScript.*
+
+" JavaScript syntax
+syntax region javaScriptStringS	
+      \ start=+'+  skip=+\\\\\|\\'+  end=+'\|$+	contained
+syntax region javaScriptStringD	
+      \ start=+"+  skip=+\\\\\|\\"+  end=+"\|$+	contained
+syntax region javaScriptTemplateString
+      \ start=+`+ skip=+\\`+  end=+`|$+ contained
+      \ contains=javaScriptTemplateExpression
+syntax region javaScriptTemplateExpression
+      \ matchgroup=VueBrace
+      \ start=+${+ end=+}+ contained
+      \ contains=@simpleJavascriptExpression
+
+syntax keyword htmlTagName contained template script style
+
+highlight default link VueAttr htmlTag
+if s:attribute
+  syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+        \ contains=VueInject,@simpleJavascriptExpression
+  highlight default link VueKey Type
+  highlight default link VueQuote VueAttr
+  highlight default link VueValue None
+else
+  syntax match VueValue contained '\v\"\zs[^"]+\ze\"'
+  highlight default link VueKey htmlArg
+  highlight default link VueQuote String
+  highlight default link VueValue String
+endif
+highlight default link VueInject Constant
+highlight default link VueBrace Type
+highlight default link VueComponentName htmlTagName
+highlight default link VueCustomTag htmlTagName
+highlight default link javaScriptStringS String
+highlight default link javaScriptStringD String
+highlight default link javaScriptTemplateString String
+highlight default link javaScriptNumber	Constant
+highlight default link htmlJavaScriptOperator	Operator
+"}}}
+" vim: fdm=marker

syntax/patch/javascript.vim

@@ -0,0 +1,10 @@
+" Number with minus
+syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>' 
+      \ containedin=@javascript display
+highlight link javaScriptNumber Constant
+
+let s:config = vue#GetConfig('config', {})
+let s:keyword = s:config.keyword
+if s:keyword
+  source <sfile>:h/vue-keyword.vim
+endif

syntax/patch/less.vim

@@ -0,0 +1,6 @@
+" Use emmet-vim css type.
+silent! syntax clear lessDefinition
+syntax region cssLessDefinition matchgroup=cssBraces 
+      \ contains=@LessSyntax,cssLessDefinition 
+      \ contained containedin=cssLessVueStyle
+      \ start="{" end="}" 

syntax/patch/mustache.vim

@@ -0,0 +1,14 @@
+" Patch for https://github.com/mustache/vim-mustache-handlebars
+" Use containedin=mustacheTemplateBlock in place of containedin=Top
+
+syntax clear mustacheBlockComment
+syntax region mustacheBlockComment start=/{{!--/rs=s+2 skip=/{{.\{-}}}/ end=/--}}/re=e-2 contains=Todo contained extend containedin=mustacheTemplateBlock,@mustacheInside,@htmlMustacheContainer
+
+syntax clear mustacheComment
+syntax region mustacheComment      start=/{{!/rs=s+2   skip=/{{.\{-}}}/ end=/}}/re=e-2   contains=Todo contained containedin=mustacheTemplateBlock,@mustacheInside,@htmlMustacheContainer
+
+syntax clear mustacheAngleComponent
+syntax region mustacheAngleComponent start=/<\/\?[[:upper:]]/ end=/>/ keepend containedin=mustacheTemplateBlock,@htmlMustacheContainer
+
+syntax clear mustacheHbsComponent
+syntax region mustacheHbsComponent start=/{{[^!][$#^/]\?/ end=/}}}\?/ keepend containedin=mustacheTemplateBlock,@htmlMustacheContainer

syntax/patch/pug.vim

@@ -0,0 +1 @@
+syntax cluster htmlJavascript remove=javascriptParenthesisBlock

syntax/patch/sass.vim

@@ -0,0 +1,10 @@
+silent! syntax clear sassDefinition
+syntax region sassDefinition matchgroup=cssBraces 
+      \ contains=@SassSyntax,sassDefinition 
+      \ contained containedin=sassVueStyle
+      \ start="{" end="}" 
+
+" Extend to highlight all numbers in expression
+syntax match cssValueNumber
+      \ /\W\zs\d\+\(\.\d\+\)\?%\?\ze\W/
+      \ contained containedin=sassDefinition

syntax/patch/scss.vim

@@ -0,0 +1,13 @@
+" If not loading https://github.com/cakebaker/scss-syntax.vim
+if !hlexists('scssNestedProperty')
+  silent! syntax clear scssDefinition
+  syntax region cssScssDefinition transparent matchgroup=cssBraces 
+        \ contains=@ScssSyntax,cssScssDefinition
+        \ contained containedin=cssScssVueStyle
+        \ start="{" end="}" 
+
+  " Extend to highlight all numbers in expression
+  syntax match cssValueNumber
+        \ /\W\zs\d\+\(\.\d\+\)\?%\?\ze\W/
+        \ contained containedin=cssScssDefinition
+endif

syntax/patch/stylus.vim

@@ -0,0 +1,5 @@
+silent! syntax clear stylusDefinition
+syntax region cssStylusDefinition matchgroup=cssBraces 
+      \ contains=@StylusSyntax,cssStylusDefinition
+      \ contained containedin=cssStylusVueStyle
+      \ start="{" end="}" 

syntax/patch/typescript.vim

@@ -0,0 +1,5 @@
+let s:config = vue#GetConfig('config', {})
+let s:keyword = s:config.keyword
+if s:keyword
+  source <sfile>:h/vue-keyword.vim
+endif

syntax/patch/vue-keyword.vim

@@ -0,0 +1,85 @@
+function! s:GetIndent()
+  let config = vue#GetConfig('config', {})
+
+  let enable_initial_indent = 0
+  for val in config.initial_indent
+    if val =~ 'script'
+      let enable_initial_indent = 1
+    endif
+  endfor
+
+  let indent = &sw * (1 + enable_initial_indent)
+  return indent
+endfunction
+
+function! s:GetMatchOption()
+  " Currently support https://github.com/pangloss/vim-javascript
+  let useJavaScriptPlugin = hlexists('jsAsyncKeyword')
+  if useJavaScriptPlugin
+    let containedin = 'jsObject,jsFuncBlock,@jsExpression' 
+  else
+    " Just to avoid error from the containedin pattern
+    syntax match javascriptScriptBlock /javascriptScriptBlock/
+    let containedin = '.*ScriptBlock'
+  endif
+  let containedin .= ',typescriptIdentifierName'
+
+  let contains = useJavaScriptPlugin
+        \? 'jsAsyncKeyword' 
+        \: 'javaScriptReserved' 
+  let match_option = 
+        \' containedin='.containedin
+        \.' contains='.contains
+        \.' skipwhite skipempty'
+  return match_option
+endfunction
+
+" Vue keywords as option key
+let s:vue_keywords = 'name parent functional delimiters comments components directives filters extends mixins inheritAttrs model props propsData data computed watch methods template render renderError inject provide beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed setup beforeUnmount unmounted errorCaptured renderTracked renderTriggered'
+
+let s:indent = s:GetIndent()
+let s:keywords_regexp = '\v^\s{'.s:indent.'}(async )?<('
+      \.join(split(s:vue_keywords, ' '), '|')
+      \.')\ze'
+let s:match_option = s:GetMatchOption()
+
+execute 'syntax match vueObjectKey display /'
+      \.s:keywords_regexp
+      \.'\s*:/'
+      \.s:match_option
+      \.' nextgroup=jsObjectValue'
+
+execute 'syntax match vueObjectFuncName display /'
+      \.s:keywords_regexp
+      \.'\_s*\(/'
+      \.s:match_option
+      \.' nextgroup=jsFuncArgs'
+
+execute 'syntax match vueObjectFuncKey display /'
+      \.s:keywords_regexp
+      \.'\s*:\s*function>/'
+      \.s:match_option
+      \.' nextgroup=jsFuncArgs'
+
+" Vue3 keywords as API, https://v3.vuejs.org/api/
+let s:basic_reactive = 'reactive readonly isProxy isReactive isReadonly toRaw markRaw shallowReactive shallowReadonly'
+let s:refs = 'ref unref toRef toRefs isRef customRef shallowRef triggerRef'
+let s:computed_and_watch = 'computed watchEffect watchPostEffect watchSyncEffect watch'
+let s:composition = 'setup onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onErrorCaptured onRenderTracked onRenderTriggered onActivated onDeactivated getCurrentInstance InjectionKey provide inject'
+let s:global = 'createApp h defineComponent defineAsyncComponent defineCustomElement resolveComponent resolveDynamicComponent resolveDirective withDirectives createRenderer nextTick mergeProps useCssModule'
+let s:vue3_keywords = join([s:basic_reactive, s:refs, s:computed_and_watch, s:composition, s:global], ' ')
+
+let s:vue3_keywords_regexp = '\v<('
+      \.join(split(s:vue3_keywords, ' '), '|')
+      \.')\ze'
+
+execute 'syntax match vue3Keyword display /'
+      \.s:vue3_keywords_regexp
+      \.'\_s*\(/'
+      \.s:match_option
+
+highlight default link vueObjectKey vueObjectKeyword
+highlight default link vueObjectFuncName vueObjectKeyword
+highlight default link vue3Keyword vueObjectKeyword
+highlight default link vueObjectFuncKey vueObjectKeyword
+highlight default link vueObjectKeyword Type

syntax/vue.vim

@@ -1,135 +1,211 @@
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim syntax file
-"
-" Language: Vue (Wepy)
-" Maintainer: leaf <leafvocation@gmail.com>
-"
-" CREDITS: Inspired by mxw/vim-jsx.
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-if exists("b:current_syntax") && b:current_syntax == 'vue'
+" Language: Vue
+" Maintainer: leaf <https://github.com/leafOfTree>
+" Credits: Inspired by mxw/vim-jsx.
+
+if exists('b:current_syntax') && b:current_syntax == 'vue'
   finish
 endif
 
-let s:load_full_syntax = exists("g:vim_vue_plugin_load_full_syntax")
-      \ && g:vim_vue_plugin_load_full_syntax == 1
-let s:use_pug = exists("g:vim_vue_plugin_use_pug")
-      \ && g:vim_vue_plugin_use_pug == 1
-let s:use_less = exists("g:vim_vue_plugin_use_less")
-      \ && g:vim_vue_plugin_use_less == 1
-let s:use_sass = exists("g:vim_vue_plugin_use_sass")
-      \ && g:vim_vue_plugin_use_sass == 1
+" <sfile> is replaced with the file name of the sourced file
+let s:patch_path = expand('<sfile>:p:h').'/patch'
+let s:test = exists('g:vim_vue_plugin_test')
 
-function! s:LoadSyntax(group, type)
-  if s:load_full_syntax
-    call s:LoadFullSyntax(a:group, a:type)
-  else
-    call s:LoadDefaultSyntax(a:group, a:type)
+function! s:Init()
+  """ Configs
+  let s:config = vue#GetConfig('config', {})
+  let s:config_syntax = s:config.syntax
+
+  " For advanced users, it can be used to avoid overload
+  let b:current_loading_main_syntax = 'vue'
+endfunction
+
+function! s:GetGroupNameForLoading(syntax)
+  return '@'.a:syntax
+endfunction
+
+" Extend group name as
+" html defines group @htmlJavaScript and @htmlCss.
+" coffee defines group @coffeeJS.
+function! s:GetGroupNameForHighlight(syntax)
+  let syntax = a:syntax
+  let name = '@'.a:syntax
+  if syntax == 'javascript'
+    let name = '@javascript,@htmlJavaScript,@coffeeJS'
+  elseif syntax == 'css'
+    let name = '@css,@htmlCss'
+  endif
+  return name
+endfunction
+
+" Return name with format '<syntax><Tagname>Block'
+function! s:GetSynatxName(block, syntax)
+  let block = a:block
+  let syntax = a:syntax
+  let name = syntax.toupper(block[0]).block[1:].'Block'
+  let name = substitute(name, '-\(.\)', "\\U\\1", 'g')
+  let name = vue#AlterSyntaxForEmmetVim(name, syntax)
+  return name
+endfunction
+
+function! s:LoadSyntaxList(syntax_list)
+  for syntax in a:syntax_list
+    let loaded = s:BeforeLoadSyntax(syntax)
+    if !loaded
+      let syntax_group = s:GetGroupNameForLoading(syntax)
+      call vue#LoadSyntax(syntax_group, syntax)
+    endif
+    call s:AfterLoadSyntax(syntax)
+  endfor
+endfunction
+
+" For specific syntax, we need to handle it specially
+function! s:BeforeLoadSyntax(syntax)
+  let syntax = a:syntax
+
+  " Avoid overload if group already exists
+  let loaded = 0
+  if syntax == 'javascript'
+    let loaded = hlexists('javaScriptComment')
+  elseif syntax == 'css'
+    let loaded = hlexists('cssTagName')
+  endif
+  return loaded
+endfunction
+
+function! s:AfterLoadSyntax(syntax)
+  let syntax = a:syntax
+  call s:LoadPatchSyntax(syntax)
+  call s:LoadAfterSyntax(syntax)
+endfunction
+
+function! s:LoadPatchSyntax(syntax)
+  let file = s:patch_path.'/'.a:syntax.'.vim'
+  if filereadable(file)
+    execute 'syntax include '.file
   endif
 endfunction
 
-function! s:LoadDefaultSyntax(group, type)
-  unlet! b:current_syntax
-  exec 'syn include '.a:group.' $VIMRUNTIME/syntax/'.a:type.'.vim'
-  exec 'silent! syn include '.a:group.' $VIM/vimfiles/syntax/'.a:type.'.vim'
-  exec 'silent! syn include '.a:group.' $HOME/.vim/syntax/'.a:type.'.vim'
+function! s:LoadAfterSyntax(syntax)
+  execute 'runtime! after/syntax/'.a:syntax.'.vim'
 endfunction
 
-function! s:LoadFullSyntax(group, type)
-  unlet! b:current_syntax
-  exec 'syn include '.a:group.' syntax/'.a:type.'.vim'
+function! s:GetSyntaxLangName(syntax)
+  let syntax = a:syntax
+  if syntax == 'typescript'
+    let syntax = 'ts'
+  endif
+  return syntax
 endfunction
 
-"""""""""""""""""""""""""""""""""""""""""""""""
-"
-" Main
-"
-"""""""""""""""""""""""""""""""""""""""""""""""
-" Load syntax/*.vim to syntax group
-call s:LoadSyntax('@HTMLSyntax', 'html')
+function! s:SetSyntax(block, syntax, has_lang)
+  let block = a:block
+  let syntax = a:syntax
+  let has_lang = a:has_lang
 
-" Avoid overload
-if hlexists('cssTagName') == 0
-  call s:LoadSyntax('@htmlCss', 'css')
-endif
+  let name = s:GetSynatxName(block, syntax)
+  if has_lang
+    let lang_name = s:GetSyntaxLangName(syntax)
+    let lang = 'lang=["'']'.lang_name.'["'']'
+  else
+    let lang = ''
+  endif
 
-" Avoid overload
-if hlexists('jsNoise') == 0
-  call s:LoadSyntax('@jsAll', 'javascript')
-endif
+  let start = '^<'.block.'[^>]*'.lang
+  let end_tag = '</'.block.'>'
+  let end = '^'.end_tag
+  let syntax_group = s:GetGroupNameForHighlight(syntax)
 
-"""""""""""""""""""""""""""""""""""""""""""""""
-"
-" pre-processors
-"
-"""""""""""""""""""""""""""""""""""""""""""""""
-" If pug is enabled, load vim-pug syntax
-if s:use_pug
-  call s:LoadFullSyntax('@PugSyntax', 'pug')
-endif
+  " Block like
+  " <script lang="ts">
+  " ...
+  " </script>
+  execute 'syntax region '.name.' fold '
+        \.' start=+'.start.'+'
+        \.' end=+'.end.'+'
+        \.' keepend contains='.syntax_group.', vueTag'
 
-" If sass is enabled, load sass syntax 
-if s:use_sass
-  call s:LoadSyntax('@SassSyntax', 'sass')
-endif
+  execute 'syntax sync match vueSync groupthere '.name.' +'.start.'+'
+  execute 'syntax sync match vueSync groupthere NONE +'.end.'+'
 
-" If less is enabled, load less syntax 
-if s:use_less
-  call s:LoadSyntax('@LessSyntax', 'less')
-endif
+  " Block like <script src="...">...</script>
+  let oneline = start.'.*'.end_tag
+  execute 'syntax match '.name.' fold '
+        \.' +'.oneline.'+'
+        \.' keepend contains='.syntax_group.', vueTag, vueTagOneline'
+endfunction
 
-if s:use_sass || s:use_less
-  syn region lessDefinition transparent matchgroup=cssBraces contains=@LessSyntax
-        \ start="{" 
-        \ end="}" 
-  syn region sassDefinition transparent matchgroup=cssBraces contains=@SassSyntax
-        \ start="{" 
-        \ end="}" 
-endif
+function! s:SetBlockSyntax(config_syntax)
+  syntax sync clear
 
+  for [block, syntax] in items(a:config_syntax)
+    let type = type(syntax)
+    if type == v:t_string
+      call s:SetSyntax(block, syntax, 0)
+    elseif type == v:t_list && len(syntax)
+      call s:SetSyntax(block, syntax[0], 0)
+      for syn in syntax
+        call s:SetSyntax(block, syn, 1)
+      endfor
+    endif
+  endfor
+endfunction
 
-let b:current_syntax = 'vue'
+function! s:HighlightVue()
+  call s:HighlightVueTag()
+  call s:HighlightVueStyle()
+endfunction
 
-" Find tag <template> / <script> / <style> and enable currespond syntax
-syn region vueTemplate 
-      \ start=+<template\(\s.\{-}\)\?>+ 
-      \ end=+^</template>+ 
-      \ keepend contains=@HTMLSyntax
-syn region vueTemplatePug 
-      \ start=+<template lang="pug"\(\s.\{-}\)\?>+ 
-      \ end=+</template>+ 
-      \ keepend contains=@PugSyntax,vueTag
+function! s:HighlightVueTag()
+  syntax region vueTag fold
+        \ start=+^<[^/]+ end=+>+ skip=+></+
+        \ contained contains=htmlTagN,htmlString,htmlArg
+  syntax region vueTag
+        \ start=+^</+ end=+>+
+        \ contained contains=htmlTagN,htmlString,htmlArg
+  syntax region vueTagOneline
+        \ start=+</+ end=+>$+
+        \ contained contains=htmlTagN,htmlString,htmlArg
+  highlight default link vueTag htmlTag
+  highlight default link vueTagOneline htmlTag
+endfunction
 
-syn region vueScript 
-      \ start=+<script\(\s.\{-}\)\?>+ 
-      \ end=+</script>+ 
-      \ keepend contains=@jsAll,jsImport,jsExport,vueTag
+function! s:HighlightVueStyle()
+  syntax keyword cssPseudoClassId contained deep slotted global
+  syntax region cssFunction contained matchgroup=cssFunctionName
+        \ start="\<\(v-bind\)\s*(" end=")"
+        \ contains=cssCustomProp,cssValue.*,cssFunction,cssColor,cssStringQ,cssStringQQ
+        \ oneline
+endfunction
 
-syn region vueStyle 
-      \ start=+<style\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
-      \ keepend contains=@htmlCss,vueTag
-syn region vueStyleLESS 
-      \ start=+<style lang="less"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
-      \ keepend contains=@LessSyntax,vueTag
-syn region vueStyleSASS 
-      \ start=+<style lang="sass"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
-      \ keepend contains=@SassSyntax,vueTag
-syn region vueStyleSCSS 
-      \ start=+<style lang="scss"\(\s.\{-}\)\?>+ 
-      \ end=+</style>+ 
-      \ keepend contains=@SassSyntax,vueTag
+function! s:SetIsKeyword()
+  if has("patch-7.4-1142")
+    if has("win32")
+      syntax iskeyword @,48-57,_,128-167,224-235,$,-
+    else
+      syntax iskeyword @,48-57,_,192-255,$,-
+    endif
+  else
+    setlocal iskeyword+=-
+  endif
+endfunction
 
-syn region vueTag contained start=+<[^/]+ end=+>+ contains=htmlTagN,htmlString,htmlArg fold
-syn region vueTag contained start=+</+ end=+>+ contains=htmlTagN,htmlString,htmlArg
-" syn keyword vueTagName containedin=htmlTagN template script style
+function! s:SetCurrentSyntax()
+  let b:current_syntax = 'vue'
+endfunction
 
-" Vue attributes should color as JS.  Note the trivial end pattern; we let
-" jsBlock take care of ending the region.
-syn region xmlString 
-      \ start=+{+ end=++  
-      \ contained contains=jsBlock,javascriptBlock
+function! s:SetExtraSyntax()
+  call s:SetIsKeyword()
+  call s:HighlightVue()
+  call s:SetCurrentSyntax()
+endfunction
 
-hi def link vueTag htmlTag
+function! VimVuePluginSyntaxMain(...)
+  call s:Init()
+  let syntax_list = vue#GetSyntaxList(s:config_syntax)
+  call s:LoadSyntaxList(syntax_list)
+  call s:SetBlockSyntax(s:config_syntax)
+  call s:SetExtraSyntax()
+endfunction
+
+" Entry
+call VimVuePluginSyntaxMain()