From b5c8e6f330c407eab10afdabbf876d23c59810fa Mon Sep 17 00:00:00 2001 From: Adriaan Zonnenberg Date: Sat, 25 Mar 2017 22:58:43 +0100 Subject: [PATCH] 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 | 37 ++++++++++++++++--------------------- test/test_syntax.vader | 14 ++++++++++++-- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index 065a111..e92baaf 100644 --- a/syntax/vue.vim +++ b/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="^"' - \ 'contains=@' . a:language + \ 'start=/<' . a:tag . ' \_[^>]*' . attr . '\_[^>]*>/' + \ 'end=""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" diff --git a/test/test_syntax.vader b/test/test_syntax.vader index 9c9ffd5..5789c89 100644 --- a/test/test_syntax.vader +++ b/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)