Repository navigation
❇️ Add Svelte support #59
Description
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
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
austincondiff commentedon Sep 25, 2023
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 commentedon Feb 2, 2024
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!
LeoBorai commentedon Feb 3, 2024
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 commentedon Feb 16, 2024
@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!
LeoBorai commentedon Feb 18, 2024
I think we could have a fork on tree-sitter-svelte perhaps? Or stick for Svelte for both? HTML and Svelte?
matthijseikelenboom commentedon Feb 19, 2024
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
LeoBorai commentedon Feb 19, 2024
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 commentedon Feb 19, 2024
Yup, I agree. I'm reworking some of the labels and project boards, so I'll take this one with it
mattpilott commentedon Feb 19, 2024
Great thanks @matthijseikelenboom
rohankewal commentedon Dec 7, 2024
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))