Skip to content

feat: add Svelte language support (tree-sitter + svelte-language-server) #171

@jafreck

Description

@jafreck

Summary

Add Svelte support via tree-sitter + Svelte Language Server, leveraging existing TypeScript infrastructure.

Tooling

Component Tool Notes
Tree-sitter grammar tree-sitter-svelte Community maintained
LSP server svelte-language-server Official Svelte team, active
SCIP indexer None N/A

What to implement

Phase 1: Script block extraction

  • Add tree-sitter-svelte as an npm dependency
  • Create src/indexer/extractors/svelte.ts:
    • Parse the Svelte component structure to locate <script> and <script context="module"> blocks
    • Delegate <script> content to the existing TypeScript/JavaScript extractor for symbol and call-ref extraction
    • Extract export let propName as prop/interface symbols
    • Extract $: reactive declarations as computed symbols
    • Extract import statements from <script> as file imports
  • Register svelte in SourceIndexStage EXTRACTORS map and ParserPool LANG_PACKAGES
  • Add svelteserver to src/indexer/lsp/registry.ts: { command: 'svelteserver', args: ['--stdio'] }
  • Add file extension .svelte to walker
  • Add test fixtures in tests/fixtures/svelte/
  • Add extractor tests

Phase 2: Template component references (follow-up)

  • Extract <ComponentName /> usage in the template markup as call refs
  • Extract on:event handler bindings as refs
  • Extract bind:prop and slot references

Language notes

  • Svelte components are single files with <script>, markup, and <style> sections
  • <script context="module"> runs once per module (not per instance) — different scoping
  • export let in <script> declares component props
  • $: reactive statements re-run when dependencies change — these should be tracked
  • Svelte 5 introduces $state(), $derived(), $effect() runes — new patterns for the extractor
  • The Svelte language server (svelteserver) is an npm package: npm install -g svelte-language-server

Context

Svelte is a top-5 web framework with growing adoption. Like Vue, Svelte components contain TypeScript/JavaScript logic that the existing TS extractor handles. The main value-add is SFC structure recognition and component reference tracking.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions