leafoftree / svelte-mode

Emacs major mode for Svelte.

svelte-mode

Emacs major mode for .svelte files. It's based on mhtml-mode. It requires (>= emacs-major-version 26).

Installation

• MELPA

  M-x package-install RET svelte-mode RET

• Manually

  git clone https://github.com/leafOfTree/svelte-mode --depth 1

  ; ~/.emacs
  (add-to-list 'load-path "/path/to/svelte-mode")
  (require 'svelte-mode)

  For Spacemacs, put them inside dotspacemacs/user-config.

  ; ~/.spacemacs
  (defun dotspacemacs/user-config ()
        
      (add-to-list 'load-path "/path/to/svelte-mode")
      (require 'svelte-mode)

Svelte-mode should be auto enabled for .svelte files if everything goes well. Please stay up to date. Feel free to open an issue or a pull request.

How it works

This major mode includes JavaScript/CSS as submode in html-mode.

Supports

• Svelte directives and blocks.
• emmet-mode HTML/CSS detection.
• pug-mode in <template lang="pug">...</template>.
• typescript-mode in <script lang="ts">...</script>
• coffee-mode in <script lang="coffee">...</script>.
• sass-mode in <style lang="sass">...</style>.

These modes need to be installed first.

Customize

M-x customize-set-variable RET <variable-name> RET

Or customize variable programatically, like

(customize-set-variable 'svelte-basic-offset 2)

See detail by M-x describe-variable RET <variable-name> RET.

name	description	default
svelte-basic-offset	Specifies the basic indentation level.	sgml-basic-offset
svelte-tag-relative-indent	Whether <script> and <style> bodies indent to the tag.	t
svelte-display-submode-name	Whether to display submode name in the status line.	nil

Configuration hacks

Closing tags for components with "reserved" names

SGML mode, which svelte-mode is derived from, automatically closes your current tag for you with the C-c C-e shortcut (sgml-close-tag). This however does not work for components that share their name with unclosed html tags, like for example the Link component from svelte-routing. SGML mode by default checks whether tags are supposed to be closed or not by comparing tag names with lists of element names case-insensitively, so <Link> is equivalent to <link>. The following configuration snippet makes the comparison of tag names by SGML mode case-sensitive when svelte-mode is the current active major-mode in the buffer. Just add it to your config file and you're good to go.

(defun svelte-mode-sgml-empty-tag-p-advice (old-function tag-name)
  "Advice function intended to wrap around `sgml-empty-tag-p

Makes case significant when checking whether tags need to be
closed or not, to not confuse elements with Svelte components."
  (if (eq major-mode 'svelte-mode)
      (assoc-string tag-name sgml-empty-tags)
    (funcall old-function tag-name)))

(defun svelte-mode-sgml-unclosed-tag-p-advice (old-function tag-name)
  "Advice function intended to wrap around `sgml-unclosed-tag-p

Makes case significant when checking whether tags need to be
closed or not, to not confuse elements with Svelte components."
  (if (eq major-mode 'svelte-mode)
      (assoc-string tag-name sgml-unclosed-tags)
    (funcall old-function tag-name)))

(advice-add 'sgml-empty-tag-p :around 'svelte-mode-sgml-empty-tag-p-advice)
(advice-add 'sgml-unclosed-tag-p :around 'svelte-mode-sgml-unclosed-tag-p-advice)

svelte-mode's Issues

Eglot doesn't understand svelte-mode

Depending on the current cursor position, eglot assumes that it is in either svelte-mode, javascript-mode or css-mode

Would there be a possibility, that svelte mode would report to eglot always as svelte mode? So it doesn't try to run the wrong server on the file.

Support script lang="ts"

There is no syntax highlighting (maybe other features missing too) inside a <script lang="ts"> block.

TypeScript support

As I see currently typescript support is missing.
Are you planned to add it?
What about PRs?

Invalid imenu structure

The following code produces invalid imenu structure.

<section>
    <h1>
        <span class="welcome">
        </span>
    </h1>

    <Counter />
</section>

For more information see joaotavora/breadcrumb#36.

Doesn't understand JS formatting in on:click handler

If you have some extensive syntax inside a svelte on:click() function, svelte-mode formats it like this:

                        <span on:click={() =>
                            upBox("vector", {
                            a: "0.2",
                            b: "-0.3",
                            c: "0",
                            x: "0",
                            y: "0",
                            z: "0",
                            show: true,
                            })}>
                        </span>

It would be nice to indent this object properly.

Enable autocompletion in svelte files in spacemacs

Is there a way to enable auto-completion in svelte files kind of like in vue files where auto-completion works for js, html and css.

I have auto-complete layer initialized in the .spacemacs file.

Change indentation offset

Is there a variable to customize so I can change the indentation offset?
By default I just indented the code and it gave me this:

<script>
  let name = '';
  let nameRegex = /[a-zA-Z]{2,20}/;

  function verify() {
      return name.match(nameRegex);
  }
...

The first indent level is 2 (which is what I want), but the second level (in the function) is 4.
How can I change this?

Doesn't Understand Sass Indented Syntax

Using Sass <style lang="sass">... requires the use of indented syntax like this:

.center
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)

but Emacs keeps forcing the indentation to be like

.center
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)

The code should not assume it's running on spacemacs

I'm using svelte-mode with doom-emacs. After a recent upgrade I'm encountering an issue cause by

svelte-mode/svelte-mode.el

Line 732 in f9fda07

(add-hook 'svelte-mode-local-vars-hook #'svelte--setup-company-for-spacemacs)

(I don't have company completely set up).

The code should not assume it's running in a specific distribution in emacs. It can be used in a vanilla emacs as well.

How to install it with Spacemacs?

I'm new to Emacs and I use Spacemacs configuration. Could you please provide me with some hints how to install svelte-mode with Spacemacs. Thanks!