From 4112c063c8ff823d2df1f2ae2cc59982a13b5e2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 15 Aug 2020 13:34:08 -0300 Subject: [PATCH 01/23] feat: support JavaScript syntax on template This support: 1. Non-zero length dynamic values (:attr="variable"); 2. Zero length dynamic values (:attr=""); 3. Slots syntax (#name) now have JavaScript syntax also (#default="{ thisHere }"); There is also comments explaining commands and the mustache syntax is considered htmlSpecialChar, because it's easier to see them that way. Closes #143 --- syntax/vue.vim | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index 56cdf33..859c6a3 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -71,7 +71,16 @@ endfor 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 -syn match htmlArg "[@v:][-:.0-9_a-z]*\>" contained +syn match htmlArg "[@#v:a-z][-:.0-9_a-z]*\>" contained + +" Prevent 0 lenght vue dynamic attributes from (:id="") from overflowing from +" the area described by two quotes ("" or '') this works because syntax +" defined earlier in the file have priority. +syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=["']\{2\}/ containedin=ALLBUT,htmlComment + +" Actually provide the JavaScript syntax highlighting. +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=["']/ms=e+1 keepend end=/["']/me=s-1 contains=@jsAll containedin=ALL +syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend end=/}}/ contains=@jsAll containedin=ALLBUT,htmlComment syntax sync fromstart From ba052505f704782dbf879ba0ffdc8a5aabbd863b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Mon, 17 Aug 2020 12:25:43 -0300 Subject: [PATCH 02/23] bug: prevent "' from being a valid region (which is not) --- syntax/vue.vim | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index 859c6a3..4580095 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -76,11 +76,19 @@ syn match htmlArg "[@#v:a-z][-:.0-9_a-z]*\>" contained " Prevent 0 lenght vue dynamic attributes from (:id="") from overflowing from " the area described by two quotes ("" or '') this works because syntax " defined earlier in the file have priority. -syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=["']\{2\}/ containedin=ALLBUT,htmlComment +syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=""/ containedin=ALLBUT,htmlComment +syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=''/ containedin=ALLBUT,htmlComment " Actually provide the JavaScript syntax highlighting. -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=["']/ms=e+1 keepend end=/["']/me=s-1 contains=@jsAll containedin=ALL + +" for mustaches quotes (`{{` and `}}`) syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend end=/}}/ contains=@jsAll containedin=ALLBUT,htmlComment +" for double quotes (") and for single quotes (') +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALL +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALL +" It's necessary to have both because we can't start a region with double +" quotes and it with a single quote, and removing `keepend` would result in +" side effects. syntax sync fromstart From 894351b38d127ca0e0b4e9bbdcb7500cfe53c30b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Wed, 19 Aug 2020 10:45:58 -0300 Subject: [PATCH 03/23] fix: js syntax highlight within comments shouldn't exist In this case at least --- syntax/vue.vim | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index 4580095..f4564b4 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -84,8 +84,8 @@ syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=''/ containedin=ALLBUT, " for mustaches quotes (`{{` and `}}`) syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend end=/}}/ contains=@jsAll containedin=ALLBUT,htmlComment " for double quotes (") and for single quotes (') -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALL -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALL +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment " It's necessary to have both because we can't start a region with double " quotes and it with a single quote, and removing `keepend` would result in " side effects. From cc3ad7ab7720ae24522373570c8baca8fb21ee45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Wed, 19 Aug 2020 10:58:21 -0300 Subject: [PATCH 04/23] feat: also highlight code insied #[], @[] and :[] --- syntax/vue.vim | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index f4564b4..aa3e21f 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -76,19 +76,20 @@ syn match htmlArg "[@#v:a-z][-:.0-9_a-z]*\>" contained " Prevent 0 lenght vue dynamic attributes from (:id="") from overflowing from " the area described by two quotes ("" or '') this works because syntax " defined earlier in the file have priority. -syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=""/ containedin=ALLBUT,htmlComment -syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<=''/ containedin=ALLBUT,htmlComment +syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=""/ containedin=ALLBUT,htmlComment +syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=''/ containedin=ALLBUT,htmlComment " Actually provide the JavaScript syntax highlighting. " for mustaches quotes (`{{` and `}}`) syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend end=/}}/ contains=@jsAll containedin=ALLBUT,htmlComment " for double quotes (") and for single quotes (') -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)[-:.0-9_a-z]*=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment " It's necessary to have both because we can't start a region with double " quotes and it with a single quote, and removing `keepend` would result in " side effects. +syn region vueJavascriptInTemplate matchgroup=htmlArg start=/[@#:]\[/ keepend end=/\]/ contains=@jsAll containedin=ALLBUT,htmlComment syntax sync fromstart From 68acbe3dce8e9faaa8fdf2aa5200c606c2731744 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Wed, 19 Aug 2020 17:03:42 -0300 Subject: [PATCH 05/23] docs: add better comments to syntax file --- syntax/vue.vim | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index aa3e21f..f97095f 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -84,11 +84,12 @@ syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=''/ containedin=ALL " for mustaches quotes (`{{` and `}}`) syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend end=/}}/ contains=@jsAll containedin=ALLBUT,htmlComment " for double quotes (") and for single quotes (') -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment " It's necessary to have both because we can't start a region with double " quotes and it with a single quote, and removing `keepend` would result in " side effects. +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +" This one is for #[thisHere] @[thisHereToo] :[thisHereAlso] syn region vueJavascriptInTemplate matchgroup=htmlArg start=/[@#:]\[/ keepend end=/\]/ contains=@jsAll containedin=ALLBUT,htmlComment syntax sync fromstart From 5eb491c3e4ca155b31a8ae82404465ddd67f6cd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 9 Jan 2021 17:28:41 -0300 Subject: [PATCH 06/23] fix: html attributes with a colon in the middle of it were conflicting with this syntax E.g.: `xmlns:xlink="http://www.w3.org/1999/xlink"` This commit prevents this kinda error by enforcing the use of a whitespace character before the dynamic attribute --- syntax/vue.vim | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index f97095f..06f4d67 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -87,8 +87,8 @@ syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend " It's necessary to have both because we can't start a region with double " quotes and it with a single quote, and removing `keepend` would result in " side effects. -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment -syn region vueJavascriptInTemplate start=/\(\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +syn region vueJavascriptInTemplate start=/\(\s\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment +syn region vueJavascriptInTemplate start=/\(\s\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment " This one is for #[thisHere] @[thisHereToo] :[thisHereAlso] syn region vueJavascriptInTemplate matchgroup=htmlArg start=/[@#:]\[/ keepend end=/\]/ contains=@jsAll containedin=ALLBUT,htmlComment From 404afa729641ffafe46aae6dd6c95ea9067aa2c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Thu, 21 Jan 2021 12:21:17 -0300 Subject: [PATCH 07/23] fix: syntax for js values only work for html Other syntaxes where clashing and they just didn't work properly --- syntax/vue.vim | 47 +++++++++++++++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index 06f4d67..e3e4859 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -41,6 +41,7 @@ endfunction let s:languages = [ \ {'name': 'less', 'tag': 'style'}, + \ {'name': 'html', 'tag': 'template', 'attr_pattern': '', 'js_values_syntax': 1}, \ {'name': 'pug', 'tag': 'template', 'attr_pattern': s:attr('lang', '\%(pug\|jade\)')}, \ {'name': 'slm', 'tag': 'template'}, \ {'name': 'handlebars', 'tag': 'template'}, @@ -52,11 +53,39 @@ let s:languages = [ \ {'name': 'scss', 'tag': 'style'}, \ ] +function! s:js_values_for_html() + " Prevent 0 length vue dynamic attributes (:id="") from overflowing from + " the area described by two quotes ("" or '') this works because syntax + " defined earlier in the file have priority. + syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=""/ containedin=ALLBUT,htmlComment + syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=''/ containedin=ALLBUT,htmlComment + + " Actually provide the JavaScript syntax highlighting. + + " for double quotes (") and for single quotes (') + " It's necessary to have both because we can't start a region with double + " quotes and it with a single quote, and removing `keepend` would result in + " side effects. + syn region vueJavascriptInTemplate start=/\(\s\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment + syn region vueJavascriptInTemplate start=/\(\s\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment + " This one is for #[thisHere] @[thisHereToo] :[thisHereAlso] + syn region vueJavascriptInTemplate matchgroup=htmlArg start=/[@#:]\[/ keepend end=/\]/ contains=@jsAll containedin=ALLBUT,htmlComment +endfunction + for s:language in s:languages let s:attr_pattern = has_key(s:language, 'attr_pattern') ? s:language.attr_pattern : s:attr('lang', s:language.name) let s:start_pattern = '<' . s:language.tag . '\>\_[^>]*' . s:attr_pattern . '\_[^>]*>' if s:should_register(s:language.name, s:start_pattern) + if has_key(s:language, 'js_values_syntax') + execute 'call s:js_values_for_' . s:language.name . '()' + endif + + if (s:language.name == 'html') + " Skip the syntax loading for html because it's already loaded + continue + endif + execute 'syntax include @' . s:language.name . ' syntax/' . s:language.name . '.vim' unlet! b:current_syntax execute 'syntax region vue_' . s:language.name @@ -73,25 +102,11 @@ syn keyword htmlSpecialTagName contained template syn keyword htmlArg contained scoped ts syn match htmlArg "[@#v:a-z][-:.0-9_a-z]*\>" contained -" Prevent 0 lenght vue dynamic attributes from (:id="") from overflowing from -" the area described by two quotes ("" or '') this works because syntax -" defined earlier in the file have priority. -syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=""/ containedin=ALLBUT,htmlComment -syn match htmlString /\(\([@#:]\|v-\)[-:.0-9_a-z\[\]]*=\)\@<=''/ containedin=ALLBUT,htmlComment - -" Actually provide the JavaScript syntax highlighting. - " for mustaches quotes (`{{` and `}}`) syn region vueJavascriptInTemplate matchgroup=htmlSpecialChar start=/{{/ keepend end=/}}/ contains=@jsAll containedin=ALLBUT,htmlComment -" for double quotes (") and for single quotes (') -" It's necessary to have both because we can't start a region with double -" quotes and it with a single quote, and removing `keepend` would result in -" side effects. -syn region vueJavascriptInTemplate start=/\(\s\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<="/ms=e+1 keepend end=/"/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment -syn region vueJavascriptInTemplate start=/\(\s\([@#:]\|v-\)\([-:.0-9_a-z]*\|\[.*\]\)=\)\@<='/ms=e+1 keepend end=/'/me=s-1 contains=@jsAll containedin=ALLBUT,htmlComment -" This one is for #[thisHere] @[thisHereToo] :[thisHereAlso] -syn region vueJavascriptInTemplate matchgroup=htmlArg start=/[@#:]\[/ keepend end=/\]/ contains=@jsAll containedin=ALLBUT,htmlComment syntax sync fromstart let b:current_syntax = "vue" + +" vim: et tw=2 sts=2 From 921eedc8a955a400c123eb5863202d53fb78fcd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 20 Feb 2021 17:27:38 -0300 Subject: [PATCH 08/23] fix: register js_values_syntax after lang base --- syntax/vue.vim | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index e3e4859..e4ae7a8 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -77,23 +77,21 @@ for s:language in s:languages let s:start_pattern = '<' . s:language.tag . '\>\_[^>]*' . s:attr_pattern . '\_[^>]*>' if s:should_register(s:language.name, s:start_pattern) - if has_key(s:language, 'js_values_syntax') - execute 'call s:js_values_for_' . s:language.name . '()' + " Skip the syntax loading for html because it's already loaded as base + if (s:language.name != 'html') + execute 'syntax include @' . s:language.name . ' syntax/' . s:language.name . '.vim' + unlet! b:current_syntax + execute 'syntax region vue_' . s:language.name + \ 'keepend' + \ 'start=/' . s:start_pattern . '/' + \ 'end=""me=s-1' + \ 'contains=@' . s:language.name . ',vueSurroundingTag' + \ 'fold' endif - if (s:language.name == 'html') - " Skip the syntax loading for html because it's already loaded - continue + if has_key(s:language, 'js_values_syntax') + execute 'call s:js_values_for_' . s:language.name . '()' endif - - execute 'syntax include @' . s:language.name . ' syntax/' . s:language.name . '.vim' - unlet! b:current_syntax - execute 'syntax region vue_' . s:language.name - \ 'keepend' - \ 'start=/' . s:start_pattern . '/' - \ 'end=""me=s-1' - \ 'contains=@' . s:language.name . ',vueSurroundingTag' - \ 'fold' endif endfor From ce35421c7cd9f7e301e851b48212130860b27654 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 20 Feb 2021 17:30:44 -0300 Subject: [PATCH 09/23] Change g:vue_pre_processors' default to 'detect_on_enter' docs: update docs on change of default behavior --- readme.md | 45 +++++++++++++++++++++++++++++++-------------- syntax/vue.vim | 5 +++++ 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/readme.md b/readme.md index 99c48a0..27f7738 100644 --- a/readme.md +++ b/readme.md @@ -40,6 +40,34 @@ and properly [configured](https://github.com/vuejs/eslint-plugin-vue#rocket-usag npm i -g eslint eslint-plugin-vue ``` +## Options + +### `g:vue_pre_processors` + +> default value: `'detect_on_enter'` + +This options controls which preprocessors' syntax will be included when you open a new vue file. So when you are using `scss` or `typescript`, the correct syntax highlighting will be applied. + +To disable pre-processor languages altogether (only highlight HTML, JavaScript, and CSS): + +```vim +let g:vue_pre_processors = [] +``` + +Available pre-processors are: `coffee`, `haml`, `handlebars`, `less`, `pug`, `sass`, `scss`, `slm`, `stylus`, `typescript`. + +When `g:vue_pre_processors` is set to `'detect_on_enter'` instead of a list, vim-vue will detect the pre-processors used when a file is opened, and load only their syntax files. + +```vim +let g:vue_pre_processors = 'detect_on_enter' +``` + +This is the default behavior. This also matches how vim natively detects syntaxes, for example, when you create a new file and start typing, you wont see the correct syntax until you save the file under a extension so that vim can detect which syntax to load. The 'detect_on_enter' is similar. + +When you want vim-vue to detect a new syntax you just typed, just save the file (`:w`) and reload the file (`:e!`). + +Loading all syntaxes by default is not recommended because doing so slows down vim quite allot due to the multiple syntax highlighting checks that are done. Also, having multiple syntaxes for the `template` tag loaded at the same time, may result in the `js` syntax in the template (like `:value="variable"`) malfunction (see #150 for details). + ## Contributing If your language is not getting highlighted open an issue or a PR with the fix. @@ -101,22 +129,11 @@ endfunction ### _Vim slows down when using this plugin_ How can I fix that? -When checking for pre-processor languages, multiple syntax highlighting checks are done, which can slow down vim. You can trim down which pre-processors to use by setting `g:vue_pre_processors` to a whitelist of languages to support: - -```vim -let g:vue_pre_processors = ['pug', 'scss'] -``` - -To disable pre-processor languages altogether (only highlight HTML, JavaScript, and CSS): - -```vim -let g:vue_pre_processors = [] -``` -Available pre-processors are: coffee, haml, handlebars, less, pug, sass, scss, slm, stylus, typescript +> This was more of a problem when the default value of 'g:vue_pre_processors' was to load all pre-processors available, now that this is not the case, this problem shouldn't happen. That said, if you still are having problems, try setting `let g:vue_pre_processors = []`, see if it helps. Read the section on this option above for more information. -When `g:vue_pre_processors` is set to 'detect_on_enter' instead of a list, vim-vue will detect the pre-processors used when a file is opened, and load only their syntax files. +When checking for pre-processor languages, multiple syntax highlighting checks are done, which can slow down vim. You can trim down which pre-processors to use by setting `g:vue_pre_processors` to a whitelist of languages to support: ```vim -let g:vue_pre_processors = 'detect_on_enter' +let g:vue_pre_processors = ['pug', 'scss'] ``` diff --git a/syntax/vue.vim b/syntax/vue.vim index e4ae7a8..99f5e53 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -11,6 +11,11 @@ if exists('g:vue_disable_pre_processors') && g:vue_disable_pre_processors let g:vue_pre_processors = [] endif +" If not exist, set the default value +if !exists('g:vue_pre_processors') + let g:vue_pre_processors = 'detect_on_enter' +endif + runtime! syntax/html.vim syntax clear htmlTagName syntax match htmlTagName contained "\<[a-zA-Z0-9:-]*\>" From 04f2f72d065d2e3cd4fe0a78e64ecc5791929d08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 27 Feb 2021 09:59:08 -0300 Subject: [PATCH 10/23] Add 'Before' in vader testing to configure 'all' syntax --- test/test_indent.vader | 3 +++ test/test_syntax.vader | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/test/test_indent.vader b/test/test_indent.vader index efaafb7..e8a3955 100644 --- a/test/test_indent.vader +++ b/test/test_indent.vader @@ -1,3 +1,6 @@ +Before: + let g:vue_pre_processors = 'all' + # # HTML # diff --git a/test/test_syntax.vader b/test/test_syntax.vader index 7819b3b..a044e45 100644 --- a/test/test_syntax.vader +++ b/test/test_syntax.vader @@ -1,3 +1,5 @@ +Before: + let g:vue_pre_processors="all" # # HTML # @@ -27,7 +29,7 @@ Execute (Syntax doesn't stop at the first closing template tag): # # JavaScript # -Given vue: +Given vue (Recognizes javascript syntax with bare script tag): From 80e82262483394111d15149747385c139234069b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 27 Feb 2021 11:43:43 -0300 Subject: [PATCH 11/23] Change recommendation on README for reloading detect_on_enter --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 27f7738..4a9014d 100644 --- a/readme.md +++ b/readme.md @@ -64,7 +64,7 @@ let g:vue_pre_processors = 'detect_on_enter' This is the default behavior. This also matches how vim natively detects syntaxes, for example, when you create a new file and start typing, you wont see the correct syntax until you save the file under a extension so that vim can detect which syntax to load. The 'detect_on_enter' is similar. -When you want vim-vue to detect a new syntax you just typed, just save the file (`:w`) and reload the file (`:e!`). +When you want vim-vue to detect a new syntax you just typed, just turn the syntax off (`:syntax off`) and on again (`:syntax on`). Loading all syntaxes by default is not recommended because doing so slows down vim quite allot due to the multiple syntax highlighting checks that are done. Also, having multiple syntaxes for the `template` tag loaded at the same time, may result in the `js` syntax in the template (like `:value="variable"`) malfunction (see #150 for details). From c168b9c70aa9c30e8b1d4efb068f94788d8d6547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 27 Feb 2021 11:55:11 -0300 Subject: [PATCH 12/23] Add tests for new js_value_syntax on template --- test/test_syntax_js_values_in_template.vader | 107 +++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 test/test_syntax_js_values_in_template.vader diff --git a/test/test_syntax_js_values_in_template.vader b/test/test_syntax_js_values_in_template.vader new file mode 100644 index 0000000..8380eeb --- /dev/null +++ b/test/test_syntax_js_values_in_template.vader @@ -0,0 +1,107 @@ +Before: + let g:vue_pre_processors="detect_on_enter" +# +# HTML +# +Given vue (HTML directives); + + +Do: +# refresh detect_on_enter + :syntax off\ + :syntax on\ + +Execute: + AssertEqual 'htmlArg', SyntaxAt(2, 10) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(2, 19) + +Given vue (HTML slots); + + +Do: +# refresh detect_on_enter + :syntax off\ + :syntax on\ + +Execute: + AssertEqual 'htmlArg', SyntaxAt(3, 5) + AssertEqual 'htmlArg', SyntaxAt(4, 5) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(3, 15) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(4, 7) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(4, 24) + +Given vue (HTML events); + + +Do: +# refresh detect_on_enter + :syntax off\ + :syntax on\ + +Execute: + AssertEqual 'htmlArg', SyntaxAt(3, 5) + AssertEqual 'htmlArg', SyntaxAt(4, 5) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(3, 13) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(4, 7) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(4, 33) + +Given vue (HTML attributes and props); + + +Do: +# refresh detect_on_enter + :syntax off\ + :syntax on\ + +Execute: +# dynamic and static props + AssertEqual 'htmlArg', SyntaxAt(3, 5) + AssertEqual 'htmlArg', SyntaxAt(4, 5) + AssertEqual 'htmlArg', SyntaxAt(5, 5) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(3, 13) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(4, 7) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(4, 18) +# variant tabindex + AssertEqual 'htmlArg', SyntaxAt(5, 5) + AssertEqual 'htmlArg', SyntaxAt(6, 5) +# both types of string + AssertEqual 'htmlString', SyntaxAt(3, 12) + AssertEqual 'htmlString', SyntaxAt(6, 16) + AssertEqual 'htmlString', SyntaxAt(4, 17) + AssertEqual 'htmlString', SyntaxAt(7, 16) + +Given vue (HTML mustaches syntax); + + +Do: +# refresh detect_on_enter + :syntax off\ + :syntax on\ + +Execute: + AssertEqual 'htmlSpecialChar', SyntaxAt(3, 9) + AssertEqual 'vueJavascriptInTemplate', SyntaxAt(3, 11) From 46a079298e9528d58154161c9af2780aeb227fc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Sat, 27 Feb 2021 13:35:14 -0300 Subject: [PATCH 13/23] Add a nice comment on 'js_value_syntax' --- syntax/vue.vim | 2 ++ 1 file changed, 2 insertions(+) diff --git a/syntax/vue.vim b/syntax/vue.vim index 99f5e53..c1251ce 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -44,6 +44,8 @@ function! s:should_register(language, start_pattern) return 1 endfunction +" If you want to add a js_values_syntax for a language, you need to add a +" function named 's:js_values_for_' in this file let s:languages = [ \ {'name': 'less', 'tag': 'style'}, \ {'name': 'html', 'tag': 'template', 'attr_pattern': '', 'js_values_syntax': 1}, From 0a26b48f42af3e58fa165510023650984881f9e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Tue, 30 Mar 2021 17:17:41 -0300 Subject: [PATCH 14/23] Eager load html js in template syntax Eager load html, because it's not a pre-processor, and being loaded since the start (for the tags), it's kinda counter intuitive that you need to load the html pre-processor if the syntax is already mostly correct. --- syntax/vue.vim | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index c1251ce..3d222b0 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -48,7 +48,6 @@ endfunction " function named 's:js_values_for_' in this file let s:languages = [ \ {'name': 'less', 'tag': 'style'}, - \ {'name': 'html', 'tag': 'template', 'attr_pattern': '', 'js_values_syntax': 1}, \ {'name': 'pug', 'tag': 'template', 'attr_pattern': s:attr('lang', '\%(pug\|jade\)')}, \ {'name': 'slm', 'tag': 'template'}, \ {'name': 'handlebars', 'tag': 'template'}, @@ -79,6 +78,11 @@ function! s:js_values_for_html() syn region vueJavascriptInTemplate matchgroup=htmlArg start=/[@#:]\[/ keepend end=/\]/ contains=@jsAll containedin=ALLBUT,htmlComment endfunction +" Eager load html, because it's not a pre-processor, and being loaded since the +" start (for the tags), it's kinda counter intuitive that you need to load the +" html pre-processor if the syntax is already mostly correct. +call s:js_values_for_html() + for s:language in s:languages let s:attr_pattern = has_key(s:language, 'attr_pattern') ? s:language.attr_pattern : s:attr('lang', s:language.name) let s:start_pattern = '<' . s:language.tag . '\>\_[^>]*' . s:attr_pattern . '\_[^>]*>' From 2b184b42a3cf0c75865162e0d7f64c1681df5127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Tue, 11 Oct 2022 19:39:07 -0300 Subject: [PATCH 15/23] feat: make script in template be the same as the last + +Do: +# refresh detect_on_enter + :syntax off | syntax on\ + +Execute: + AssertEqual 'htmlSpecialChar', SyntaxAt(3, 9) + AssertEqual 'typescriptImport', SyntaxAt(7, 1) + AssertEqual 'vueTemplateScript', SyntaxAt(3, 11) + AssertEqual 'typescriptPredefinedType', SyntaxAt(3, 31) From 93d10835723d032a7b132c6a8bbcd6a2ecc4513e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Tue, 11 Oct 2022 21:20:14 -0300 Subject: [PATCH 21/23] test: add manual testing environment --- Makefile | 7 +++++++ test/vimrc_debug | 4 ++++ 2 files changed, 11 insertions(+) create mode 100644 test/vimrc_debug diff --git a/Makefile b/Makefile index de69007..b568a20 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,17 @@ test: dependencies vim -u test/vimrc -c 'Vader! test/*.vader' +manual-test: dependencies + vim -u test/vimrc_debug test + test-nvim: dependencies VADER_OUTPUT_FILE=/dev/stderr nvim -u test/vimrc -c 'Vader! test/*.vader' --headless +manual-test-nvim: dependencies + nvim -u test/vimrc_debug test + dependencies = \ + 'tpope/vim-scriptease' \ 'junegunn/vader.vim' \ 'cakebaker/scss-syntax.vim' \ 'digitaltoad/vim-pug' \ diff --git a/test/vimrc_debug b/test/vimrc_debug new file mode 100644 index 0000000..b670d4e --- /dev/null +++ b/test/vimrc_debug @@ -0,0 +1,4 @@ +source test/vimrc + +" Allow inspection of syntax +map ZI ScripteaseSynnames From a73d0adf1ceebe535e317b6332c28f20ba2bb099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Tue, 11 Oct 2022 21:24:49 -0300 Subject: [PATCH 22/23] test: add comments to all tests on syntax_template_scripts --- test/test_syntax_template_scripts.vader | 55 +++++++++++-------------- 1 file changed, 25 insertions(+), 30 deletions(-) diff --git a/test/test_syntax_template_scripts.vader b/test/test_syntax_template_scripts.vader index 6d2d9e8..58699e0 100644 --- a/test/test_syntax_template_scripts.vader +++ b/test/test_syntax_template_scripts.vader @@ -8,13 +8,12 @@ Given vue (HTML directives); -Do: -# refresh detect_on_enter - :syntax off\ - :syntax on\ +Execute (refresh detect_on_enter): + syntax off + syntax on -Execute: - AssertEqual 'htmlArg', SyntaxAt(2, 10) +Then (expect vue directives to be highlighted as htmlArg and it's value to be highlighted as script): + AssertEqual 'htmlTag', SyntaxAt(2, 10) AssertEqual 'vueTemplateScript', SyntaxAt(2, 19) Given vue (HTML slots); @@ -25,12 +24,11 @@ Given vue (HTML slots); /> -Do: -# refresh detect_on_enter - :syntax off\ - :syntax on\ +Execute (refresh detect_on_enter): + syntax off + syntax on -Execute: +Then (expect dynamic slots and slot scopes to be script highlighted): AssertEqual 'htmlArg', SyntaxAt(3, 5) AssertEqual 'htmlArg', SyntaxAt(4, 5) AssertEqual 'vueTemplateScript', SyntaxAt(3, 15) @@ -45,12 +43,11 @@ Given vue (HTML events); /> -Do: -# refresh detect_on_enter - :syntax off\ - :syntax on\ +Execute (refresh detect_on_enter): + syntax off + syntax on -Execute: +Then (expect dynamic events and event callbacks to be script highlighted): AssertEqual 'htmlArg', SyntaxAt(3, 5) AssertEqual 'htmlArg', SyntaxAt(4, 5) AssertEqual 'vueTemplateScript', SyntaxAt(3, 13) @@ -68,12 +65,11 @@ Given vue (HTML attributes and props); /> -Do: -# refresh detect_on_enter - :syntax off\ - :syntax on\ +Execute (refresh detect_on_enter): + syntax off + syntax on -Execute: +Then (expect dynamic bindings and binding values to be script highlighted but static props and args to be htmlString): # dynamic and static props AssertEqual 'htmlArg', SyntaxAt(3, 5) AssertEqual 'htmlArg', SyntaxAt(4, 5) @@ -97,12 +93,11 @@ Given vue (HTML mustaches syntax); -Do: -# refresh detect_on_enter - :syntax off\ - :syntax on\ +Execute (refresh detect_on_enter): + syntax off + syntax on -Execute: +Then (expect inside of a mustache to be script highlighted): AssertEqual 'htmlSpecialChar', SyntaxAt(3, 9) AssertEqual 'vueTemplateScript', SyntaxAt(3, 11) @@ -117,11 +112,11 @@ import { defineComponent } from 'vue'; export default defineComponent({ name: 'Mock' }) -Do: -# refresh detect_on_enter - :syntax off | syntax on\ +Execute (refresh detect_on_enter): + syntax off + syntax on -Execute: +Then (Expect typescript highlighting to be present in the template): AssertEqual 'htmlSpecialChar', SyntaxAt(3, 9) AssertEqual 'typescriptImport', SyntaxAt(7, 1) AssertEqual 'vueTemplateScript', SyntaxAt(3, 11) From aaeec5602294002de7f7e0ec12efb2b23dcb0e24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Hoyer?= Date: Tue, 11 Oct 2022 21:30:42 -0300 Subject: [PATCH 23/23] refactor: automatically determine if template_script function has to execute --- syntax/vue.vim | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/syntax/vue.vim b/syntax/vue.vim index 84acb5c..082ed81 100644 --- a/syntax/vue.vim +++ b/syntax/vue.vim @@ -62,8 +62,7 @@ syn region vueTemplateScript matchgroup=htmlSpecialChar start=/{{/ keepend end=/ " if you want to add script highlighting support for a specific template " language, you should do it in this region (marked by the {{{fold marks}}}) " named "s:template_script_in_", the "" must match the name -" declared on the "s:languages" array (later in the file) and add a key in the -" language object referring to the language you want to include highlighting for +" declared on the "s:languages" array (later in the file) function! s:template_script_in_html() " Prevent 0 length vue dynamic attributes (:id="") from overflowing from @@ -120,7 +119,8 @@ for s:language in s:languages execute 'syntax cluster TemplateScript contains=@'.s:language.name endif - if has_key(s:language, 'template_script_syntax') + " if function exists, call it + if (exists('*s:template_script_in_' . s:language.name)) execute 'call s:template_script_in_' . s:language.name . '()' endif endif