svelte-proxy-lsp Svelte Themes

Svelte Proxy Lsp

Download

svelte-proxy-lsp

A unified Language Server Protocol (LSP) proxy that intelligently combines the Svelte Language Server and TypeScript Language Server, providing comprehensive IDE support for Svelte applications with no client-side configuration complexity.

Installation

Global Installation

npm install -g svelte-proxy-lsp

Local Installation

npm install --save-dev svelte-proxy-lsp

Using npx (no installation required)

npx svelte-proxy-lsp --stdio

Architecture

This proxy acts as a transparent middleware between LSP clients and the actual language servers:

┌─────────────────────────────────────────────────────────┐
│                    LSP Client                           │
│              (VS Code, Neovim, etc.)                   │
└─────────────────────┬───────────────────────────────────┘
                      │ LSP Protocol (Single Connection)
┌─────────────────────▼───────────────────────────────────┐
│                Svelte Proxy LSP                         │
│                                                         │
│  ┌─────────────────────────────────────────────────┐    │
│  │              ProxyServer                        │    │
│  │                                                 │    │
│  │  ┌──────────────────┬─────────────────────────┐ │    │
│  │  │  Request Router  │   Document Manager      │ │    │
│  │  │  - Position      │   - Parse .svelte       │ │    │
│  │  │    Analysis      │   - Track Changes       │ │    │
│  │  │  - Service       │   - Sync State          │ │    │
│  │  │    Selection     │                         │ │    │
│  │  └──────────────────┴─────────────────────────┘ │    │
│  └─────────────────────────────────────────────────┘    │
│           │                                │             │
│           ▼                                ▼             │
│  ┌────────────────┐                ┌─────────────────┐   │
│  │ Svelte         │                │ TypeScript      │   │
│  │ Language       │                │ Language        │   │
│  │ Server         │                │ Server          │   │
│  │ (Process)      │                │ (Process)       │   │
│  └────────────────┘                └─────────────────┘   │
└─────────────────────────────────────────────────────────┘

How It Works

  1. Single LSP Interface: Clients connect to one proxy server instead of managing multiple LSP connections
  2. Intelligent Routing: Analyzes cursor position in .svelte files to determine which server(s) to query
  3. Dual Server Management: Spawns and manages both svelte-language-server and typescript-language-server as child processes
  4. TypeScript Svelte Plugin Integration: Automatically configures the TypeScript server with the Svelte plugin for enhanced .svelte file support
  5. Response Merging: Combines results from both servers, deduplicates, and returns unified responses
  6. Document Sync: Keeps both servers synchronized with document changes

Position-Based Routing

The proxy intelligently routes requests based on where your cursor is:

  • Script blocks (<script> tags): Routes to TypeScript Language Server
  • Template/markup: Routes to Svelte Language Server
  • Style blocks (<style> tags): Routes to Svelte Language Server
  • Document-wide operations: Queries both servers and merges results

Features

Unified Language Support

  • TypeScript/JavaScript: Full IntelliSense, type checking, refactoring in <script> blocks with Svelte-aware TypeScript plugin
  • Svelte Template: Component completions, directive support, template syntax
  • CSS/SCSS: Styling support in <style> blocks
  • Cross-Service: Seamless experience switching between template and script
  • Enhanced Svelte Support: TypeScript server understands Svelte component exports, props, and cross-file references

LSP Capabilities

  • ✅ Completions: Auto-complete with context-aware routing
  • ✅ Hover Information: Type info and documentation
  • ✅ Go to Definition: Navigate to symbols across files
  • ✅ Find References: Find all symbol usages
  • ✅ Signature Help: Function parameter assistance
  • ✅ Document Symbols: Outline view with all symbols
  • ✅ Code Actions: Quick fixes and refactorings
  • ✅ Rename: Rename symbols across files
  • ✅ Formatting: Code formatting support
  • ✅ Diagnostics: Real-time error and warning reporting

Usage

Command Line

# Using npx (no installation required)
npx svelte-proxy-lsp --stdio

# After global installation
svelte-proxy-lsp --stdio

# With socket
svelte-proxy-lsp --socket=5000

# With verbose logging for debugging
svelte-proxy-lsp --stdio --verbose

# With trace logging (most detailed)
svelte-proxy-lsp --stdio --trace

# Quiet mode (errors only)
svelte-proxy-lsp --stdio --quiet

# Custom log level
svelte-proxy-lsp --stdio --log-level=debug

# Show help
svelte-proxy-lsp --help

Logging Options

The proxy supports configurable logging levels:

  • --verbose - Debug level logging (shows server startup, requests, etc.)
  • --trace - Most detailed logging (includes all requests and responses)
  • --quiet - Only shows errors
  • --log-level=<level> - Set specific level: error, warn, info, debug, trace

Note: In --stdio mode (default), logging is automatically set to error level to avoid interfering with LSP communication. Use --verbose or --trace to override this for debugging.

Editor Configuration

VS Code

Add to settings.json:

{
  "svelte.enable": false,
  "typescript.suggest.enabled": false,
  "eslint.enable": false
}

Then configure the proxy in your language client settings or use with a VS Code extension that points to:

node /path/to/svelte-proxy-lsp/dist/server.js --stdio

Neovim (nvim-lspconfig)

local lspconfig = require('lspconfig')

-- Custom LSP configuration for Svelte Proxy
lspconfig.svelteproxy = {
  default_config = {
    cmd = { 'node', '/path/to/svelte-proxy-lsp/dist/server.js', '--stdio' },
    filetypes = { 'svelte', 'typescript', 'javascript' },
    root_dir = lspconfig.util.root_pattern('package.json', 'svelte.config.js', '.git'),
    settings = {},
  },
}

-- Use the proxy
lspconfig.svelteproxy.setup{}

Emacs (lsp-mode)

(lsp-register-client
 (make-lsp-client
  :new-connection (lsp-stdio-connection '("node" "/path/to/svelte-proxy-lsp/dist/server.js" "--stdio"))
  :major-modes '(svelte-mode typescript-mode js-mode)
  :server-id 'svelte-proxy-lsp))

Command Line Testing

# Start the proxy server
node dist/server.js --stdio

# Test with a simple request (requires LSP client)
# The server will automatically spawn svelte-language-server and typescript-language-server

Development

Project Structure

src/
├── server.ts              # Main entry point
├── proxy/
│   ├── ProxyServer.ts     # Core proxy logic and request routing
│   └── LSPServerProcess.ts # Child process management for LSP servers
└── utils/
    └── documentParser.ts  # Svelte document parsing and region detection

Key Components

ProxyServer

  • Manages the main LSP connection with clients
  • Routes requests to appropriate child servers
  • Merges and deduplicates responses
  • Handles document lifecycle events

LSPServerProcess

  • Spawns and manages child LSP server processes
  • Provides JSON-RPC communication interface
  • Handles server lifecycle (start, stop, error recovery)

Document Parser

  • Parses .svelte files to identify script/template/style regions
  • Provides position-based routing decisions
  • Tracks document changes and versions

Development Commands

pnpm build          # Compile TypeScript
pnpm dev            # Watch mode development  
pnpm clean          # Clean build artifacts
pnpm start          # Start the proxy server

Testing

The project includes comprehensive unit and integration tests:

# Run all tests (47 passing, 1 skipped)
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run specific test suites
pnpm test -- --testPathPattern="diagnostics"
pnpm test -- --testPathPattern="symbol-insertion"
pnpm test -- --testPathPattern="workspace-symbols"

Test Coverage

  • Unit Tests: 26 tests covering document parsing and process management
  • Integration Tests: 21 tests validating real LSP server interactions
  • Test Features: TypeScript type processing, cross-file imports, diagnostics, completions, symbols

For manual testing:

# Start the proxy directly
npx tsx src/server.ts --stdio

# Or build and run
pnpm build && pnpm start --stdio

Configuration

The proxy automatically detects and configures the underlying language servers. No additional configuration needed - it inherits the capabilities of both servers.

Server Detection

The proxy automatically finds language servers in this order:

  1. svelte-language-server via require.resolve()
  2. typescript-language-server via PATH lookup

Dependencies

  • Runtime: Node.js 16+
  • Language Servers:
    • svelte-language-server@^0.16.14
    • typescript-language-server@^4.3.3
    • typescript-svelte-plugin@^0.3.40 (automatically configured)
  • LSP Protocol Implementation:
    • vscode-languageserver@^10.0.0 - LSP protocol types and utilities
    • vscode-jsonrpc@^9.0.0-next.8 - Direct JSON-RPC communication
    • vscode-languageserver-protocol@^3.17.6 - Protocol definitions

Benefits

  1. Simplified Setup: One LSP connection instead of configuring multiple servers
  2. Unified Experience: Seamless language support across Svelte file regions
  3. No Dependencies: Uses existing, battle-tested language servers
  4. Smart Routing: Context-aware request routing for optimal performance
  5. Full Feature Support: All LSP capabilities from both underlying servers

License

MIT

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes