Repository: evanleck/vim-svelte
Branch: main
Commit: f6df955ad865
Files: 11
Total size: 23.3 KB

Directory structure:
gitextract_itkqry4z/

├── .github/
│   └── workflows/
│       └── main.yml
├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── ftdetect/
│   └── svelte.vim
├── ftplugin/
│   └── svelte.vim
├── indent/
│   └── svelte.vim
├── syntax/
│   └── svelte.vim
└── test/
    ├── indent.vader
    └── vimrc

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/main.yml
================================================
name: vim-svelte
on: [push, pull_request]

jobs:
  test:
    strategy:
      fail-fast: false
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        neovim: [true, false]

    runs-on: ${{ matrix.os }}
    steps:
      - name: Set up vim
        uses: rhysd/action-setup-vim@v1
        with:
          version: stable
          neovim: ${{ matrix.neovim }}

      - name: Checkout vim-svelte
        uses: actions/checkout@v2

      - name: Checkout html5
        uses: actions/checkout@v2
        with:
          repository: othree/html5.vim
          path: html5.vim

      - name: Checkout vader
        uses: actions/checkout@v2
        with:
          repository: junegunn/vader.vim
          path: vader.vim

      - name: Checkout vim-javascript
        uses: actions/checkout@v2
        with:
          repository: pangloss/vim-javascript
          path: vim-javascript

      - name: Test
        run: vim --nofork --clean -u test/vimrc -c 'Vader! test/*.vader'


================================================
FILE: .gitignore
================================================
html5.vim
vader.vim
vim-javascript


================================================
FILE: LICENSE
================================================
BSD 3-Clause License

Copyright (c) 2022, Evan Lecklider
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


================================================
FILE: Makefile
================================================
test: html5.vim vader.vim vim-javascript
	vim --nofork --clean -u test/vimrc -c 'Vader! test/*.vader'
.PHONY: test

vader.vim:
	git clone git@github.com:junegunn/vader.vim.git

vim-javascript:
	git clone git@github.com:pangloss/vim-javascript.git vim-javascript

html5.vim:
	git clone git@github.com:othree/html5.vim.git html5.vim

clean:
	rm -rf html5.vim vader.vim vim-javascript
.PHONY: clean


================================================
FILE: README.md
================================================
# vim-svelte

