❇️ Add Svelte support

[EstebanBorai]

Is blocked by LSP integration (No issue available yet)

Language Name

Svelte

Tree-Sitter Grammar

https://github.com/Himujjal/tree-sitter-svelte

I will work on this

Yes

Additional Info (optional)

No response

[austincondiff]

This should probably eventually be moved into a Svelte extension. Because extensions are not quite ready, this can go into core for the time being.

[mattpilott]

Is there an update on this? I'd really like to use codeedit for real and kinda need svelte support at the very least, happy to test any implementation and send feedback!

[EstebanBorai]

Is there an update on this? I'd really like to use codeedit for real and kinda need svelte support at the very least, happy to test any implementation and send feedback!

Hey @mattpilott! I gave this a shot a while ago and had a compile time issue due to duplicated symbols in C header files between Tree Sitter Svelte and Tree Sitter HTML.

Here are some details: #60

Here is the issue I reported back in the day: Himujjal/tree-sitter-svelte#43

[mattpilott]

@austincondiff how far off is something like this svelte support? Again be great to be able to use codeedit day to day and provide real feedback!

[EstebanBorai]

I think we could have a fork on tree-sitter-svelte perhaps? Or stick for Svelte for both? HTML and Svelte?

[matthijseikelenboom]

I'd leave this for now. Things like Svelte and Vue and React are more frameworks/libraries than languages. As such they rely way more on LSP etc. So we might want to fix that first

[EstebanBorai]

I suggest we mark this issue in a way other users know it will be introduced after LSP. That way we focus attention on the actual priorities.

What do you think?

[matthijseikelenboom]

Yup, I agree. I'm reworking some of the labels and project boards, so I'll take this one with it

[mattpilott]

Great thanks @matthijseikelenboom

[rohankewal]

I do have the files .scm files for the Svelte LSP:

Tags.scm:

;; Match the primary elements of a Svelte file
((script_element) @script
(style_element) @Style
(template_element) @template)

;; Match attributes in Svelte
((attribute (identifier) @attribute.name)
(attribute (quoted_attribute_value) @attribute.value)
(attribute (unquoted_attribute_value) @attribute.value))

;; Match Svelte directives (e.g., bind:, on:, class:, etc.)
((attribute (identifier) @directive.name)
(attribute (directive_name) @directive.prefix))

;; Match text content inside elements
((text) @text)

;; Match mustache syntax for bindings and expressions
((mustache_content) @expression)
((mustache_tag (mustache_content) @expression.binding))

Highlights.scm:

;; Highlight the script, style, and template sections
((script_element) @namespace.javascript)
((style_element) @namespace.css)
((template_element) @namespace.html)

;; Highlight attributes and values
((attribute_name) @attribute.name)
((attribute (quoted_attribute_value) @string)
(attribute (unquoted_attribute_value) @string))

;; Highlight Svelte directives
((attribute (directive_name) @keyword.directive))

;; Highlight curly braces for mustache syntax
((mustache_content) @punctuation.bracket)
((mustache_content (identifier) @variable))

;; Highlight text inside HTML elements
((text) @text)

;; Highlight JavaScript expressions inside <script> tags
((script_element (raw_text) @code.javascript))

;; Highlight CSS inside <style> tags
((style_element (raw_text) @code.css))

;; Highlight special Svelte elements
((svelte_element_opening_tag (tag_name) @function.macro))
((svelte_element_closing_tag (tag_name) @function.macro))

;; Highlight event handlers
((attribute_name (directive_name "on:") @function))
((attribute_name (directive_name "bind:") @variable.binding))

Locals.scm:

;; Definitions within <script> tags
((script_element (lexical_declaration (variable_declarator (identifier) @definition.local)))
(script_element (function_declaration (identifier) @definition.local))
(script_element (class_declaration (identifier) @definition.class)))

;; Local usage within template expressions
((mustache_content (identifier) @usage.local))

;; Locals defined in each block context
((each_block (variable_declarator (identifier) @definition.local)))

;; Locals in reactive assignments
((reactive_declaration (variable_declarator (identifier) @definition.local)))

;; Bindings and props in Svelte attributes
((attribute (directive_name "bind:") @definition.binding))
((attribute (directive_name "let:") @definition.local))

;; Locals passed to slot props
((slot (attribute (directive_name "let:*") @definition.local)))

;; Svelte-specific control flow elements
((if_block (identifier) @usage.local))
((else_block (identifier) @usage.local))
((each_block (identifier) @usage.local))