diff options
Diffstat (limited to 'syntax/svelte.vim')
| -rw-r--r-- | syntax/svelte.vim | 341 |
1 files changed, 248 insertions, 93 deletions
diff --git a/syntax/svelte.vim b/syntax/svelte.vim index d872826c..f67c8caf 100644 --- a/syntax/svelte.vim +++ b/syntax/svelte.vim @@ -2,123 +2,278 @@ if polyglot#init#is_disabled(expand('<sfile>:p'), 'svelte', 'syntax/svelte.vim') finish endif +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" " Vim syntax file -" Language: Svelte 3 (HTML/JavaScript) -" Author: Evan Lecklider <evan@lecklider.com> -" Maintainer: Evan Lecklide <evan@lecklider.com> -" Depends: pangloss/vim-javascript -" URL: https://github.com/evanleck/vim-svelte " -" Like vim-jsx, this depends on the pangloss/vim-javascript syntax package (and -" is tested against it exclusively). If you're using vim-polyglot, then you're -" all set. - -if exists("b:current_syntax") +" Language: Svelte +" Maintainer: leaf <leafvocation@gmail.com> +" +" CREDITS: Inspired by mxw/vim-jsx. +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +if exists("b:current_syntax") && b:current_syntax == 'svelte' finish endif -" Read HTML to begin with. -runtime! syntax/html.vim -unlet! b:current_syntax +" For advanced users, this variable can be used to avoid overload +let b:current_loading_main_syntax = 'svelte' +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" +" Config {{{ +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +let s:load_full_syntax = svelte#GetConfig('load_full_syntax', 0) +let s:use_pug = svelte#GetConfig('use_pug', 0) +let s:use_less = svelte#GetConfig('use_less', 0) +let s:use_sass = svelte#GetConfig('use_sass', 0) +let s:use_coffee = svelte#GetConfig('use_coffee', 0) +let s:use_typescript = svelte#GetConfig('use_typescript', 0) +"}}} -" Expand HTML tag names to include mixed case, periods, and colons. -syntax match htmlTagName contained "\<[a-zA-Z:\.]*\>" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" +" Functions {{{ +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +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) + endif +endfunction -" Special attributes that include some kind of binding e.g. "on:click", -" "bind:something", etc. -syntax match svelteKeyword "\<[a-z]\+:[a-zA-Z|]\+=" contained containedin=htmlTag +function! s:LoadDefaultSyntax(group, type) + unlet! b:current_syntax + let syntaxPaths = ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim'] + for path in syntaxPaths + let file = expand(path).'/syntax/'.a:type.'.vim' + if filereadable(file) + execute 'syntax include '.a:group.' '.file + endif + endfor +endfunction -" The "slot" attribute has special meaning. -syntax keyword svelteKeyword slot contained containedin=htmlTag +function! s:LoadFullSyntax(group, type) + call s:SetCurrentSyntax(a:type) + exec 'syntax include '.a:group.' syntax/'.a:type.'.vim' +endfunction -" According to vim-jsx, you can let jsBlock take care of ending the region. -" https://github.com/mxw/vim-jsx/blob/master/after/syntax/jsx.vim -syntax region svelteExpression start="{" end="" contains=jsBlock,javascriptBlock containedin=htmlString,htmlTag,htmlArg,htmlValue,htmlH1,htmlH2,htmlH3,htmlH4,htmlH5,htmlH6,htmlHead,htmlTitle,htmlBoldItalicUnderline,htmlUnderlineBold,htmlUnderlineItalicBold,htmlUnderlineBoldItalic,htmlItalicUnderline,htmlItalicBold,htmlItalicBoldUnderline,htmlItalicUnderlineBold,htmlLink,htmlLeadingSpace,htmlBold,htmlBoldUnderline,htmlBoldItalic,htmlBoldUnderlineItalic,htmlUnderline,htmlUnderlineItalic,htmlItalic,htmlStrike,javaScript +" Settings to avoid syntax overload +function! s:SetCurrentSyntax(type) + if a:type == 'coffee' + syntax cluster coffeeJS contains=@htmlJavaScript -" Block conditionals. -syntax match svelteConditional "#if" contained containedin=jsBlock,javascriptBlock -syntax match svelteConditional "/if" contained containedin=jsBlock,javascriptBlock -syntax match svelteConditional ":else if" contained containedin=jsBlock,javascriptBlock -syntax match svelteConditional ":else" contained containedin=jsBlock,javascriptBlock + " Avoid overload of `javascript.vim` + let b:current_syntax = 'svelte' + else + unlet! b:current_syntax + endif +endfunction +"}}} -" Block keywords. -syntax match svelteKeyword "#await" contained containedin=jsBlock,javascriptBlock -syntax match svelteKeyword "/await" contained containedin=jsBlock,javascriptBlock -syntax match svelteKeyword ":catch" contained containedin=jsBlock,javascriptBlock -syntax match svelteKeyword ":then" contained containedin=jsBlock,javascriptBlock +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" +" Load main syntax {{{ +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Load syntax/html.vim to syntax group, which loads full JavaScript and CSS +" syntax. It defines group htmlJavaScript and htmlCss. +call s:LoadSyntax('@HTMLSyntax', 'html') -" Inline keywords. -syntax match svelteKeyword "@html" contained containedin=jsBlock,javascriptBlock -syntax match svelteKeyword "@debug" contained containedin=jsBlock,javascriptBlock +" Load svelte-html syntax +syntax include syntax/svelte-html.vim -" Repeat functions. -syntax match svelteRepeat "#each" contained containedin=jsBlock,javascriptBlock -syntax match svelteRepeat "/each" contained containedin=jsBlock,javascriptBlock +" Avoid overload +if !hlexists('cssTagName') + call s:LoadSyntax('@htmlCss', 'css') +endif -highlight def link svelteConditional Conditional -highlight def link svelteKeyword Keyword -highlight def link svelteRepeat Repeat +" Avoid overload +if !hlexists('javaScriptComment') + call s:LoadSyntax('@htmlJavaScript', 'javascript') +endif +"}}} -" Preprocessed languages that aren't supported out of the box by Svelte require -" additional syntax files to be pulled in and can slow Vim down a bit. For that -" reason, preprocessed languages must be enabled manually. Note that some may -" require additional plugins that contain the actual syntax definitions. +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" " -" Heavily cribbed from https://github.com/posva/vim-vue and largely completed by -" @davidroeca (thank you!). - -" A syntax should be registered if there's a valid syntax definition known to -" Vim and it is enabled for the Svelte plugin. -function! s:enabled(language) - " Check whether a syntax file for {language} exists - let s:syntax_name = get(a:language, 'as', a:language.name) - if empty(globpath(&runtimepath, 'syntax/' . s:syntax_name . '.vim')) - return 0 - endif +" Load pre-processors syntax {{{ +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" If pug is enabled, load vim-pug syntax +if s:use_pug + call s:LoadFullSyntax('@PugSyntax', 'pug') +endif + +" If less is enabled, load less syntax +if s:use_less + call s:LoadSyntax('@LessSyntax', 'less') + runtime! after/syntax/less.vim +endif - " If g:svelte_preprocessors is set, check for it there, otherwise return 0. - if exists('g:svelte_preprocessors') && type(g:svelte_preprocessors) == v:t_list - return index(g:svelte_preprocessors, a:language.name) != -1 +" If sass is enabled, load sass syntax +if s:use_sass + call s:LoadSyntax('@SassSyntax', 'sass') + runtime! after/syntax/sass.vim +endif + +" If CoffeeScript is enabled, load the syntax. Keep name consistent with +" vim-coffee-script/after/html.vim +if s:use_coffee + call s:LoadFullSyntax('@htmlCoffeeScript', 'coffee') +endif + +" If TypeScript is enabled, load the syntax. +if s:use_typescript + call s:LoadFullSyntax('@TypeScript', 'typescript') +endif +"}}} + +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" +" Syntax highlight {{{ +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" All start with html/javascript/css for emmet-vim in-file type detection +" Normal tag template +syntax region htmlSvelteTemplate fold + \ start=+<[-:a-zA-Z0-9]\+[^>]*>$+ + \ end=+^</[-:a-zA-Z0-9]\+>+ + \ keepend contains=@HTMLSyntax +" Start tag across multiple lines or Empty tag across multiple lines +syntax region htmlSvelteTemplate fold + \ start=+<[-:a-zA-Z0-9]\+[^>]*$+ + \ end=+^\(<\/[-:a-zA-Z0-9]\+>\)\|^\([^<]*\/>\)+ + \ keepend contains=@HTMLSyntax +" Tag in one line +syntax match htmlSvelteTemplate fold + \ +<[-:a-zA-Z0-9]\+[^>]*>.*</[-:a-zA-Z0-9]\+>+ + \ contains=@HTMLSyntax +" Empty tag in one line +syntax match htmlSvelteTemplate fold + \ +<[-:a-zA-Z0-9]\+[^>]*/>+ + \ contains=@HTMLSyntax +" @html,@debug tag in one line +syntax match htmlSvelteTemplate fold + \ +{@\(html\|debug\)[^}]*}+ + \ contains=@HTMLSyntax +" Control blocks like {#if ...}, {#each ...} +syntax region htmlSvelteTemplate fold + \ start=+{#[-a-zA-Z0-9]\+[^}]*}+ + \ end=+^{/[-a-zA-Z0-9]\+}+ + \ keepend contains=@HTMLSyntax + +syntax region javascriptSvelteScript fold + \ start=+<script[^>]*>+ + \ end=+</script>+ + \ keepend + \ contains=@htmlJavaScript,jsImport,jsExport,svelteTag,svelteKeyword + +syntax region cssSvelteStyle fold + \ start=+<style[^>]*>+ + \ end=+</style>+ + \ keepend contains=@htmlCss,svelteTag + +" Preprocessors syntax +syntax region pugSvelteTemplate fold + \ start=+<template[^>]*lang="pug"[^>]*>+ + \ end=+</template>+ + \ keepend contains=@PugSyntax,svelteTag + +syntax region coffeeSvelteScript fold + \ start=+<script[^>]*lang="coffee"[^>]*>+ + \ end=+</script>+ + \ keepend contains=@htmlCoffeeScript,jsImport,jsExport,svelteTag + +syntax region typescriptSvelteScript fold + \ start=+<script[^>]*lang="\(ts\|typescript\)"[^>]*>+ + \ end=+</script>+ + \ keepend contains=@TypeScript,svelteTag + +syntax region cssLessSvelteStyle fold + \ start=+<style[^>]*lang="less"[^>]*>+ + \ end=+</style>+ + \ keepend contains=@LessSyntax,svelteTag +syntax region cssSassSvelteStyle fold + \ start=+<style[^>]*lang="sass"[^>]*>+ + \ end=+</style>+ + \ keepend contains=@SassSyntax,svelteTag +syntax region cssScssSvelteStyle fold + \ start=+<style[^>]*lang="scss"[^>]*>+ + \ end=+</style>+ + \ keepend contains=@SassSyntax,svelteTag + +syntax region svelteTag + \ start=+^<[^/]+ end=+>+ skip=+></+ + \ contained contains=htmlTagN,htmlString,htmlArg fold +syntax region svelteTag + \ start=+^</+ end=+>+ + \ contained contains=htmlTagN,htmlString,htmlArg +syntax keyword svelteKeyword $ contained + +highlight default link svelteTag htmlTag +highlight default link svelteKeyword Keyword +highlight default link cssUnitDecorators2 Number +highlight default link cssKeyFrameProp2 Constant +"}}} + +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" +" Syntax patch {{{ +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Patch 7.4.1142 +if has("patch-7.4-1142") + if has("win32") + syn iskeyword @,48-57,_,128-167,224-235,$ else - return 0 + syn iskeyword @,48-57,_,192-255,$ endif -endfunction +endif -" Default tag definitions. -let s:languages = [ - \ { 'name': 'less', 'tag': 'style' }, - \ { 'name': 'scss', 'tag': 'style' }, - \ { 'name': 'sass', 'tag': 'style' }, - \ { 'name': 'stylus', 'tag': 'style' }, - \ { 'name': 'typescript', 'tag': 'script' }, - \ ] - -" Add global tag definitions to our defaults. -if exists('g:svelte_preprocessor_tags') && type(g:svelte_preprocessor_tags) == v:t_list - let s:languages += g:svelte_preprocessor_tags +" Style +" Redefine (less|sass)Definition to highlight <style> correctly and +" enable emmet-vim css type. +if s:use_less + silent! syntax clear lessDefinition + syntax region cssLessDefinition matchgroup=cssBraces + \ contains=@LessSyntax,cssLessDefinition + \ contained containedin=cssLessSvelteStyle + \ start="{" end="}" +endif +if s:use_sass + silent! syntax clear sassDefinition + syntax region cssSassDefinition matchgroup=cssBraces + \ contains=@SassSyntax,cssSassDefinition + \ contained containedin=cssScssSvelteStyle,cssSassSvelteStyle + \ start="{" end="}" endif -for s:language in s:languages - let s:attr = '\(lang\|type\)=\("\|''\)[^\2]*' . s:language.name . '[^\2]*\2' - let s:start = '<' . s:language.tag . '\>\_[^>]*' . s:attr . '\_[^>]*>' +" Avoid css syntax interference +silent! syntax clear cssUnitDecorators +" Have to use a different name +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 - if s:enabled(s:language) - execute 'syntax include @' . s:language.name . ' syntax/' . get(s:language, 'as', s:language.name) . '.vim' - unlet! b:current_syntax +silent! syntax clear cssKeyFrameProp +syn match cssKeyFrameProp2 /\d*%\|from\|to/ + \ contained nextgroup=cssDefinition + \ containedin=cssAttrRegion,sassCssAttribute,lessCssAttribute - execute 'syntax region svelte_' . s:language.name - \ 'keepend' - \ 'start=/' . s:start . '/' - \ 'end="</' . s:language.tag . '>"me=s-1' - \ 'contains=@' . s:language.name . ',svelteSurroundingTag' - \ 'fold' - endif -endfor +" HTML +" Clear htmlHead that may cause highlighting out of bounds +silent! syntax clear htmlHead -syntax region svelteSurroundingTag contained start=+<\(script\|style\|template\)+ end=+>+ fold contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent +" JavaScript +" Number with minus +syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>' + \ containedin=@javascriptSvelteScript display -" Cybernetically enhanced web apps. -let b:current_syntax = "svelte" +" html5 data-* +syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@HTMLSyntax +"}}} -" Sync from start because of the wacky nesting. -syntax sync fromstart +let b:current_syntax = 'svelte' +" vim: fdm=marker |