[![vim-svelte](https://github.com/evanleck/vim-svelte/actions/workflows/main.yml/badge.svg)](https://github.com/evanleck/vim-svelte/actions/workflows/main.yml)

Vim syntax highlighting and indentation for [Svelte 3][svelte] components.

This is mostly just HTML syntax highlighting with some keywords added and all
expressions inside of `{` and `}` highlighted as JavaScript.

Highlighting includes:

- HTML attributes with a colon like `on:click` or `transition:fade` highlighted
    as `Keyword`.
- `#if`, `/if`, `:else`, and `:else if` highlighted as `Conditional`.
- `#await`, `/await`, `:catch`, `:then`, and `@html` highlighted as `Keyword`.
- `#each` and `/each` highlighted as `Repeat`.


## Dependencies

1. [pangloss/vim-javascript][vim-javascript] for JavaScript syntax highlighting.
2. [othree/html5.vim][html5-vim] for HTML indent.

Both of those dependencies are included in [sheerun/vim-polyglot][vim-polyglot]
so if you're already using that then you should be set.


## Installation

The simplest way to install vim-svelte is via a package manager like
[Pathogen][pathogen], [Vundle][vundle], [NeoBundle][neobundle],
[Plug][vim-plug], or [minpac][minpac].

For example, using minpac:

```vimscript
call minpac#add('othree/html5.vim')
call minpac#add('pangloss/vim-javascript')
call minpac#add('evanleck/vim-svelte')
```

Or using Plug:

```vimscript
Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte', {'branch': 'main'}
```

vim-svelte works just fine with Vim 8's native package loading as well.


## Options

To disable indentation within `<script>` and `<style>` tags, set one of these
variables in your `vimrc`:

```vim
let g:svelte_indent_script = 0
let g:svelte_indent_style = 0
```


## Preprocessed languages

Syntax highlighting for additional languages is supported, assuming you have a
corresponding syntax definition installed. For example, newer versions of Vim
ship with a TypeScript syntax definition, so you wouldn't need anything
additional installed for that to work. Supported languages include:

- `less`
- `scss`
- `sass`
- `stylus`
- `typescript`

Since Svelte doesn't support these out of the box (see
[svelte-preprocess][preprocess] for how to set up some common language
preprocessors with e.g. Rollup), they're all disabled by default so the first
thing you'll need to do is enable your languages via the
`g:svelte_preprocessors` variable:

```vim
let g:svelte_preprocessors = ['typescript']
```

Then, use your language in your Svelte components like this:

```html
<script lang='typescript'>
</script>

<!-- Or... -->
<style type='text/scss'>
</style>
```

### Customizing the list of preprocessed languages

In addition to enabling the built-in preprocessors, you can add your own
preprocessors that this plugin will detect using the
`g:svelte_preprocessor_tags` variable. It should be a list of dictionaries with
at least a `name` and a `tag` attribute. You can optionally include an `as`
attribute which maps to the syntax you'd like to use within the tag.

Here's an example:

```vim
let g:svelte_preprocessor_tags = [
  \ { 'name': 'postcss', 'tag': 'style', 'as': 'scss' }
  \ ]
" You still need to enable these preprocessors as well.
let g:svelte_preprocessors = ['postcss']
```

This would highlight `<style type="postcss">` contents as `scss`, useful if you
use something like [postcss-nested][nested].

You can also create shorthand names if, for example, writing out
`lang='typescript'` takes too long:

```vim
let g:svelte_preprocessor_tags = [
  \ { 'name': 'ts', 'tag': 'script', 'as': 'typescript' }
  \ ]
let g:svelte_preprocessors = ['ts']
```

<table>
  <thead>
    <tr>
      <th>Field</th>
      <th>Usage</th>
      <th>Required</th>
      <th>Default value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>name</code></td>
      <td>
        The value within the attribute <code>lang</code> or <code>type</code> on
        the <code>tag</code> as well as the value to include in
        <code>g:svelte_preprocessors</code>.
      </td>
      <td>Yes</td>
      <td>None</td>
    </tr>
    <tr>
      <td><code>tag</code></td>
      <td>The HTML tag to target e.g. <code>script</code> or <code>style</code>.</td>
      <td>Yes</td>
      <td>None</td>
    </tr>
    <tr>
      <td><code>as</code></td>
      <td>The syntax name to use for highlighting.</td>
      <td>No</td>
      <td>The <code>name</code> attribute.</td>
    </tr>
  </tbody>
</table>

Note, that enabling and loading a lot of different syntax definitions can
considerably degrade Vim's performance. Consider yourself warned.


## Integrations

- [ALE][ale]: vim-svelte should work out of the box with `eslint` and a few
  other linters/fixers. PRs welcome if the one you want is missing.
- [matchit.vim][matchit]: vim-svelte should work out of the box and allow moving
  between HTML tags as well as flow control like `#if/:else//if`.
- [Syntastic][syntastic]: vim-syntastic will work with javascript and html checkers, for example:
  ```vim
  let g:syntastic_svelte_checkers = ['javascript/eslint', 'html/htmlhint']
  ```


## Tests

Indentation tests are provided and any contributions would be much appreciated.
They can be run with `make test` which will clone [vader.vim][vader] into the
current working directory and run the test suite.


## Alternatives

1. [burner/vim-svelte][burner]
2. [leafOfTree/vim-svelte-plugin][leafOfTree]


[ale]: https://github.com/dense-analysis/ale
[burner]: https://github.com/burner/vim-svelte
[html5-vim]: https://github.com/othree/html5.vim
[leafOfTree]: https://github.com/leafOfTree/vim-svelte-plugin
[matchit]: https://github.com/adelarsq/vim-matchit
[minpac]: https://github.com/k-takata/minpac
[neobundle]: https://github.com/Shougo/neobundle.vim
[nested]: https://github.com/postcss/postcss-nested
[pathogen]: https://github.com/tpope/vim-pathogen
[preprocess]: https://github.com/sveltejs/svelte-preprocess
[svelte]: https://svelte.dev
[syntastic]: https://github.com/vim-syntastic/syntastic
[vader]: https://github.com/junegunn/vader.vim
[vim-javascript]: https://github.com/pangloss/vim-javascript
[vim-plug]: https://github.com/junegunn/vim-plug
[vim-polyglot]: https://github.com/sheerun/vim-polyglot
[vundle]: https://github.com/VundleVim/Vundle.vim


================================================
FILE: ftdetect/svelte.vim
================================================
au BufRead,BufNewFile *.svelte setfiletype svelte


================================================
FILE: ftplugin/svelte.vim
================================================
" Vim filetype plugin
" Language:   Svelte 3 (HTML/JavaScript)
" Author:     Evan Lecklider <evan@lecklider.com>
" Maintainer: Evan Lecklide <evan@lecklider.com>
" URL:        https://github.com/evanleck/vim-svelte
if (exists('b:did_ftplugin'))
  finish
endif
let b:did_ftplugin = 1

" Matchit support
if exists('loaded_matchit') && !exists('b:match_words')
  let b:match_ignorecase = 0

  " In order:
  "
  " 1. Svelte control flow keywords.
  " 2. Parens.
  " 3-5. HTML tags pulled from Vim itself.
  "
  " https://github.com/vim/vim/blob/5259275347667a90fb88d8ea74331f88ad68edfc/runtime/ftplugin/html.vim#L29-L35
  let b:match_words =
        \ '#\%(if\|await\|each\)\>:\:\%(else\|catch\|then\)\>:\/\%(if\|await\|each\)\>,' .
        \ '{:},' .
        \ '<\@<=[ou]l\>[^>]*\%(>\|$\):<\@<=li\>:<\@<=/[ou]l>,' .
        \ '<\@<=dl\>[^>]*\%(>\|$\):<\@<=d[td]\>:<\@<=/dl>,' .
        \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
endif

" ALE fixing and linting.
if exists('g:loaded_ale')
  if !exists('b:ale_fixers')
    let b:ale_fixers = ['eslint', 'prettier', 'prettier_standard']
  endif

  if !exists('b:ale_linter_aliases')
    let b:ale_linter_aliases = ['css', 'javascript']
  endif

  if !exists('b:ale_linters')
    let b:ale_linters = ['stylelint', 'eslint']
  endif
endif


================================================
FILE: indent/svelte.vim
================================================
" Vim indent file
" Language:   Svelte 3 (HTML/JavaScript)
" Author:     Evan Lecklider <evan@lecklider.com>
" Maintainer: Evan Lecklide <evan@lecklider.com>
" URL:        https://github.com/evanleck/vim-svelte

if exists("b:did_indent")
  finish
endif

if !exists('g:svelte_indent_script')
  let g:svelte_indent_script = 1
endif

if !exists('g:svelte_indent_style')
  let g:svelte_indent_style = 1
endif

" Try to mirror Svelte's indent settings so the HTML indenting scripts match.
if g:svelte_indent_script
  let b:html_indent_script1 = "inc"
else
  let b:html_indent_script1 = "zero"
endif

if g:svelte_indent_style
  let b:html_indent_style1 = "inc"
else
  let b:html_indent_style1 = "zero"
endif

runtime! indent/html.vim
let s:html_indent = &l:indentexpr
unlet! b:did_indent

let b:did_indent = 1

setlocal indentexpr=GetSvelteIndent()
setlocal indentkeys=o,O,*<Return>,<>>,{,},0),0],!^F,;,=:else,=:then,=:catch,=/if,=/each,=/await

