Svelte-Hop.nvim

NOTE: Svelte-Hop is highly experimental and currently in alpha. Expect breaking changes.

Svelte-Hop is a quality of life plugin for Svelte programming in neovim. Jump between Svelte route files with keyboard shortcuts, create the files if they don't exist, and display it all in your statusline.

Main features

• Jump between route files. Use the default keymaps or create your own.
• Create route files if they do not exist.
• Route file templates provide boilerplate. Use the defaults or create your own.
• Statusline displays show which route files are present in Svelte route file directories.

Table of contents

• Install
• Config
• Statusline
• Icons
• Highlights
• Templates
• Keymaps

Install

With packer.nvim

use({"weskeiser/svelte-hop.nvim"
  config = function()
    require("svelte-hop").setup({
      [[ your config goes here ]]
    })
  end,
})

With lazy.nvim

{
  dir = svelte_hop,
  dependencies = { "nvim-lua/plenary.nvim" },
  config = function()
    require("svelte-hop").setup({
      [[ your config goes here ]]
    })
  end,
},

Config

{
  enabled = true,
  routefiles = {
    dir = "src/routes", -- Path snippet to match for SvelteKit routes dir
    create_if_missing = true, -- Create route file if it does not exist when hopping
    templates = {
      enabled = true,
      dir = nil,
      templates = {
        ["+page.svelte"] = { 2, 3 },
        ["+page.ts"] = { 1, 20 },
        ["+page.server.ts"] = { 1, 27 },

        ["+layout.svelte"] = { 2, 3 },
        ["+layout.ts"] = { 1, 20 },
        ["+layout.server.ts"] = { 1, 27 },

        ["+server.ts"] = { 1, 17 },
        ["+error.ts"] = { 1, 20 },
      },
    },
  },
  statusline = {
    enabled = false,
    icons = {
      file = "└┘",
      file_none = "└┘",
      start = "",
      ending = "",
      separator = "  ",
    },
  },
  keymaps = {
    ["+page.svelte"] = "<leader>1",
    ["+page.ts"] = "<leader>2",
    ["+page.server.ts"] = "<leader>3",

    ["+server.ts"] = "<leader>4",
    ["+error.ts"] = "<leader>5",

    ["+layout.svelte"] = "<leader>7",
    ["+layout.ts"] = "<leader>8",
    ["+layout.server.ts"] = "<leader>9",
  }
}

Statusline

Display the status of route files present in Svelte route directories.

To use the display you must set config.statusline.enabled to true. Now you can use SvopStatus() or vim.b.svopstatus anywhere in your statusline, winbar, or tabline.

Example

To have a display at the end of the statusline, we could add this to our nvim config:

vim.opt.statusline:append("%{%v:lua.SvopStatus()%}")

Icons

Style your statusline with custom icons.

Highlights

Most of the highlights are set programmatically and based on the first four Svop highlights (Svop[1-4]).

The background color for Svop[1-4] defaults to your Statusline background color.

The highlights with None, Current or Creation appended are set programmatically. The algorithm for each highlight is described in the Default table.

Set highlights

Every highlight can be overridden, but it is recommended to only change the first four (Svop[1-4]) and SvopSep It is best to let the algorithm handle the rest to ensure correct highlighting.

Set a highlight with vim.api.nvim_set_hl to override the default.

Example

vim.api.nvim_set_hl(0, "Svop1", { fg = "#aaaaaa" })
vim.api.nvim_set_hl(0, "Svop2", { fg = "#bbbbbb" })
vim.api.nvim_set_hl(0, "Svop3", { fg = "#cccccc" })
vim.api.nvim_set_hl(0, "Svop4", { fg = "#dddddd" })
vim.api.nvim_set_hl(0, "SvopSep", { fg = "#eeeeee" })

Default highlights

[...] = pseudocode

...hl = Svop[1-4]

Templates

"route file" = {row, col}

Templates can be enabled with statusline.templates.enabled = true.

Disable specific templates by excluding them from statusline.templates.templates in your config.

Cursor position

Set the cursor position after file entry by specifying it for each template in statusline.templates.templates.

Default template files

Cursor position is represented by a bar |.

// templates/+page.svelte
<script>
  |
</script>

// templates/+layout.svelte
<script>
  |
</script>

<slot/>

// templates/+page.ts

export function load(|) {
  return {};
}

// templates/+layout.ts

export function load(|) {
  return {};
}

// templates/+page.server.ts

export async function load(|) {
  return {};
}

// templates/+layout.server.ts

export async function load(|) {
  return {};
}

// templates/+server.ts

export function |GET() {
  return new Response();
}

// templates/+error.ts

Create custom templates

1. Create a template directory anywhere accessible to vim. For example in ~/.config/nvim/svop/templates.
2. Populate the directory with template files. See Default templates for examples.
3. Set statusline.templates.dir = [[path to template directory]]

Keymaps

Keymaps can be overridden in keymaps with a list of [filename] = mapping mappings. See Config for examples.

Buffer local keymaps (recommended)

Set them in your config. This way they are local to the buffer and will not interfere with mappings in other non-route files you have open.

require("svelte-hop").setup({
  keymaps = {
    ["+page.svelte"] = "<leader>1",
  }
})

Global keymaps

Set them globally like a savage.

vim.keymap.set("n", "<leader>1", function() require("svelte-hop").hop("+page.svelte") end)

Default keymaps

Contribute

Feel free to add an issue or submit a PR if you have any suggestions or if you experience any bugs.