HTML element and Svelte markup keywords not 'jumpable'

[benwoodward]

1. What vim version are you using?

NVIM v0.5.0
Build type: Release
LuaJIT 2.1.0-beta3
Compilation: clang -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1 -DNVIM_TS_HAS_SET_MATCH_LIMIT -O2 -DNDEBUG -Wall -Wextra -pedantic -Wno-unused-parameter -Wstrict-prototypes -std=gnu99 -Wshadow -Wconversion -Wmissing-prototypes -Wimplicit-fallthrough -Wvla -fstack-protector-strong -fno-common -fdiagnostics-color=auto -DINCLUDE_GENERATED_DECLARATIONS -D_GNU_SOURCE -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -DMIN_LOG_LEVEL=3 -I/tmp/neovim-20210702-14987-rep9di/neovim-0.5.0/build/config -I/tmp/neovim-20210702-14987-rep9di/neovim-0.5.0/src -I/usr/local/include -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include -I/usr/local/opt/gettext/include -I/tmp/neovim-20210702-14987-rep9di/neovim-0.5.0/build/src/nvim/auto -I/tmp/neovim-20210702-14987-rep9di/neovim-0.5.0/build/include

2. Steps to reproduce

    use { 'https://github.com/Himujjal/tree-sitter-svelte' }

    use { 'https://github.com/andymass/vim-matchup' }

tree-sitter config:

require('nvim-treesitter.configs').setup {
  ensure_installed = "maintained",
  highlight = {
    enable = true,
    use_languagetree = true,
  },
  indent = {
    enable = true,
  },
  matchup = {
    enable = true,
  },
  rainbow = {
    enable = true,
    extended_mode = true,
  },
  refactor = {
    highlight_current_scope = {enable = false},
    highlight_definitions   = {enable = true},
    smart_rename = {
      enable = true,
      keymaps = {
        smart_rename         = 'grr',
      },
    },
    navigation = {
      enable = true,
      keymaps = {
        goto_definition      = 'gnd',
        list_definitions     = 'gnD',
        list_definitions_toc = 'gO',
        goto_next_usage      = '<a-*>',
        goto_previous_usage  = '<a-#>',
      },
    },
  },
}