" Only define the function once.
if exists('*GetSvelteIndent')
  finish
endif

function! GetSvelteIndent()
  let current_line_number = v:lnum

  if current_line_number == 0
    return 0
  endif

  let current_line = getline(current_line_number)

  " Opening script and style tags should be all the way outdented.
  if current_line =~ '^\s*</\?\(script\|style\)'
    return 0
  endif

  let previous_line_number = prevnonblank(current_line_number - 1)
  let previous_line = getline(previous_line_number)
  let previous_line_indent = indent(previous_line_number)

  " The inside of scripts an styles should be indented unless disabled.
  if previous_line =~ '^\s*<script'
    if g:svelte_indent_script
      return previous_line_indent + shiftwidth()
    else
      return previous_line_indent
    endif
  endif

  if previous_line =~ '^\s*<style'
    if g:svelte_indent_style
      return previous_line_indent + shiftwidth()
    else
      return previous_line_indent
    endif
  endif

  execute "let indent = " . s:html_indent

  " For some reason, the HTML CSS indentation keeps indenting the next line over
  " and over after each style declaration.
  if searchpair('<style>', '', '</style>', 'bW') && previous_line =~ ';$' && current_line !~ '}'
    return previous_line_indent
  endif

  " "/await" or ":catch" or ":then"
  if current_line =~ '^\s*{\s*\/await' || current_line =~ '^\s*{\s*:\(catch\|then\)'
    let await_start = searchpair('{\s*#await\>', '', '{\s*\/await\>', 'bW')

    if await_start
      return indent(await_start)
    endif
  endif

  " "/each"
  if current_line =~ '^\s*{\s*\/each'
    let each_start = searchpair('{\s*#each\>', '', '{\s*\/each\>', 'bW')

    if each_start
      return indent(each_start)
    endif
  endif

  " "/if"
  if current_line =~ '^\s*{\s*\/if'
    let if_start = searchpair('{\s*#if\>', '', '{\s*\/if\>', 'bW')

    if if_start
      return indent(if_start)
    endif
  endif

  " ":else" is tricky because it can match an opening "#each" _or_ an opening
  " "#if", so we try to be smart and look for the closest of the two.
  if current_line =~ '^\s*{\s*:else'
    let if_start = searchpair('{\s*#if\>', '', '{\s*\/if\>', 'bW')

    " If it's an "else if" then we know to look for an "#if"
    if current_line =~ '^\s*{\s*:else if' && if_start
      return indent(if_start)
    else
      " The greater line number will be closer to the cursor position because
      " we're searching backward.
      return indent(max([if_start, searchpair('{\s*#each\>', '', '{\s*\/each\>', 'bW')]))
    endif
  endif

  " "#if" or "#each"
  if previous_line =~ '^\s*{\s*#\(if\|each\|await\)'
    return previous_line_indent + shiftwidth()
  endif

  " ":else" or ":then"
  if previous_line =~ '^\s*{\s*:\(else\|catch\|then\)'
    return previous_line_indent + shiftwidth()
  endif

  " Custom element juggling for abnormal self-closing tags (<Widget />),
  " capitalized component tags (<Widget></Widget>), and custom svelte tags
  " (<svelte:head></svelte:head>).
  if synID(previous_line_number, match(previous_line, '\S') + 1, 0) == hlID('htmlTag')
        \ && synID(current_line_number, match(current_line, '\S') + 1, 0) != hlID('htmlEndTag')
    let indents_match = indent == previous_line_indent
    let previous_closes = previous_line =~ '/>$'

    if indents_match && !previous_closes && previous_line =~ '<\(\u\|\l\+:\l\+\)'
      return previous_line_indent + shiftwidth()
    elseif !indents_match && previous_closes
      return previous_line_indent
    endif
  endif

  return indent
