Highlight the surrounding tags correctly

Removes omit_attr argument from s:register_language(), because html,
javascript, and css regions were the only ones that used it, and they
are now handled by syntax/html.vim.

`runtime! syntax/html.vim` also has the advantage that we can hook into
the html syntax, meaning that we can add stuff like highlighting
javascript expressions inside vue directives, and add our own html
attributes.

Also removes the start of line limitation introduced in previous commit

syntax/vue.vim

@@ -6,6 +6,9 @@ if exists("b:current_syntax")
   finish
 endif
 
+runtime! syntax/html.vim
+unlet! b:current_syntax
+
 ""
 " Get the pattern for a HTML {name} attribute with {value}.
 function! s:attr(name, value)
@@ -19,44 +22,36 @@ function! s:syntax_available(language)
 endfunction
 
 ""
-" Register {language} for a given {tag}.
-" If [omit_attr] is 1, the 'lang' attribute may be omitted.
-" If [attr_override] is given and not empty, it will be used for the attribute pattern.
+" Register {language} for a given {tag}. If [attr_override] is given and not
+" empty, it will be used for the attribute pattern.
 function! s:register_language(language, tag, ...)
-  let omit_attr = a:0 ? a:1 : 0
-  let attr_override = a:0 >= 2 ? a:2 : ''
-
-  if omit_attr
-    let start_pattern = ''
-  else
-    let start_pattern = ' \_[^>]*'
-    let start_pattern .= !empty(attr_override) ? attr_override : s:attr('lang', a:language)
-  endif
+  let attr_override = a:0 ? a:1 : ''
+  let attr = !empty(attr_override) ? attr_override : s:attr('lang', a:language)
 
   if s:syntax_available(a:language)
     execute 'syntax include @' . a:language . ' syntax/' . a:language . '.vim'
     unlet! b:current_syntax
     execute 'syntax region vue_' . a:language
           \ 'keepend'
-          \ 'matchgroup=Delimiter'
-          \ 'start=/^<' . a:tag . start_pattern . '\_[^>]*>/'
-          \ 'end="^</' . a:tag . '>"'
-          \ 'contains=@' . a:language
+          \ 'start=/<' . a:tag . ' \_[^>]*' . attr . '\_[^>]*>/'
+          \ 'end="</' . a:tag . '>"me=s-1'
+          \ 'contains=@' . a:language . ',vueSurroundingTag'
           \ 'fold'
   endif
 endfunction
 
-call s:register_language('html', 'template', 1)
-call s:register_language('pug', 'template', 0, s:attr('lang', '\%(pug\|jade\)'))
+call s:register_language('pug', 'template', s:attr('lang', '\%(pug\|jade\)'))
 call s:register_language('slm', 'template')
 call s:register_language('handlebars', 'template')
-call s:register_language('javascript', 'script', 1)
-call s:register_language('typescript', 'script', 0, '\%(lang=\("\|''\)[^\1]*\(ts\|typescript\)[^\1]*\1\|ts\)')
+call s:register_language('typescript', 'script', '\%(lang=\("\|''\)[^\1]*\(ts\|typescript\)[^\1]*\1\|ts\)')
 call s:register_language('coffee', 'script')
-call s:register_language('css', 'style', 1)
 call s:register_language('stylus', 'style')
 call s:register_language('sass', 'style')
 call s:register_language('scss', 'style')
 call s:register_language('less', 'style')
 
+syn region  vueSurroundingTag   contained start=+<\(script\|style\|template\)+ end=+>+ fold contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent
+syn keyword htmlSpecialTagName  contained template
+syn keyword htmlArg             contained scoped ts
+
 let b:current_syntax = "vue"

test/test_syntax.vader

@@ -8,6 +8,8 @@ Given vue (HTML template without lang attribute):
 
 Execute:
   AssertEqual 'htmlTag', SyntaxAt(2, 3)
+  AssertEqual 'htmlTag', SyntaxAt(1, 1)
+  AssertEqual 'htmlSpecialTagName', SyntaxAt(1, 2)
 
 
 Given vue (Template tag inside a template):
@@ -32,7 +34,7 @@ Given vue:
 
 Execute:
   AssertEqual 'javaScriptLineComment', SyntaxAt(2, 1)
-  " TODO: Assert that the script tag is highlighted as HTML
+  AssertEqual 'htmlScriptTag', SyntaxAt(1, 1)
 
 
 Given vue (Script tag with misc. attributes and newline):
@@ -44,6 +46,8 @@ Given vue (Script tag with misc. attributes and newline):
 
 Execute:
   AssertEqual 'javaScriptLineComment', SyntaxAt(4, 1)
+  AssertEqual 'htmlArg', SyntaxAt(2, 9)
+  AssertEqual 'htmlScriptTag', SyntaxAt(1, 1)
 
 #
 # CSS
@@ -55,7 +59,7 @@ Given vue (CSS region without lang attribute):
 
 Execute:
   AssertEqual 'cssComment', SyntaxAt(2, 1)
-  " TODO Assert that the style tag is highlighted as HTML
+  AssertEqual 'htmlTag', SyntaxAt(1, 1)
 
 #
 # Pug
@@ -68,6 +72,7 @@ Given vue (Pug template):
 Execute:
   AssertEqual 'htmlTagName', SyntaxAt(2, 1)
   AssertEqual 'pugInterpolationDelimiter', SyntaxAt(2, 3)
+  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)
 
 
 Given vue (Pug template using their former name):
@@ -89,6 +94,7 @@ Given vue (SCSS region):
 
 Execute:
   AssertEqual 'scssVariable', SyntaxAt(2, 1)
+  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)
 
 #
 # Sass
@@ -100,6 +106,7 @@ Given vue (Sass region):
 
 Execute:
   AssertEqual 'sassVariable', SyntaxAt(2, 1)
+  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)
 
 
 Given vue (Sass region with modifier):
@@ -124,6 +131,7 @@ Given vue (Sass region):
 Execute:
   AssertEqual 'stylusImport', SyntaxAt(2, 1)
   AssertEqual 'cssTagName', SyntaxAt(4, 1)
+  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)
 
 
 #
@@ -136,6 +144,7 @@ Given vue (Typescript region using "ts" as name):
 
 Execute:
   AssertEqual 'typescriptDecorators', SyntaxAt(2, 1)
+  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)
 
 
 Given vue (Typescript region using "typescript" as name):
@@ -154,3 +163,4 @@ Given vue (Typescript region using "ts" attribute):
 
 Execute:
   AssertEqual 'typescriptDecorators', SyntaxAt(2, 1)
+  AssertEqual 'htmlArg', SyntaxAt(1, 9)