3. Expected behavior I expected the % key to jump between HTML elements and Svelte keywords like {#await} .. {/await}

4. Observed behavior In .svelte files, vim-matchup works fine for {, however, it doesn't seem to work for html elements, e.g. <div> or Svelte markup syntax, e.g. {#if} ... {/if}

[andymass]

Hi- can you give an syntactically correct example svelte file which has the elements you mention?

[benwoodward]

The code makes no sense, but it's syntactically correct:

<script>
  // deps
  import { useQuery, useMutation } from '@sveltestack/svelte-query';
  import { onMount, onDestroy } from 'svelte';

  // stores
  import { currentUser } from '$lib/stores/user.js';

  // components
  import Modal from '$lib/components/util/modals/Modal.svelte';

  export let passRate;

  const graphQLClient = getContext('graphql-client');

  let thing;
  let displayModal = false;

  $: displayModal = $currentUser ? false : true;

  function aFunction(value) {
    passRate = 100;
  }

  onMount(() => {
  });

  onDestroy(() => {
  });
</script>

{#await promise}
  <div
    class="relative max-w-full h-full leading-6 text-gray-700 bg-white rounded shadow-xs"
    class:click={buttonFocused}
    bind:this={thing}
  >
    <button
      class="inline-flex absolute z-10 justify-center items-center p-2 m-0 w-full h-full font-sans text-base leading-normal text-center text-blue-600 outline-none no-underline align-top bg-none rounded border border-transparent border-solid shadow-none opacity-0 appearance-none cursor-pointer select-none box-border whitespace-no-wrap focus:border-transparent focus:text-gray-800 hover:bg-transparent hover:border-gray-500 hover:opacity-100 hover:text-blue-600 hover:underline inset-0"
      on:touchstart={() => (buttonFocused = true)}
      on:touchend={() => (buttonFocused = false)}
      on:mousedown={() => (buttonFocused = true)}
      on:mouseup={() => (buttonFocused = false)}
      on:mouseleave={() => (buttonFocused = false)}
      on:click={aFunction}
    />
    <div class="px-2 pt-2 pb-8 leading-6 text-gray-700 bg-transparent">
      <div class="leading-6 text-gray-700">
        <slot />
      </div>
    </div>
    <div class="absolute bottom-1 left-0 py-0 px-2 w-full leading-6 text-gray-700">
      <nav class="justify-between items-center leading-6 text-gray-700">
        <div class="flex-none justify-start items-center leading-6 text-gray-700">
          {#if passRate !== null && passRate !== undefined}
            <div class="flex flex-none justify-center items-center leading-6 text-gray-700" in:fade>
              <div class="flex flex-wrap justify-start items-center -mb-2 leading-6 text-gray-700">
                <span
                  class="inline-flex justify-center items-center px-3 mr-0 mb-2 h-8 text-xs leading-normal text-blue-700 bg-blue-100 bg-indigo-100 rounded whitespace-no-wrap"
                >
                  <div class="text-xl leading-7 text-blue-700 whitespace-no-wrap">&#129504;</div>
                </span>
                <span
                  class="inline-flex justify-center items-center px-3 mr-0 mb-2 h-8 text-xs leading-normal text-gray-700 bg-yellow-500 rounded whitespace-no-wrap"
                  class:pr80-100={passRate >= 80}
                  class:pr60-80={passRate >= 60 && passRate <= 79}
                  class:pr40-60={passRate >= 40 && passRate <= 59}
                  class:pr20-40={passRate >= 20 && passRate <= 39}
                  class:pr0-20={passRate >= 0 && passRate <= 19}
                >
                  {passRate}%
                </span>
              </div>
            </div>
          {/if}
        </div>
      </nav>
    </div>
  </div>
{/await}

<Modal
  bind:active={displayModal}
  showHeader={false}
  showFooter={true}
>
  <section
    class="block pb-12 leading-6 text-gray-700"
  >
    {#each $things as thing}
      <Thing
        id={thing.id}
        content={thing.content}
        isFirst={thing.isFirst}
        isLast={thing.isLast}
        isRevealed={thing.isRevealed}
        isLastVisible={thing.isLastVisible}
        on:reveal-next={revealNext}
      />
    {/each}
  </section>
</Modal>

<style lang="scss">
  .click {
    transform: scale(var(--scale-amount-x), var(--scale-amount-y));
    transition: scale 0s;
  }
  .overlay-button {
    transition: all 0.05s ease-in-out 0s;
  }

  .card:hover .overlay-button {
    opacity: 1;
    cursor: pointer;
  }

  .button {
    &:focus {
      border-color: transparent;
    }

    &:focus:not(:active),
    .is-focused:not(:active) {
      box-shadow: none !important;
    }

    h3 {
      color: #fff;
      font-size: 1.2em;
      font-weight: 500;
      letter-spacing: 0.05em;
      margin: 0;
      border-bottom: 2px solid white;
      padding-bottom: 4px;
    }
  }
  .is-ghost {
    &:hover {
      background: transparent;
    }
  }
  :global(.svlt-grid-shadow) {
    background: transparent !important;
  }

  :global(.svlt-grid-resizer) {
    z-index: 10 !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 0;

    &:after {
      right: 5px !important;
      bottom: 5.5px !important;
      width: 8px !important;
      height: 8px !important;
      border-right: 2px solid white !important;
      border-bottom: 2px solid white !important;
      transition: all 0.05s ease-in-out 0s;
    }
    &:hover {
      opacity: 1;

      &:after {
        border-right: 2px solid #00d1b2 !important;
        border-bottom: 2px solid #00d1b2 !important;
      }
    }
  }
</style>

[andymass]

Which part of {tag} should get highlighted, the whole {thing}? The #await promise? only the word await?

[benwoodward]

What makes sense to me is for the { in {#await promise} to jump to }. The #await keyword should jump to the / or a in {/await}. As for anything between await and } I think it makes sense to be able to jump from there to the / or a in {/await} unless of course the character under the cursor is a jump character, for example (.