endfunction


================================================
FILE: syntax/svelte.vim
================================================
" 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")
  finish
endif

" Read HTML to begin with.
runtime! syntax/html.vim
unlet! b:current_syntax

" Expand HTML tag names to include mixed case, periods, and colons.
syntax match htmlTagName contained "\<[a-zA-Z:\.]*\>"

" 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

" The "slot" attribute has special meaning.
syntax keyword svelteKeyword slot contained containedin=htmlTag

" 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=javaScriptEmbed,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

" 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

" 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

" Inline keywords.
syntax match svelteKeyword "@html" contained containedin=jsBlock,javascriptBlock
syntax match svelteKeyword "@debug" contained containedin=jsBlock,javascriptBlock

" Repeat functions.
syntax match svelteRepeat "#each" contained containedin=jsBlock,javascriptBlock
syntax match svelteRepeat "/each" contained containedin=jsBlock,javascriptBlock

highlight def link svelteConditional Conditional
highlight def link svelteKeyword Keyword
highlight def link svelteRepeat Repeat

" 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

  " 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
  else
    return 0
  endif
endfunction

" 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
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 . '\_[^>]*>'

  if s:enabled(s:language)
    execute 'syntax include @' . s:language.name . ' syntax/' . get(s:language, 'as', s:language.name) . '.vim'
    unlet! b:current_syntax

    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

syntax region svelteSurroundingTag contained start=+<\(script\|style\|template\)+ end=+>+ fold contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent

" Cybernetically enhanced web apps.
let b:current_syntax = "svelte"

" Sync from start because of the wacky nesting.
syntax sync fromstart


================================================
FILE: test/indent.vader
================================================
Given svelte (an open tag right after a close tag):
  {#if something}
    {/if}

Do (indent the whole buffer):
  gg=G

Expect svelte (matching indentation of the opening and closing tags):
  {#if something}
  {/if}


Given svelte (a svelte: tag):
  <svelte:head>
    <title>Foo</title>
    </svelte:head>

Do (indent the whole buffer):
  gg=G

Expect svelte (an indented svelte: tag):
  <svelte:head>
    <title>Foo</title>
  </svelte:head>


Given svelte (a sequence of self-closing tags):
  <Foo/>
    <Foo {bar}/>
      <Foo bar={bar}/>
    <Foo bar="{bar}"/>

Do (indent the whole buffer):
  gg=G

Expect svelte (an indented sequence of self-closing tags):
  <Foo/>
  <Foo {bar}/>
  <Foo bar={bar}/>
  <Foo bar="{bar}"/>


Given svelte (a mix of self-closing and normal custom tags):
  <Foo>
  <Bar/>
  </Foo>
  <Foo>
      <Bar />
  </Foo>
  <Foo>
  <Bar></Bar>
  </Foo>

Do (indent the whole buffer):
  gg=G

Expect svelte (an indented mix of self-closing and normal custom tags):
  <Foo>
    <Bar/>
  </Foo>
  <Foo>
    <Bar />
  </Foo>
  <Foo>
    <Bar></Bar>
  </Foo>


Given svelte (a combination of normal and capitalize tags):
  <Foo>
    <Bar>
      <Baz />
      </Bar>
    </Foo>
  <Foo>
  <div>
      <Baz />
      </div>
    </Foo>

Do (indent the whole buffer):
  gg=G

Expect svelte (indented block):
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
  <Foo>
    <div>
      <Baz />
    </div>
  </Foo>


Given svelte (namespaced tags):
  <Widget.Foo>
  <div>
      <Baz />
      </div>
    </Widget.Foo>

Do (indent the whole buffer):
  gg=G

Expect svelte (indented block):
  <Widget.Foo>
    <div>
      <Baz />
    </div>
  </Widget.Foo>


Given svelte (outdented style tag):
  <style>
  .foo {
        bar: 1;
    }
  </style>

Do (indent the whole buffer):
  gg=G

Expect svelte (indented style tag):
  <style>
    .foo {
      bar: 1;
    }
  </style>


Given svelte (uneven script tag #1):
  <script>
  import { foo } from "./stores.js"

    function bar() {
        console.log('bar');
      }
  </script>

Do (indent the whole buffer):
  gg=G

Expect svelte (indented script tag):
  <script>
    import { foo } from "./stores.js"

    function bar() {
      console.log('bar');
    }
  </script>


Given svelte (uneven script tag #2):
  <script>
    let name;
      let text
      let yes;

      $: document.title = name;
  </script>

Do (indent the whole buffer):
  gg=G

Expect svelte (indented script tag):
  <script>
    let name;
    let text
    let yes;

    $: document.title = name;
  </script>


Execute (turn off script indenting):
  let g:svelte_indent_script = 0

Given svelte (an indented script tag):
  <script>
    import { foo } from "./stores.js"
  </script>

Do (indent the whole buffer):
  gg=G

Expect svelte (an outdented script tag):
  <script>
  import { foo } from "./stores.js"
  </script>

Execute (reset script indenting):
  unlet g:svelte_indent_script


Execute (turn off style indenting):
  let g:svelte_indent_style = 0

Given svelte (an indented style tag):
  <style>
    .foo {
      bar: 1;
    }
  </style>

Do (indent the whole buffer):
  gg=G

Expect svelte (an outdented style tag):
  <style>
  .foo {
    bar: 1;
  }
  </style>

Execute (reset style indenting):
  unlet g:svelte_indent_style


================================================
FILE: test/vimrc
================================================
set nocompatible

filetype off

set runtimepath^=html5.vim
set runtimepath^=vader.vim
set runtimepath^=vim-javascript
set runtimepath^=.

set expandtab
set shiftwidth=2
set softtabstop=2
set tabstop=2

filetype plugin indent on
syntax enable